/* h1-blog.css: owned by M4 (guides + blog motion), round 6 (30.09.2026). Only this agent edits this file.
   One small self-drawn header motif per guide (figure.bm) and a mini of it on the blog-index cards (.bmm, injected by h1-blog.js).
   Markup = end state. Motion only under html.mo + .is-armed (set by h1-blog.js while on screen); step classes .s1….s8 reveal. */

/* ------------------------------------------------------------ figure card */
.bm { margin: 0; min-width: 0; max-width: 100%; }
.bm__svg { display: block; width: 100%; height: auto; overflow: visible; }
figure.bm {
  padding: 16px 14px 14px; border: 1px solid var(--line); border-radius: 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 72%, transparent), color-mix(in srgb, var(--surface) 18%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 250, 240, .04);
}
.bm__cap { margin: 12px 2px 0; font: 400 12.5px/1.5 var(--f-body); color: var(--muted); text-wrap: pretty; }
.bm__tag { display: block; margin-bottom: 4px; font: 600 10px/1.2 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ember); }

/* in the article header: the empty left column on desktop, under the title on smaller screens */
@media (min-width: 981px) {
  .arthead__grid > .bm { grid-column: 1; grid-row: 1; align-self: center; }
}
@media (max-width: 980px) {
  .arthead__grid > .bm { margin-top: 26px; max-width: 600px; }
}
/* in the hero of the three guide pages: under the chips */
.phero__text > .bm { margin-top: 30px; max-width: 540px; }
@media (min-width: 561px) {
  .arthead__grid > .bm, .phero__text > .bm {
    display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 20px; align-items: center; padding: 14px 18px 14px 14px;
  }
  .arthead__grid > .bm .bm__cap, .phero__text > .bm .bm__cap { margin: 0; }
}
@media (min-width: 981px) {
  .arthead__grid > .bm { display: block; padding: 16px 14px 14px; }
  .arthead__grid > .bm .bm__cap { margin: 12px 2px 0; }
}
@media (max-width: 560px) {
  .arthead__grid > .bm .bm__svg, .phero__text > .bm .bm__svg { width: auto; height: 164px; max-width: 100%; margin: 0 auto; }
}
@media (max-width: 360px) {
  .arthead__grid > .bm .bm__svg, .phero__text > .bm .bm__svg { height: 148px; }
}

/* ------------------------------------------------------------ shared marks (static = end state) */
.bm .bm-t { font: 500 9.5px var(--f-mono); letter-spacing: .06em; fill: var(--muted); }
.bm .bm-t--k { fill: var(--ink); font-weight: 700; }
.bm .bm-t--a { fill: var(--ember); font-weight: 700; }
.bm .bm-tb { font: 500 12px var(--f-body); fill: var(--body); }
.bm .bm-tb--k { fill: var(--ink); font-weight: 600; }
.bm .bm-tb--s { fill: var(--sage); font-weight: 700; }
.bm .bm-base { stroke: var(--line-strong); stroke-width: 1; }
.bm .bm-ck { fill: none; stroke: var(--sage); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bm .bm-ck--on { stroke: var(--on-ember); stroke-width: 2.4; }
.bm .bm-ck--pen { stroke: var(--pen); stroke-width: 2; }
.bm .bm-draw { stroke-dasharray: 1; stroke-dashoffset: 0; }
.bm [data-s], .bm .bm-tf { transform-box: fill-box; transform-origin: 50% 50%; }
.bm .bm-gy { transform-origin: 50% 100%; }
.bm .bm-gx { transform-origin: 0 50%; }

/* 1) commission on net */
.bm--fee .bm-col--gross { fill: color-mix(in srgb, var(--muted) 30%, transparent); stroke: var(--line-strong); }
.bm--fee .bm-col--fee { fill: color-mix(in srgb, var(--faint) 10%, transparent); stroke: var(--faint); stroke-dasharray: 3 3; }
.bm--fee .bm-col--net { fill: color-mix(in srgb, var(--ember-lo) 42%, transparent); stroke: var(--ember-lo); }
.bm--fee .bm-col--com { fill: color-mix(in srgb, var(--ember) 14%, transparent); stroke: var(--ember); stroke-dasharray: 4 2; }
.bm--fee .bm-col--keep { fill: var(--ember); }
.bm--fee .bm-link { stroke: var(--faint); stroke-dasharray: 2 2; }

/* 2) who holds the key */
.bm--own .bm-div { stroke: var(--line-strong); stroke-dasharray: 3 4; }
.bm--own .bm-lock { fill: color-mix(in srgb, var(--ember) 14%, transparent); stroke: var(--ember); stroke-width: 1.6; }
.bm--own .bm-hole { fill: var(--ember); }
.bm--own .bm-hole-l { stroke: var(--ember); stroke-width: 2; stroke-linecap: round; }
.bm--own .bm-shackle { fill: none; stroke: var(--ember); stroke-width: 2.4; stroke-linecap: round; transform-box: fill-box; }
.bm--own .bm-keyr { fill: none; stroke: var(--ember-hi); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bm--own .bm-field { fill: var(--inset); stroke: var(--line-strong); }
.bm--own .bm-dots circle { fill: var(--muted); }
.bm--own .bm-strike { stroke: var(--ember); stroke-width: 2.4; stroke-linecap: round; }
.bm--own .bm-box { fill: none; stroke: var(--line-strong); stroke-width: 1.4; }

/* 3) the exit, in order */
.bm--leave .bm-track { stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 2 4; }
.bm--leave .bm-prog { stroke: var(--ember); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.bm--leave .bm-node { fill: var(--bg); stroke: var(--line-strong); stroke-width: 1.5; }
.bm--leave .bm-dot { fill: var(--ember); }
.bm--leave [class*="bm-lv"] { fill: var(--ink); font-weight: 600; }

/* 4) contract red flags */
.bm .bm-paper { fill: var(--paper); }
.bm .bm-ptitle { fill: var(--paper-ink); opacity: .75; }
.bm--flags .bm-pl { fill: var(--paper-ink); opacity: .2; }
.bm--flags .bm-hl { fill: color-mix(in srgb, var(--stamp) 26%, transparent); }
.bm--flags .bm-pole { stroke: var(--muted); stroke-width: 1.4; stroke-linecap: round; }
.bm--flags .bm-pen { fill: color-mix(in srgb, var(--stamp) 62%, var(--ember)); }
.bm--flags .bm-flag { transform-origin: 0% 100%; }

/* 5) questions answered in writing */
.bm--ask .bm-bubr { fill: var(--surface); stroke: color-mix(in srgb, var(--sage) 40%, var(--line-strong)); }
.bm--ask .bm-badge { fill: var(--sage); }
.bm--ask .bm-qm { font: 700 12.5px var(--f-body); fill: var(--ink); opacity: 0; }
.bm--ask .bm-qc { stroke-dasharray: 1; stroke-dashoffset: 0; }

/* 6) break-even balance: end state = tipped toward "worth it" */
.bm--worth .bm-post { stroke: var(--line-strong); stroke-width: 2.2; stroke-linecap: round; }
.bm--worth .bm-pivot { fill: var(--ember); }
.bm--worth .bm-beaml { stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.bm--worth .bm-str { fill: none; stroke: var(--muted); stroke-width: 1; }
.bm--worth .bm-pan { fill: color-mix(in srgb, var(--ember) 12%, transparent); stroke: var(--ember-lo); stroke-width: 1.4; }
.bm--worth .bm-glyph { font: 700 15px var(--f-body); fill: var(--ember); }
.bm--worth .bm-trend { fill: none; stroke: var(--sage); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bm--worth .bm-cardr { fill: var(--surface); stroke: var(--ember); stroke-width: 1.2; }
.bm--worth .bm-beam { transform-box: view-box; transform-origin: 110px 80px; transform: rotate(7deg); }
.bm--worth .bm-panl { transform: translateY(-9.7px); }
.bm--worth .bm-panr { transform: translateY(9.7px); }

/* 7) ranked by published terms: end state = sorted */
.bm--rank .bm-rowr { fill: var(--surface); stroke: var(--line); }
.bm--rank .bm-row--top .bm-rowr { stroke: color-mix(in srgb, var(--ember) 70%, transparent); }
.bm--rank .bm-name { fill: var(--faint); opacity: .75; }
.bm--rank .bm-dt { fill: none; stroke: var(--line-strong); stroke-width: 1.2; }
.bm--rank .bm-dt--on { fill: var(--ember); stroke: var(--ember); }

/* 8) how to choose: offer stack, stamped */
.bm--choose .bm-sheetb { fill: var(--surface); stroke: var(--line-strong); }
.bm--choose .bm-pt { font: 500 9.5px var(--f-body); fill: var(--paper-ink); opacity: .82; }
.bm--choose .bm-prl { stroke: var(--paper-ink); opacity: .14; }
.bm--choose .bm-stamp { opacity: .92; }
.bm--choose .bm-stampr { fill: none; stroke: var(--stamp); stroke-width: 2; }
.bm--choose .bm-stampt { font: 800 10px var(--f-mono); letter-spacing: .12em; fill: var(--stamp); }

/* 9) readiness: seven checks */
.bm--ready .bm-cb { fill: none; stroke: var(--line-strong); stroke-width: 1.4; }
.bm--ready .bm-seg { fill: var(--line-strong); }
.bm--ready .bm-seg--on { fill: var(--ember); }

/* 10) templates fanning out: end state = fanned, second card lifted */
.bm--tpl .bm-tcard { transform-box: view-box; transform-origin: 110px 196px; transform: rotate(var(--a)); }
.bm--tpl .bm-tc2 { transform: rotate(var(--a)) translateY(-12px); }
.bm--tpl .bm-tcr { fill: var(--paper); stroke: color-mix(in srgb, var(--paper-ink) 22%, transparent); }
.bm--tpl .bm-tct { font: 700 9px var(--f-body); fill: var(--paper-ink); }
.bm--tpl .bm-tcl { fill: var(--paper-ink); opacity: .18; }
.bm--tpl .bm-copyc { fill: var(--sage); }

/* ------------------------------------------------------------ motion (html.mo only) */
.bm.bm-snap, .bm.bm-snap * { transition: none !important; }
html.mo .bm .bm__live { transition: opacity .45s var(--ease); }
html.mo .bm.is-out .bm__live { opacity: 0; }
html.mo .bm.is-armed [data-s] {
  opacity: 0;
  transition: opacity var(--dur) var(--ease) var(--d, 0ms), transform var(--dur) var(--ease) var(--d, 0ms),
              stroke-dashoffset calc(var(--dur) * 1.3) var(--ease) var(--d, 0ms), fill var(--dur) var(--ease);
}
html.mo .bm.is-armed .bm-draw[data-s] { opacity: 1; stroke-dashoffset: 1; }
html.mo .bm.is-armed .bm-pop[data-s] { transform: scale(.35); transition-timing-function: cubic-bezier(.34, 1.5, .64, 1); }
html.mo .bm.is-armed .bm-up[data-s] { transform: translateY(7px); }
html.mo .bm.is-armed .bm-gy[data-s] { opacity: 1; transform: scaleY(0); }
html.mo .bm.is-armed .bm-gx[data-s] { opacity: 1; transform: scaleX(0); }
html.mo .bm.is-armed .bm-slide[data-s] { transform: translateX(-42px); transition-duration: calc(var(--dur) * 1.4); }
html.mo .bm.is-armed.s1 [data-s="1"][data-s], html.mo .bm.is-armed.s2 [data-s="2"][data-s], html.mo .bm.is-armed.s3 [data-s="3"][data-s],
html.mo .bm.is-armed.s4 [data-s="4"][data-s], html.mo .bm.is-armed.s5 [data-s="5"][data-s], html.mo .bm.is-armed.s6 [data-s="6"][data-s],
html.mo .bm.is-armed.s7 [data-s="7"][data-s], html.mo .bm.is-armed.s8 [data-s="8"][data-s] { opacity: 1; transform: none; stroke-dashoffset: 0; }

/* own: shackle opens, closes at s2 */
html.mo .bm--own.is-armed .bm-shackle { transform: translateY(-7px); transition: transform calc(var(--dur) * .8) cubic-bezier(.5, 0, .3, 1.4); }
html.mo .bm--own.is-armed.s2 .bm-shackle { transform: none; }

/* leave: progress line and labels follow the checkpoints */
html.mo .bm--leave.is-armed .bm-prog { stroke-dashoffset: 1; transition: stroke-dashoffset calc(var(--dur) * 1.5) var(--ease); }
html.mo .bm--leave.is-armed.s2 .bm-prog { stroke-dashoffset: .667; }
html.mo .bm--leave.is-armed.s3 .bm-prog { stroke-dashoffset: .333; }
html.mo .bm--leave.is-armed.s4 .bm-prog { stroke-dashoffset: 0; }
html.mo .bm--leave.is-armed [class*="bm-lv"] { fill: var(--muted); font-weight: 500; transition: fill var(--dur) var(--ease); }
html.mo .bm--leave.is-armed.s1 .bm-lv1, html.mo .bm--leave.is-armed.s2 .bm-lv2,
html.mo .bm--leave.is-armed.s3 .bm-lv3, html.mo .bm--leave.is-armed.s4 .bm-lv4 { fill: var(--ink); }

/* ask: each bubble arrives with a "?", which turns into a check when the next one arrives */
html.mo .bm--ask.is-armed .bm-badge { fill: var(--line-strong); transition: fill var(--dur) var(--ease); }
html.mo .bm--ask.is-armed .bm-bubr { stroke: var(--line-strong); transition: stroke var(--dur) var(--ease); }
html.mo .bm--ask.is-armed .bm-qm { opacity: 1; transition: opacity calc(var(--dur) * .5) var(--ease); }
html.mo .bm--ask.is-armed .bm-qc { stroke-dashoffset: 1; transition: stroke-dashoffset var(--dur) var(--ease) calc(var(--dur) * .35); }
html.mo .bm--ask.is-armed.s2 .bm-badge1, html.mo .bm--ask.is-armed.s3 .bm-badge2, html.mo .bm--ask.is-armed.s4 .bm-badge3, html.mo .bm--ask.is-armed.s5 .bm-badge4 { fill: var(--sage); }
html.mo .bm--ask.is-armed.s2 .bm-bubr1, html.mo .bm--ask.is-armed.s3 .bm-bubr2, html.mo .bm--ask.is-armed.s4 .bm-bubr3, html.mo .bm--ask.is-armed.s5 .bm-bubr4 { stroke: color-mix(in srgb, var(--sage) 40%, var(--line-strong)); }
html.mo .bm--ask.is-armed.s2 .bm-qm1, html.mo .bm--ask.is-armed.s3 .bm-qm2, html.mo .bm--ask.is-armed.s4 .bm-qm3, html.mo .bm--ask.is-armed.s5 .bm-qm4 { opacity: 0; }
html.mo .bm--ask.is-armed.s2 .bm-qc1, html.mo .bm--ask.is-armed.s3 .bm-qc2, html.mo .bm--ask.is-armed.s4 .bm-qc3, html.mo .bm--ask.is-armed.s5 .bm-qc4 { stroke-dashoffset: 0; }

/* worth: level until the condition card shows, then it tips */
html.mo .bm--worth.is-armed .bm-beam, html.mo .bm--worth.is-armed .bm-panl, html.mo .bm--worth.is-armed .bm-panr {
  transform: none; transition: transform calc(var(--dur) * 2) cubic-bezier(.45, 0, .25, 1.25);
}
html.mo .bm--worth.is-armed.s3 .bm-beam { transform: rotate(7deg); }
html.mo .bm--worth.is-armed.s3 .bm-panl { transform: translateY(-9.7px); }
html.mo .bm--worth.is-armed.s3 .bm-panr { transform: translateY(9.7px); }

/* rank: dots fill in, then the rows sort */
html.mo .bm--rank.is-armed .bm-row { transform: translateY(var(--u)); transition: transform calc(var(--dur) * 1.5) var(--ease) calc(var(--rd) * .5); }
html.mo .bm--rank.is-armed.s2 .bm-row { transform: none; }
html.mo .bm--rank.is-armed .bm-dt--on { fill: transparent; stroke: var(--line-strong); transition: fill var(--dur) var(--ease) var(--rd), stroke var(--dur) var(--ease) var(--rd); }
html.mo .bm--rank.is-armed.s1 .bm-dt--on { fill: var(--ember); stroke: var(--ember); }
html.mo .bm--rank.is-armed .bm-row--top .bm-rowr { stroke: var(--line); transition: stroke var(--dur) var(--ease); }
html.mo .bm--rank.is-armed.s3 .bm-row--top .bm-rowr { stroke: color-mix(in srgb, var(--ember) 70%, transparent); }

/* choose: stamp presses in */
html.mo .bm--choose.is-armed .bm-stamp[data-s] { transform: scale(1.7); transition: opacity .25s var(--ease), transform .38s cubic-bezier(.3, 1.45, .5, 1); }
html.mo .bm--choose.is-armed.s6 .bm-stamp[data-s][data-s] { opacity: .92; }

/* templates: stacked, then fanned, then one lifts */
html.mo .bm--tpl.is-armed .bm-tcard { transform: rotate(calc(var(--a) * .08)); transition: transform calc(var(--dur) * 1.4) var(--ease) var(--td); }
html.mo .bm--tpl.is-armed.s1 .bm-tcard { transform: rotate(var(--a)); }
html.mo .bm--tpl.is-armed.s2 .bm-tc2 { transform: rotate(var(--a)) translateY(-12px); transition-delay: 0ms; }

/* ------------------------------------------------------------ blog index: mini motif on each guide card */
.bmm {
  position: absolute; top: 22px; left: 24px; width: 96px; height: 84px; padding: 6px 7px; box-sizing: border-box;
  border-radius: 14px; background: var(--inset); border: 1px solid var(--line); pointer-events: none;
}
.bmm .bm__svg { width: 100%; height: 100%; }
.bmm .bm-t, .bmm .bm-tb, .bmm .bm-pt, .bmm .bm-tct, .bmm .bm-stampt, .bmm .bm-qm, .bmm .bm-tb--s { display: none; }
.bmm .bm-ck, .bmm .bm-strike, .bmm .bm-keyr, .bmm .bm-shackle, .bmm .bm-beaml, .bmm .bm-prog, .bmm .bm-trend { stroke-width: 4; }
.bmm .bm-rowr, .bmm .bm-bubr, .bmm .bm-lock, .bmm .bm-col, .bmm .bm-cardr, .bmm .bm-pan, .bmm .bm-node, .bmm .bm-dt { stroke-width: 2.2; }
.bmm .bm-track, .bmm .bm-div, .bmm .bm-post, .bmm .bm-pole { stroke-width: 3; }
.bmm.bm--leave .bm__svg { transform: translateX(34%); }   /* labels are hidden in the mini: centre the path */
html body.page-blog .bloglist > .grid > .card--article { padding-top: 124px; }
html body.page-blog .bloglist > .grid > .card--article::before {
  content: ""; position: absolute; top: 22px; left: 24px; width: 96px; height: 84px; border-radius: 14px; border: 1px dashed var(--line);
}
html body.page-blog .bloglist > .grid > .card--article.has-bmm::before { display: none; }
@media (min-width: 761px) {
  html body.page-blog .bloglist > .grid > .card--article:first-child:nth-last-child(3n+1) { padding-top: 128px; }
  html body.page-blog .bloglist > .grid > .card--article:first-child:nth-last-child(3n+1) .bmm,
  html body.page-blog .bloglist > .grid > .card--article:first-child:nth-last-child(3n+1)::before { top: 26px; left: 32px; }
}
@media (max-width: 760px) {
  .bmm, html body.page-blog .bloglist > .grid > .card--article::before { top: 18px; left: 20px; width: 84px; height: 74px; }
  html body.page-blog .bloglist > .grid > .card--article { padding-top: 106px; }
}

/* G1 r7: header motifs of the two new guides */
.bm--paid .bm-nd { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.2; }
.bm--paid .bm-nd--you { fill: color-mix(in srgb, var(--ember) 12%, transparent); stroke: var(--ember); }
.bm--paid .bm-flow { fill: none; stroke: var(--ember); stroke-width: 2; stroke-linecap: round; }
.bm--paid .bm-head { fill: var(--ember); }
.bm--paid .bm-pl { fill: color-mix(in srgb, var(--paper-ink) 20%, var(--paper)); }
.bm--paid .bm-rule { fill: color-mix(in srgb, var(--paper-ink) 30%, var(--paper)); }
.bm--paid .bm-pt { font: 500 9.5px var(--f-body); fill: color-mix(in srgb, var(--paper-ink) 82%, var(--paper)); }
.bm--paid .bm-pt--h, .bm--paid .bm-pt--k { font-weight: 700; fill: var(--paper-ink); }
.bm--paid .bm-hl { fill: color-mix(in srgb, var(--ember-lo) 50%, transparent); }
.bm--paid .bm-okc { fill: var(--sage); }
.bm--tail .bm-bar { stroke-width: 1.2; }
.bm--tail .bm-bar--term { fill: color-mix(in srgb, var(--ember-lo) 42%, transparent); stroke: var(--ember-lo); }
.bm--tail .bm-bar--notice { fill: color-mix(in srgb, var(--ember) 20%, transparent); stroke: var(--ember); }
.bm--tail .bm-bar--tail { fill: color-mix(in srgb, var(--stamp) 32%, transparent); stroke: color-mix(in srgb, var(--stamp) 55%, var(--ember)); stroke-dasharray: 3 3; }
.bm--tail .bm-endl { stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.bm--tail .bm-endf { fill: var(--ink); }
.bm--tail .bm-cut { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; }
.bm--tail .bm-okc { fill: var(--sage); }
.bm--tail .bm-tb--s { fill: var(--sage); font-weight: 700; }
/* minis: thicker strokes, like the existing ones */
.bmm .bm-flow, .bmm .bm-cut { stroke-width: 4; }
.bmm .bm-nd, .bmm .bm-bar { stroke-width: 2.2; }
.bmm .bm-endl { stroke-width: 3; }

/* G2 r7: gauge needle in the switch-guide mini */
html.mo .bm--switch.is-armed .g2s-needle { transform: rotate(-62deg); transition: transform 950ms cubic-bezier(.34, 1.35, .64, 1); }
html.mo .bm--switch.is-armed.s1 .g2s-needle { transform: rotate(-22deg); }
html.mo .bm--switch.is-armed.s2 .g2s-needle { transform: rotate(18deg); }
html.mo .bm--switch.is-armed.s3 .g2s-needle { transform: rotate(58deg); }