@charset "utf-8";
/* ============================================================================
   v36 — HTML infographics aligned to the locked V32 editorial system.

   Principles:
   - Parent page band is the primary surface: no unnecessary box-inside-box.
   - Mobile-first, then a real 12-column editorial grid at larger widths.
   - V32 soft radii are preserved on genuine contained objects only.
   - Contrast is inherited from the parent band; no white-on-white state.
   - The green-to-lime accent remains a signal, never a repeated decoration.
   ========================================================================== */

.html-ig{
  --ig-fg:var(--ink);
  --ig-muted:var(--muted);
  --ig-line:var(--line);
  --ig-soft:rgba(0,60,151,.055);
  --ig-core:var(--blue);
  width:100%;
  margin:clamp(34px,5vw,72px) 0 0;
  color:var(--ig-fg);
}

/* Dark/light context comes from the actual page surface, never from an old
   helper class. This prevents the white-text-on-white failures in v35. */
:is(.band-blue,.band-ink) .html-ig,
:is(.band-blue,.band-ink) .html-ig--dark{
  --ig-fg:#fff;
  --ig-muted:rgba(255,255,255,.72);
  --ig-line:rgba(255,255,255,.2);
  --ig-soft:rgba(255,255,255,.055);
  --ig-core:var(--blue-bright);
}
:is(.band-white,.band-paper,.band-pale) .html-ig,
:is(.band-white,.band-paper,.band-pale) .html-ig--dark{
  --ig-fg:var(--ink);
  --ig-muted:var(--muted);
  --ig-line:var(--line);
  --ig-soft:rgba(0,60,151,.055);
  --ig-core:var(--blue);
}

/* ---------------------------------------------------------------- header */
.html-ig__head{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(18px,2vw,32px);
  row-gap:14px;
  margin:0 0 clamp(34px,4vw,60px);
}
.html-ig__kicker{
  grid-column:1 / -1;
  display:block;
  font-family:var(--font-sans);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.16em;
  line-height:1.2;
  text-transform:uppercase;
  color:var(--blue);
}
:is(.band-blue,.band-ink) .html-ig__kicker{color:rgba(255,255,255,.72)}
.html-ig__head h3{
  grid-column:1 / -1;
  max-width:18ch;
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(2rem,7.8vw,3.15rem);
  font-weight:400;
  line-height:.98;
  letter-spacing:-.018em;
  color:var(--ig-fg);
  text-wrap:balance;
}
.html-ig__head p{
  grid-column:1 / -1;
  max-width:48ch;
  margin:0;
  color:var(--ig-muted);
  line-height:1.55;
}
.html-ig p{color:var(--ig-muted)}
.html-ig figcaption{
  margin-top:clamp(26px,3vw,42px);
  padding-top:16px;
  border-top:1px solid var(--ig-line);
  font-family:var(--font-sans);
  font-size:.76rem;
  line-height:1.55;
  color:var(--ig-muted);
}
.html-ig figcaption a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* ---------------------------------------------------------------- metrics */
.html-ig__stats{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(18px,2vw,32px);
}
.html-ig__stats article{
  grid-column:1 / -1;
  min-width:0;
  padding:22px 0 26px;
  border-top:1px solid var(--ig-line);
}
.html-ig__stats strong{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(3.2rem,14vw,5.2rem);
  font-weight:400;
  line-height:.86;
  letter-spacing:-.025em;
  color:var(--ig-fg);
}
.html-ig__stats p{max-width:30ch;margin:16px 0 0;line-height:1.5}
.html-ig__stats small{
  display:block;
  margin-top:14px;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--ig-muted);
}

/* ---------------------------------------------------------------- steps */
.html-ig__steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(18px,2vw,32px);
}
.html-ig__steps li{
  grid-column:1 / -1;
  min-width:0;
  padding:20px 0 26px;
  border-top:1px solid var(--ig-line);
}
.html-ig__num{
  display:block;
  margin-bottom:13px;
  font-family:var(--font-sans);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--ig-muted);
}
.html-ig__steps b,.html-ig__cards b,.html-ig__node b{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(1.12rem,4.6vw,1.35rem);
  font-weight:400;
  line-height:1.08;
  color:var(--ig-fg);
}
.html-ig__steps p,.html-ig__cards p,.html-ig__node span{
  margin:10px 0 0;
  font-size:.92rem;
  line-height:1.5;
  color:var(--ig-muted);
}

/* ---------------------------------------------------------------- cards */
.html-ig__cards{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(18px,2vw,32px);
}
.html-ig__cards article{
  grid-column:1 / -1;
  min-width:0;
  padding:20px 0 26px;
  border-top:1px solid var(--ig-line);
}
.html-ig__cards small{
  display:block;
  margin-bottom:12px;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--ig-muted);
}
.html-ig__axis{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:18px;
  padding-top:15px;
  border-top:1px solid var(--ig-line);
  font-size:.74rem;
  font-weight:700;
  color:var(--ig-muted);
}

/* ---------------------------------------------------- relationship / hub */
.html-ig__radial-wrap,.html-ig__hub{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(18px,2vw,32px);
  row-gap:clamp(18px,2.5vw,34px);
  align-items:start;
}
.html-ig__core{
  grid-column:1 / -1;
  min-width:0;
  padding:clamp(22px,3vw,34px);
  border-radius:var(--be-radius-inner,var(--radius));
  background:var(--ig-core);
  color:#fff;
}
.html-ig__core b{
  display:block;
  font-family:var(--font-sans);
  font-size:clamp(1.45rem,5vw,2rem);
  font-weight:800;
  line-height:1;
}
.html-ig__core span{display:block;margin-top:8px;font-size:.86rem;opacity:.82}
.html-ig__radial-nodes,.html-ig__hub-nodes{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(18px,2vw,32px);
}
.html-ig__radial-nodes .html-ig__node,
.html-ig__hub-nodes span,
.html-ig__node{
  grid-column:1 / -1;
  position:static!important;
  transform:none!important;
  width:auto!important;
  min-width:0;
  padding:18px 0 22px;
  border-top:1px solid var(--ig-line);
  background:transparent;
  color:var(--ig-fg);
}
.html-ig__hub-nodes span{font-weight:700}

/* ------------------------------------------------------ spine / journeys */
.html-ig__spine,.html-ig__journey,.html-ig__blueprint{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(18px,2vw,32px);
}
.html-ig__spine-col,.html-ig__journey article,.html-ig__blueprint article{
  grid-column:1 / -1;
  min-width:0;
  padding:20px 0 26px;
  border-top:1px solid var(--ig-line);
}
.html-ig__moment{
  font-family:var(--font-display);
  font-size:clamp(1.15rem,4.5vw,1.35rem);
  line-height:1.08;
  color:var(--ig-fg);
}
.html-ig__owner{
  display:block;
  margin-top:10px;
  color:var(--ig-muted);
  font-family:var(--font-sans);
  font-size:.9rem;
}
.html-ig__owner small{
  display:block;
  margin-bottom:5px;
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.78;
}
.html-ig__spine-col>i,.html-ig__journey article>i,.html-ig__blueprint article>i{display:none}
.html-ig__blueprint .html-ig__moment b,.html-ig__blueprint .html-ig__moment span{display:block}
.html-ig__blueprint .html-ig__moment span{
  margin-top:6px;
  font-family:var(--font-sans);
  font-size:.88rem;
  color:var(--ig-muted);
}

/* ------------------------------------------------------------ sync model */
.html-ig__sync-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(18px,2vw,32px);
  row-gap:0;
}
.html-ig__sync-grid article{
  grid-column:1 / -1;
  min-width:0;
  padding:20px 0 24px;
  border-top:1px solid var(--ig-line);
}
.html-ig__sync-grid article b{
  display:block;
  font-family:var(--font-display);
  font-size:1.3rem;
  font-weight:400;
  color:var(--ig-fg);
}
.html-ig__sync-grid article span{display:block;margin-top:8px;color:var(--ig-muted);font-size:.92rem}
.html-ig__sync-grid .html-ig__core{margin:12px 0}

/* -------------------------------------------------------------- timeline */
.html-ig__compare{display:grid;gap:clamp(28px,4vw,48px)}
.html-ig__timeline-row{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(18px,2vw,32px);
  row-gap:20px;
  padding-top:20px;
  border-top:1px solid var(--ig-line);
}
.html-ig__timeline-label,.html-ig__weeks,.html-ig__note{grid-column:1 / -1}
.html-ig__timeline-label small,.html-ig__timeline-label strong{display:block}
.html-ig__timeline-label small{font-size:.7rem;font-weight:700;letter-spacing:.08em;color:var(--ig-muted)}
.html-ig__timeline-label strong{
  margin-top:6px;
  font-family:var(--font-display);
  font-size:clamp(2.4rem,10vw,3.6rem);
  font-weight:400;
  line-height:.88;
  color:var(--ig-fg);
}
/* Week count is a data scale, so its internal 7/3 columns intentionally map
   the weeks rather than the page grid. */
.html-ig__weeks{display:grid;align-items:start;position:relative;padding-top:6px}
.html-ig__weeks:before{content:"";position:absolute;left:0;right:0;top:13px;height:1px;background:var(--ig-line)}
.html-ig__weeks--7{grid-template-columns:repeat(7,minmax(0,1fr))}
.html-ig__weeks--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.html-ig__weeks--3:before{background:var(--accent)}
.html-ig__weeks span{position:relative;text-align:center;font-size:.68rem;color:var(--ig-muted)}
.html-ig__weeks i{
  display:block;width:9px;height:9px;border-radius:50%;background:var(--ig-fg);
  margin:0 auto 13px;position:relative;z-index:1;
}
.html-ig__weeks--3 i{background:var(--accent)}
.html-ig__note{
  padding:18px 20px;
  border:1px solid var(--ig-line);
  border-radius:var(--be-radius-inner,var(--radius));
  background:var(--ig-soft);
}
.html-ig__note small{font-weight:700;color:var(--ig-muted);font-size:.7rem}
.html-ig__note p{margin:8px 0 0}

/* --------------------------------------------------------- before / after */
.html-ig__before-after{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(18px,2vw,32px);
}
.html-ig__before-after>section{
  grid-column:1 / -1;
  padding:22px 0 28px;
  border-top:1px solid var(--ig-line);
}
.html-ig__before-after small{display:block;margin-bottom:16px;color:var(--ig-muted);font-weight:700;font-size:.7rem}
.html-ig__trust-core{
  padding:22px;
  border-radius:var(--be-radius-inner,var(--radius));
  background:var(--ig-core);
  color:#fff;
}
.html-ig__trust-core b{display:block;font-family:var(--font-sans);font-weight:800;font-size:1.4rem}
.html-ig__trust-core span{display:block;margin-top:5px;opacity:.82;font-size:.9rem}
.html-ig__trust-system{display:grid;gap:14px}
.html-ig__trust-nodes{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:14px;
}
.html-ig__trust-nodes span{
  grid-column:span 6;
  padding:12px 0;
  border-top:1px solid var(--ig-line);
  color:var(--ig-fg);
}

/* ---------------------------------------------------------------- stack */
.html-ig__stack{display:grid;gap:0}
.html-ig__stack>div{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(14px,2vw,28px);
  row-gap:8px;
  align-items:baseline;
  padding:18px 0 22px;
  border-top:1px solid var(--ig-line);
  color:var(--ig-fg);
}
.html-ig__stack>div>span{grid-column:1 / span 2;color:var(--ig-muted)}
.html-ig__stack b{grid-column:3 / -1;font-family:var(--font-display);font-weight:400;font-size:1.2rem}
.html-ig__stack p{grid-column:3 / -1;margin:0;color:var(--ig-muted)}

/* -------------------------------------------------------------- lost path */
.html-ig--lost{max-width:var(--reading)}
.html-ig__lost-route{padding-top:8px}
.html-ig__lost-line{display:block;height:1px;margin:18px 0;background:var(--ig-line)}
.html-ig__lost-start,.html-ig__lost-end{
  display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ig-fg);margin-right:8px;
}
.html-ig__lost-end{background:var(--accent)}
.html-ig__lost-route b{display:block;padding-top:14px}

/* ---------------------------------------------------------- v34 helpers */
.v34-symptoms{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--be-inset,12px);
}
.v34-symptoms .v28-panel{grid-column:1 / -1;min-height:0}
.v34-how-copy{margin-bottom:clamp(34px,5vw,72px)}
.v34-pullquote{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(1.7rem,6vw,2.8rem);
  font-weight:400;
  line-height:1.04;
  color:var(--ink);
}
:is(.band-blue,.band-ink) .v34-pullquote{color:#fff}
.v34-profile .v28-panel{color:#fff}
.v34-profile .v28-panel p{color:rgba(255,255,255,.72)}

/* --------------------------------------------------------------- tablet */
@media (min-width:700px){
  .html-ig__head h3{grid-column:1 / span 8}
  .html-ig__head p{grid-column:9 / -1;align-self:end}

  .html-ig__stats article:nth-child(odd),
  .html-ig__cards article:nth-child(odd),
  .html-ig__radial-nodes .html-ig__node:nth-child(odd),
  .html-ig__hub-nodes span:nth-child(odd),
  .html-ig__before-after>section:nth-child(odd){grid-column:1 / span 6}
  .html-ig__stats article:nth-child(even),
  .html-ig__cards article:nth-child(even),
  .html-ig__radial-nodes .html-ig__node:nth-child(even),
  .html-ig__hub-nodes span:nth-child(even),
  .html-ig__before-after>section:nth-child(even){grid-column:7 / span 6}

  .html-ig__core{grid-column:4 / span 6}
  .html-ig__axis{flex-direction:row;justify-content:space-between}

  .html-ig__timeline-label{grid-column:1 / span 3}
  .html-ig__weeks{grid-column:4 / -1}
  .html-ig__note{grid-column:4 / -1}

  .v34-symptoms .v28-panel:nth-child(odd){grid-column:1 / span 6}
  .v34-symptoms .v28-panel:nth-child(even){grid-column:7 / span 6}
}

/* -------------------------------------------------------------- desktop */
@media (min-width:1024px){
  .html-ig__head h3{grid-column:1 / span 7}
  .html-ig__head p{grid-column:9 / -1}

  .html-ig__stats article:nth-child(1){grid-column:1 / span 3}
  .html-ig__stats article:nth-child(2){grid-column:4 / span 3}
  .html-ig__stats article:nth-child(3){grid-column:7 / span 3}
  .html-ig__stats article:nth-child(4){grid-column:10 / span 3}

  /* Five-item sequences deliberately consume the 12-page columns as
     2 + 2 + 2 + 3 + 3. No hidden 5-column mini-grid. */
  .html-ig__steps li:nth-child(1),
  .html-ig__spine>*:nth-child(1),.html-ig__journey>*:nth-child(1),.html-ig__blueprint>*:nth-child(1){grid-column:1 / span 2}
  .html-ig__steps li:nth-child(2),
  .html-ig__spine>*:nth-child(2),.html-ig__journey>*:nth-child(2),.html-ig__blueprint>*:nth-child(2){grid-column:3 / span 2}
  .html-ig__steps li:nth-child(3),
  .html-ig__spine>*:nth-child(3),.html-ig__journey>*:nth-child(3),.html-ig__blueprint>*:nth-child(3){grid-column:5 / span 2}
  .html-ig__steps li:nth-child(4),
  .html-ig__spine>*:nth-child(4),.html-ig__journey>*:nth-child(4),.html-ig__blueprint>*:nth-child(4){grid-column:7 / span 3}
  .html-ig__steps li:nth-child(5),
  .html-ig__spine>*:nth-child(5),.html-ig__journey>*:nth-child(5),.html-ig__blueprint>*:nth-child(5){grid-column:10 / span 3}

  .html-ig__cards--4 article:nth-child(1){grid-column:1 / span 3}
  .html-ig__cards--4 article:nth-child(2){grid-column:4 / span 3}
  .html-ig__cards--4 article:nth-child(3){grid-column:7 / span 3}
  .html-ig__cards--4 article:nth-child(4){grid-column:10 / span 3}

  .html-ig__core{grid-column:5 / span 4}
  .html-ig__radial-nodes .html-ig__node:nth-child(1){grid-column:1 / span 4}
  .html-ig__radial-nodes .html-ig__node:nth-child(2){grid-column:5 / span 4}
  .html-ig__radial-nodes .html-ig__node:nth-child(3){grid-column:9 / span 4}
  .html-ig__radial-nodes .html-ig__node:nth-child(4){grid-column:1 / span 6}
  .html-ig__radial-nodes .html-ig__node:nth-child(5){grid-column:7 / span 6}
  .html-ig__hub-nodes span:nth-child(1){grid-column:1 / span 6}
  .html-ig__hub-nodes span:nth-child(2){grid-column:7 / span 6}
  .html-ig__hub-nodes span:nth-child(3){grid-column:1 / span 6}
  .html-ig__hub-nodes span:nth-child(4){grid-column:7 / span 6}

  .html-ig__sync-grid article:nth-child(1){grid-column:1 / span 6;grid-row:1}
  .html-ig__sync-grid article:nth-child(2){grid-column:7 / span 6;grid-row:1}
  .html-ig__sync-grid .html-ig__core{grid-column:5 / span 4;grid-row:2;margin:20px 0}
  .html-ig__sync-grid article:nth-child(4){grid-column:1 / span 6;grid-row:3}
  .html-ig__sync-grid article:nth-child(5){grid-column:7 / span 6;grid-row:3}

  .html-ig__timeline-label{grid-column:1 / span 2}
  .html-ig__weeks{grid-column:3 / span 7}
  .html-ig__note{grid-column:10 / span 3}

  .html-ig__before-after>section:nth-child(1){grid-column:1 / span 6}
  .html-ig__before-after>section:nth-child(2){grid-column:7 / span 6}

  .html-ig__stack>div>span{grid-column:1 / span 1}
  .html-ig__stack b{grid-column:2 / span 3}
  .html-ig__stack p{grid-column:5 / -1}
}

/* --------------------------------------------------------------- reveal */
[data-html-infographic] :is(.html-ig__stats article,.html-ig__steps li,.html-ig__cards article,
  .html-ig__node,.html-ig__spine-col,.html-ig__journey article,.html-ig__blueprint article,
  .html-ig__sync-grid>*){
  opacity:0;
  transform:translateY(14px);
  transition:opacity var(--dur-reveal,600ms) var(--ease,cubic-bezier(.22,1,.36,1)),
             transform var(--dur-reveal,600ms) var(--ease,cubic-bezier(.22,1,.36,1));
}
[data-html-infographic].is-revealed :is(.html-ig__stats article,.html-ig__steps li,.html-ig__cards article,
  .html-ig__node,.html-ig__spine-col,.html-ig__journey article,.html-ig__blueprint article,
  .html-ig__sync-grid>*){opacity:1;transform:none}
[data-html-infographic].is-revealed :is(.html-ig__stats article,.html-ig__steps li,.html-ig__cards article,
  .html-ig__node,.html-ig__spine-col,.html-ig__journey article,.html-ig__blueprint article,
  .html-ig__sync-grid>*):nth-child(2){transition-delay:.06s}
[data-html-infographic].is-revealed :is(.html-ig__stats article,.html-ig__steps li,.html-ig__cards article,
  .html-ig__node,.html-ig__spine-col,.html-ig__journey article,.html-ig__blueprint article,
  .html-ig__sync-grid>*):nth-child(3){transition-delay:.12s}
[data-html-infographic].is-revealed :is(.html-ig__stats article,.html-ig__steps li,.html-ig__cards article,
  .html-ig__node,.html-ig__spine-col,.html-ig__journey article,.html-ig__blueprint article,
  .html-ig__sync-grid>*):nth-child(4){transition-delay:.18s}
[data-html-infographic].is-revealed :is(.html-ig__stats article,.html-ig__steps li,.html-ig__cards article,
  .html-ig__node,.html-ig__spine-col,.html-ig__journey article,.html-ig__blueprint article,
  .html-ig__sync-grid>*):nth-child(5){transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  [data-html-infographic] *{transition:none!important;animation:none!important}
  [data-html-infographic] :is(.html-ig__stats article,.html-ig__steps li,.html-ig__cards article,
    .html-ig__node,.html-ig__spine-col,.html-ig__journey article,.html-ig__blueprint article,
    .html-ig__sync-grid>*){opacity:1;transform:none}
}

/* The section header already owns the vertical transition into its first
   explanatory graphic. Avoid stacking a second large top margin on it. */
.section-head + .html-ig{margin-top:0}