/* =====================================================================
   FTSTECH site extensions, loaded after site.css by every public page.
   Kept out of site.css on purpose: the demo stack's S4/S9 support pages pin
   site.css by Subresource Integrity (tests/test_demo_fence.py), so any change
   there needs the demo stack rebuilt and applied; rules here can change with
   ./deploy.sh alone. Colours come only from the site.css tokens (light and
   dark), never literals.
   ===================================================================== */

/* ---- header: "Case studies" adds a link. A 20px gap (26px in site.css) keeps the widest header (Sign in plus the
   Claridis page's button, ~1060px) inside the 1072px content width, and the CSS-only menu starts below 1120 instead of
   1080. The media block repeats site.css's 1080 block. ---- */
.navlinks{gap:20px}
@media (max-width:1120px){
  .navlinks{display:none;position:absolute;top:66px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;margin-left:0;
    background:var(--paper);border-bottom:1px solid var(--line);padding:8px 0;box-shadow:0 12px 24px -12px var(--shadow-menu);
    max-height:calc(100vh - 66px);max-height:calc(100dvh - 66px);overflow-y:auto}
  .navlinks a{padding:12px 24px}
  .navlinks a.current{box-shadow:inset 3px 0 0 var(--sun)}
  .navlinks .btn{margin:8px 24px;justify-content:center}
  .nav-toggle{display:block}
  .nav-burger{display:inline-flex}
  .nav-toggle:checked ~ .navlinks{display:flex}
}
@media (max-width:560px){
  .navlinks a{padding:12px 18px}
  .navlinks .btn{margin:8px 18px}
}

/* =====================================================================
   Case studies (/case-studies/), generated by tools/case-studies/assemble.py: the about note, the scenario profiles,
   the lifecycle stepper (a row with a rail, or a vertical timeline), the stage sections with their disclosures, the
   icon grids, the mapping rows, the readiness checklist and the before/after drawing. Light bands only; colours from
   site.css tokens; no motion.
   ===================================================================== */
.cs-note{max-width:70ch;border-left:3px solid var(--sun);background:var(--surface);border-radius:0 5px 5px 0;padding:20px 24px;margin-top:28px;border-top:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.cs-note p{font-size:16px;color:var(--text)}
.cs-note p + p{margin-top:10px}
.cs-band{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* line icons (tools/case-studies/icons.py): 24px, stroke only, the colour of the surrounding text */
.cs-i{display:block;width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.cs-tile-ic,.stage-ic,.cs-prof-h .cs-i{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:10px;background:var(--sun-wash);color:var(--sun-text)}
.cs-tile-ic .cs-i,.stage-ic .cs-i{width:24px;height:24px}
.cs-prof-h .cs-i{padding:10px;box-sizing:border-box}

/* scenario: the two companies side by side, and the on-premises line under them */
.cs-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:44px}
.cs-prof{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:22px 24px 24px}
.cs-prof-h{display:flex;align-items:center;gap:14px;margin:0;font-size:18px;font-weight:700;line-height:1.3;color:var(--heading)}
.cs-prof-s{margin:14px 0 0;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--sun-text)}
.cs-prof ul{list-style:none;margin:10px 0 0;padding:0}
.cs-prof li{position:relative;padding-left:16px;margin:.5em 0 0;font-size:15.5px;line-height:1.45;color:var(--text)}
.cs-prof li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--sun-deep)}
.cs-strip{display:flex;align-items:center;gap:14px;margin:20px 0 0;padding:16px 20px;border-radius:6px;background:var(--band);box-shadow:inset 0 0 0 1px var(--band-rule);color:var(--paper-on-ink);font-size:15.5px;line-height:1.5}
.cs-strip .cs-i{color:var(--sun)}
@media (max-width:760px){.cs-pair{grid-template-columns:minmax(0,1fr)}.cs-strip{align-items:flex-start}}

/* lifecycle stepper (assemble.py lifecycle_html): an ordered list of stage cards. Below the breakpoint, a vertical
   timeline: a rail down the left through the numbered badges, the cards to the right, each phase label as a small
   heading at the start of its group. Above it, one row of equal columns and equal-height cards, a horizontal rail
   through the badges with an arrowhead at its right end, and each phase label over its columns with a thin bracket.
   cs-life-n<N> sets the number of stages (3 to 8); cs-ph-<N> the number of stages a phase spans. No motion.
   Breakpoint 1,000 px, by measurement: six columns of 147 px leave the longest word ("configurations", 93 px)
   10 px to spare there, and it touches the card edge at 920 px. */
.cs-life{--n:6;--g:14px;--ph:0px;list-style:none;margin:44px 0 0;padding:0 0 0 48px;position:relative;max-width:760px}
.cs-life-n3{--n:3}.cs-life-n4{--n:4}.cs-life-n5{--n:5}.cs-life-n6{--n:6}.cs-life-n7{--n:7}.cs-life-n8{--n:8}
.cs-ph-1{--span:1}.cs-ph-2{--span:2}.cs-ph-3{--span:3}.cs-ph-4{--span:4}.cs-ph-5{--span:5}.cs-ph-6{--span:6}.cs-ph-7{--span:7}.cs-ph-8{--span:8}
.cs-life::before{content:"";position:absolute;left:15px;top:6px;bottom:8px;width:2px;background:var(--sun-deep)}
.cs-life::after{content:"";position:absolute;left:11px;bottom:0;border-top:9px solid var(--sun-deep);border-left:5px solid transparent;border-right:5px solid transparent}
.cs-life > li{position:relative;margin:0;padding:0 0 16px}
.cs-life > li:last-child{padding-bottom:20px}
.cs-life-ph{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sun-text);margin:0 0 10px}
.cs-life > li + li .cs-life-ph{margin-top:12px}
.cs-life-n{position:absolute;left:-48px;top:12px;z-index:1;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;
  background:var(--band);color:var(--on-band);font:700 13px/1 var(--mono);box-shadow:0 0 0 4px var(--paper-2)}
.cs-life-ph + .cs-life-n{top:auto;margin-top:12px}
.cs-life-card{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:14px 16px 16px;min-width:0}
.cs-life-t{margin:0;display:flex;align-items:center;gap:8px;font-size:16.5px;font-weight:700;line-height:1.3;color:var(--heading)}
.cs-life-t .cs-i{width:22px;height:22px;color:var(--sun-text)}
.cs-life-t a{color:var(--heading);text-decoration:underline;text-decoration-color:var(--sun);text-decoration-thickness:2px;text-underline-offset:4px}
.cs-life-t a:hover{color:var(--sun-text)}
.cs-life-s{margin:4px 0 0;font-size:14px;line-height:1.4;color:var(--muted)}
.cs-life-card ul{list-style:none;margin:12px 0 0;padding:12px 0 0;border-top:1px solid var(--line)}
.cs-life-card li{position:relative;margin:0;padding-left:14px;font-size:14px;line-height:1.4;color:var(--text)}
.cs-life-card li + li{margin-top:6px}
.cs-life-card li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--sun-deep)}
@media (min-width:1000px){
  .cs-life{max-width:none;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));column-gap:var(--g);align-items:stretch;padding:var(--ph) 0 0}
  .cs-life-phased{--ph:58px}
  /* the rail runs from the centre of the first column to the arrowhead at the right edge, through every badge */
  .cs-life::before{left:calc((100% - (var(--n) - 1) * var(--g)) / var(--n) / 2);right:10px;top:calc(var(--ph) + 15px);bottom:auto;width:auto;height:2px}
  .cs-life::after{left:auto;right:0;bottom:auto;top:calc(var(--ph) + 11px);border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:10px solid var(--sun-deep);border-right:0}
  /* each stage spans four rows (badge, title, subtitle, items) shared through subgrid, so the titles, the subtitles
     and the item lists line up across the row and every card ends at the same height */
  .cs-life > li,.cs-life > li:last-child{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;padding:0}
  .cs-life-n,.cs-life-ph + .cs-life-n{grid-row:1;position:relative;left:auto;top:auto;margin:0 auto}
  .cs-life-card{grid-row:2 / span 3;display:grid;grid-template-rows:subgrid;row-gap:0;align-content:start;margin-top:18px;padding:14px 14px 16px}
  .cs-life-card ul{align-self:start}
  /* a phase label sits above its columns, its bottom edge 12px above the rail area, with a bracket under the text */
  .cs-life-ph,.cs-life > li + li .cs-life-ph{position:absolute;left:0;bottom:calc(100% + 10px);width:calc(var(--span) * 100% + (var(--span) - 1) * var(--g));
    margin:0;padding:0 8px 10px;text-align:center;font:600 13.5px/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--text-strong)}
  .cs-life-ph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;border:1px solid var(--line-strong);border-bottom:0;border-radius:3px 3px 0 0}
}
@media (max-width:560px){.cs-life{padding-left:44px}.cs-life-n{left:-44px}}

/* stage sections: icon, number, heading and summary; "You provide" chips beside "How Claridis helps" icon bullets and
   the "does not do" boundaries; the full detail in a disclosure at the foot of the card */
.stage{border:1px solid var(--line);border-radius:6px;background:var(--surface);margin-top:28px;scroll-margin-top:84px}
.stage-h{display:flex;gap:16px;align-items:flex-start;padding:22px 26px 18px;border-bottom:1px solid var(--line)}
.stage-ht{min-width:0}
.stage-h .sn{font-family:var(--mono);font-size:12px;color:var(--sun-text);letter-spacing:.06em}
.stage-h h3{font-size:22px;color:var(--heading);margin-top:2px}
.stage-h p{margin-top:6px;font-size:16px;color:var(--muted);max-width:75ch}
.stage-cols{display:grid;grid-template-columns:1fr 1.4fr}
.stage-col{padding:20px 26px 22px;min-width:0}
.stage-col + .stage-col{border-left:1px solid var(--line)}
.stage-col h4,.cs-more-cols h4{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 12px;font-weight:600}
.cs-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.cs-chips li{margin:0;padding:5px 12px;border:1px solid var(--line);border-radius:14px;background:var(--paper-2);font-size:13.5px;line-height:1.35;color:var(--text)}
.cs-helps,.cs-nots{list-style:none;margin:0;padding:0}
.cs-helps li{display:flex;gap:12px;align-items:flex-start;margin:0;font-size:15px;line-height:1.45;color:var(--text)}
.cs-helps li + li{margin-top:12px}
.cs-helps .cs-i{width:22px;height:22px;color:var(--sun-text)}
.sgroup.not{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line)}
.sgroup.not > p:first-child{margin:0 0 8px}
.sgroup.not .nolabel{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cs-nots li{display:flex;gap:10px;align-items:flex-start;margin:0;font-size:14.5px;line-height:1.45;color:var(--text)}
.cs-nots li + li{margin-top:8px}
.cs-nots .cs-i{width:18px;height:18px;margin-top:2px;color:var(--danger);stroke-width:2}
.cs-tnote{margin-top:14px;font-size:15px;color:var(--muted);max-width:75ch}
.cs-tnote a{color:var(--heading);text-decoration:underline;text-decoration-color:var(--sun-deep);text-underline-offset:3px}
.cs-tnote a:hover{text-decoration-color:var(--heading)}
@media (max-width:860px){.stage-cols{grid-template-columns:1fr}.stage-col + .stage-col{border-left:0;border-top:1px solid var(--line)}}
@media (max-width:560px){.stage-h,.stage-col{padding-left:18px;padding-right:18px}.stage-h{gap:12px}.stage-ic{width:38px;height:38px}}

/* detail disclosures (native <details>, no script): the summary is the control, with a chevron that turns down when
   open; standalone ones are bordered cards, the one at the foot of a stage card is a band across it */
.cs-more{margin-top:16px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.stage > .cs-more{margin:0;border:0;border-top:1px solid var(--line);border-radius:0 0 6px 6px}
.cs-more > summary{display:flex;align-items:center;gap:10px;padding:12px 18px;min-height:44px;box-sizing:border-box;cursor:pointer;list-style:none;
  font-size:14.5px;font-weight:600;color:var(--heading);border-radius:5px}
.stage > .cs-more > summary{padding:12px 26px;border-radius:0 0 5px 5px}
.cs-more > summary::-webkit-details-marker{display:none}
.cs-more > summary::before{content:"";flex:none;width:7px;height:7px;margin:0 3px 0 1px;border-right:2px solid var(--sun-deep);border-bottom:2px solid var(--sun-deep);transform:rotate(-45deg)}
.cs-more[open] > summary::before{transform:rotate(45deg);margin-top:-4px}
.cs-more > summary:hover{background:var(--paper-2)}
.cs-more > summary:hover .cs-more-l{text-decoration:underline;text-decoration-color:var(--sun);text-decoration-thickness:2px;text-underline-offset:4px}
.cs-more > summary:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.cs-more[open] > summary{border-bottom:1px solid var(--line);border-radius:5px 5px 0 0}
.cs-more-b{padding:18px 20px 22px}
.stage > .cs-more > .cs-more-b{padding:20px 26px 24px}
.cs-more-lead{margin:0 0 16px;font-size:15.5px;color:var(--text);max-width:75ch}
.cs-more-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:20px 32px}
.cs-more-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.cs-more-cols ul{margin:0;padding-left:1.1em}
.cs-more-cols li{font-size:14.5px;color:var(--text);margin:.45em 0}
.cs-more-cols li::marker{color:var(--sun-deep)}
.cs-more-cols li > ul{margin-top:.4em;list-style-type:circle}
.cs-more-b > .tablewrap{margin-top:0}
.cs-more .arch-key{margin-top:0}
@media (max-width:860px){.cs-more-cols,.cs-more-three{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.stage > .cs-more > summary,.stage > .cs-more > .cs-more-b{padding-left:18px;padding-right:18px}}

/* icon grids (challenges, outcomes): three across, two below 1,024px, one below 560px */
.cs-tiles{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.cs-tiles li{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:20px 22px 22px}
.cs-tiles h3{margin:14px 0 6px;font-size:17px;line-height:1.3;color:var(--heading)}
.cs-tiles p{margin:0;font-size:14.5px;line-height:1.5;color:var(--muted)}
@media (max-width:1024px){.cs-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cs-tiles{grid-template-columns:minmax(0,1fr)}.cs-tiles li{padding:18px}}

/* mapping rows: acquired element, arrow, target element, note; stacked below 860px with the arrow pointing down */
.cs-map{margin-top:44px;--cols:minmax(0,1fr) 40px minmax(0,1fr) minmax(0,1.3fr)}
.cs-map-head{display:grid;grid-template-columns:var(--cols);column-gap:16px;margin:0 0 8px;padding:0 19px;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cs-map-head span:nth-child(2){grid-column:3}
.cs-map-rows{list-style:none;margin:0;padding:0}
.cs-map-row{display:grid;grid-template-columns:var(--cols);column-gap:16px;align-items:center;margin:0;padding:14px 18px;background:var(--surface);border:1px solid var(--line);border-radius:6px}
.cs-map-row + .cs-map-row{margin-top:10px}
.cs-map-from,.cs-map-to{display:flex;align-items:center;gap:12px;margin:0;font-size:15.5px;font-weight:600;line-height:1.35;color:var(--heading)}
.cs-map-from .cs-i{color:var(--muted)}
.cs-map-to .cs-i{color:var(--sun-text)}
.cs-map-arrow{display:flex;justify-content:center;color:var(--sun-deep)}
.cs-map-note{margin:0;padding-left:16px;border-left:1px solid var(--line);font-size:14px;line-height:1.5;color:var(--muted)}
@media (max-width:860px){
  .cs-map-head{display:none}
  .cs-map-row{grid-template-columns:minmax(0,1fr);row-gap:6px}
  .cs-map-arrow{justify-content:flex-start;padding-left:1px}
  .cs-map-arrow .cs-i{transform:rotate(90deg)}
  .cs-map-note{padding:8px 0 0;border-left:0;border-top:1px solid var(--line)}
}
.cs-cap{margin-top:28px;font-size:15px;color:var(--muted)}
.cs-map + .cs-cap{margin-top:16px}

/* readiness checklist: one card per party, the acquirer's beside the other two; a check mark and the stage per item */
.cs-check{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:22px;margin-top:44px;align-items:stretch}
.cs-check-g{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:20px 22px 22px}
.cs-check-g:first-child{grid-row:span 2}
.cs-check-g h3{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:17px;color:var(--heading)}
.cs-check-g h3 .cs-i{color:var(--sun-text)}
.cs-check-g ul{list-style:none;margin:0;padding:0}
.cs-check-g li{display:flex;gap:10px;align-items:flex-start;margin:0;padding:9px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.45;color:var(--text)}
.cs-check-g li .cs-i{width:18px;height:18px;margin-top:2px;color:var(--ok);stroke-width:2.25}
.cs-check-g li > span:not(.cs-check-st){flex:1 1 0;min-width:0}
.cs-check-st{margin-left:auto;flex:none;align-self:center;padding:1px 7px;border-radius:3px;background:var(--paper-2);font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--muted);white-space:nowrap}
@media (max-width:860px){.cs-check{grid-template-columns:minmax(0,1fr)}.cs-check-g:first-child{grid-row:auto}}
@media (max-width:560px){.cs-check-g{padding:18px}.cs-check-g li{flex-wrap:wrap;row-gap:4px}.cs-check-g li > span:not(.cs-check-st){flex-basis:calc(100% - 28px)}.cs-check-st{margin-left:28px;align-self:auto}}

/* the case-study index: one wide card per study until there are enough for the 3-up grid */
.verts.cs-list{grid-template-columns:minmax(0,760px)}
/* study cards (index and related block): the illustrative label, the topic tags; above six studies the index groups
   the cards by primary tag, with a topic list at the top (build/assemble.py) */
.cs-card .eyebrow{font-size:11px;margin-bottom:10px}
.vert ul.cs-tags{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.vert .cs-tags li{margin:0;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--text-strong);background:var(--paper-2);border:1px solid var(--line);border-radius:3px;padding:3px 8px}
.cs-list .vert h4{font-size:18px;color:var(--heading)}
.cs-list .vert h4 a{text-decoration:underline;text-decoration-color:var(--sun);text-decoration-thickness:2px;text-underline-offset:4px}
.cs-list .vert h4 a:hover{color:var(--sun-text)}
.cs-topics{margin-top:32px}
.cs-topics ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.cs-topics a{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--heading);border:1px solid var(--line-strong);border-radius:3px;padding:5px 10px;text-decoration:none}
.cs-topics a:hover{border-color:var(--sun-deep)}
.cs-group{margin-top:44px;scroll-margin-top:90px}
.cs-group-h{font-size:22px;color:var(--heading)}
.cs-group .verts{margin-top:18px}

/* before/after architecture: the wide drawing above 900px, the stacked one below; the key list is its text equivalent */
.arch{margin:16px 0 0}
.arch svg{display:block;width:100%;height:auto}
.arch .arch-v{display:none;max-width:420px;margin:0 auto}
.arch .ap{fill:var(--surface);stroke:var(--line-strong);stroke-width:1.2}
.arch .ab{fill:var(--surface);stroke:var(--line-strong);stroke-width:1}
.arch .ab.new{fill:var(--surface);stroke:var(--heading);stroke-width:1.6;stroke-dasharray:6 3}
.arch .aw{fill:var(--paper-2);stroke:var(--line-strong);stroke-width:1;stroke-dasharray:4 3}
.arch .az{fill:var(--paper-2);stroke:var(--line-strong);stroke-width:1}
.arch .ac{fill:var(--band);stroke:var(--band-line)}
.arch .at{fill:var(--heading);font:700 15px var(--sans)}
.arch .as{fill:var(--muted);font:400 12px var(--sans)}
.arch .bt{fill:var(--heading);font:600 12.5px var(--sans)}
.arch .bi{fill:var(--text);font:400 12.5px var(--sans)}
.arch .bs{fill:var(--muted);font:400 11.5px var(--sans)}
.arch .ct{fill:var(--on-band);font:700 15px var(--sans)}
.arch .cs{fill:var(--muted-on-ink);font:400 12px var(--sans)}
.arch .ci{fill:var(--paper-on-ink);font:400 12.5px var(--sans)}
.arch .cd{stroke:var(--line-dark);stroke-width:1}
.arch .cdot{fill:var(--sun)}
.arch .al{stroke:var(--line-strong);stroke-width:1.2}
.arch .tun{stroke:var(--sun-deep);stroke-width:1.6;stroke-dasharray:5 4;fill:none}
.arch .aa{stroke:var(--sun-deep);stroke-width:2;fill:none}
.arch .aah{fill:var(--sun-deep)}
.arch .nx line{stroke:var(--danger);stroke-width:2}
.arch .nt{fill:var(--muted);font:600 12px var(--sans)}
.arch .al2{fill:var(--muted);font:400 12.5px var(--sans)}
.arch figcaption{margin-top:18px;font-size:15px;color:var(--muted)}
.arch-key{display:grid;grid-template-columns:minmax(0,1fr);gap:4px 0;margin:12px 0 0;max-width:75ch}
.arch-key dt{font-weight:600;color:var(--heading);margin-top:10px}
.arch-key dd{margin:0;color:var(--text);font-size:15px}
@media (max-width:900px){.arch .arch-h{display:none}.arch .arch-v{display:block}}