/* ═══════════════════════════════════════════════════════════════════
   AI OVERVIEW OPTIMIZATION

   Loads on top of product-opt.css and collection-opt.css, which between them
   carry the shared mock chrome: .po-sec, .po-two, .po-copy, .po-num, .po-do,
   .mk, .pox-row, .mk-tag, .mk-note, the .flow workflow, the .co-flow4 problem
   steps, .co-readers and .faq. Only what is new to this page is here, so the
   five deep dives cannot drift apart visually.

   WHAT THIS PAGE DRAWS. One answer box, and a row of source cards underneath it
   that are deliberately five different KINDS of thing. That single mock is the
   argument, so the source card is the component everything else is built from:
   the hero row, each door section, and the small version inside the surfaces
   panels are all the same card at different sizes.

   Accent: the service's own violet (#6C5CE7 in inc/services.php). Each source
   KIND gets its own colour, because the whole point is that they are not
   interchangeable.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --ao:#6C5CE7;
  --ao-soft:rgba(108,92,231,.10);
  --ao-line:rgba(108,92,231,.32);
  --ao-ink:#4B3BC4;
}

.w50{width:50%}.w70{width:70%}.w85{width:85%}

.ao-hero .po-h1 .grad-text{display:inline;margin-top:0}
.ao-hero::before{
  background:
    radial-gradient(820px 420px at 8% -10%,rgba(108,92,231,.26),transparent 62%),
    radial-gradient(640px 400px at 96% 106%,rgba(34,193,220,.14),transparent 60%);
}

/* ══════════ SHARED SMALL PARTS ══════════ */
.ao-lab{
  display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
}
.ao-n{
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;
  color:var(--ao-ink);background:var(--ao-soft);border:1px solid var(--ao-line);border-radius:6px;
  height:20px;min-width:26px;display:grid;place-items:center;flex:none;
}
.ao-spark{display:block;color:var(--ao);flex:none}
.ao-spark svg{width:14px;height:14px;display:block}

/* the link from each door to the deep dive that wins it */
.ao-svc-link{
  display:inline-flex;align-items:center;gap:7px;margin-top:20px;
  font-size:13.5px;font-weight:600;color:var(--ao-ink);
  border-bottom:1px solid var(--ao-line);padding-bottom:2px;
  transition:border-color .18s ease,gap .18s ease;
}
.ao-svc-link:hover{border-bottom-color:var(--ao);gap:10px}
.ao-svc-link .ar{transition:transform .18s ease}

/* ══════════ THE ANSWER BOX ══════════ */
.ao-bar{
  display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
  border-radius:99px;padding:9px 15px;color:var(--ink-3);margin-bottom:12px;
  box-shadow:0 1px 3px rgba(16,20,40,.07);
}
.ao-bar svg{width:13px;height:13px;flex:none}
.ao-bar span{font-size:12px;color:var(--ink-2)}

.ao-box{
  position:relative;background:#fff;border:1px solid var(--ao-line);border-radius:16px;
  padding:15px 16px 16px;
  box-shadow:0 1px 2px rgba(16,20,40,.04),0 18px 44px -26px rgba(75,59,196,.45);
}
.ao-box::before{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;border-radius:16px 16px 0 0;
  background:linear-gradient(90deg,var(--ao),var(--cyan,#22C1DC) 70%,transparent);
}
.ao-box-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.ao-box-head b{font-size:12.5px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.ao-box-head.sm b{font-size:11px}
.ao-box-head.sm .ao-spark svg{width:12px;height:12px}
.ao-ans{font-size:13px;line-height:1.6;color:var(--ink-2);margin:0 0 14px}
.ao-ans b{color:var(--ink);font-weight:600;background:var(--ao-soft);padding:0 4px;border-radius:4px}

/* ══════════ ONE SOURCE CARD ══════════
   The component the whole page is built from. Five kinds, five colours,
   because the argument is that they are not interchangeable. */
.ao-srcs{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.ao-src{
  display:flex;flex-direction:column;gap:4px;min-width:0;
  padding:9px 6px;border-radius:10px;background:#F6F7FB;border:1px solid var(--line-2);
}
.ao-src.mine{background:var(--ao-soft);border-color:var(--ao-line)}
.ao-src-kind{
  display:inline-block;align-self:flex-start;
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;border-radius:5px;padding:2px 6px;
}
.ao-src-kind.k-video{background:rgba(216,48,58,.1);color:#B0242D;border:1px solid rgba(216,48,58,.26)}
.ao-src-kind.k-guide{background:rgba(108,92,231,.12);color:var(--ao-ink);border:1px solid var(--ao-line)}
.ao-src-kind.k-product{background:rgba(14,122,91,.11);color:#0E7A5B;border:1px solid rgba(14,122,91,.3)}
.ao-src-kind.k-collection{background:rgba(34,193,220,.13);color:#0E7490;border:1px solid rgba(34,193,220,.32)}
.ao-src-kind.k-mention{background:rgba(232,178,58,.15);color:#8A6412;border:1px solid rgba(232,178,58,.4)}
.ao-src-kind.k-pin{background:rgba(255,92,138,.12);color:#B0244F;border:1px solid rgba(255,92,138,.34)}
.ao-src-t{font-size:10.5px;line-height:1.35;color:var(--ink);font-weight:500}
.ao-src-d{
  font-size:10px;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ao-src.mine .ao-src-d{color:var(--ao-ink);font-weight:600}

.ao-below{margin-top:13px;padding-top:12px;border-top:1px dashed rgba(255,255,255,.14)}
.ao-below .ao-lab{color:var(--night-ink-2);margin-bottom:8px}
.ao-below u{display:block;height:7px;border-radius:4px;background:rgba(255,255,255,.12);margin-bottom:6px;text-decoration:none}

/* the tags, in words rather than codes */
.ao-field-tag{
  position:absolute;right:calc(100% + 12px);top:0;z-index:5;white-space:nowrap;
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:#fff;
  background:linear-gradient(150deg,#8B7CF0,#5A48C9);
  border-radius:99px;padding:4px 10px;
  box-shadow:0 4px 14px rgba(75,59,196,.4);
}
.ao-field-tag::after{
  content:'';position:absolute;left:100%;top:50%;width:10px;height:1px;background:rgba(139,124,240,.6);
}
.ao-field-tag.t-ans{top:14px}

/* ══════════ HERO STAGE ══════════ */
.ao-stage{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.ao-serp{position:relative;padding-left:34px}
.ao-point{
  padding:14px 16px;border-radius:13px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-left:2px solid var(--ao);
}
.ao-point p{font-size:13px;line-height:1.6;color:var(--night-ink-2);margin:0}
.ao-point p b{color:#fff;font-weight:600}

.ao-index{padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
.ao-index .ao-lab{color:var(--night-ink-2);margin-bottom:10px}
.ao-index-chips{display:flex;flex-wrap:wrap;gap:6px}
.ao-index-chips a{
  display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--night-ink-2);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:99px;padding:4px 11px 4px 5px;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.ao-index-chips a b{
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;color:#9B8CFF;
  background:rgba(108,92,231,.22);border-radius:99px;padding:2px 6px;
}
.ao-index-chips a:hover{background:rgba(108,92,231,.18);border-color:var(--ao-line);color:#fff}

/* ══════════ A WORKED EXAMPLE ON EVERY WORKFLOW STAGE ══════════ */
.flow-stages .fstage{display:flex;flex-direction:column}
.fstage .fs-d{margin-bottom:11px}
.ao-eg{margin-top:auto;padding-top:11px;border-top:1px dashed var(--line-2)}
.ao-eg-lab{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
.ao-eg-row{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.ao-eg-chip,.ao-eg-q,.ao-eg-door,.ao-eg-cov{font-size:10.5px;padding:4px 9px;border-radius:7px;line-height:1.3}
.ao-eg-chip{background:var(--paper-3);border:1px solid var(--line-2);color:var(--ink-2)}
.ao-eg-more{font-size:10.5px;color:var(--ink-3)}
.ao-eg-q{font-family:'IBM Plex Mono',monospace;background:var(--paper-3);border:1px solid var(--line-2);color:var(--ink)}
.ao-eg-door{background:var(--ao-soft);border:1px solid var(--ao-line);color:var(--ao-ink);font-weight:600}
.ao-eg-cov{background:rgba(14,122,91,.1);border:1px solid rgba(14,122,91,.3);color:#0E7A5B;font-weight:600}
.ao-eg-tier{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.05em;
  padding:3px 7px;border-radius:99px;background:#fff;border:1px solid var(--line-2);color:var(--ink-3);
}
.ao-eg-tier.shut{background:#FFF1F4;border-color:#FFD2DE;color:#C2453F}

/* ══════════ THE THREE GOOGLE SURFACES ══════════ */
.ao-surf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.ao-surf{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:17px 16px 15px;overflow:hidden;
  box-shadow:0 1px 2px rgba(16,20,40,.04),0 16px 34px -22px rgba(16,20,40,.34);
}
.ao-surf::before{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--ao),rgba(34,193,220,.9) 62%,rgba(108,92,231,0));
}
.ao-surf-head{display:flex;align-items:center;gap:9px;margin-bottom:13px}
.ao-surf-n{
  width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;color:#fff;
  background:linear-gradient(150deg,var(--ao),#22C1DC);
}
.ao-surf-head h3{font-size:14.5px;font-weight:600;letter-spacing:-.015em;color:var(--ink);margin:0}
.ao-surf-flag{margin-left:auto;flex:none;font-size:10px;letter-spacing:.05em;color:#0E7A5B;white-space:nowrap}
.ao-surf-flag::after{content:' \2713'}
.ao-surf-note{
  font-size:11.5px;line-height:1.5;color:var(--ink-3);
  margin:13px 0 0;padding-top:12px;border-top:1px dashed var(--line-2);
}
.ao-surf .ao-surf-note{margin-top:auto}

.ao-mini-box{padding:11px 12px;border-radius:11px;background:#F6F7FB;border:1px solid var(--line-2)}
.ao-mini-ans{font-size:11px;line-height:1.5;color:var(--ink-2);margin:0 0 9px}
.ao-mini-srcs{display:flex;flex-wrap:wrap;gap:5px}
.ao-mini-srcs span{
  font-family:'IBM Plex Mono',monospace;font-size:10px;padding:3px 8px;border-radius:99px;
  background:#fff;border:1px solid var(--line-2);color:var(--ink-3);
}
.ao-mini-srcs span.mine{background:var(--ao-soft);border-color:var(--ao-line);color:var(--ao-ink);font-weight:600}

.ao-thread{display:flex;flex-direction:column;gap:7px}
.ao-th-q,.ao-th-a{font-size:11px;line-height:1.45;border-radius:10px;padding:8px 10px}
.ao-th-q{
  align-self:flex-end;max-width:88%;background:var(--paper-3);border:1px solid var(--line-2);
  color:var(--ink-2);font-family:'IBM Plex Mono',monospace;font-size:10px;
}
.ao-th-a{align-self:flex-start;max-width:94%;background:var(--ao-soft);border:1px solid var(--ao-line);color:var(--ink-2)}
.ao-th-a b{color:var(--ao-ink);font-weight:600}

.ao-filters .ao-lab{margin-bottom:8px}
.ao-chip-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:11px}
.ao-chip-row span{
  font-size:10px;padding:4px 10px;border-radius:99px;
  background:#fff;border:1px solid var(--line-2);color:var(--ink-3);
}
.ao-chip-row span.on{background:var(--ao-soft);border-color:var(--ao-line);color:var(--ao-ink);font-weight:600}
.ao-filter-res{display:flex;flex-direction:column;gap:6px}
.ao-fr{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:9px}
.ao-fr b{font-size:11px;font-weight:600}
.ao-fr span{font-size:10px}
.ao-fr.in{background:rgba(14,122,91,.09);border:1px solid rgba(14,122,91,.28)}
.ao-fr.in b{color:#0E7A5B}
.ao-fr.in span{color:#0E7A5B;opacity:.8}
.ao-fr.out{background:#FFF1F4;border:1px solid #FFD2DE}
.ao-fr.out b{color:#C2453F}
.ao-fr.out span{color:#C2453F;opacity:.8}

/* ══════════ DEMAND: TWO SOURCED FIGURES ══════════ */
.ao-demand{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:940px;margin:0 auto}
.ao-stat{
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:clamp(20px,2.6vw,28px);box-shadow:var(--shadow-sm);
}
.ao-stat b{
  display:block;font-family:Unbounded,Inter,sans-serif;font-size:clamp(40px,5vw,58px);
  font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--ao-ink);margin-bottom:14px;
}
.ao-stat p{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0 0 12px}
.ao-stat cite{font-style:normal;font-size:12px;color:var(--ink-3);font-family:'IBM Plex Mono',monospace}
.ao-stat cite a{color:var(--ao-ink);text-decoration:underline;text-decoration-color:var(--ao-line);text-underline-offset:3px}
.ao-stat cite a:hover{text-decoration-color:var(--ao)}
.ao-stat-note{grid-column:1 / -1;background:var(--night-2);border-radius:var(--r-lg);padding:clamp(18px,2.4vw,24px)}
.ao-stat-note .ao-lab{color:var(--night-ink-2);margin-bottom:9px}
.ao-stat-note p{font-size:15px;line-height:1.6;color:#fff;margin:0}

/* ══════════ THE PROBLEM ══════════ */
.ao-lib-vis{display:flex;align-items:flex-end;gap:3px;padding:12px 14px;flex-wrap:wrap}
.ao-lib-vis i{width:7px;height:26px;border-radius:2px;background:#D7DCE8;display:block}
.ao-lib-vis span{width:100%;font-size:10.5px;color:var(--ink-3);margin-top:7px}
.ao-pick-vis{display:flex;gap:6px;padding:14px;flex-wrap:wrap}
.ao-pick{
  font-size:10.5px;padding:5px 10px;border-radius:7px;
  background:#EFF1F7;border:1px solid var(--line-2);color:var(--ink-3);
}
.ao-pick.win{background:rgba(216,48,58,.1);border-color:rgba(216,48,58,.3);color:#B0242D;font-weight:600}

/* ══════════ ONE DOOR ══════════ */
.ao-shut-tag{background:#FFF1F4;color:#C2453F;border:1px solid #FFD2DE}
.ao-door-box{background:#fff;border:1px solid var(--ao-line);border-radius:14px;padding:13px 14px}
.ao-door-q{
  margin-left:auto;font-size:10.5px;color:var(--ink-3);
  background:var(--paper-3);border:1px solid var(--line-2);border-radius:99px;padding:3px 9px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:52%;
}
.ao-src.solo{padding:12px 13px;gap:6px}
.ao-src.solo .ao-src-t{font-size:13px;font-weight:600;line-height:1.35}
.ao-src.solo .ao-src-d{font-size:11px;overflow-wrap:normal}
.ao-src.solo.shut{background:#FAFBFE;border:1px dashed var(--line);opacity:.92}
.ao-src-snip{font-size:11.5px;line-height:1.5;color:var(--ink-3);margin:4px 0 0}

/* ══════════ THE CLOSING TABLE ══════════ */
.ao-shift{
  max-width:900px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(18px,2.6vw,28px);box-shadow:var(--shadow-sm);
}
.ao-shift-same{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:13px 15px;border-radius:13px;margin-bottom:22px;
  background:linear-gradient(120deg,rgba(108,92,231,.09),rgba(34,193,220,.07));
  border:1px solid var(--ao-line);
}
.ao-shift-same .ao-lab{color:var(--ao-ink);margin-right:3px}
.ao-shift-same b{
  font-size:12.5px;font-weight:600;color:var(--ink);background:#fff;
  border:1px solid var(--ao-line);border-radius:99px;padding:5px 12px;
}
.ao-shift-head,.ao-shift-row{
  display:grid;grid-template-columns:30px minmax(0,1fr) 66px 18px minmax(0,208px);
  gap:12px;align-items:center;
}
.ao-shift-head{padding-bottom:11px;border-bottom:1px solid var(--line-2)}
.ao-shift-head span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.ao-shift-head .h-c{text-align:center}
.ao-shift-row{
  padding:11px 0;border-bottom:1px solid var(--line-2);color:inherit;
  border-radius:10px;transition:background .18s ease;
}
.ao-shift-row:last-of-type{border-bottom:0}
a.ao-shift-row:hover{background:rgba(108,92,231,.055)}
a.ao-shift-row:hover .ao-shift-what{color:var(--ao-ink)}
.ao-shift-row .ao-n{margin-left:4px}
.ao-shift-what{font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.35;transition:color .18s ease}
.ao-shift-b,.ao-shift-a{text-align:center;font-size:12px;line-height:1.4;border-radius:9px;padding:7px 10px}
.ao-shift-b{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  background:#FFF1F4;border:1px solid #FFD2DE;color:#C2453F;
}
.ao-shift-row.is-open .ao-shift-b{background:rgba(14,122,91,.1);border-color:rgba(14,122,91,.3);color:#0E7A5B}
.ao-shift-a{color:var(--ao-ink);background:var(--ao-soft);border:1px solid var(--ao-line);font-weight:600}
.ao-shift-arrow{text-align:center;color:var(--ao);font-size:14px;line-height:1}
.ao-shift-note{
  font-size:12.5px;line-height:1.6;color:var(--ink-3);
  margin:18px 0 0;padding-top:15px;border-top:1px dashed var(--line);
}

/* ══════════ RESPONSIVE ══════════ */
@media (max-width:1100px){
  .ao-surf-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .ao-surf .ao-surf-note{margin-top:12px}
}
@media (max-width:900px){
  .ao-demand{grid-template-columns:1fr}
  .ao-srcs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ao-srcs .ao-src:nth-child(n+5){display:none}
}
@media (max-width:820px){
  .ao-shift-head{display:none}
  .ao-shift-row{grid-template-columns:30px minmax(0,1fr) 16px minmax(0,1fr);gap:9px 10px;padding:13px 0}
  .ao-shift-what{grid-column:2 / -1}
  .ao-shift-b{grid-column:2;text-align:left}
  .ao-shift-arrow{grid-column:3;font-size:12px}
  .ao-shift-a{grid-column:4;text-align:left}
}
@media (max-width:620px){
  .ao-serp{padding-left:26px}
  .ao-field-tag{position:static;display:inline-block;margin-bottom:7px;font-size:10px;padding:3px 8px}
  .ao-field-tag::after{display:none}
  .ao-srcs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ao-srcs .ao-src:nth-child(n+4){display:none}
  .ao-door-q{display:none}
}
@media (max-width:520px){
  .ao-shift-same{gap:7px;padding:11px 12px}
  .ao-shift-same b{font-size:11.5px;padding:4px 10px}
  .ao-shift-row{grid-template-columns:26px minmax(0,1fr) 14px minmax(0,1fr);gap:8px}
  .ao-shift-what{font-size:12.5px}
  .ao-shift-b,.ao-shift-a{font-size:10.5px;padding:6px 7px}
  .ao-serp{padding-left:0}
}