/* Retirement Systems page. Shared industry layouts come from cpa-accounting-firms.css. */
.page-retirement-systems{
  --hm-tight:28ch;
  --head-gap:clamp(32px,4.3vw,56px);
  --story-gap:clamp(44px,4.2vw,64px);
  --divider-soft:rgba(15,24,34,.07);
  --header-h:114px;
}
.page-retirement-systems main .section{scroll-margin-top:100px;}
.page-retirement-systems main .section + .section:not(.alt){border-top:0;}
.page-retirement-systems main .eyebrow{color:var(--green-ink);}
.page-retirement-systems main .brand-mark{display:inline-flex;align-items:center;margin-right:9px;vertical-align:-3px;}
.page-retirement-systems main .brand-mark img{display:block;width:auto;height:16.5px;}
.page-retirement-systems main .h2{font-size:var(--type-h2);line-height:1.08;letter-spacing:-0.018em;}
.page-retirement-systems main .h3{font-size:clamp(23px,max(calc(19.87px + .32vw),1.7vw),25px);line-height:1.15;letter-spacing:0;}
.page-retirement-systems main .lead{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--muted);}
.page-retirement-systems main .body-copy{font-size:17px;line-height:1.6;color:var(--muted);}
.page-retirement-systems main .industry-intro{display:block;margin-bottom:var(--head-gap);}
.page-retirement-systems main .industry-intro__col{width:80%;margin-inline:auto;text-align:center;}
.page-retirement-systems main .industry-intro .h2{font-weight:400; width:100%;max-inline-size:none;margin-inline:auto;text-wrap:balance;word-break:normal;overflow-wrap:normal;hyphens:none;}
.page-retirement-systems main .industry-intro p{width:100%;max-inline-size:none;margin:clamp(16px,1.6vw,20px) auto 0;color:var(--muted);font-size:clamp(17px,1.2vw,19px);font-weight:400;line-height:1.55;text-wrap:pretty;}
.page-retirement-systems main .industry-intro p + p{margin-top:12px;}
.page-retirement-systems main .h2 .nb{white-space:nowrap;}
.page-retirement-systems main .lucide{display:block;flex:none;fill:none;stroke:currentColor;stroke-width:var(--icon-stroke,1.75);stroke-linecap:round;stroke-linejoin:round;}
.page-retirement-systems main .ico{display:flex;align-items:center;justify-content:center;width:41px;height:41px;flex:none;border:1px solid rgba(15,24,34,.08);border-radius:12px;background:rgba(255,255,255,.72);color:var(--muted-2);}
.page-retirement-systems main .ico .lucide{width:20px;height:20px;--icon-stroke:1.75;}
.page-retirement-systems main .m-visual-stage{position:relative;container:canvas / inline-size;padding:10px;border:1px solid rgba(0,129,74,.08);border-radius:16px;background:radial-gradient(circle at 12% 18%,rgba(0,171,82,.07),transparent 34%),radial-gradient(circle at 88% 82%,rgba(242,228,0,.05),transparent 32%),linear-gradient(135deg,#f1f8f4 0%,#f7faf8 48%,#fffceb 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.6);}
.page-retirement-systems main .industry-stat:last-child{grid-column:auto;justify-self:stretch;}
@media (max-width:767px){.page-retirement-systems main .industry-intro__col{width:100%;}}
/* LIGHT A — faint pale-green chapter environment (Industry Reality). Mint atmosphere top-right, restrained lime warmth
   bottom-left, over a pale-green -> white base, so the chapter reads
   as its own environment at full-page scale without becoming a
   tinted section. */
.m-light-a{
  background:
    radial-gradient(72% 76% at 84% 4%, rgba(0,171,82,.09), transparent 62%),
    radial-gradient(48% 52% at 6% 96%, rgba(172,212,0,.04), transparent 68%),
    linear-gradient(180deg, #F7FBF8 0%, #FBFDFC 58%, #FFFFFF 100%);
}
/* TY2026 is a context chapter, not the primary narrative — its own
   section padding is a touch quieter than the shared --gap rhythm. */
.section.m-light-a{padding:clamp(80px,9vw,104px) 0 clamp(76px,8vw,100px);}
/* OPERATING CHANGE — page-specific chapter environment, tuned to the
   Industry-family "felt rather than seen" philosophy: white -> very
   subtle mint -> near-white -> restrained lime/mint -> white. ONE
   atmosphere for the whole chapter; the visual stages stay the
   foreground objects against it. */
.op-change-env{
  --warn:#6E5C00;--warn-ink:#B98900; /* IRIS filing warning palette (product UI only) */
  background:
    radial-gradient(50% 24% at 92% 18%, rgba(0,171,82,.04), transparent 70%),
    radial-gradient(44% 22% at 7% 75%, rgba(172,212,0,.025), transparent 70%),
    linear-gradient(180deg, #FFFFFF 0%, #F8FBF9 18%, #FBFDFC 42%, #F7FAF8 72%, #FFFFFF 100%);
}
/* Reporting Operation is the primary long-form chapter — a slightly
   more generous entrance than context chapters, and a tighter exit
   after DMF so the run into the closing CTA doesn't feel like a gap. */
.section.op-change-env{padding:clamp(96px,10vw,124px) 0 clamp(80px,9vw,104px);}
/* CHAPTER SEAM — the approved light-chapter division from the CPA
   Industry page. Where two long LIGHT narrative chapters meet and both
   backgrounds resolve back to white (TY2026 -> Reporting Operation), a
   single 1px hairline marks the start of the incoming chapter: page-grid
   width, faded out at both ends, neutral ink with only a trace of Zenwork
   green at the centre. No label, icon, dot, shadow or geometry.
   Visual division only: it is an absolutely positioned pseudo-element on
   the section's top edge, so it takes no layout height and no padding or
   gradient anywhere is touched. Not used above the dark stats band, the
   dark closing CTA, inside the steps or above the DMF capability. */
.op-change-env{position:relative;}
.op-change-env::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  width:min(calc(100% - (var(--edge) * 2)), var(--maxw));margin-inline:auto;
  pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(15,24,34,.045) 14%,rgba(0,129,74,.11) 50%,rgba(15,24,34,.045) 86%,transparent 100%);
}

/* Shared white inner surface — one class reused by every Reporting
   Operation illustration (Steps 01/02/03) instead of four bespoke
   card treatments, so the family reads as one visual system:
   gradient stage -> white surface -> the artifact itself. Step 04's
   .wf record already serves this role natively and keeps its own
   styling; this class is not applied there. */
.m-inner-surface{
  background:rgba(255,255,255,.94);
  border:1px solid rgba(15,24,34,.07);
  border-radius:14px;
  box-shadow:0 1px 2px rgba(15,24,34,.025);
}

.page-retirement-systems .first-fold{display:block;}

/* ============================================================
   INDUSTRY STATS BAND — Industry-page proof rail, restored to its
   original approved treatment (deep-green band, icon + value +
   descriptor, Rowan metric scale, Hanken label scale). Only the
   content differs from CPA: four Retirement values instead of five.
   The band begins directly with the metric rail (no label) and is the
   opening trust layer of the first fold — the slot CPA gives its
   customer-logo row.
   ============================================================ */
.page-retirement-systems .industry-stats{
  flex:0 0 auto;
  position:relative;overflow:hidden;padding:clamp(28px,3vw,40px) 0;
  background:
    radial-gradient(70% 170% at 4% 50%, rgba(0,171,82,.22), transparent 64%),
    radial-gradient(60% 160% at 50% 130%, rgba(0,171,82,.12), transparent 66%),
    radial-gradient(70% 170% at 96% 50%, rgba(172,212,0,.16), transparent 64%),
    radial-gradient(45% 100% at 50% -20%, rgba(242,228,0,.05), transparent 62%),
    var(--green-deep);
}
.page-retirement-systems .industry-stats .wrap{position:relative;z-index:1;container:stats / inline-size;}
/* ---------- stats rail: four equal values ----------
   Same band, icon surface, value scale and label scale as the shared
   Industry family.
     < 600   2 + 2 (even split, no spanning last item needed)
     600-959 four columns, icon above value (vertical clusters)
     >= 960  four horizontal clusters in one calm row              */
.page-retirement-systems .industry-stats__rail{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  justify-content:normal;column-gap:20px;row-gap:22px;
}
.page-retirement-systems .industry-stat{display:flex;align-items:center;gap:12px;min-width:0;text-align:left;}
.page-retirement-systems .industry-stat__ico{
  width:32px;height:32px;flex:none;border-radius:var(--r-md);
  background:rgba(172,212,0,.09);border:1px solid rgba(172,212,0,.13);
  display:flex;align-items:center;justify-content:center;color:var(--lime);
}
.page-retirement-systems .industry-stat__ico .lucide{width:17px;height:17px;--icon-stroke:1.85;}
.page-retirement-systems .industry-stat__val{
  display:block;font-family:var(--serif);font-weight:400;white-space:nowrap;
  font-size:clamp(22px,7cqi,24px);line-height:1.08;letter-spacing:0;color:var(--on-dark);
}
.page-retirement-systems .industry-stat__lbl{display:block;font-size:12.5px;line-height:1.35;color:var(--on-dark-muted);margin-top:3px;}
@container stats (width >= 600px){
  .page-retirement-systems .industry-stats__rail{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:16px;row-gap:26px;}
  .page-retirement-systems .industry-stat{flex-direction:column;justify-content:flex-start;gap:12px;text-align:center;}
  .page-retirement-systems .industry-stat__ico{width:35px;height:35px;}
  .page-retirement-systems .industry-stat__ico .lucide{width:18.5px;height:18.5px;}
  .page-retirement-systems .industry-stat__val{font-size:clamp(22px,3.3cqi,26px);}
}
@container stats (width >= 960px){
  .page-retirement-systems .industry-stats__rail{display:flex;justify-content:space-between;column-gap:24px;}
  .page-retirement-systems .industry-stat{flex-direction:row;gap:14px;text-align:left;}
  .page-retirement-systems .industry-stat__val{font-size:clamp(24px,1.9vw,29px);}
}




/* ============================================================
   WORKFLOW ARTIFACTS — .wf surface for Steps 03 and 04 only.
   Step 01 uses rt-xform. Step 02 uses rt-geo. Step 03 uses
   rt-sub. Step 04 uses this .wf base for the history record.
   ============================================================ */
.wf{
  --px:clamp(14px,4.4cqi,22px);
  background:var(--paper);border:1px solid rgba(15,24,34,.11);border-radius:11px;
  overflow:hidden;color:var(--ink);font-family:var(--sans);
  box-shadow:0 1px 0 rgba(15,24,34,.03);
}
.wf-row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:6px 16px;min-height:46px;padding:11px var(--px);
}
.wf-row + .wf-row{border-top:1px solid var(--line);}
.wf-row--head{
  min-height:0;padding-top:13px;padding-bottom:9px;
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2);
}
.wf-row--head + .wf-row{border-top-color:var(--line-2);}
.wf-name{font-size:15px;font-weight:500;color:var(--ink);white-space:nowrap;}
.wf-state{display:inline-flex;align-items:center;gap:7px;margin-left:auto;font-size:13.5px;font-weight:600;white-space:nowrap;}
.wf-state .lucide{width:14px;height:14px;--icon-stroke:2;}
.wf-state--ok{color:var(--green-ink);}
.wf-state--progress{color:var(--muted);font-weight:500;}
.wf-state--active{color:var(--ink);font-weight:500;}
.wf-state--wait{color:var(--warn);}
.wf-row--exception{
  background:linear-gradient(90deg,rgba(242,228,0,.075),rgba(242,228,0,.02) 70%);
  box-shadow:inset 2px 0 0 rgba(185,137,0,.55);
}
.wf-flag{display:inline-flex;align-items:center;gap:9px;}
.wf-flag .lucide{width:15px;height:15px;--icon-stroke:2;color:var(--warn-ink);}
.wf-count{font-size:13.5px;color:var(--muted);margin-left:auto;white-space:nowrap;}

/* ============================================================
   RETIREMENT STEP 01 — 1220 → Zenwork → IRIS-ready 1099-R
   Document-transformation: source file, conversion node, output.
   Step 01 shows conversion only — not final submission state.
   Three real stages at comparable visual weight, joined by ONE
   consistent directional connector component (line + arrowhead),
   used identically for both segments — not two disconnected pale
   lines flanking a small pill.
   ============================================================ */
.rt-xform{
  display:flex;align-items:center;justify-content:center;gap:clamp(6px,1.4cqi,14px);
  padding:clamp(14px,2.2cqi,24px) clamp(10px,1.6cqi,18px);
}
.rt-xform-doc{
  flex:1 1 90px;max-width:250px;background:var(--paper);border:1px solid var(--line);
  border-radius:12px;padding:clamp(14px,3cqi,28px) clamp(10px,2.4cqi,22px);text-align:center;min-width:0;
}
.rt-xform-doc--out{
  border-color:rgba(0,129,74,.22);
  background:linear-gradient(145deg,rgba(0,171,82,.055),#FFFFFF);
}
.rt-xform-doc__tag{
  display:block;font-size:clamp(9.5px,2.4cqi,18px);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:8px;
}
.rt-xform-doc__tag--ready{color:var(--green-ink);}
.rt-xform-doc__form{
  display:block;font-family:var(--serif);font-size:clamp(21px,4.6cqi,20px);white-space:nowrap;
  line-height:1;letter-spacing:0;color:var(--ink);
}
.rt-xform-doc__sub{display:block;font-size:clamp(9.5px,2cqi,11.5px);color:var(--muted);margin-top:6px;}
.rt-xform-doc__lines{margin-top:clamp(10px,1.6cqi,16px);display:flex;flex-direction:column;gap:6px;}
.rt-xform-doc__line{height:4px;border-radius:2px;background:var(--line);display:block;}
.rt-xform-doc__line--short{width:62%;}
.rt-xform-doc__iris{
  display:inline-flex;align-items:center;gap:4px;font-size:clamp(9.5px,2cqi,11px);white-space:nowrap;
  font-weight:600;color:var(--on-dark);background:var(--green-deep);
  border-radius:999px;padding:4px 9px;margin-top:clamp(10px,1.6cqi,16px);
}
/* Zenwork conversion node — a real third stage, sized and weighted
   like the source/output cards either side of it, not a small pill
   sitting on a connector line. Names the conversion specifically
   (1220 -> IRIS) so this diagram adds detail the hero doesn't. A
   realistic min-width protects "Zenwork" from ever overflowing —
   the doc cards either side shrink first, since a big single number
   tolerates a smaller font more gracefully than this multi-line node. */
.rt-xform-node{
  flex:0.85 1 96px;max-width:150px;min-width:96px;
  background:var(--green-deep);border-radius:14px;
  padding:clamp(12px,2.6cqi,24px) clamp(8px,1.6cqi,15px);
  text-align:center;color:var(--on-dark);
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.rt-xform-node__brand{font-family:var(--serif);font-size:clamp(14.5px,3.4cqi,19px);color:var(--on-dark);line-height:1.1;white-space:nowrap;}
.rt-xform-node__convert{
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  font-family:var(--sans);font-size:clamp(10px,2.6cqi,11.5px);font-weight:700;letter-spacing:.01em;
  color:var(--lime);background:rgba(255,255,255,.09);border-radius:999px;
  padding:5px 9px;white-space:nowrap;
}
.rt-xform-node__convert .lucide{width:10px;height:10px;--icon-stroke:2.4;flex:none;}
.rt-xform-node__sub{
  font-family:var(--sans);font-size:clamp(8.5px,2cqi,10px);font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--on-dark-muted);
}
/* Directional connector — one shared component (thin neutral line +
   a small open green chevron) reused identically for both segments,
   matching the hero illustration's own connector grammar exactly:
   a quiet stroke line, then two open rounded strokes forming a ">" —
   never a filled triangle. */
.rt-xform-connector{flex:1 1 30px;display:flex;align-items:center;min-width:18px;}
.rt-xform-connector__line{flex:1;height:1.5px;background:var(--line-2);}
.rt-xform-connector__head{flex:none;width:7px;height:7px;overflow:visible;}
/* Narrow: recompose vertically, source -> conversion -> output, with
   the same connector component rotated to point down so direction
   stays unambiguous. Keyed off the STABLE outer step container
   (not the visual canvas alone), which never dips narrower once the
   step's own two-column split is active — see Step 02 for why this
   matters. */
@container step (width < 480px){
  .rt-xform{flex-direction:column;align-items:stretch;}
  .rt-xform-doc,.rt-xform-node{max-width:340px;width:100%;margin-inline:auto;}
  .rt-xform-node{flex-basis:auto;}
  .rt-xform-connector{flex-direction:column;width:auto;height:26px;align-self:center;min-width:0;}
  .rt-xform-connector__line{width:1.5px;height:auto;}
  .rt-xform-connector__head{transform:rotate(90deg);}
}

/* ============================================================
   RETIREMENT STEP 02 — geographic/state visual
   Abstract state-field grid representing many jurisdictions,
   one active reporting location, branching to three filing
   routes: State Filing / CF/SF / Subject to withholding.
   ============================================================ */
/* rt-geo is the clean white inner illustration surface sitting inside
   the shared .m-visual-stage gradient (same stage treatment as every
   other workflow illustration — no bespoke stage padding here).
   Surface look (background/border/radius/shadow) comes from the
   shared .m-inner-surface class; this rule keeps only its own layout. */
.rt-geo{
  padding:clamp(18px,2cqi,24px);
}
.rt-geo-field__lbl{
  display:block;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px;
}
/* Routing row: the SVG and the destination stack share ONE row so the
   branch endpoints and the card edges sit directly adjacent — no
   flex gap, no dead space between the drawing and the cards. */
.rt-geo-routing-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:0;align-items:stretch;
}
/* Crop window used only on narrow canvases (see container query below)
   to show just the recipient-field portion of the merged SVG. At
   default sizes it simply holds the full diagram. */
.rt-geo-map-wrap{overflow:visible;display:flex;align-items:center;}
/* ONE continuous SVG: recipient-record field, active record, trunk,
   branch node and all three branch routes share a single coordinate
   space, so the connector can never separate from the field again.
   viewBox 0 0 220 72 — records occupy x 0-102, the trunk starts
   exactly at the active record's right edge (x=102) with no gap,
   runs to the shared branch node (x=150), and three routes fan out
   from that same node all the way to x=220 — the SVG's own right
   edge — so they terminate flush against the routing row's second
   column rather than stopping short of it. "meet" scaling keeps the
   geometry proportional at every width; the SVG fills the full
   routing column so nothing is clipped or capped short. */
.rt-geo-routing-map{
  display:block;width:100%;aspect-ratio:220/102;overflow:visible;
}
.rt-geo-node{fill:rgba(15,24,34,.09);}
.rt-geo-node--act{fill:var(--green);}
.rt-geo-trunk{stroke:var(--green);stroke-width:1.5;}
.rt-geo-branchnode{fill:var(--green);}
.rt-geo-branch--state{stroke:rgba(0,129,74,.4);stroke-width:1.5;fill:none;}
.rt-geo-branch--cfsf{stroke:rgba(172,212,0,.75);stroke-width:1.5;}
.rt-geo-branch--with{stroke:rgba(15,24,34,.18);stroke-width:1.5;fill:none;}
/* Simple mobile connector node — recipient field to routes, stacked.
   Hidden by default; shown only in the narrow recomposition below,
   where it is the single, visibly continuous field->routes link. */
.rt-geo-mnode{display:none;}
/* Route destinations — three EQUAL tracks with no gap, so each
   card's vertical centre lands at a fixed fraction of the row's
   total height (1/6, 1/2, 5/6) that matches the branch endpoints'
   fixed fractions of the SVG's own height (12, 36, 60 of 72). */
.rt-geo-routes{
  display:grid;grid-template-rows:repeat(3,1fr);gap:0;align-items:center;
}
.rt-geo-dest{
  display:flex;align-items:center;gap:8px;background:#FFFFFF;
  border:1px solid rgba(15,24,34,.075);border-radius:9px;
  padding:10px 14px;
}
.rt-geo-dest__dot{width:8px;height:8px;border-radius:999px;flex:none;}
.rt-geo-dest--state .rt-geo-dest__dot{background:var(--green);}
.rt-geo-dest--cfsf  .rt-geo-dest__dot{background:var(--lime);}
.rt-geo-dest--with  .rt-geo-dest__dot{background:var(--paper);box-shadow:inset 0 0 0 2px var(--muted-2);}
.rt-geo-dest__lbl{display:block;font-size:14.5px;font-weight:600;color:var(--ink);}
.rt-geo-dest__sub{display:block;font-size:12.5px;line-height:1.35;color:var(--muted);margin-top:1px;}
/* Narrow: recompose vertically — field, a short connector node, then
   destinations — so the recipient -> routing -> outcome relationship
   still reads on mobile instead of squeezing the desktop diagram down.
   The SAME merged SVG is reused (single source of geometry): the
   crop window shows only its recipient-field portion (0-102 of 220
   units, i.e. the left 46.36%, now square since the field is 102x102
   in the taller viewBox) by giving the svg 215.69% width inside an
   overflow-hidden window — the trunk/branches are clipped away rather
   than duplicated, and the vertical mnode connector below supplies
   the mobile-appropriate, still-continuous link into the stacked
   destination cards.

   This triggers off the STABLE outer "step" container, not the
   "canvas" (.m-visual-stage) container alone. Canvas width is NOT
   monotonic with viewport: once the outer step's own two-column
   split activates, canvas (the visual's share of that split) can be
   narrower than it was one step BELOW the split — so a canvas-only
   threshold makes wider viewports (e.g. 1024) fall into the mobile
   layout while a narrower one (768, still single-column, canvas at
   full stacked width) stays horizontal. Keying off "step" avoids
   this entirely: step width only ever grows with viewport, so once
   the diagram is horizontal it stays horizontal at every wider size. */
@container step (width < 480px){
  .rt-geo-routing-row{grid-template-columns:1fr;gap:0;}
  .rt-geo-map-wrap{
    width:100%;max-width:180px;aspect-ratio:1;
    overflow:hidden;margin-inline:auto;
  }
  .rt-geo-routing-map{width:215.69%;}
  .rt-geo-routing{display:none;}
  .rt-geo-mnode{
    display:block;position:relative;width:1.5px;height:20px;
    background:rgba(0,129,74,.4);margin:2px auto;
  }
  .rt-geo-mnode::after{
    content:"";position:absolute;left:50%;top:50%;
    width:5px;height:5px;border-radius:999px;background:var(--green);
    transform:translate(-50%,-50%);
  }
}

/* ============================================================
   RETIREMENT STEP 03 — submission batch with rejection/rejoin
   Full batch stream: one form branches down to correction, then
   a real curved connector runs back up and rejoins the main rail
   at a marked point before Filed — attached at both ends, never a
   floating arrow. The rest of the batch is never interrupted.
   ============================================================ */
.rt-sub{padding:clamp(22px,3.4cqi,32px) clamp(20px,3cqi,28px);}
.rt-sub__cap{
  display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:16px;
}
/* 3-column grid: [pre-rejection] [rejection] [post-rejection] */
.rt-sub__grid{display:grid;grid-template-columns:auto auto 1fr;grid-template-rows:auto auto;align-items:center;}
.rt-sub__pre  {grid-column:1;grid-row:1;display:flex;gap:5px;align-items:center;}
.rt-sub__mid  {grid-column:2;grid-row:1;display:flex;align-items:center;padding:0 5px;}
.rt-sub__post {grid-column:3;grid-row:1;display:flex;gap:5px;align-items:center;flex-wrap:nowrap;overflow:hidden;}
/* Batch record squares */
.rt-sub__rec{
  width:16px;height:16px;border-radius:4px;background:var(--green);flex:none;
  transition:background .15s;
}
.rt-sub__rec--rej{
  background:transparent;
  border:2px dashed var(--warn-ink);
  box-shadow:0 0 0 2px rgba(185,137,0,.12);
}
.rt-sub__more{color:var(--muted-2);font-size:13px;font-weight:700;flex:none;margin:0 1px;}
.rt-sub__line{flex:1;min-width:10px;height:1.5px;background:var(--line-2);}
.rt-sub__line--short{flex:0 1 16px;min-width:8px;}
/* Rejoin point on the main rail — the corrected record re-enters
   here, before Filed. The rejoin curve below targets this dot. */
.rt-sub__rejoin-dot{
  width:8px;height:8px;border-radius:999px;background:var(--green);flex:none;
  box-shadow:0 0 0 3px rgba(0,171,82,.14);
}
.rt-sub__filed{
  display:inline-flex;align-items:center;gap:7px;background:var(--paper);
  border:1px solid var(--line);border-radius:10px;padding:8px 14px;
  font-size:13.5px;font-weight:600;color:var(--green-ink);white-space:nowrap;flex:none;
}
.rt-sub__fdot{width:8px;height:8px;border-radius:999px;background:var(--green);flex:none;}
/* Row 2: branch drop and correction */
.rt-sub__pre-gap {grid-column:1;grid-row:2;}
.rt-sub__drop-col{grid-column:2;grid-row:2;display:flex;flex-direction:column;align-items:center;padding:0 5px;}
.rt-sub__drop{
  width:1.5px;height:clamp(16px,2cqi,22px);
  background:linear-gradient(to bottom,var(--warn-ink),rgba(185,137,0,.4));
}
/* Small open chevron so the branch-down direction is explicit,
   matching the open-chevron language used in Visuals 01 and 02 —
   never a filled triangle. */
.rt-sub__drop-head{width:7px;height:7px;flex:none;overflow:visible;margin-top:-1px;}
.rt-sub__branch-row{
  grid-column:3;grid-row:2;
  display:flex;align-items:center;gap:10px;
}
.rt-sub__correction{
  display:flex;align-items:flex-start;gap:9px;background:#FCF5DC;
  border-radius:10px;padding:12px 16px;flex:none;
}
.rt-sub__correction .lucide{width:14px;height:14px;--icon-stroke:2;color:var(--warn-ink);flex:none;margin-top:1px;}
.rt-sub__correction b{display:block;font-size:14px;font-weight:700;color:#7A5B00;}
.rt-sub__correction span{display:block;font-size:12.5px;line-height:1.3;color:var(--muted-2);margin-top:2px;}
/* Rejoin curve — attached at the correction card's own top-right
   edge (not floating) and drawn all the way to the rejoin dot on
   the main rail, with a solid arrowhead. */
.rt-sub__rejoin{flex:1;min-width:44px;align-self:stretch;}
.rt-sub__rejoin svg{display:block;width:100%;height:100%;}
/* Footer */
.rt-sub__foot{
  display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);margin-top:20px;
}
/* Narrow: recompose vertically in the CORRECT narrative order —
   records -> rejected -> branch down -> correction + rejoin ->
   continuing records + Filed — using CSS order (DOM stays in its
   original, grid-appropriate sequence). The rejoin is NEVER hidden
   here: it stays a real connector, just re-oriented to point down
   into the continuing stream instead of up-and-across, since the
   narrative now reads top-to-bottom. Keyed off the stable outer
   "step" container so this never inverts against Visuals 01/02. */
@container step (width < 480px){
  .rt-sub__grid{display:flex;flex-direction:column;align-items:stretch;gap:10px;}
  .rt-sub__pre{order:1;display:flex;flex-wrap:wrap;gap:4px;align-items:center;}
  .rt-sub__mid{order:2;display:flex;flex-wrap:wrap;gap:4px;align-items:center;}
  .rt-sub__pre-gap{display:none;}
  .rt-sub__drop-col{order:3;flex-direction:row;justify-content:flex-start;padding:0;}
  .rt-sub__drop{width:clamp(16px,4.5cqi,22px);height:1.5px;background:linear-gradient(to right,var(--warn-ink),rgba(185,137,0,.4));}
  .rt-sub__drop-head{transform:rotate(-90deg);margin-top:0;}
  .rt-sub__branch-row{order:4;flex-direction:column;align-items:stretch;gap:2px;}
  .rt-sub__rejoin{
    width:100%;min-width:0;height:auto;align-self:center;
    display:flex;flex-direction:column;align-items:center;gap:1px;padding:2px 0;
  }
  .rt-sub__rejoin svg{display:none;}
  .rt-sub__rejoin::before{content:"";display:block;width:1.5px;height:14px;background:var(--green-ink);opacity:.75;}
  /* Open chevron via two rotated borders — no fill, matching the
     same restrained grammar as the SVG chevrons elsewhere. */
  .rt-sub__rejoin::after{
    content:"";display:block;width:6px;height:6px;
    border-right:1.5px solid var(--green-ink);border-bottom:1.5px solid var(--green-ink);
    border-radius:0 0 1px 0;opacity:.75;
    transform:rotate(45deg);margin-top:-3px;
  }
  .rt-sub__post{order:5;display:flex;flex-wrap:wrap;gap:4px;align-items:center;}
}

/* ============================================================
   TY2026 — the IRIS rebuild the in-house team faces vs. the
   infrastructure Zenwork already operates. A2A is dominant.
   ============================================================ */
.ty2026-shell{container:ty2026 / inline-size;}
.operation-shell{container:operation / inline-size;}
/* ONE shared story stage: a quiet outer branded atmosphere containing
   two nested surfaces — the light rebuild map and the deep-green
   Zenwork answer — so the comparison reads as a single environment
   rather than two unrelated cards. */
.rebuild-stage{
  position:relative;margin-top:0;
  background:
    radial-gradient(120% 55% at 50% -4%,rgba(87,101,96,.105) 0%,rgba(138,150,143,.055) 42%,transparent 72%),
    radial-gradient(100% 40% at 55% 30%,rgba(185,137,0,.055) 0%,rgba(242,228,0,.022) 46%,transparent 74%),
    radial-gradient(130% 62% at 50% 88%,rgba(0,171,82,.14) 0%,rgba(0,171,82,.065) 42%,rgba(172,212,0,.022) 62%,transparent 80%),
    linear-gradient(180deg,#F2F4F2 0%,#F7F7F3 28%,#FCFCFA 44%,#fff 51%,#F7FBF8 61%,#EFF8F2 78%,#E8F6ED 100%);
  border:1px solid rgba(0,129,74,.09);border-radius:22px;
  padding:clamp(18px,2.2vw,28px);
  box-shadow:inset 0 1px rgba(255,255,255,.6);
}
.rebuild-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start;}
.rebuild-transition{
  position:static;width:20px;height:32px;margin:0 auto;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.rebuild-transition svg{width:100%;height:100%;overflow:visible;}
.rebuild-transition__h{display:none;}
.rebuild-transition__v{display:block;}
.rebuild-map{
  position:relative;
  background:linear-gradient(180deg,rgba(247,248,246,.96),rgba(250,250,248,.96));
  border:1px solid rgba(15,24,34,.10);border-radius:16px;
  padding:clamp(22px,2.4vw,32px);
  box-shadow:0 1px 2px rgba(15,24,34,.02);
}
.rebuild-map__lbl{display:block;font-size:16px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#727D78;margin-bottom:19px;}
.rebuild-map__tiers{display:flex;flex-direction:column;}
.rebuild-map__row{display:flex;gap:12px;}
@container ty2026 (width < 460px){.rebuild-map__row{flex-direction:column;gap:10px;}}
.rebuild-map__node{
  flex:1;min-width:0;display:flex;align-items:center;gap:12px;
  background:rgba(246,247,245,.92);border:1px solid rgba(15,24,34,.09);border-radius:9px;padding:12px 14px;
  box-shadow:0 1px 2px rgba(15,24,34,.02);
}
.rebuild-map__node .ico{width:26px;height:26px;border-radius:8px;box-shadow:none;background:rgba(255,255,255,.72);border-color:rgba(15,24,34,.08);color:var(--muted-2);flex:none;}
.rebuild-map__node .ico .lucide{width:14px;height:14px;--icon-stroke:1.7;}
.rebuild-map__node-text{min-width:0;}
.rebuild-map__node-text b{display:block;font-size:15px;font-weight:600;letter-spacing:0;color:var(--ink);}
.rebuild-map__node-text em{display:block;font-style:normal;font-size:13px;line-height:1.4;color:var(--muted);margin-top:2px;}
.rebuild-map__num{margin-left:auto;flex:none;align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--muted-2);padding-top:2px;}
.rebuild-map__node--primary{
  background:linear-gradient(145deg,rgba(242,228,0,.08),rgba(185,137,0,.035)),#FFFDF7;
  border:1.5px solid rgba(185,137,0,.28);border-radius:11px;padding:18px 20px;
}
.rebuild-map__node--primary .ico{width:40px;height:40px;border-radius:10px;background:#fff;border-color:rgba(185,137,0,.22);color:var(--warn-ink);}
.rebuild-map__node--primary .ico .lucide{width:20px;height:20px;--icon-stroke:1.75;}
.rebuild-map__node--primary .rebuild-map__node-text b{font-size:18px;letter-spacing:0;color:var(--ink);}
.rebuild-map__node--primary .rebuild-map__node-text em{font-size:13.5px;color:var(--muted);}
.rebuild-map__node--primary .rebuild-map__num{color:var(--warn-ink);}
.rebuild-map__connector{height:20px;flex:none;display:flex;align-items:center;justify-content:center;}
.rebuild-map__connector svg{width:1.5px;height:14px;}
.rebuild-map__connector svg line{stroke:rgba(138,150,143,.34);stroke-width:1.5px;stroke-dasharray:3 4;}
.rebuild-answer{
  background:radial-gradient(80% 70% at 100% 0%,rgba(172,212,0,.10),transparent 65%),var(--green-deep);
  border:1px solid rgba(172,212,0,.13);border-radius:16px;
  padding:clamp(30px,2.7vw,38px) clamp(27px,2.5vw,35px);
  display:flex;flex-direction:column;justify-content:center;
  box-shadow:0 24px 60px -38px rgba(12,51,30,.55);
}
.rebuild-answer h3{font-family:var(--serif);font-weight:400;font-size:clamp(23px,1.9vw,27px);line-height:1.18;color:var(--on-dark);max-inline-size:20ch;}
.rebuild-answer__flow{margin-top:26px;display:flex;flex-direction:column;align-items:center;text-align:center;}
.rebuild-answer__step{display:flex;align-items:center;gap:9px;font-size:13.5px;line-height:1.4;color:var(--on-dark-muted);}
.rebuild-answer__step .lucide{width:16px;height:16px;--icon-stroke:1.7;flex:none;color:var(--on-dark-muted);}
.rebuild-answer__rule{display:block;width:1px;height:18px;background:rgba(234,243,237,.28);margin:12px 0;}
.rebuild-answer__core{
  width:100%;background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(172,212,0,.035));border:1px solid rgba(172,212,0,.42);
  border-radius:12px;padding:24px 18px;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  box-shadow:inset 0 1px rgba(255,255,255,.04);
}
.rebuild-answer__core b{font-family:var(--serif);font-size:clamp(28px,2.8vw,35px);line-height:1;letter-spacing:0;color:#fff;}
.rebuild-answer__core span{font-size:clamp(15px,1.3vw,17px);font-weight:600;line-height:1.2;letter-spacing:0;color:var(--lime);}
.rebuild-answer__result{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;line-height:1.4;color:#fff;}
.rebuild-answer__result .lucide{width:17px;height:17px;--icon-stroke:1.9;flex:none;color:#3ECB7F;}
.rebuild-answer__foot{display:block;width:100%;height:1px;background:rgba(234,243,237,.06);margin:20px 0 15px;}
.rebuild-answer__note{font-size:13.5px;line-height:1.5;color:var(--on-dark-muted);}
.rebuild-summary{
  max-width:52ch;margin:clamp(20px,2.2vw,28px) auto 0;text-align:center;
  font-family:var(--serif);font-size:clamp(19px,1.55vw,22px);line-height:1.38;letter-spacing:0;color:var(--ink);
}
@container ty2026 (width >= 860px){
  .rebuild-stage{
    background:
      radial-gradient(55% 120% at -4% 50%,rgba(87,101,96,.105) 0%,rgba(138,150,143,.055) 42%,transparent 72%),
      radial-gradient(40% 100% at 30% 55%,rgba(185,137,0,.055) 0%,rgba(242,228,0,.022) 46%,transparent 74%),
      radial-gradient(62% 130% at 88% 50%,rgba(0,171,82,.14) 0%,rgba(0,171,82,.065) 42%,rgba(172,212,0,.022) 62%,transparent 80%),
      linear-gradient(90deg,#F2F4F2 0%,#F7F7F3 28%,#FCFCFA 44%,#fff 51%,#F7FBF8 61%,#EFF8F2 78%,#E8F6ED 100%);
  }
  .rebuild-grid{
    grid-template-columns:minmax(0,1.5fr) minmax(320px,.82fr);
    gap:clamp(28px,3vw,44px);align-items:stretch;
  }
  .rebuild-map,.rebuild-answer{height:100%;}
  .rebuild-transition{
    --sp:clamp(18px,2.2vw,28px);
    --gp:clamp(28px,3vw,44px);
    --rebuild-content:calc(100% - 2 * var(--sp) - var(--gp));
    --rebuild-answer-w:max(320px,calc(var(--rebuild-content) * .82 / 2.32));
    --rebuild-map-w:calc(var(--rebuild-content) - var(--rebuild-answer-w));
    position:absolute;
    left:calc(var(--sp) + var(--rebuild-map-w) + var(--gp) / 2);
    top:50%;transform:translate(-50%,-50%);
    width:calc(clamp(28px,3vw,44px) - 10px);height:20px;
    margin:0;z-index:2;
  }
  .rebuild-transition__h{display:block;}
  .rebuild-transition__v{display:none;}
}

/* ============================================================
   DMF SIGNAL STRIP — secondary capability within the Reporting
   Operation chapter; quieter than Steps 01–04.
   ============================================================ */
.signal-strip{
  display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:center;
  margin-top:clamp(48px,6vw,72px);padding-top:clamp(32px,4vw,44px);border-top:1px solid var(--line);
}
.signal-strip p{margin-top:14px;max-width:46ch;}
.signal-flow{
  display:flex;align-items:center;gap:10px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px;
}
.signal-node em{display:block;font-style:normal;font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap;}
.signal-node .ico{width:34px;height:34px;border-radius:10px;}
.signal-node .ico .lucide{width:17px;height:17px;}
.signal-node--held .ico{background:#FCF5DC;border-color:rgba(185,137,0,.28);color:var(--warn-ink);box-shadow:none;}
.signal-node--held em{color:var(--warn-ink);font-weight:700;}
.signal-arrow{flex:1;height:1.5px;background:var(--line-2);position:relative;min-width:16px;}
.signal-arrow::after{
  content:"";position:absolute;right:-1px;top:50%;width:6px;height:6px;
  border-right:1.5px solid var(--green-ink);border-bottom:1.5px solid var(--green-ink);
  transform:translateY(-50%) rotate(-45deg);
}
@container operation (width >= 760px){
  .signal-strip{grid-template-columns:1fr 0.85fr;gap:clamp(28px,4vw,56px);}
}