/* SERPIFAI - The Commercial Cost of Analyzing the Wrong Competitors v1.0.0 */
.csc-article{--csc-panel:color-mix(in srgb,var(--ri-panel) 92%,transparent);--csc-panel-2:color-mix(in srgb,var(--ri-panel-2) 90%,transparent);--csc-line:color-mix(in srgb,var(--ri-cyan) 24%,var(--ri-line));--csc-danger:color-mix(in srgb,var(--ri-gold) 28%,var(--ri-panel));}
.csc-article>section{scroll-margin-top:7rem}
.csc-article h2{max-width:24ch;text-wrap:balance}
.csc-label{margin:0 0:.65rem;color:var(--ri-cyan);font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.csc-direct-answer{padding:clamp(1.35rem,3vw,2.25rem);border:1px solid var(--csc-line);border-radius:1.2rem;background:linear-gradient(145deg,color-mix(in srgb,var(--ri-panel) 88%,transparent),color-mix(in srgb,var(--ri-bg-deep) 92%,transparent));box-shadow:0 1.2rem 3rem color-mix(in srgb,var(--ri-bg-deep) 62%,transparent)}
.csc-direct-answer>p:not(.csc-label){font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.75}
.csc-hard-stop{border-inline-start:.3rem solid var(--ri-gold);background:var(--csc-danger)}
.csc-central-question{padding:1rem 1.15rem;border:1px solid var(--csc-line);border-radius:.9rem;background:var(--csc-panel-2)}
.csc-chain{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.7rem;margin:1.7rem 0}
.csc-chain>div{min-height:10rem;padding:1rem;border:1px solid var(--csc-line);border-radius:1rem;background:var(--csc-panel);position:relative}
.csc-chain span{display:grid;place-items:center;width:2rem;height:2rem;margin-bottom:.8rem;border-radius:999px;background:color-mix(in srgb,var(--ri-cyan) 18%,var(--ri-panel));color:var(--ri-cyan);font-weight:800}
.csc-chain strong,.csc-chain small{display:block}.csc-chain small{margin-top:.55rem;color:var(--ri-muted);line-height:1.55}
.csc-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.5rem 0}
.csc-card-grid article{padding:1.25rem;border:1px solid var(--csc-line);border-radius:1rem;background:var(--csc-panel)}
.csc-card-grid article h3{margin:.35rem 0 .7rem;font-size:1.05rem}.csc-chip{display:inline-flex;margin:0;padding:.35rem .55rem;border-radius:999px;background:color-mix(in srgb,var(--ri-cyan) 15%,var(--ri-panel));color:var(--ri-cyan);font-size:.72rem;font-weight:800;letter-spacing:.08em}
.csc-card-grid--dependency article{min-height:12rem}
.csc-compare{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.csc-compare>div{padding:1.25rem;border:1px solid var(--csc-line);border-radius:1rem;background:var(--csc-panel)}
.csc-numbered{counter-reset:cscstep;list-style:none;padding:0}.csc-numbered li{counter-increment:cscstep;margin:0 0 .75rem;padding:1rem 1rem 1rem 3.3rem;border:1px solid var(--ri-line);border-radius:.9rem;background:var(--csc-panel);position:relative}.csc-numbered li::before{content:counter(cscstep);position:absolute;left:1rem;top:.9rem;display:grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:999px;background:var(--ri-cyan);color:var(--ri-bg-deep);font-weight:900}
.csc-worked-example{border:1px solid color-mix(in srgb,var(--ri-gold) 34%,var(--ri-line));border-radius:1rem;padding:clamp(1.2rem,3vw,2rem);background:color-mix(in srgb,var(--ri-gold) 6%,var(--ri-panel))}
.csc-tool-section{max-width:none}.csc-tool{padding:clamp(1rem,3vw,1.75rem);border:1px solid var(--csc-line);border-radius:1.15rem;background:var(--csc-panel)}
.csc-tool__modes{display:flex;gap:.55rem;margin-bottom:1rem}.csc-tool button,.csc-tool input,.csc-tool select,.csc-tool textarea{font:inherit;color:var(--ri-text)}.csc-tool__modes button{padding:.65rem .9rem;border:1px solid var(--ri-line);border-radius:.75rem;background:var(--ri-panel-2);cursor:pointer}.csc-tool__modes button[aria-pressed="true"]{border-color:var(--ri-cyan);color:var(--ri-cyan);box-shadow:0 0 0 .15rem color-mix(in srgb,var(--ri-cyan) 15%,transparent)}
.csc-tool form{display:grid;gap:1rem}.csc-tool fieldset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:0;padding:1rem;border:1px solid var(--ri-line);border-radius:.9rem}.csc-tool legend{padding:0 .4rem;color:var(--ri-cyan);font-weight:800}.csc-tool label{display:grid;gap:.4rem;color:var(--ri-text);font-weight:700}.csc-tool label span{color:var(--ri-muted);font-size:.75rem;font-weight:500}.csc-tool input,.csc-tool select,.csc-tool textarea{width:100%;min-height:2.8rem;padding:.7rem .75rem;border:1px solid var(--ri-line);border-radius:.65rem;background:var(--ri-bg-deep);color-scheme:dark}.csc-tool textarea{resize:vertical}.csc-tool input:focus-visible,.csc-tool select:focus-visible,.csc-tool textarea:focus-visible,.csc-tool button:focus-visible,.csc-tool a:focus-visible{outline:.18rem solid var(--ri-cyan);outline-offset:.18rem}.csc-help{grid-column:1/-1;margin:-.55rem 0 0;color:var(--ri-muted);font-size:.86rem}.csc-tool[data-mode="quick"] .csc-advanced{display:none}.csc-tool__actions{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:.85rem}.csc-result{margin-top:1.2rem;padding:1.2rem;border:1px solid var(--csc-line);border-radius:.9rem;background:var(--ri-bg-deep)}.csc-result__outcome{color:var(--ri-cyan);font-size:1.05rem;font-weight:900;letter-spacing:.04em}.csc-result dl{display:grid;grid-template-columns:minmax(9rem,.35fr) 1fr;gap:.55rem 1rem}.csc-result dt{font-weight:800;color:var(--ri-muted)}.csc-result dd{margin:0}.csc-noscript{padding:1rem;border:1px solid var(--ri-gold);border-radius:.9rem;background:var(--csc-danger)}
.csc-workflow{list-style:none;padding:0;counter-reset:workflow}.csc-workflow li{counter-increment:workflow;padding:1rem 1rem 1rem 3.8rem;border-block-end:1px solid var(--ri-line);position:relative}.csc-workflow li::before{content:counter(workflow);position:absolute;left:.5rem;top:.95rem;color:var(--ri-cyan);font-size:1.3rem;font-weight:900}.csc-workflow p{margin:.35rem 0 0;color:var(--ri-muted)}
.csc-assets{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.csc-assets a{display:grid;gap:.45rem;padding:1.2rem;border:1px solid var(--csc-line);border-radius:1rem;background:var(--csc-panel);text-decoration:none}.csc-assets a:hover{border-color:var(--ri-cyan);transform:translateY(-.1rem)}.csc-assets span{color:var(--ri-cyan);font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.csc-assets small{color:var(--ri-muted)}
.csc-sources{display:grid;gap:.6rem;padding-inline-start:1.2rem}.csc-connections{padding-top:1rem;border-top:1px solid var(--ri-line)}
.serpifai-visual-figure[data-serpifai-article-id="commercial-cost-wrong-competitors"]{width:min(1120px,calc(100vw - 96px));max-width:1120px;margin-inline:50%;transform:translateX(-50%);overflow:visible}.serpifai-visual-figure[data-serpifai-article-id="commercial-cost-wrong-competitors"] img{display:block;width:100%;height:auto}.serpifai-visual-figure[data-serpifai-article-id="commercial-cost-wrong-competitors"] figcaption{max-width:72ch;margin:.8rem auto 0;color:var(--ri-muted)}
@media (max-width:980px){.csc-chain{grid-template-columns:repeat(2,minmax(0,1fr))}.csc-chain>div:last-child{grid-column:1/-1}.csc-tool fieldset{grid-template-columns:1fr}.csc-help{grid-column:auto}}
@media (max-width:720px){.csc-card-grid,.csc-compare,.csc-assets{grid-template-columns:1fr}.csc-chain{grid-template-columns:1fr}.csc-chain>div:last-child{grid-column:auto}.csc-result dl{grid-template-columns:1fr}.csc-result dt{margin-top:.5rem}.serpifai-visual-figure[data-serpifai-article-id="commercial-cost-wrong-competitors"]{width:min(1120px,calc(100vw - 48px))}}
@media (prefers-reduced-motion:reduce){.csc-assets a{transform:none;transition:none}}

/* A36 V1.0.0 — Decoration-to-Text Collision Hard Gate
   Permanent rule: visual ornament may never occupy the reader text paint layer. */
.csc-article{isolation:isolate}
.csc-article>*{position:relative;z-index:1}
.csc-article :where(.csc-direct-answer,.csc-central-question,.csc-chain>div,.csc-card-grid>article,.csc-compare>div,.csc-numbered>li,.csc-worked-example,.csc-tool,.csc-tool fieldset,.csc-result,.csc-assets>a,details){isolation:isolate;background-clip:padding-box;min-width:0}
.csc-article :where(.csc-direct-answer,.csc-central-question,.csc-chain>div,.csc-card-grid>article,.csc-compare>div,.csc-numbered>li,.csc-worked-example,.csc-tool,.csc-tool fieldset,.csc-result,.csc-assets>a,details)>:where(h2,h3,h4,p,ul,ol,dl,div,form,fieldset,summary){position:relative;z-index:1}
.csc-article :where(section,article,aside,blockquote,details,fieldset)::before,.csc-article :where(section,article,aside,blockquote,details,fieldset)::after{pointer-events:none;z-index:0}
.csc-article :where(h2,h3,h4,p,li,dd,dt,summary,label,legend,small,strong,a){overflow-wrap:anywhere;word-break:normal}
.csc-numbered li::before,.csc-workflow li::before{z-index:2}
.csc-numbered li>*,.csc-workflow li>*{position:relative;z-index:1}
.csc-tool fieldset{position:relative;isolation:isolate;min-width:0}
.csc-tool legend{position:relative;z-index:3;display:inline-block;max-width:calc(100% - 1rem);margin-inline-start:.2rem;padding:.18rem .55rem;border-radius:.45rem;background:var(--csc-panel);color:var(--ri-cyan);line-height:1.35;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.csc-article details{position:relative;margin:.75rem 0;border:1px solid var(--ri-line);border-radius:.9rem;background:var(--csc-panel);overflow:clip}
.csc-article details>summary{position:relative;z-index:2;min-height:3rem;padding:.85rem 1rem;color:var(--ri-text);background:var(--csc-panel-2);font-weight:800;line-height:1.45;cursor:pointer}
.csc-article details>summary::marker{color:var(--ri-cyan)}
.csc-article details[open]>summary{border-bottom:1px solid var(--ri-line)}
.csc-article details>p{position:relative;z-index:2;margin:0;padding:1rem;background:transparent}
.serpifai-visual-figure[data-serpifai-article-id="commercial-cost-wrong-competitors"]{isolation:isolate;z-index:3;clear:both;background:var(--ri-bg-deep)}
.serpifai-visual-figure[data-serpifai-article-id="commercial-cost-wrong-competitors"] figcaption{position:relative;z-index:2;padding-inline:.25rem}
@media(max-width:720px){.csc-tool legend{max-width:calc(100% - .75rem)}.csc-article details>summary{padding:.8rem .85rem}.csc-article details>p{padding:.9rem .85rem}}

/* A36 V1.0.0 — TEXT-SAFE SURFACE HARD GATE V2
   Permanent rule: no border, separator, gradient, pseudo-element, inset shadow,
   connector, or shared section ornament may occupy the readable glyph area.
   This V2 explicitly fixes real-border/shared-CSS collisions that z-index alone cannot fix. */

/* 1) Article-local section/title decorators: remove inherited ornamental lines entirely. */
.csc-article > section,
.csc-article > aside,
.csc-article > .csc-connections{
  position:relative;
  isolation:isolate;
}
.csc-article > section::before,
.csc-article > section::after,
.csc-article > aside::before,
.csc-article > aside::after,
.csc-article > .csc-connections::before,
.csc-article > .csc-connections::after,
.csc-article > section > :is(h2,h3,h4)::before,
.csc-article > section > :is(h2,h3,h4)::after,
.csc-article > aside > :is(h2,h3,h4)::before,
.csc-article > aside > :is(h2,h3,h4)::after{
  content:none!important;
  display:none!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
}

/* 2) Shared SERPIFAI ornaments used inside A36: keep the content, remove line art behind it. */
.csc-article :is(.ri-decision-rule,.ri-key-takeaway,.ri-side-note,.ri-table-wrap,.ri-faq,.cae-link-grid),
.csc-article :is(.ri-decision-rule,.ri-key-takeaway,.ri-side-note,.ri-table-wrap,.ri-faq,.cae-link-grid) > *{
  background-image:none!important;
}
.csc-article :is(.ri-decision-rule,.ri-key-takeaway,.ri-side-note,.ri-table-wrap,.ri-faq,.cae-link-grid)::before,
.csc-article :is(.ri-decision-rule,.ri-key-takeaway,.ri-side-note,.ri-table-wrap,.ri-faq,.cae-link-grid)::after,
.csc-article :is(.ri-decision-rule,.ri-key-takeaway,.ri-side-note,.ri-table-wrap,.ri-faq,.cae-link-grid) > *::before,
.csc-article :is(.ri-decision-rule,.ri-key-takeaway,.ri-side-note,.ri-table-wrap,.ri-faq,.cae-link-grid) > *::after{
  content:none!important;
  display:none!important;
  pointer-events:none!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
}
.csc-article :is(.ri-decision-rule,.ri-key-takeaway,.ri-side-note) > *{
  position:relative;
  z-index:2;
}

/* 3) Fieldset/legend: a real fieldset border can cross legend glyphs even with z-index.
      Use a borderless panel shell instead of a line through the legend. */
.csc-tool fieldset{
  border:0!important;
  box-shadow:none!important;
  background:color-mix(in srgb,var(--ri-panel-2) 72%,var(--ri-panel))!important;
  padding:1.15rem!important;
  border-radius:.9rem!important;
}
.csc-tool legend{
  position:relative!important;
  z-index:4!important;
  display:block!important;
  float:none!important;
  width:auto!important;
  max-width:100%!important;
  margin:0 0 .85rem!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  line-height:1.4!important;
}
.csc-tool legend::before,
.csc-tool legend::after{
  content:none!important;
  display:none!important;
}

/* 4) Workflow: replace text-adjacent horizontal separators with discrete cards. */
.csc-workflow{
  display:grid;
  gap:.75rem;
}
.csc-workflow li{
  margin:0!important;
  border-block-end:0!important;
  border:1px solid var(--csc-line)!important;
  border-radius:.9rem!important;
  background:var(--csc-panel)!important;
  overflow:clip;
}
.csc-workflow li::after{
  content:none!important;
  display:none!important;
}

/* 5) Connections / FAQ: remove line separators that share the same vertical band as copy. */
.csc-connections{
  padding:1.25rem!important;
  border-top:0!important;
  border-bottom:0!important;
  border-radius:1rem;
  background:var(--csc-panel)!important;
  background-image:none!important;
}
.csc-article details,
.csc-article details[open],
.csc-article details > summary{
  background-image:none!important;
}
.csc-article details[open] > summary{
  border-bottom:0!important;
  box-shadow:none!important;
}
.csc-article details > summary::before,
.csc-article details > summary::after{
  content:none!important;
  display:none!important;
}
.csc-article details > p{
  border-top:0!important;
}

/* 6) Shared section-line CTA after the article: the article-specific stylesheet is page-local,
      so neutralize the shared line treatment on this page only. */
.ri-section--line{
  border-top:0!important;
  border-bottom:0!important;
  background-image:none!important;
  box-shadow:none!important;
}
.ri-section--line::before,
.ri-section--line::after,
.ri-section--line > .ri-shell::before,
.ri-section--line > .ri-shell::after,
.ri-section--line .ri-cta::before,
.ri-section--line .ri-cta::after{
  content:none!important;
  display:none!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
}

/* 7) Headings and readable text always own the foreground paint layer. */
.csc-article :where(h1,h2,h3,h4,p,li,dt,dd,summary,label,legend,strong,small,a,figcaption){
  position:relative;
  z-index:3;
}
.csc-article :where(h1,h2,h3,h4,p,li,dt,dd,summary,label,legend,strong,small,a,figcaption)::before,
.csc-article :where(h1,h2,h3,h4,p,li,dt,dd,summary,label,legend,strong,small,a,figcaption)::after{
  pointer-events:none;
}

/* 8) Decorative gradients or masks may not sit on text-bearing shared components. */
.csc-article :is(.ri-decision-rule,.ri-key-takeaway,.ri-side-note,.ri-faq details,.csc-worked-example,.csc-tool,.csc-result,.csc-assets>a){
  background-clip:padding-box!important;
  mask-image:none!important;
  -webkit-mask-image:none!important;
}

/* 9) 200% zoom / narrow viewport: preserve space before ornaments rather than compressing text. */
@media (max-width:720px){
  .csc-tool fieldset{padding:1rem!important}
  .csc-tool legend{margin-bottom:.7rem!important}
  .csc-workflow li{padding:1rem 1rem 1rem 3.5rem!important}
  .csc-connections{padding:1rem!important}
}

/* A36 V1.0.0 — TEXT-TO-BORDER CLEARANCE HARD GATE V3
   Root-cause closure from installed browser evidence, 2026-08-06.
   Global .ri-article section padding and runtime .sfv-visual-card decoration can
   place a real border directly against copy. A bordered text container MUST reserve
   physical inline clearance between its border box and every readable glyph. */

/* 1) Bordered direct sections: outrank the generic .ri-article section padding reset. */
body.cae-route-commercial-cost-wrong-competitors .ri-article.csc-article > section.csc-direct-answer{
  padding:clamp(1.35rem,3vw,2.25rem)!important;
}
body.cae-route-commercial-cost-wrong-competitors .ri-article.csc-article > section.csc-worked-example{
  padding:clamp(1.25rem,3vw,2rem)!important;
}

/* 2) Runtime full-site visual cards: bare direct child articles receive sfv-visual-card
      after page load. Guarantee a real inner clearance zone even after that mutation. */
body.cae-route-commercial-cost-wrong-competitors .ri-article.csc-article > section > article.sfv-visual-card{
  box-sizing:border-box!important;
  margin-block:1rem!important;
  padding-block:clamp(1.15rem,2.4vw,1.45rem)!important;
  padding-inline-start:clamp(1.15rem,2.4vw,1.45rem)!important;
  padding-inline-end:clamp(3.75rem,7vw,4.5rem)!important;
  border-radius:1rem!important;
  overflow:hidden!important;
  background-clip:padding-box!important;
}
body.cae-route-commercial-cost-wrong-competitors .ri-article.csc-article > section > article.sfv-visual-card > :where(h2,h3,h4,p,ul,ol,dl){
  margin-inline:0!important;
  max-width:100%!important;
}

/* 3) The full-site card telemetry line is decorative. Do not draw it across the
      text container; the numbered badge may remain because the end padding reserves it. */
body.cae-route-commercial-cost-wrong-competitors .ri-article.csc-article > section > article.sfv-visual-card::before{
  content:none!important;
  display:none!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
}

/* 4) Generic section separators are allowed only in whitespace. Increase the clearance
      before the first readable block so the separator can never touch a section marker/title. */
body.cae-route-commercial-cost-wrong-competitors .ri-article.csc-article > section + section{
  padding-top:clamp(1.5rem,3vw,2rem)!important;
}
body.cae-route-commercial-cost-wrong-competitors .ri-article.csc-article > section.csc-worked-example,
body.cae-route-commercial-cost-wrong-competitors .ri-article.csc-article > section.csc-direct-answer{
  border-top-width:1px!important;
}

/* 5) Physical clearance invariant. Text may never start on a bordered edge. */
body.cae-route-commercial-cost-wrong-competitors .ri-article.csc-article :where(
  .csc-direct-answer,
  .csc-worked-example,
  .csc-central-question,
  .csc-chain > div,
  .csc-card-grid > article,
  .csc-compare > div,
  .csc-numbered > li,
  .csc-tool,
  .csc-result,
  .csc-assets > a,
  details,
  section > article.sfv-visual-card
){
  --csc-text-edge-clearance:1rem;
}

/* 6) Narrow/200%-zoom resilience: never solve overflow by collapsing the clearance. */
@media (max-width:720px){
  body.cae-route-commercial-cost-wrong-competitors .ri-article.csc-article > section.csc-direct-answer,
  body.cae-route-commercial-cost-wrong-competitors .ri-article.csc-article > section.csc-worked-example{
    padding:1.15rem!important;
  }
  body.cae-route-commercial-cost-wrong-competitors .ri-article.csc-article > section > article.sfv-visual-card{
    padding-block:1.05rem!important;
    padding-inline-start:1.05rem!important;
    padding-inline-end:3.6rem!important;
  }
}