/* Static-page color hierarchy v1.
   Extends the merchant/money-page visual language to the rest of the static site without adding card-heavy UI. */

body[data-static-hierarchy]{
  --static-accent:var(--brand);
  --static-accent-secondary:var(--info);
  --static-accent-tertiary:var(--success);
  --static-accent-warm:var(--warning);
}
body[data-static-hierarchy][data-editorial-family="solution"]{--static-accent:var(--info);--static-accent-secondary:var(--success)}
body[data-static-hierarchy][data-editorial-family="comparison"]{--static-accent:var(--info);--static-accent-secondary:var(--brand)}
body[data-static-hierarchy][data-editorial-family="developer"]{--static-accent:var(--brand-hover);--static-accent-secondary:var(--info)}
body[data-static-hierarchy][data-editorial-family="editorial"]{--static-accent:var(--warning);--static-accent-secondary:var(--brand)}
body[data-static-hierarchy][data-editorial-family="security"]{--static-accent:var(--success);--static-accent-secondary:var(--info)}
body[data-static-hierarchy][data-editorial-family="company"]{--static-accent:var(--warning);--static-accent-secondary:var(--brand)}
body[data-static-hierarchy][data-editorial-family="legal"]{--static-accent:var(--brand);--static-accent-secondary:var(--muted2)}

/* Page identity: one consistent accent signal in the hero and section labels. */
body[data-static-hierarchy] .hero .eyebrow,
body[data-static-hierarchy] .content-section>.kicker,
body[data-static-hierarchy] .section-head>.kicker,
body[data-static-hierarchy] .story-number,
body[data-static-hierarchy] .experience-number,
body[data-static-hierarchy] .story-visual-top span{
  color:var(--static-accent);
}

body[data-static-hierarchy] .hero .dot{
  background:var(--static-accent);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--static-accent) 10%,transparent);
}

/* Chapters rotate through the same restrained semantic palette used on money pages. */
body[data-static-hierarchy] .story-block,
body[data-static-hierarchy] .experience-block{
  --section-accent:var(--static-accent);
}
body[data-static-hierarchy] .story-block:nth-of-type(3n+2),
body[data-static-hierarchy] .experience-block:nth-of-type(3n+2){--section-accent:var(--static-accent-secondary)}
body[data-static-hierarchy] .story-block:nth-of-type(3n),
body[data-static-hierarchy] .experience-block:nth-of-type(3n){--section-accent:var(--static-accent-tertiary)}

body[data-static-hierarchy] .story-block .story-number,
body[data-static-hierarchy] .experience-block .experience-number,
body[data-static-hierarchy] .story-block>.kicker,
body[data-static-hierarchy] .experience-block>.kicker,
body[data-static-hierarchy] .experience-copy>.kicker{
  color:var(--section-accent);
}

body[data-static-hierarchy] .story-block:after,
body[data-static-hierarchy] .experience-block:after{
  position:absolute;
  left:0;
  bottom:-1px;
  width:clamp(64px,10vw,132px);
  height:1px;
  background:linear-gradient(90deg,var(--section-accent),transparent);
  content:"";
  pointer-events:none;
}
body[data-static-hierarchy] .story-block:last-child:after,
body[data-static-hierarchy] .experience-block:last-child:after{display:none}

/* Lists and compact proof elements communicate status with color rather than more boxes. */
body[data-static-hierarchy] .story-block li:before,
body[data-static-hierarchy] .check-row b,
body[data-static-hierarchy] .matrix-row .win{
  color:var(--section-accent,var(--static-accent-tertiary));
}

body[data-static-hierarchy] .notice,
body[data-static-hierarchy] .callout,
body[data-static-hierarchy] blockquote{
  border-left-color:var(--static-accent);
}

body[data-static-hierarchy] .faq details,
body[data-static-hierarchy] .related a,
body[data-static-hierarchy] .trust-grid a{
  position:relative;
}
body[data-static-hierarchy] .faq details:before,
body[data-static-hierarchy] .related a:before,
body[data-static-hierarchy] .trust-grid a:before{
  position:absolute;
  left:0;
  top:0;
  width:42px;
  height:2px;
  background:var(--static-accent);
  content:"";
}
body[data-static-hierarchy] .related a:nth-child(3n+2):before,
body[data-static-hierarchy] .trust-grid a:nth-child(3n+2):before{background:var(--static-accent-secondary)}
body[data-static-hierarchy] .related a:nth-child(3n):before,
body[data-static-hierarchy] .trust-grid a:nth-child(3n):before{background:var(--static-accent-tertiary)}

/* Tables and matrices retain neutral surfaces while headings carry the page accent. */
body[data-static-hierarchy] table thead,
body[data-static-hierarchy] .matrix-row.header{
  box-shadow:inset 0 2px 0 color-mix(in srgb,var(--static-accent) 72%,transparent);
}

/* Reset legacy 12-column placement only on shared static grids. Parent layouts remain in control. */
body[data-static-hierarchy] :is(.related,.trust-grid,.scenario-grid,.merchant-example-grid,.merchant-proof-grid)>*{
  grid-column:auto;
  grid-row:auto;
  min-width:0;
}

/* Legal pages intentionally use less chroma. */
body[data-static-hierarchy][data-editorial-family="legal"] .story-block:nth-of-type(3n+2),
body[data-static-hierarchy][data-editorial-family="legal"] .experience-block:nth-of-type(3n+2),
body[data-static-hierarchy][data-editorial-family="legal"] .story-block:nth-of-type(3n),
body[data-static-hierarchy][data-editorial-family="legal"] .experience-block:nth-of-type(3n){--section-accent:var(--static-accent)}

/* Keep small accents readable on Light mode instead of using bright signal colors as text. */
html[data-theme="light"] body[data-static-hierarchy] .hero .eyebrow,
html[data-theme="light"] body[data-static-hierarchy] .content-section>.kicker,
html[data-theme="light"] body[data-static-hierarchy] .section-head>.kicker,
html[data-theme="light"] body[data-static-hierarchy] .story-number,
html[data-theme="light"] body[data-static-hierarchy] .experience-number,
html[data-theme="light"] body[data-static-hierarchy] .story-block>.kicker,
html[data-theme="light"] body[data-static-hierarchy] .experience-block>.kicker,
html[data-theme="light"] body[data-static-hierarchy] .experience-copy>.kicker{
  color:color-mix(in srgb,var(--section-accent,var(--static-accent)) 66%,var(--text));
}

@media(max-width:760px){
  body[data-static-hierarchy] .story-block:after,
  body[data-static-hierarchy] .experience-block:after{width:72px}
}