/* Header on scroll, every page (owner comment, 1 Oct 13:12: "hide the navbar when i am scrolling down and show the full navbar
   when i scroll up"). Replaces the earlier centred pill. motion.js toggles .nav-hide; the bar slides up out of view in place,
   and the sticky step rails move up into the space it leaves. */
header.nav{top:env(safe-area-inset-top,0px);transition:transform .4s var(--e-out,cubic-bezier(.25,1,.5,1)),background-color .3s,box-shadow .3s;will-change:transform}
header.nav.nav-hide{transform:translateY(-100%);box-shadow:none}
.jrail,.step .txt{transition:top .4s var(--e-out,cubic-bezier(.25,1,.5,1))}
body:has(header.nav.nav-hide) .jrail{top:32px}
body:has(header.nav.nav-hide) .step .txt{top:40px}
@media (max-width:1099px){body:has(header.nav.nav-hide) .jrail{top:0}}
@media (prefers-reduced-motion:reduce){header.nav,.jrail,.step .txt{transition:none}}

/* Site footer, shared by every page (owner, 1 Oct: "add the footer, you can get the footer from /new-home page in framer project").
   Structure, copy and links are the /new-home footer on branch Abhishek (08 — Footer): tree mark, the ask with Book a demo and
   New business mail, four link columns, the certification marks, registration lines, both offices, then the legal row.
   The big typeset "Dynamatix" under the legal row is left out on purpose: DO-NOT #34 (owner, 21 Sep). Loaded after each page's own styles. */
footer.sf{padding:160px 0 48px;background:var(--ground,#fff);color:var(--ink);font-size:15px;line-height:1.5}
footer.sf .wrap{display:flex;flex-direction:column;gap:64px;max-width:none;padding-inline:var(--gut)}
footer.sf p{margin:0}
.sf-mk{width:60px;height:auto;display:block}
.sf-top{display:grid;grid-template-columns:minmax(280px,520px) minmax(0,1fr);gap:64px;align-items:start}
.sf-ask{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.sf-h{margin:0;font:500 38px/1.12 var(--display);font-variation-settings:"opsz" 32;letter-spacing:-.02em;text-wrap:balance;color:var(--ink)}
.sf-act{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px}
.sf-mail{display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--ink3)}
.sf-mail a{font-size:15px;color:var(--ink);border-bottom:1px solid var(--ink3);align-self:flex-start}
.sf-cols{display:flex;justify-content:space-between;gap:24px;min-width:0}
.sf-cols>div{display:flex;flex-direction:column;gap:12px;min-width:140px}
.sf-cols h3{margin:0 0 4px;font:500 13px/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.sf-cols a{color:var(--ink2);font-size:15px;line-height:1.45;transition:color .2s}
.sf-reg{display:flex;flex-wrap:wrap;gap:40px 64px;align-items:flex-start;font-size:13px;line-height:1.5;color:var(--ink3)}
.sf-marks{display:flex;align-items:center;gap:28px;flex:none}
.sf-marks img{display:block;height:auto}
.sf-lines{display:flex;flex-direction:column;gap:6px;flex:1 1 280px;min-width:0}
.sf-addr{display:flex;flex-direction:column;gap:16px;flex:1 1 280px;min-width:0}
.sf-addr b{display:block;font-weight:500;color:var(--ink)}
.sf-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:18px;border-top:1px solid var(--hair);font-size:13px;color:var(--ink3)}
.sf-legal a{color:var(--ink2);transition:color .2s}
@media (hover:hover){.sf-cols a:hover,.sf-legal a:hover{color:var(--ink)}.sf-mail a:hover{border-color:var(--ink)}}
.sf a:focus-visible{outline:2px solid var(--glu,#2B8FD9);outline-offset:3px;border-radius:4px}
@media (max-width:1099px){
  footer.sf{padding:120px 0 40px}
  .sf-top{grid-template-columns:minmax(0,1fr);gap:56px}
  .sf-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px}
  .sf-cols>div{min-width:0}
  .sf-h{font-size:32px}
}
@media (max-width:767px){
  footer.sf{padding:96px 0 32px}
  footer.sf .wrap{gap:56px}
  .sf-h{font-size:28px}
  .sf-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 16px}
  .sf-reg{flex-direction:column;gap:32px}
  .sf-lines,.sf-addr{flex:none;width:100%}
}

/* mock-screen app tile: the Dynamatix tree mark, not an invented "MR" letter mark (DO-NOT #4; owner, 29 Sep: "use logo tree mark") */
.bp-mk,.pa-mk,.va-mk0{background:#fff!important;box-shadow:inset 0 0 0 1px rgba(17,17,17,.10)}
.bp-mk img,.pa-mk img,.va-mk0 img{width:74%;height:auto;display:block;min-width:0} /* 2 Oct: rail.css gives .frame img min-width:620px on phones; the app tiles must not inherit it */

/* parity: home */
/* Part cards ("The parts of the rail"): the colour dot is now a 40 px tinted tile with a 22 px icon in the part's colour (D-148, as in Framer). */
.comp .pi{width:40px;height:40px;flex:none;border-radius:10px;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 12%,transparent)}
.comp .pi .ic{width:22px;height:22px;color:inherit}
.comp:hover .top .pi .ic{transform:none;color:inherit} /* motion.css moves and darkens the arrow on hover; the tile icon stays put */
.comps>.comp{min-width:0}

/* parity: part pages */
/* "Already have one?" and #hash loads: the browser's own jump to a section also stops 96 px below the top, the same spot
   motion.js glides to (Framer scroll button: topOffset 96). */
main section[id]{scroll-margin-top:96px}

/* parity: home (continued; shared footer and the home's "Every part" row) */
/* Footer between 1100 and 1439 px: the ask beside four link columns needs about 1216 px of content width, so the columns ran
   off the right edge (horizontal scroll at 1100 to about 1330 px). Framer stacks the ask over a four-column grid below 1440 px; same here. */
@media (min-width:1100px) and (max-width:1439px){
  .sf-top{grid-template-columns:minmax(0,1fr);gap:56px}
  .sf-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px}
  .sf-cols>div{min-width:0}
}
/* "Every part" row: title over its line on the left, Talk to us on the right (Framer: a Text stack beside the button; stacked on phones) */
.comp.more .tx{display:flex;flex-direction:column;gap:10px;flex:1 1 auto;min-width:0}

/* problem section (owner, 5 Oct): copy and figures on the left, the today / Mortgage Rail scene on the right.
   Below 1200px the two stack, as before. In the column the scene uses its one-column lane layout. */
.psplit{display:grid;gap:96px}
.pcopy,.pscene{min-width:0}
@media (min-width:1200px){
  .psplit{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,4.4vw,64px);align-items:center}
  .psplit .sec-head{margin-bottom:48px}
  .psplit .when{padding:40px 40px 32px}
  .psplit .wlane{grid-template-columns:minmax(0,1fr);gap:0}
  .psplit .wname{margin:0 0 4px}
}
/* the scene in a 560–767px box (the right-hand column, or a tablet): all eight station names, smaller and centred, so none collide */
.pscene{container-type:inline-size;container-name:pscene}
@container pscene (min-width:560px) and (max-width:767px){
  .when .wstn li span,.when .wstn li:first-child span,.when .wstn li:last-child span{font-size:12px;width:84px;left:50%;right:auto;transform:translateX(-50%);text-align:center}
  .when .wstn li:first-child span{width:60px}
}
/* wherever the lane name sits above its track (column or tablet), the Mortgage Rail lane needs room for its taller alert box */
@container pscene (min-width:560px) and (max-width:620px){.psplit .when{padding:32px 24px 28px}}

/* ---- Text states it, the picture shows it (owner, 5 Oct; UX after jammjar.com, our own look) ----
   Problem section and the four journey steps: a heading, one sentence and a few short points on the left; one calm, high-level
   scene on the right. Hidden .jbeat markers inside a scene switch on in turn and motion.js copies the count to data-beat on the
   nearest [data-sync], so the point being shown is the one lit. With no scene running (still frame, reduced motion) all points read the same. */
.jbeat{display:none}
.pts{list-style:none;margin:6px 0 0;padding:0;counter-reset:pt;display:flex;flex-direction:column}
.pts li{counter-increment:pt;display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px;align-items:start;padding:14px 0;border-top:1px solid var(--hair);font-size:17px;line-height:1.4;color:var(--ink2);transition:color .35s var(--e-out,ease)}
.pts li:last-child{border-bottom:1px solid var(--hair)}
.pts li::before{content:counter(pt);width:24px;height:24px;border-radius:99px;background:var(--panel);color:var(--ink2);font:600 12px/24px var(--body);text-align:center;transition:background-color .35s var(--e-out,ease),color .35s var(--e-out,ease)}
.pts li b{font-weight:500;color:var(--ink)}
[data-beat="1"] .pts li,[data-beat="2"] .pts li,[data-beat="3"] .pts li{color:var(--ink3)}
[data-beat="1"] .pts li b,[data-beat="2"] .pts li b,[data-beat="3"] .pts li b{color:inherit}
[data-beat="1"] .pts li:nth-child(1),[data-beat="2"] .pts li:nth-child(2),[data-beat="3"] .pts li:nth-child(3){color:var(--ink)}
[data-beat="1"] .pts li:nth-child(1)::before,[data-beat="2"] .pts li:nth-child(2)::before,[data-beat="3"] .pts li:nth-child(3)::before{background:var(--glu);color:#fff}
@media (prefers-reduced-motion:reduce){.pts li,.pts li::before{transition:none}}

/* problem: the scene is two short lanes; the four figures sit in one quiet row under it */
.psplit .sec-head{margin-bottom:20px}
.psplit .when{gap:4px}
.psplit .wtrack,.psplit .wlane.rail .wtrack,.when .wlane.rail .wtrack{height:178px}
.psplit .wbox,.psplit .wlane.rail .wbox{width:232px;gap:6px}
.psplit .wbr{color:var(--ink2)}
.psplit .wlane{transition:opacity .45s var(--e-out,ease)}
.psplit[data-beat="1"] .wlane.rail{opacity:.4}
.psplit .wstn li span{display:none}
.psplit .wstn li:first-child span,.psplit .wstn li:last-child span{display:block}
.proof.gov.pfig{margin-top:80px}
.proof.pfig .n{font-size:40px}
.proof.pfig > div{padding-top:28px;padding-bottom:26px}
@media (max-width:767px){.proof.gov.pfig{margin-top:48px}.proof.pfig .n{font-size:30px}}

/* journey: each step is text beside its scene; the scene shows names and states only */
.jsteps .jtext{display:flex;flex-direction:column;gap:14px;align-items:stretch}
.jsay{margin:0;font-size:19px;line-height:1.45;color:var(--ink2);max-width:520px}
.jin{margin:6px 0 0;font-size:14px;line-height:1.4;color:var(--ink3)}
.jin a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(17,17,17,.25);text-underline-offset:3px}
.jin a:hover{text-decoration-color:currentColor}
.jsteps .jshot .dr .tx > span{display:none}
.jsteps .jshot .dr{font-size:17px;padding:15px 0}
.jsteps .jshot .dh .t{font-size:16px}
@media (min-width:1100px){
  .jgrid{grid-template-columns:168px minmax(0,1fr);gap:48px}
  .jsteps .jstep{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center}
}
@media (max-width:767px){.jsay{font-size:17px}.pts li{font-size:16px;padding:12px 0}.jsteps .jshot .dr{font-size:15px;padding:12px 0}}
/* only the two end stations are named in the problem scene: keep them inside the panel at every width */
.psplit .when .wstn li:first-child span{left:-2px;right:auto;transform:none;text-align:left;width:64px}
.psplit .when .wstn li:last-child span{left:auto;right:-2px;transform:none;text-align:right;width:90px}
/* stacked (tablet, phone): the scene sits straight after the sentence, with its points under it, so text and picture stay in one view */
@media (max-width:1099px){
  .jsteps .jstep{display:flex;flex-direction:column;gap:14px}
  .jsteps .jtext{display:contents}
  .jsteps .jshot{order:4;margin:14px 0 4px}
  .jsteps .pts{order:5}
  .jsteps .jin{order:6}
}

/* journey: each step is one white card that runs the full width of the page, edge to edge (owner, 5 Oct 2026).
   Top-left: the step and its title. Centre: the scene. Bottom-right: the points the scene lights, and where it runs.
   The cards sit on a grey band, also edge to edge, which shows as a thin gap between them. There is no step list.
   Narrower than 1000 px the same three parts stack inside the card, in that order. */
.journey .jgrid{display:block}
.journey .jsteps{margin-inline:calc(-1*var(--gut));background:var(--panel);gap:12px;padding-block:12px}
.journey .jsteps .jstep{background:#fff;border:0;border-radius:0;box-shadow:none;padding:56px var(--gut);scroll-margin-top:96px}
.journey .jhead,.journey .jfoot{display:contents}
@media (min-width:1000px){
  .journey .jsteps .jstep{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr) minmax(0,1fr);gap:48px;align-items:stretch;padding-block:72px;min-height:660px}
  .journey .jsteps .jtext{display:contents}
  .journey .jhead{display:flex;flex-direction:column;gap:16px;grid-column:1;grid-row:1;align-self:start}
  .journey .jhead .t-h3{font-size:30px;line-height:1.14}
  .journey .jsteps .jshot{grid-column:2;grid-row:1;align-self:center;min-width:0;margin:0}
  .journey .jfoot{display:flex;flex-direction:column;gap:14px;grid-column:3;grid-row:1;align-self:end}
  .journey .jfoot .pts{margin-top:0}
}
@media (min-width:1000px) and (max-width:1199px){.journey .jsteps .jstep{gap:32px}.journey .jhead .t-h3{font-size:26px}}
@media (max-width:767px){.journey .jsteps .jstep{padding-block:40px}}
/* 8 Oct: problem section balanced. Two equal columns that share a top and a bottom edge:
   the label and title start level with the top of the picture, the two points end level with its bottom. */
@media (min-width:860px){
  .psplit{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:stretch}
  .psplit .when{padding:32px 28px 28px}
  .psplit .pcopy{display:flex;flex-direction:column;justify-content:space-between;gap:40px}
  .psplit .sec-head{margin-bottom:0}
  .psplit .sec-head .t-h2{max-width:13em}
  .psplit .pts{margin:0}
  .psplit .pscene{display:flex}.psplit .pscene>.when{flex:1}
}
/* 8 Oct: the two problem points are plain: no rules between them, no highlight that follows the picture, no transition */
.psplit .pts li,.psplit .pts li:last-child{border:0;padding:10px 0;transition:none}
.psplit[data-beat] .pts li,.psplit .pts li{color:var(--ink2)}
.psplit[data-beat] .pts li b,.psplit .pts li b{color:var(--ink)}
.psplit[data-beat] .pts li::before,.psplit .pts li::before{background:var(--panel);color:var(--ink2);transition:none}
.psplit .pts li,.psplit .pts li *{opacity:1!important;transform:none!important;animation:none!important}
@media (min-width:860px){.psplit .wlane{grid-template-columns:minmax(0,1fr);gap:0}.psplit .wname{margin:0 0 4px}}
/* 8 Oct: no empty gap inside the text half; label, title, line and the two points read as one block, centred on the picture */
@media (min-width:860px){.psplit .pcopy{justify-content:center;gap:28px}}
/* 8 Oct: the problem title runs the full width of its half */
.psplit .sec-head .t-h2{max-width:none;text-wrap:wrap}
/* 8 Oct: text half starts at the top of the picture; four short points, one line each where the column allows */
@media (min-width:860px){.psplit .pcopy{justify-content:flex-start;padding-top:8px}}
.psplit .pts li{padding:8px 0}

/* 8 Oct: the four figures read as the cost of the problem above: one soft panel straight under the text and picture,
   a short lead on the left ("What this costs today" + the source), the figures in one line, no boxes or rules. */
.proof.pfig{margin-top:clamp(24px,3vw,40px);border:0;background:var(--panel);border-radius:24px;padding:clamp(24px,3vw,36px) clamp(20px,3vw,40px);grid-template-columns:minmax(0,1.15fr) repeat(4,minmax(0,1fr));gap:24px clamp(16px,2.4vw,40px);align-items:start}
.proof.pfig>div,.proof.pfig>div+div{padding:0;border:0;gap:8px}
.proof.pfig .n{font-size:clamp(26px,2.5vw,36px);font-weight:500}
.proof.pfig .t-small{color:var(--ink2);line-height:1.35}
.pfig-l{margin:0;display:flex;flex-direction:column;gap:8px;align-self:stretch;justify-content:space-between}
.pfig-l b{font:500 19px/1.25 var(--display);letter-spacing:-.01em;color:var(--ink)}
.pfig-l span{font-size:13px;line-height:1.4;color:var(--ink3)}.pfig-l a{text-decoration:underline}
@media (max-width:1099px){.proof.pfig{grid-template-columns:repeat(4,minmax(0,1fr))}.pfig-l{grid-column:1/-1;flex-direction:row;align-items:baseline;gap:16px}}
@media (max-width:767px){.proof.pfig{grid-template-columns:repeat(2,minmax(0,1fr));border-radius:20px}.proof.pfig>div:nth-child(n){border:0;padding:0}.pfig-l{flex-direction:column;gap:6px}}
#problem .psplit{margin-bottom:0}#problem .proof.pfig{margin-top:clamp(24px,2.8vw,40px)}
/* 8 Oct: problem section as a bento. Every piece is a tile with the same 24 px corner and 16 px gap:
   text | picture on the first row; lead, 120 days, 1 in 3 on the second; £400m, £1.5bn on the third. One tile carries the blue. */
#problem .proof.pfig{background:none;border-radius:0;padding:0;margin-top:16px;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;align-items:stretch}
#problem .proof.pfig>*{background:var(--panel);border-radius:24px;padding:clamp(20px,2.4vw,32px);min-height:168px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;grid-column:span 2}
#problem .proof.pfig>div:nth-of-type(n+3){grid-column:span 3}
#problem .proof.pfig>div,#problem .proof.pfig>div+div{padding:clamp(20px,2.4vw,32px)}
#problem .proof.pfig .n{font-size:clamp(34px,3.6vw,52px);font-weight:500}
#problem .proof.pfig .t-small{font-size:15px;max-width:26ch}
#problem .proof.pfig>div:nth-of-type(2){background:#1F6FB8;color:#fff}
#problem .proof.pfig>div:nth-of-type(2) .t-small{color:rgba(255,255,255,.86)}
#problem .pfig-l{align-self:auto}
@media (min-width:860px){#problem .psplit{gap:16px}#problem .psplit .pcopy{background:var(--panel);border-radius:24px;padding:clamp(24px,2.8vw,40px)}}
@media (max-width:767px){#problem .proof.pfig{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#problem .proof.pfig>*{grid-column:span 1!important;min-height:132px;border-radius:20px;padding:16px!important}#problem .pfig-l{grid-column:1/-1!important;min-height:0!important}}

/* 8 Oct: bento only for the four figures, as a sub-section of the problem. The text | picture row goes back to plain.
   Space above, a sub-heading with the source, then four tiles: 1 in 3 large in blue, 120 days wide, the two money figures under it. */
@media (min-width:860px){#problem .psplit{gap:clamp(32px,5vw,80px)}#problem .psplit .pcopy{background:none;border-radius:0;padding:8px 0 0}}
#problem .proof.pfig{margin-top:clamp(72px,8vw,120px);grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(168px,auto)}
#problem .proof.pfig>.pfig-l{grid-column:1/-1;background:none;border-radius:0;padding:0 0 clamp(8px,1.4vw,20px);min-height:0;flex-direction:row;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
#problem .pfig-l b{font:500 clamp(22px,2vw,28px)/1.2 var(--display);letter-spacing:-.02em}
#problem .proof.pfig>div:nth-of-type(1){grid-column:6/-1;grid-row:2}
#problem .proof.pfig>div:nth-of-type(2){grid-column:1/span 5;grid-row:2/span 2}
#problem .proof.pfig>div:nth-of-type(3){grid-column:6/span 4;grid-row:3}
#problem .proof.pfig>div:nth-of-type(4){grid-column:10/-1;grid-row:3}
#problem .proof.pfig>div:nth-of-type(2) .n{font-size:clamp(56px,7.4vw,104px)}
#problem .proof.pfig>div:nth-of-type(2) .t-small{font-size:19px;max-width:none}
@media (max-width:767px){#problem .proof.pfig{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;margin-top:64px}#problem .proof.pfig>div:nth-of-type(n){grid-column:span 1!important;grid-row:auto!important}#problem .proof.pfig>div:nth-of-type(2){grid-column:1/-1!important;order:-1}#problem .proof.pfig>.pfig-l{order:-2;flex-direction:column;gap:4px}}
#problem .proof.pfig{grid-template-rows:auto}

/* 8 Oct: "Four reasons" brought in line with the sub-section above it (the cost figures):
   same space above, same sub-heading size, same tiles (soft grey, 24 px corners, 16 px gap, no outline).
   Two tiles a row until there is room for four, so the text is never squeezed into a narrow column.
   Inside a tile: the small picture on the left, number, title and text on the right. */
#problem .why-h{margin:clamp(72px,8vw,120px) 0 clamp(16px,2vw,28px)}
#problem .why-h .t-h3{font:500 clamp(22px,2vw,28px)/1.2 var(--display);letter-spacing:-.02em;margin:0}
#problem .why{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
#problem .wc{box-shadow:none;background:var(--panel);border-radius:24px;padding:clamp(16px,2vw,24px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:auto auto 1fr;column-gap:clamp(16px,2vw,28px);row-gap:10px;align-items:start}
#problem .wc .wst{grid-row:1/span 3;align-self:stretch;height:auto;min-height:200px;background:none;padding:0;border-radius:0}
#problem .wc .n,#problem .wc h4,#problem .wc p{padding:0}
#problem .wc .n{margin-top:8px;color:var(--ink3)}
#problem .wc h4{margin:0;font-size:20px;line-height:1.25;text-wrap:pretty}
#problem .wc p{font-size:15px;line-height:1.5}
@media (max-width:859px){#problem .why{grid-template-columns:minmax(0,1fr)}}
@media (max-width:519px){#problem .wc{grid-template-columns:minmax(0,1fr);grid-template-rows:auto}#problem .wc .wst{grid-row:auto;min-height:176px}}

/* 8 Oct: four reasons, second pass. Picture and words each take half a tile and are centred on each other;
   the title is a short plain line at 22 px; one or two short sentences under it. */
#problem .wc{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr auto auto auto 1fr;row-gap:8px;min-height:232px}
#problem .wc .wst{grid-row:1/-1;min-height:0;align-self:center}
#problem .wc .n{grid-row:2;margin:0}
#problem .wc h4{grid-row:3;font-size:22px;line-height:1.2;letter-spacing:-.015em}
#problem .wc p{grid-row:4;margin-top:4px}
@media (max-width:519px){#problem .wc{grid-template-rows:auto;min-height:0}#problem .wc .wst,#problem .wc .n,#problem .wc h4,#problem .wc p{grid-row:auto}}

/* 8 Oct: four reasons as one card: a list of the four on the left, the chosen reason's picture on the right.
   Different from the grey figure tiles above on purpose. From 860 px wide; smaller screens keep one tile per reason. */
#problem .wc .wtx{align-self:center;display:grid;gap:8px}
@media (min-width:860px){
  #problem .why{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(20px,3vw,48px);background:var(--panel);border-radius:24px;padding:clamp(16px,2vw,24px) clamp(16px,2vw,24px) clamp(16px,2vw,24px) clamp(20px,2.8vw,40px);align-items:stretch}
  #problem .wc{display:contents}
  #problem .wc .wtx{grid-column:1;align-self:stretch;display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:8px;row-gap:8px;align-content:center;padding:20px 0;border-top:1px solid var(--hair);cursor:pointer;color:var(--ink3);transition:color .15s ease-out;min-height:76px}
  #problem .wc:first-child .wtx{border-top:0}
  #problem .wc .wtx .n{grid-row:auto;grid-column:1;margin:6px 0 0;color:inherit}
  #problem .wc .wtx h4{grid-row:auto;grid-column:2;color:inherit;font-size:22px}
  #problem .wc .wtx p{grid-row:auto;grid-column:2;display:none;margin:0;max-width:34em}
  #problem .wc .wtx:hover{color:var(--ink2)}
  #problem .wc.is-on .wtx{color:var(--ink)}#problem .wc.is-on .wtx p{display:block}
  #problem .wc .wtx:focus-visible{outline:2px solid var(--glu);outline-offset:4px;border-radius:8px}
  #problem .wc .wst{display:none;grid-column:2;grid-row:1/span 4;align-self:stretch;min-height:340px;background:#fff;border-radius:16px;padding:24px}
  #problem .wc.is-on .wst{display:flex}
  #problem .wc .wst>*{zoom:1.3}
}

/* 8 Oct: the four-reasons card holds still while its four reasons open in turn with the scroll */
@media (min-width:860px){#problem .why-run{position:relative}#problem .why-run>.why{position:sticky;top:96px}
  #problem .wc .wtx p{display:block;max-height:0;opacity:0;overflow:hidden;transition:max-height .35s cubic-bezier(.2,0,0,1),opacity .25s ease-out}
  #problem .wc.is-on .wtx p{max-height:8em;opacity:1}
  #problem .wc .wtx{row-gap:0}#problem .wc.is-on .wtx p{margin-top:8px}}
@media (prefers-reduced-motion:reduce){#problem .wc .wtx p{transition:none}}
/* 8 Oct: inside the scroll-driven card each small picture is shown complete (its own loop would leave parts missing
   at the moment a reason opens); the picture arrives with one short rise when its reason opens. */
@media (min-width:860px){
  #problem .why [data-at],#problem .why .fx-pop,#problem .why .fx-rise,#problem .why .fx-right{opacity:1!important;transform:none!important}
  #problem .wc.is-on .wst>*{animation:whyin .45s cubic-bezier(.2,0,0,1) both}
}
@keyframes whyin{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){#problem .wc.is-on .wst>*{animation:none}}

/* the cards follow the section heading directly (timeline removed 12 Oct); section-head margin provides the gap */
#problem .why-run{margin-top:0}
#problem .why-pin .why-h{margin-top:0}
@media (min-width:860px){#problem .why-run>.why{position:static}#problem .why-pin{position:sticky;top:96px}#problem .why-pin>.why{position:static}}

/* 8 Oct: smooth steps. The four pictures are stacked in one place and cross-fade; the open reason's text slides
   open while the one before slides shut; titles change colour gradually. Clicking glides the page (Lenis, 0.9 s). */
@media (min-width:860px){
  #problem .wc .wst,#problem .wc.is-on .wst{display:flex;opacity:0;translate:0 10px;pointer-events:none;transition:opacity .45s cubic-bezier(.2,0,0,1),translate .6s cubic-bezier(.2,0,0,1)}
  #problem .wc.is-on .wst{opacity:1;translate:0 0;pointer-events:auto;transition-delay:.12s}
  #problem .wc.is-on .wst>*{animation:none}
  #problem .wc .wtx{transition:color .4s ease-out}
  #problem .wc .wtx p{display:grid;grid-template-rows:0fr;max-height:none;opacity:0;margin-top:0;overflow:visible;transition:grid-template-rows .55s cubic-bezier(.2,0,0,1),opacity .35s ease-out,margin-top .55s cubic-bezier(.2,0,0,1)}
  #problem .wc.is-on .wtx p{grid-template-rows:1fr;max-height:none;opacity:1;margin-top:8px;transition-delay:0s,.12s,0s}
  #problem .wc .wtx p>span{overflow:hidden;min-height:0}
}
@media (prefers-reduced-motion:reduce){#problem .wc .wst,#problem .wc .wtx,#problem .wc .wtx p{transition:none!important}}
@media (min-width:860px){#problem .wc.is-on .wtx p{display:grid}}

/* 8 Oct: "The answer" section in line with the problem section above it.
   Head: title in the left half, three plain points in the right half (no long paragraph). The map under it, full width.
   Reform plan: a sub-section like the cost figures: same space, same sub-heading size, source on the right, four grey tiles. */
#rail .rhead{display:grid;gap:28px;margin-bottom:clamp(32px,4vw,56px)}
#rail .rhead .sec-head{margin:0}
#rail .rhead .t-h2{max-width:none;text-wrap:wrap}
#rail .rhead .pts{margin:0}
#rail .rhead .pts li,#rail .rhead .pts li:last-child{border:0;padding:8px 0;color:var(--ink2);transition:none}
#rail .rhead .pts li b{color:var(--ink)}
#rail .rhead .pts li::before{background:var(--panel);color:var(--ink2)}
@media (min-width:860px){#rail .rhead{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}#rail .rhead .pts{padding-top:34px}}
#rail .rf-h{margin:clamp(72px,8vw,120px) 0 12px;display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
#rail .rf-h .t-h3{font:500 clamp(22px,2vw,28px)/1.2 var(--display);letter-spacing:-.02em;margin:0}
#rail .rf-h span{font-size:13px;color:var(--ink3)}#rail .rf-h a{text-decoration:underline}
#rail .rf-l{margin:0 0 clamp(20px,2.4vw,32px);max-width:44em;color:var(--ink2);font-size:17px;line-height:1.5}
#rail .rf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
#rail .rf>div{background:var(--panel);border-radius:24px;padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:8px;min-height:200px}
#rail .rf .itile{background:#fff;margin-bottom:auto}
#rail .rf .t-card{margin-top:24px}
#rail .rf .t-small{line-height:1.4}
@media (max-width:1099px){#rail .rf{grid-template-columns:repeat(2,minmax(0,1fr))}#rail .rf>div{min-height:168px}}
@media (max-width:519px){#rail .rf{grid-template-columns:minmax(0,1fr)}#rail .rf>div{min-height:0}}
#rail .rf .itile{margin-bottom:28px}#rail .rf .t-card{margin-top:0}#rail .rf>div{min-height:0}

/* 8 Oct (third pass): connection map below 1100 px keeps the desktop picture exactly: separate cards, each with its own
   link to the Mortgage Rail bar, systems above and data below.
   700–1099: six cards a row, as on desktop, a size smaller.
   Under 700: three a row in two rows. The row next to the bar links straight to it; the far row links through the
   gaps between the cards, so every card still has its own line to the bar. */
@media (min-width:700px) and (max-width:1099px){
  #rail .rmap{padding:clamp(20px,3.4vw,36px)}
  #rail .rrow{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
  #rail .rnode{padding:10px 10px 12px;font-size:13px;gap:6px}
  #rail .rnode small{font-size:12px;line-height:1.3}
  #rail .rrow.top .rnode::after,#rail .rrow.bot .rnode::before,#rail .rrow.top .rnode::before,#rail .rrow.bot .rnode::after{display:block!important}
}
@media (max-width:699px){
  #rail .rmap{padding:20px 16px}
  #rail .rrow{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:10px 16px}
  #rail .rnode{padding:10px 8px 12px;font-size:13px;line-height:1.25;gap:6px;border-radius:12px}
  #rail .rnode small{font-size:12px;line-height:1.3}
  #rail .rbar{margin:28px 0}
  /* near row: straight link and travelling dot, as on desktop */
  #rail .rrow.top .rnode:nth-child(n+4)::after,#rail .rrow.bot .rnode:nth-child(-n+3)::before,
  #rail .rrow.top .rnode:nth-child(n+4)::before,#rail .rrow.bot .rnode:nth-child(-n+3)::after{display:block!important}
  /* far row: its link runs straight to the bar too, passing behind the card in front of it */
  #rail .rrow{isolation:isolate}
  #rail .rrow.top .rnode:nth-child(-n+3)::before,#rail .rrow.bot .rnode:nth-child(n+4)::after{display:none!important}
  #rail .rrow.top .rnode:nth-child(-n+3)::after,#rail .rrow.bot .rnode:nth-child(n+4)::before{display:block!important;z-index:-1;height:calc(100% + 10px + 28px)}
}
@media (max-width:379px){#rail .rmap{padding:20px 12px}#rail .rrow{gap:10px 8px}#rail .rnode{padding:10px 6px 12px}}

/* 8 Oct: reform plan sub-section, second pass. It now says something: what the plan asks for, and what Mortgage Rail
   does about each today. Text half on the left (heading, two lines, source), one grey panel on the right with four rows. */
#rail .rf2{margin-top:clamp(72px,8vw,120px);display:grid;gap:28px}
#rail .rf2-l{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
#rail .rf2-l .t-h3{font:500 clamp(22px,2vw,28px)/1.2 var(--display);letter-spacing:-.02em;margin:0}
#rail .rf2-l p{margin:0;color:var(--ink2);font-size:17px;line-height:1.5}
#rail .rf2-l>span{font-size:13px;color:var(--ink3)}#rail .rf2-l a{text-decoration:underline}
#rail .rf2-r{list-style:none;margin:0;padding:clamp(16px,2.2vw,28px);background:var(--panel);border-radius:24px;display:grid;gap:clamp(16px,2vw,24px)}
#rail .rf2-r li{display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1.15fr);column-gap:14px;align-items:center}
#rail .rf2-r .itile{background:#fff;margin:0}
#rail .rf2-r b{font:500 17px/1.3 var(--display);letter-spacing:-.01em}
#rail .rf2-a{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:8px;font-size:15px;line-height:1.4;color:var(--ink2);align-items:start}
#rail .rf2-a .ic{width:18px;height:18px;margin-top:2px;color:var(--glu);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#rail .rf-tk{width:18px;height:18px;margin-top:2px;border-radius:50%;background:var(--glu);position:relative}#rail .rf-tk::after{content:"";position:absolute;left:6px;top:3px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;rotate:45deg}
#rail .rf2-hd{font:500 12px/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
#rail .rf2-hd span:first-child{grid-column:1/span 2}
@media (min-width:1000px){#rail .rf2{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:start}#rail .rf2-l{padding-top:8px}}
@media (max-width:699px){#rail .rf2-r li{grid-template-columns:44px minmax(0,1fr);row-gap:6px}#rail .rf2-a{grid-column:2}#rail .rf2-hd{display:none}}
@media (max-width:699px){#rail .rf2-r li.rf2-hd{display:none}}

/* 8 Oct: reform plan sub-section, third pass: the same bento as the cost figures above it.
   Sub-heading with the source on the right; one large blue tile says what the plan wants; four grey tiles list how. */
#reform .rf3-h{margin:clamp(72px,8vw,120px) 0 clamp(16px,2vw,28px);display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
#reform .rf3-h .t-h3{font:500 clamp(22px,2vw,28px)/1.2 var(--display);letter-spacing:-.02em;margin:0}
#reform .rf3-h span{font-size:13px;color:var(--ink3)}#reform .rf3-h a{text-decoration:underline}
#reform .rf3{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
#reform .rf3>div{grid-column:span 7;background:var(--panel);border-radius:24px;padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;gap:8px;min-width:0}
#reform .rf3>div:not(.rf3-big){grid-column:span 4}
#reform .rf3>div:nth-child(2),#reform .rf3>div:nth-child(4){grid-column:6/span 4}
#reform .rf3>div:nth-child(3),#reform .rf3>div:nth-child(5){grid-column:10/span 3}
#reform .rf3-big{grid-column:1/span 5!important;grid-row:1/span 2;background:#1F6FB8!important;color:#fff;justify-content:space-between;gap:32px!important;min-height:340px}
#reform .rf3-k{font-size:14px;color:rgba(255,255,255,.86)}
#reform .rf3-big p{margin:0;font:500 clamp(26px,3vw,40px)/1.1 var(--display);letter-spacing:-.03em;text-wrap:balance}
#reform .rf3-big small{font-size:14px;line-height:1.4;color:rgba(255,255,255,.86);max-width:30em}
#reform .rf3 .itile{background:#fff;margin:0 0 auto}
#reform .rf3 b{font:500 19px/1.25 var(--display);letter-spacing:-.01em;margin-top:28px}
#reform .rf3>div>span:last-child{font-size:15px;line-height:1.4;color:var(--ink2)}
@media (max-width:999px){#reform .rf3>div:nth-child(n){grid-column:span 6!important}#reform .rf3-big{grid-column:1/-1!important;grid-row:auto;min-height:220px}}
@media (max-width:519px){#reform .rf3>div:nth-child(n){grid-column:1/-1!important}}


/* 8 Oct (second pass): four-step journey as its own kind of section, on the page's 50/50 pattern.
   Left half: the four steps one under another, on the page's left edge, plain (no tiles). Right half: one picture frame
   that stays in view while the steps scroll past and changes to the step being read. Nothing is held or pinned: the page
   scrolls normally. Under 860 px each step is simply its words followed by its picture. */
#journey .sec-head{margin-bottom:clamp(24px,3vw,40px)}
#journey .jgrid{display:block}
#journey .jsteps{margin-inline:0;background:none;padding:0;display:flex;flex-direction:column;gap:clamp(56px,8vw,88px)}
#journey .jsteps .jstep{display:flex;flex-direction:column;gap:24px;background:none;border-radius:0;padding:0;min-height:0;scroll-margin-top:96px}
#journey .jsteps .jtext{display:flex;flex-direction:column;gap:24px}
#journey .jhead,#journey .jfoot{display:flex;flex-direction:column;align-self:stretch;grid-column:auto;grid-row:auto}
#journey .jhead{gap:12px}#journey .jfoot{gap:8px}
#journey .jhead .t-h3{font-size:clamp(24px,2.4vw,32px);line-height:1.15;margin:0}
#journey .jsay{font-size:17px;max-width:none}
#journey .jsteps .jshot{order:0;margin:0;border-radius:24px;min-width:0;display:flex;flex-direction:column;justify-content:center}
#journey .pts{margin:0;order:0}
#journey .pts li,#journey .pts li:last-child{border:0;padding:6px 0;font-size:16px;color:var(--ink2)!important;transition:none}
#journey .pts li::before{background:var(--panel)!important;color:var(--ink2)!important;transition:none}
#journey .jin{order:0;margin:4px 0 0}
@media (min-width:860px){
  #journey .jsteps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,5vw,80px);row-gap:0;align-items:start}
  #journey .jsteps .jstep{display:contents}
  #journey .jsteps .jtext{grid-column:1;min-height:min(78vh,620px);justify-content:center;padding-block:32px;opacity:.38;transition:opacity .45s ease-out}
  #journey .jsteps .jstep.is-on .jtext{opacity:1}
  #journey .jsteps .jshot{grid-column:2;grid-row:1/span 4;position:sticky;top:max(96px,calc(50vh - 270px));height:540px;align-self:start;opacity:0;translate:0 12px;pointer-events:none;transition:opacity .5s cubic-bezier(.2,0,0,1),translate .6s cubic-bezier(.2,0,0,1)}
  #journey .jsteps .jstep.is-on .jshot{opacity:1;translate:0 0;pointer-events:auto;transition-delay:.1s}
}
@media (prefers-reduced-motion:reduce){#journey .jsteps .jtext,#journey .jsteps .jshot{transition:none!important}}
/* 8 Oct: journey words start at the top of the picture, not in its vertical middle */
@media (min-width:860px){#journey .jsteps .jtext{justify-content:flex-start;padding-block:8px 32px;min-height:min(72vh,580px)}#journey .jsteps .jstep:last-child .jtext{min-height:540px}}



/* 8 Oct: alerts section. Head on top (label, title, one line). Then ONE card built exactly like the "why" card:
   grey panel, the four people as a list on the left (chosen one dark and showing its line, the others grey),
   the alert picture on the right. From 860 px the card holds still and the scroll steps through the four people.
   Under it, the sub-section "How an alert is raised." with three tiles. */
#alerts .sec-head{margin-bottom:clamp(24px,3vw,40px)}#alerts .sec-head .t-h2{max-width:none}#alerts .sec-head .t-bodyL{margin-top:12px;max-width:40em}
/* Alerts, v5 (8 Oct): the routing board. Risks found on day one across the top, each joined by a line to the one person it is sent to. */
#alerts .ro-run{position:relative}
#alerts .ro{position:relative;background:var(--panel);border-radius:24px;padding:clamp(16px,2.2vw,28px)}
#alerts .ro-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 24px;margin-bottom:16px}
#alerts .ro-lab{margin:0;font:500 16px/1.3 var(--display);letter-spacing:-.01em}#alerts .ro-lab b{font-weight:500}#alerts .ro-lab span{color:var(--ink2);font-weight:400;margin-left:10px}
#alerts .ro-pass{margin:0;display:flex;gap:8px;align-items:center;font-size:14px;line-height:1.35;color:var(--ink2)}#alerts .ro-pass .ic{width:18px;height:18px;flex:none;color:#12876F}
#alerts .ro-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#alerts .ro-risks,#alerts .ro-wires{display:none}
#alerts .ro-who{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
#alerts .rp{background:#fff;border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:14px;min-width:0}
#alerts .rp-h{display:grid;grid-template-columns:36px minmax(0,1fr);gap:10px 12px;align-items:center}
#alerts .rp-i{width:36px;height:36px;border-radius:10px;background:var(--wash);color:var(--c);display:grid;place-items:center}#alerts .rp-i .ic{width:18px;height:18px}
#alerts .rp-n{margin:0;font:500 20px/1.2 var(--display);letter-spacing:-.015em}
#alerts .rp-l{grid-column:1/-1;margin:0;font-size:14px;line-height:1.4;color:var(--ink2)}
#alerts .rp-a{list-style:none;margin:0;padding:0;display:grid;gap:8px}
#alerts .rp-a li{background:var(--wash);border-radius:10px;padding:10px 12px;display:grid;gap:3px;transition:background-color .35s ease-out}
#alerts .rp-a b{display:flex;gap:8px;align-items:flex-start;font:500 14px/1.35 var(--display)}#alerts .rp-a b .ic{width:16px;height:16px;flex:none;margin-top:1px;color:var(--c)}
#alerts .rp-a span{font-size:14px;line-height:1.4;color:#3F3F44}
#alerts .rp-f{margin-top:auto;display:grid;gap:10px}
#alerts .rp-s{margin:0;display:grid;gap:4px}#alerts .rp-s b{font:500 26px/1.05 var(--display);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
#alerts .rp-s span{font-size:14px;line-height:1.35;color:var(--ink)}#alerts .rp-s small{display:block;font-size:12px;line-height:1.35;color:var(--ink2);margin-top:2px}
#alerts .rp-q span{color:var(--ink2)}
#alerts .rp-go{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;justify-self:start}#alerts .rp-go .ic{width:14px;height:14px;transition:translate .2s cubic-bezier(.2,0,0,1)}#alerts .rp-go:hover .ic{translate:3px 0}
@media (min-width:600px){#alerts .ro-who{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){
  #alerts .ro-risks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
  #alerts .ro-risks li{background:#fff;border-radius:12px;padding:14px;display:flex;gap:10px;align-items:flex-start;font:500 15px/1.3 var(--display);letter-spacing:-.005em;min-width:0}
  #alerts .ro-risks .ic{width:18px;height:18px;flex:none;margin-top:1px;color:var(--c)}
  #alerts .ro-wires{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
  #alerts .ro-wires path{fill:none;stroke:var(--c);stroke-width:1.75;stroke-linecap:round}
  #alerts .ro-wires .nd{fill:#fff;stroke:var(--c);stroke-width:1.75}
  #alerts .ro-wires .dot{fill:var(--c);display:none}
  #alerts .ro-who{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:72px}
  #alerts .rp-l{min-height:2.8em}
  #alerts .ro.is-live{position:sticky}
  #alerts .ro.is-live .ro-risks li,#alerts .ro.is-live .rp{cursor:pointer;transition:box-shadow .35s ease-out,color .35s ease-out}
  #alerts .ro.is-live .rp-i,#alerts .ro.is-live .rp-a .ic{transition:background-color .35s ease-out,color .35s ease-out}
  #alerts .ro.is-live .rp:not(.on) .rp-i{background:var(--panel);color:var(--ink3)}
  #alerts .ro.is-live .rp:not(.on) .rp-a li{background:var(--panel)}
  #alerts .ro.is-live .rp:not(.on) .rp-a .ic{color:var(--ink3)}
  #alerts .ro.is-live .rp.on{box-shadow:0 0 0 1.75px var(--c)}
  #alerts .ro.is-live .ro-risks li:not(.on){color:var(--ink2)}#alerts .ro.is-live .ro-risks li:not(.on) .ic{color:#9A9A9E}
  #alerts .ro.is-live .ro-risks li.on{box-shadow:0 0 0 1.75px var(--c)}
  #alerts .ro.is-live .ro-wires .w path,#alerts .ro.is-live .ro-wires .w .nd{transition:stroke .35s ease-out}
  #alerts .ro.is-live .ro-wires .w:not(.on) path{stroke:#D2D2CE;stroke-width:1.5}#alerts .ro.is-live .ro-wires .w:not(.on) .nd{stroke:#C6C6C2}
  #alerts .ro.is-live .ro-wires .w.on .dot{display:block}
  #alerts .ro-risks li:focus-visible,#alerts .rp:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
}
@media (prefers-reduced-motion:reduce){#alerts .ro-wires .dot{display:none!important}#alerts .ro *{transition:none!important}}
#alerts .proof-note{margin-top:16px}

/* The six parts, v2 (8 Oct): head on the 50/50 pattern, then a bento in two groups; the underwriting system leads in blue. */
.parts6 .rhead{display:grid;gap:28px;margin-bottom:clamp(32px,4vw,56px)}
.parts6 .rhead .sec-head{margin:0}.parts6 .rhead .t-h2{max-width:none;text-wrap:wrap}
.parts6 .pts{margin:0}.parts6 .pts li,.parts6 .pts li:last-child{border:0;padding:8px 0;color:var(--ink2);transition:none}.parts6 .pts li b{color:var(--ink)}
.parts6 .p6pts{display:grid;gap:20px;justify-items:start}
@media (min-width:860px){.parts6 .rhead{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}.parts6 .p6pts{padding-top:34px}}
.parts6 .p6lab{margin:0 0 14px;font:500 16px/1.3 var(--display);letter-spacing:-.01em;color:var(--ink)}
.parts6 .p6+.p6lab{margin-top:clamp(28px,3.2vw,44px)}
.parts6 .p6{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.parts6 .p6t{background:var(--panel);border-radius:24px;padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;justify-content:flex-start;gap:clamp(28px,4vw,56px);min-width:0;color:var(--ink);text-decoration:none;transition:background-color .2s ease-out}
.parts6 .p6top{display:flex;align-items:center;justify-content:space-between}
.parts6 .p6i{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#fff;color:var(--c)}.parts6 .p6i .ic{width:22px;height:22px}
.parts6 .p6go{width:36px;height:36px;border-radius:99px;display:grid;place-items:center;color:var(--ink2);transition:background-color .2s ease-out,color .2s ease-out}.parts6 .p6go .ic{width:18px;height:18px;transition:translate .2s cubic-bezier(.2,0,0,1)}
.parts6 .p6tx{display:grid;gap:8px}
.parts6 .p6w{font-size:14px;line-height:1.35;color:var(--ink2)}
.parts6 .p6n{font:500 clamp(20px,1.9vw,24px)/1.2 var(--display);letter-spacing:-.02em}
.parts6 .p6d{font-size:15px;line-height:1.45;color:var(--ink2);max-width:34em}
.parts6 .p6lead{background:#1F6FB8;color:#fff}.parts6 .p6lead .p6w,.parts6 .p6lead .p6d{color:rgba(255,255,255,.9)}.parts6 .p6lead .p6go{color:#fff}
.parts6 .p6lead .p6n{font-size:clamp(24px,2.6vw,34px);letter-spacing:-.03em}
.parts6 .p6t:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (hover:hover){.parts6 .p6t:hover{background:#ECECE8}.parts6 .p6lead:hover{background:#1A63A6}.parts6 .p6t:hover .p6go{background:#fff;color:var(--ink)}.parts6 .p6t:hover .p6go .ic{translate:2px 0}}
@media (min-width:600px){.parts6 .p6{grid-template-columns:repeat(2,minmax(0,1fr))}.parts6 .p6lead{grid-column:1/-1}.parts6 .p6b .p6t:last-child{grid-column:1/-1}}
@media (min-width:1000px){.parts6 .p6{grid-template-columns:repeat(12,minmax(0,1fr))}.parts6 .p6t{grid-column:span 3}.parts6 .p6lead{grid-column:span 6}.parts6 .p6b .p6t,.parts6 .p6b .p6t:last-child{grid-column:span 4}}
@media (prefers-reduced-motion:reduce){.parts6 .p6t,.parts6 .p6go,.parts6 .p6go .ic{transition:none}}

/* Case studies, v2 (8 Oct): head on the 50/50 pattern (title left | one line + controls right); cards as grey tiles with a white cover panel. Still a carousel with chevrons (DO-NOT #92). */
.cases6 .cs-head{display:grid;gap:24px;align-items:start;margin-bottom:clamp(32px,4vw,56px)}
.cases6 .cs-head .t-h2{max-width:none}
.cases6 .cs-side{display:grid;gap:20px;justify-items:start}.cases6 .cs-side .t-bodyL{margin:0}
@media (min-width:860px){.cases6 .cs-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px)}.cases6 .cs-side{padding-top:34px}}
.cases6 .cs-nav{background:var(--panel);box-shadow:none}
@media (hover:hover){.cases6 .cs-nav:not(:disabled):hover{background:#E9E9E5}}
.cases6 .cs-nav:active:not(:disabled){scale:.96}
.cases6 .cs-track{gap:16px;grid-auto-columns:calc((100% - 32px)/3);border-radius:24px}
.cases6 .csc{background:var(--panel);box-shadow:none;border-radius:24px;padding:12px 12px 24px;transform:none}
.cases6 .csc:hover{box-shadow:none;transform:none}
.cases6 .csc .cv{background:#fff;border-radius:12px;height:auto;aspect-ratio:16/10}
.cases6 .csc .cv img{height:72%;width:auto;transition:scale .35s cubic-bezier(.2,0,0,1)}
@media (hover:hover){.cases6 .csc:hover .cv img{scale:1.04}}
.cases6 .csc .tx{padding:20px 12px 0;gap:8px}
.cases6 .csc .tag{background:none;padding:0;border-radius:0;font:400 14px/1.35 var(--body);letter-spacing:0;text-transform:none;color:var(--ink2)}
.cases6 .csc .t-card{font:500 clamp(18px,1.6vw,20px)/1.3 var(--display);letter-spacing:-.015em;margin-bottom:24px;text-wrap:pretty}
.cases6 .csc .cs-cta{margin-top:auto;width:auto;align-self:flex-start;gap:10px;box-shadow:none;background:#fff}
@media (max-width:1099px){.cases6 .cs-track{grid-auto-columns:calc((100% - 16px)/2)}}
@media (max-width:767px){.cases6 .cs-track{grid-auto-columns:84%}.cases6 .cs-ctl{width:100%}}
@media (prefers-reduced-motion:reduce){.cases6 .csc .cv img{transition:none}}

/* Dynamatix and Catura, v2 (8 Oct): head on the 50/50 pattern, three fact tiles, then one held card: three steps left, the wrap picture right. */
.dyn6 .rhead{display:grid;gap:28px;margin-bottom:0}
.dyn6 .rhead .sec-head{margin:0}.dyn6 .rhead .t-h2{max-width:none;text-wrap:wrap}
.dyn6 .d6say{margin:0;max-width:none;font:400 clamp(17px,1.5vw,20px)/1.5 var(--body);letter-spacing:0;color:var(--ink2)}
@media (min-width:860px){.dyn6 .rhead{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}.dyn6 .d6say{padding-top:38px}}
.dyn6 .d6facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(32px,4vw,56px)}
.dyn6 .d6facts>div{background:var(--panel);border-radius:24px;padding:clamp(20px,2.4vw,32px);min-height:176px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-width:0}
.dyn6 .d6facts .n{font:500 clamp(40px,4.4vw,60px)/1 var(--display);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.dyn6 .d6facts span:last-child{font-size:15px;line-height:1.4;color:var(--ink2);max-width:22em}
.dyn6 .d6facts .blue{background:#1F6FB8;color:#fff}.dyn6 .d6facts .blue span:last-child{color:rgba(255,255,255,.9)}
@media (max-width:767px){.dyn6 .d6facts{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.dyn6 .d6facts>div{min-height:132px}.dyn6 .d6facts .blue{grid-column:1/-1}}
.dyn6 .cx-run{position:relative;margin-top:clamp(72px,8vw,120px)}
.dyn6 .cx{background:var(--panel);border-radius:24px;padding:clamp(16px,2.2vw,28px);display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.dyn6 .cx-l{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0;padding:clamp(4px,1vw,12px)}
.dyn6 .cx-l .t-eyebrow{margin:0}
.dyn6 .cx-l .t-h3{margin:0;font:500 clamp(22px,2vw,28px)/1.2 var(--display);letter-spacing:-.02em;text-wrap:pretty}
.dyn6 .cx-steps{list-style:none;margin:8px 0 4px;padding:0;align-self:stretch}
.dyn6 .cxs{display:grid;grid-template-columns:28px minmax(0,1fr);gap:0 12px;padding:14px 0;border-top:1px solid var(--hair)}
.dyn6 .cxs:first-child{border-top:0}
.dyn6 .cxs .n{font:500 12px/24px var(--body);color:var(--ink2);font-variant-numeric:tabular-nums}
.dyn6 .cxs h4{margin:0;font:500 18px/1.3 var(--display);letter-spacing:-.01em}
.dyn6 .cxs p{margin:6px 0 0;font-size:15px;line-height:1.45;color:var(--ink2)}
.dyn6 .cx-r{background:#fff;border-radius:12px;display:grid;place-items:center;padding:clamp(16px,2.4vw,32px);min-width:0}
.dyn6 .cx-pic{width:100%;max-width:520px;display:flex;flex-direction:column}
.dyn6 .cx-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:8px;align-items:end;padding:0 20px;position:relative;z-index:1}
.dyn6 .cx-mr{background:#1F6FB8;color:#fff;border-radius:12px 12px 0 0;padding:12px 14px 14px;display:grid;gap:2px;min-width:0}
.dyn6 .cx-mr .ic{width:18px;height:18px;margin-bottom:6px}
.dyn6 .cx-mr b{font:500 15px/1.2 var(--display);letter-spacing:-.01em}
.dyn6 .cx-mr small{font-size:12px;line-height:1.3;color:rgba(255,255,255,.9)}
.dyn6 .cx-more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 6px;padding-bottom:0}
.dyn6 .cx-p{display:grid;place-items:center;text-align:center;min-height:36px;padding:4px 6px;border-radius:8px;background:var(--panel);font:500 12px/1.2 var(--display);color:var(--ink)}
.dyn6 .cx-more .cx-p:nth-child(n+4){border-radius:8px 8px 0 0}
.dyn6 .cx-ring{position:relative;border-radius:20px;padding:14px;display:grid}
.dyn6 .cx-ring::before{content:"";position:absolute;inset:0;background:#E6F1FB;border-radius:20px;clip-path:inset(0 0 0 0 round 20px)}
.dyn6 .cx-ring>*{position:relative}
.dyn6 .cx-opts{display:none}
.dyn6 .cx-rh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:2px 6px 0}
.dyn6 .cx-rh small{font:400 12px/1.3 var(--body);color:#1E4B73}
.dyn6 .cx-word{font:600 26px/1 var(--display);letter-spacing:-.035em;color:#0F3F6B}.dyn6 .cx-word sup{font-size:.4em;vertical-align:top;position:relative;top:.15em;margin-left:.05em;font-weight:500;letter-spacing:0}
.dyn6 .cx-mods{display:grid;grid-template-columns:repeat(auto-fit,minmax(54px,1fr));gap:6px;margin-top:12px}
.dyn6 .cx-mods span{background:#fff;border-radius:8px;padding:8px 4px 7px;display:grid;justify-items:center;gap:5px;font:500 12px/1.2 var(--body);color:#0F3F6B}
.dyn6 .cx-mods i{width:8px;height:8px;border-radius:9px;background:var(--c)}
.dyn6 .cx-api{height:96px;position:relative;z-index:2}
.dyn6 .cx-tree{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.dyn6 .cx-tree path{fill:none;stroke:#2B8FD9;stroke-width:1.75;stroke-dasharray:4 4;stroke-linecap:round}
.dyn6 .cx-tree .nd{fill:#fff;stroke:#2B8FD9;stroke-width:1.75}.dyn6 .cx-tree .jn{fill:#2B8FD9}.dyn6 .cx-tree .dot{fill:#1F6FB8}
.dyn6 .cx-api>b{position:absolute;left:50%;top:64px;translate:-50% -50%;background:#fff;color:#16588E;border-radius:99px;padding:2px 10px;font:500 12px/1.3 var(--body);white-space:nowrap}
@keyframes cxdot{0%{translate:0 0;opacity:0}15%{opacity:1}85%{opacity:1}100%{translate:0 50px;opacity:0}}
.dyn6 .cx-core{background:#fff;border-radius:12px;padding:14px 16px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 12px;box-shadow:inset 0 0 0 1.5px rgba(17,17,17,.14)}
.dyn6 .cx-cn{display:inline-flex;align-items:center;gap:10px;font:500 16px/1.25 var(--display);color:var(--ink)}.dyn6 .cx-cn .ic{width:20px;height:20px;color:var(--ink2)}
.dyn6 .cx-kept{display:inline-flex;align-items:center;gap:6px;background:#E4F6F2;color:#0B6B58;border-radius:99px;padding:5px 10px;font:500 12.5px/1.3 var(--body)}.dyn6 .cx-kept .ic{width:14px;height:14px}
.dyn6 .cx-sys{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px}.dyn6 .cx-sys span{background:var(--panel);border-radius:6px;padding:4px 9px;font:400 12px/1.3 var(--body);color:var(--ink2)}
.dyn6 .cx-ints{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:12px 6px 2px}
.dyn6 .cx-ints span{background:#fff;border-radius:99px;padding:4px 10px;font:500 12.5px/1.3 var(--body);color:#1E4B73}
.dyn6 .cx-ints .cx-lab{background:none;padding:0;margin-right:4px;font-weight:400}
.dyn6 .cx-facts{display:flex;flex-wrap:wrap;gap:8px 28px;font-size:14px;line-height:1.4;color:var(--ink2);padding:4px clamp(4px,1vw,12px) 0}
.dyn6 .cx-facts span{display:inline-flex;align-items:center;gap:8px}.dyn6 .cx-facts .ic{width:18px;height:18px;color:var(--ink3);flex:none}
@media (min-width:860px){
  .dyn6 .cx{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px clamp(20px,3vw,48px)}
  .dyn6 .cx-facts{grid-column:1/-1}
  .dyn6 .cx.is-live{position:sticky}
  .dyn6 .cx.is-live .cxs{cursor:pointer}
  .dyn6 .cx.is-live .cxs h4{color:var(--ink3);transition:color .4s ease-out}.dyn6 .cx.is-live .cxs.on h4{color:var(--ink)}
  .dyn6 .cx.is-live .cxs p{display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;transition:grid-template-rows .55s cubic-bezier(.2,0,0,1),opacity .35s ease-out,margin-top .55s cubic-bezier(.2,0,0,1)}
  .dyn6 .cx.is-live .cxs p>span{overflow:hidden;min-height:0}
  .dyn6 .cx.is-live .cxs.on p{grid-template-rows:1fr;opacity:1;margin-top:6px}
  .dyn6 .cx.is-live .cxs:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  /* the picture's three states. Delays sit on the arriving state only, so going back is immediate. */
  .dyn6 .cx.is-live .cx-ring::before{transition:clip-path .6s cubic-bezier(.2,0,0,1)}
  .dyn6 .cx.is-live .cx-rh,.dyn6 .cx.is-live .cx-mods span,.dyn6 .cx.is-live .cx-ints span,.dyn6 .cx.is-live .cx-mr,.dyn6 .cx.is-live .cx-p{transition:opacity .35s ease-out,translate .5s cubic-bezier(.2,0,0,1),scale .5s cubic-bezier(.2,0,0,1)}
  .dyn6 .cx.is-live .cx-api{transition:clip-path .6s cubic-bezier(.2,0,0,1),opacity .25s ease-out;clip-path:inset(-12px -12px -12px -12px)}
  .dyn6 .cx.is-live .cx-rh{transition-delay:.25s}
  .dyn6 .cx.is-live .cx-mods span:nth-child(1){transition-delay:.34s}.dyn6 .cx.is-live .cx-mods span:nth-child(2){transition-delay:.39s}.dyn6 .cx.is-live .cx-mods span:nth-child(3){transition-delay:.44s}.dyn6 .cx.is-live .cx-mods span:nth-child(4){transition-delay:.49s}.dyn6 .cx.is-live .cx-mods span:nth-child(5){transition-delay:.54s}.dyn6 .cx.is-live .cx-mods span:nth-child(6){transition-delay:.59s}
  .dyn6 .cx.is-live .cx-api{transition-delay:.55s}
  .dyn6 .cx.is-live .cx-ints span:nth-child(1){transition-delay:.6s}.dyn6 .cx.is-live .cx-ints span:nth-child(2){transition-delay:.66s}.dyn6 .cx.is-live .cx-ints span:nth-child(3){transition-delay:.72s}.dyn6 .cx.is-live .cx-ints span:nth-child(4){transition-delay:.78s}.dyn6 .cx.is-live .cx-ints span:nth-child(5){transition-delay:.84s}
  .dyn6 .cx.is-live .cx-more .cx-p:nth-child(1){transition-delay:.12s}.dyn6 .cx.is-live .cx-more .cx-p:nth-child(2){transition-delay:.17s}.dyn6 .cx.is-live .cx-more .cx-p:nth-child(3){transition-delay:.22s}.dyn6 .cx.is-live .cx-more .cx-p:nth-child(4){transition-delay:.27s}.dyn6 .cx.is-live .cx-more .cx-p:nth-child(5){transition-delay:.32s}.dyn6 .cx.is-live .cx-more .cx-p:nth-child(6){transition-delay:.37s}
  .dyn6 .cx[data-on="0"] .cx-ring::before{clip-path:inset(var(--wt,40%) var(--wr,14px) var(--wb,20%) var(--wl,14px) round 12px)}
  .dyn6 .cx[data-on="0"] .cx-rh,.dyn6 .cx[data-on="0"] .cx-mods span,.dyn6 .cx[data-on="0"] .cx-ints span{opacity:0;translate:0 6px;scale:.94;transition-delay:0s!important}
  .dyn6 .cx[data-on="0"] .cx-api{clip-path:inset(100% -12px -12px -12px);opacity:0;transition-delay:0s!important}
  .dyn6 .cx[data-on="0"] .cx-mr,.dyn6 .cx[data-on="0"] .cx-p,.dyn6 .cx[data-on="1"] .cx-mr,.dyn6 .cx[data-on="1"] .cx-p{opacity:0;translate:0 -14px;transition-delay:0s!important}
  /* step 1 only: the usual choices, struck through one after another */
  .dyn6 .cx.is-live .cx-opts{display:flex;flex-wrap:wrap;align-items:center;gap:6px;position:absolute;left:14px;right:14px;top:16px;opacity:0;pointer-events:none;transition:opacity .25s ease-out}
  .dyn6 .cx[data-on="0"] .cx-opts{opacity:1;transition-delay:.3s}
  .dyn6 .cx-opts small{flex-basis:100%;font:400 12px/1.3 var(--body);color:var(--ink2);margin-bottom:2px}
  .dyn6 .cx-opts span{background:var(--panel);border-radius:99px;padding:5px 11px;font:500 13px/1.3 var(--body);color:var(--ink2)}
  .dyn6 .cx-opts s{text-decoration:none;position:relative}
  .dyn6 .cx-opts s::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:1.5px;background:#B4443A;scale:0 1;transform-origin:0 50%}
  .dyn6 .cx[data-on="0"] .cx-opts s::after{animation:cxstrike .4s cubic-bezier(.2,0,0,1) .7s both}
  .dyn6 .cx[data-on="0"] .cx-opts span:nth-of-type(2) s::after{animation-delay:.95s}.dyn6 .cx[data-on="0"] .cx-opts span:nth-of-type(3) s::after{animation-delay:1.2s}
}
@keyframes cxstrike{to{scale:1 1}}
@media (prefers-reduced-motion:reduce){.dyn6 .cx *,.dyn6 .cx *::before,.dyn6 .cx *::after{transition:none!important;animation:none!important}.dyn6 .cx-tree .dot{display:none}.dyn6 .cx-opts s::after{scale:1 1}}
/* 8 Oct (owner): the line and the controls beside the case-studies title sit on the right edge */
@media (min-width:860px){.cases6 .cs-side{justify-items:end;text-align:right}.cases6 .cs-ctl{justify-content:flex-end}.cases6 .cs-all{margin-right:6px}}
@media (max-width:519px){.dyn6 .cx-top{grid-template-columns:minmax(0,1fr);padding:0 14px;gap:6px}.dyn6 .cx-mr{border-radius:12px;grid-template-columns:auto 1fr;align-items:center;gap:2px 10px;padding:12px 14px}.dyn6 .cx-mr .ic{grid-row:span 2;margin:0}.dyn6 .cx-mods{grid-template-columns:repeat(3,minmax(0,1fr))}.dyn6 .cx-p{min-height:40px}}

/* Close, v2 (8 Oct): a blue panel that answers the hero (same moving gradient and grain), everything centred. */
.close.close6{background:none;color:#fff;padding-top:clamp(72px,8vw,120px)}
.close.close6 .wrap{display:block;padding-block:0}
.close6 .c6{position:relative;isolation:isolate;overflow:hidden;background:#1F6FB8;border-radius:24px;padding:clamp(56px,8vw,112px) clamp(20px,4vw,56px);display:flex;flex-direction:column;align-items:center;gap:32px;text-align:center}
.close6 .c6>[data-scene]{display:flex;flex-direction:column;align-items:center}
.close6 .h8-blobs i:nth-child(1){background:#2172BC}.close6 .h8-blobs i:nth-child(2){background:#185FA3}.close6 .h8-blobs i:nth-child(3){background:#1C6BB3}.close6 .h8-blobs i:nth-child(4){background:#1A66AE}
.close6 .recap{justify-content:center;margin:0 0 24px}.close6 .recap li{color:rgba(255,255,255,.92)}.close6 .recap li+li::before{background:rgba(255,255,255,.45)}
.close6 .tick2{background:rgba(255,255,255,.18)}.close6 .tick2 .ic{color:#fff}
.close6 .t-h2{margin:0;max-width:16em;font:500 clamp(30px,3.9vw,56px)/1.06 var(--display);letter-spacing:-.04em;text-wrap:balance;color:#fff}
.close6 .tk{justify-content:center;gap:10px 24px;margin-top:24px;color:rgba(255,255,255,.92)}
.close6 .btn-light{box-shadow:none}
/* Footer (8 Oct): plain on the page, no card around it (owner). Less space above it than before. All pages. */
footer.sf{padding-top:clamp(72px,8vw,120px)}
@media (max-width:519px){.close6 .recap{gap:10px 18px}.close6 .recap li+li::before{display:none}.close6 .tk{flex-direction:column;align-items:center}}

/* 8 Oct, audit fixes */
/* journey and alerts heads on the same 50/50 pattern as the other sections */
#journey .rhead,#alerts .rhead{display:grid;gap:20px;margin-bottom:clamp(32px,4vw,56px)}
#journey .rhead .sec-head,#alerts .rhead .sec-head{margin:0}#journey .rhead .t-h2,#alerts .rhead .t-h2{max-width:none;text-wrap:wrap}
#journey .rside,#alerts .rside{margin:0;max-width:34em}
@media (min-width:860px){#journey .rhead,#alerts .rhead{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}#journey .rside,#alerts .rside{padding-top:38px}}
/* one sub-heading size: journey steps, Catura steps and alert people follow the sub-sections, the reasons and the part tiles */
.journey .jhead .t-h3,#journey .jstep .t-h3{font:500 clamp(22px,2vw,28px)/1.2 var(--display)!important;letter-spacing:-.02em}
.dyn6 .cxs h4{font-size:22px;line-height:1.2;letter-spacing:-.015em}.dyn6 .cxs .n{line-height:27px}
#alerts .rp-n{font:500 clamp(20px,1.9vw,24px)/1.2 var(--display);letter-spacing:-.02em}
/* text links at least 24 px tall to tap */
main :is(p,span,small,li)>a:not(.btn):not([class*="p6"]){padding-block:5px}
#alerts .rp-go{min-height:24px}
.sf-cols a,.sf-legal a,.sf-mail a{min-height:24px;display:inline-flex;align-items:center}
/* the last screen of the home has one "Book a demo" besides the menu's: the blue close. The footer's stays on the part pages. */
main:has(.close6)+footer.sf .sf-act>.btn{display:none}
.close6 .c6m{margin:16px 0 0;font:400 clamp(16px,1.5vw,19px)/1.4 var(--body);color:rgba(255,255,255,.92)}
/* phone: small pictures in the four reasons and the journey rows keep inside their cards */
@media (max-width:519px){#problem .wst .u.wl .r,#problem .wst .look,#problem .wst .cav{flex-wrap:wrap;min-width:0}#problem .wst .u{min-width:0;max-width:100%}.journey .dmock .dr{min-width:0}.journey .dmock .dr>*{min-width:0}}

/* 8 Oct (owner): the journey's picture card hugs its picture instead of a fixed 540 px height */
@media (min-width:860px){#journey .jsteps .jshot{height:auto;top:96px}}

/* ===== 8 Oct (owner): page tone + tinted buttons. Easy to revert: delete this block and the matching ones in parts.css,
   close-form.css and nav/nav.css (all marked "page tone"). =====
   Rule: a card that holds a motion graphic sits on the page's own pale tone (--wash: pale blue on the home, pink on the broker
   portal, and so on). Fact tiles stay grey. The strong blue does not change. */
#problem .why,#alerts .ro,.dyn6 .cx{background:var(--wash)}
/* tinted buttons. On a pale-tone or white surface: a soft fill of the surface's own colour (--c). On blue: see-through white. */
.btn-tint,#alerts .rp-go{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border-radius:999px;font-weight:500;text-decoration:none;color:var(--ink);
  background:color-mix(in srgb,var(--c,#2B8FD9) 13%,transparent);transition:background-color .2s ease-out}
@media (hover:hover){.btn-tint:hover,#alerts .rp-go:hover{background:color-mix(in srgb,var(--c,#2B8FD9) 22%,transparent)}}
#alerts .ro.is-live .rp:not(.on) .rp-go{background:var(--panel)}
.parts6 .p6lead .p6go{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);color:#fff}
@media (hover:hover){.parts6 .p6t.p6lead:hover .p6go{background:rgba(255,255,255,.24);color:#fff}}
:root{--wash:#E6F1FB}  /* page tone: the home's is pale blue; the part pages set their own on <body> */

/* page tone, stronger (8 Oct, owner could not see it): the first version reused the old pale washes (about 11% of the page
   colour), which sit almost at the same lightness as the grey tiles. The tone is now 20% of the page colour on white, set once
   on <body> so every page works it out from its own colour, and used by every card or frame that holds a motion graphic. */
body{--tone:color-mix(in srgb,var(--c,#2B8FD9) 20%,#fff)}
#problem .why,#alerts .ro,.dyn6 .cx,#journey .jsteps .jshot,#problem .pscene{background:var(--tone)}
/* page tone fix: the timeline's card is .when, inside .pscene. The tone belongs on the card; on the wrapper it showed as blue corners behind a grey card. */
#problem .pscene{background:none}
#problem .pscene .when{background:var(--tone)}

/* ===== 8 Oct: sweep after the page tones (owner: fix the UI issues the tones exposed). Measured by a contrast and layout sweep
   of all seven pages; each rule below answers one finding. ===== */
body{--c-ink:color-mix(in srgb,var(--c,#2B8FD9) 68%,#000)}                 /* the page colour, dark enough for small text on white */
.jverb,.step .n{color:var(--c-ink)}                                          /* step labels "1 APPLY": were 3.2-3.5:1 */
.illus{color:var(--ink2)}                                                    /* "Illustrative example.": was 3.7-4.0:1 */
#problem .pfig .t-small,#problem .pfig>div:first-of-type .t-small{color:inherit}
#problem .proof.pfig>div[style*="1F6FB8"] *,#problem .pfig .blue *{color:#fff}
#reform .rf3-big .rf3-k,#reform .rf3-big small{color:rgba(255,255,255,.96)}      /* small text on the blue reform tile: was 4.3:1 */
.dyn6 .cx.is-live .cxs h4{color:var(--ink2)}.dyn6 .cx.is-live .cxs.on h4{color:var(--ink)}   /* waiting Catura steps on the tone: were 4.0:1 */
#problem .when .wstn li span{color:#3F4650}                                   /* timeline labels on the tone: were 1.4-2.1:1 */
#problem .when .wlane{opacity:1}
@media (max-width:859px){#problem .why .wc{background:#fff}}                 /* phone: the four reason cards were grey on the blue tone */
/* see-through buttons on blue: a lighter fill, so white 15-16 px text stays above 4.5:1 (was 4.0:1) */
.wow.h8 .wow-btn.wow-btn-ghost{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.parts6 .p6lead .p6go{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
#problem .when .wstn li span{color:#3F4650!important;opacity:1!important}
#problem .proof.pfig>div:nth-of-type(2) .t-small{color:#fff}

/* ===== Phone and tablet pass, 8 Oct =====
   Below 860 px the four reasons keep the desktop idea (text on the page tone, the picture in white)
   with the text above (phone) or beside (tablet) its white picture; before, the columns were squeezed and the labels overlapped. */
@media (max-width:859px){
  #problem .why-pin>.why{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;background:none;border-radius:0;padding:0}
  #problem .why .wc{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto;gap:20px;align-items:center;background:var(--tone)!important;border-radius:24px;padding:24px 20px 20px;min-height:0}
  #problem .why .wc .wtx{order:-1;grid-row:auto;grid-column:auto;align-self:auto;display:grid;gap:8px;min-width:0}
  #problem .why .wc .wtx .n,#problem .why .wc .wtx h4,#problem .why .wc .wtx p{grid-row:auto;grid-column:auto;margin:0}
  #problem .why .wc .wtx h4{font-size:22px;line-height:1.2}
  #problem .why .wc .wtx p{display:block;font-size:16px;line-height:1.5;max-width:34em}
  #problem .why .wc .wst{grid-row:auto;grid-column:auto;display:flex;align-items:center;justify-content:center;min-height:0;padding:0;background:none;border-radius:0;min-width:0}
  #problem .why .wc .wst>*{width:100%;max-width:none}
  #problem .why .wst .u.wl .r{flex-wrap:nowrap}
}
@media (min-width:600px) and (max-width:859px){
    #problem .why .wc{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;padding:28px}
  #problem .why .wc .wst{align-self:center}
}
/* phone: the heading over the four figures spans the row; the fourth figure no longer sits alone in half a row */
@media (max-width:767px){
  #problem .proof.pfig>.pfig-l{grid-column:1/-1!important}
  #problem .proof.pfig>div:nth-of-type(4){grid-column:1/-1!important;min-height:0!important}
}
/* tablet: the blue reform tile spans the row so the four points sit two by two; phone: points hug their text */
@media (max-width:999px){#reform .rf3>div.rf3-big:nth-child(n){grid-column:1/-1!important}}
@media (max-width:519px){#reform .rf3>div:not(.rf3-big){display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:4px;align-items:start;padding:20px}
  #reform .rf3>div:not(.rf3-big) .itile{grid-row:1/span 2;margin:0}#reform .rf3>div:not(.rf3-big) b{margin:0;align-self:center}#reform .rf3>div:not(.rf3-big)>span:last-child{grid-column:2}
  #reform .rf3-big{min-height:0!important}}
/* finger-sized links: footer lists and the part pills in the alert cards */
@media (max-width:999px){.sf-cols>div{gap:4px}.sf-cols a{display:flex;align-items:center;min-height:40px}.sf-cols h3{margin-bottom:8px}.sf-mail a{display:inline-flex;align-items:center;min-height:40px}
  #alerts .rp-go{min-height:44px}.sf-legal a{display:inline-flex;align-items:center;min-height:40px}}
@media (min-width:1000px) and (max-width:1199px){#alerts .rp-go{white-space:nowrap;padding-inline:12px;font-size:14px;gap:6px}}

/* ===== 8 Oct (owner picked wireframe option A, D-204): on desktop the four reasons are four toned tiles, two by two,
   all open: number, heading, text, and the white picture directly under them. Same idea as phone and tablet. No scroll hold. */
@media (min-width:860px){
  #problem .why-run{height:auto!important}
  #problem .why-pin{position:static;display:block}
  #problem .why-pin .why-h{margin:0 0 clamp(16px,2vw,28px)}
  #problem .why-pin>.why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;background:none;padding:0;border-radius:0}
  #problem .why .wc{display:flex;flex-direction:column;background:var(--tone);border-radius:24px;padding:clamp(20px,2.4vw,32px);border:0;min-height:0}
  #problem .why .wc .wtx{order:1;display:grid;grid-template-columns:minmax(0,1fr);row-gap:6px;padding:0 0 24px;border:0;min-height:0;color:var(--ink);cursor:default}
  #problem .why .wc .wtx:hover{color:var(--ink)}
  #problem .why .wc .wtx .n,#problem .why .wc .wtx h4,#problem .why .wc .wtx p{grid-column:1;grid-row:auto}
  #problem .why .wc .wtx .n{margin:0 0 6px;color:var(--ink2)}
  #problem .why .wc .wtx p,#problem .why .wc.is-on .wtx p{display:block;max-height:none;opacity:1;margin:2px 0 0;transition:none;max-width:34em}
  #problem .why .wc .wtx p>span{overflow:visible}
  #problem .why .wc .wst,#problem .why .wc.is-on .wst{order:2;display:flex;opacity:1;translate:none;pointer-events:auto;transition:none;margin:auto 0 0;min-height:0;height:232px;padding:20px;background:#fff;border-radius:16px;align-items:center;justify-content:center;grid-column:auto;grid-row:auto}
  #problem .why .wc .wst>*,#problem .why .wc.is-on .wst>*{zoom:1;width:100%;max-width:400px;animation:none}
}
/* phone: the heading over the cost figures starts on the page margin like every other heading (it was inset 16 px) */
@media (max-width:767px){#problem .proof.pfig>.pfig-l{padding-left:0!important;padding-right:0!important}}

/* ── How it works: one sale, three steps, on one board (9 Oct). Replaces the four-step "How it works" and the "Day-one alerts" board.
   Head on the pattern of "The answer" (title left, three points right); under it one full-width tone card.
   Markup = the finished case. caseflow.js adds .cf-live, hides it and plays it; without the script, or with reduced motion, the finished case shows.
   Rules for the old #journey steps and the old #alerts board above are no longer used by the home page. ── */
.caseflow .cf-head{display:grid;gap:28px;margin-bottom:clamp(32px,4vw,56px)}
.caseflow .cf-head .sec-head{margin:0}.caseflow .cf-head .t-h2{max-width:none;text-wrap:wrap}
.caseflow .cf-pts{margin:0}
.caseflow .cf-pts li,.caseflow .cf-pts li:last-child{border:0;padding:8px 0}
@media (min-width:860px){.caseflow .cf-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}.caseflow .cf-pts{padding-top:34px}}
/* the point that matches the step now playing is lit; the others step back */
.cf-head[data-beat] .cf-pts li{color:var(--ink2);cursor:pointer;transition:color .3s ease-out}
.cf-head[data-beat] .cf-pts li b{color:inherit}
.cf-head[data-beat="1"] .cf-pts li:nth-child(1),.cf-head[data-beat="2"] .cf-pts li:nth-child(2),.cf-head[data-beat="3"] .cf-pts li:nth-child(3){color:var(--ink)}
.cf-head[data-beat="1"] .cf-pts li:nth-child(1)::before,.cf-head[data-beat="2"] .cf-pts li:nth-child(2)::before,.cf-head[data-beat="3"] .cf-pts li:nth-child(3)::before{background:#1F6FB8;color:#fff}
.cf-pts li:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:6px}
/* the board */
.cf{position:relative;background:var(--tone,#D5E9F7);border-radius:24px;padding:clamp(16px,2.4vw,32px)}
.caseflow .proof-note{margin-top:16px}
.cf-card{position:relative}
.cf-app{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:#fff;border-radius:12px 12px 0 0;margin:0}
.cf-app.last{border-radius:12px}
.cf-app p{margin:0;padding:12px 14px;display:grid;gap:4px;align-content:center;border-left:1px solid var(--hair);color:var(--ink2);min-width:0}
.cf-app p:nth-child(odd){border-left:0}.cf-app p:nth-child(n+3){border-top:1px solid var(--hair)}
.cf-app span{font:500 13px/1.2 var(--body)}.cf-app b{display:block;min-height:1.3em;font:500 14px/1.3 var(--display);color:var(--ink)}
.cf-rows{list-style:none;margin:0;padding:0}
.cf-row{display:flex;align-items:center;gap:12px;background:#fff;border-top:1px solid var(--hair);padding:10px 14px;font:500 15px/1.25 var(--display);color:var(--ink);min-width:0}
.cf-row:last-child,.cf-row.last{border-radius:0 0 12px 12px}
.cf-rl{flex:1 1 auto;min-width:0;display:flex;align-items:baseline;gap:4px 12px;flex-wrap:wrap}
.cf-rl em{font:400 12px/1.3 var(--body);font-style:normal;color:var(--ink3);display:none}
.cf-dots{display:none;gap:6px;flex:none}
.cf-dots b{width:10px;height:10px;border-radius:50%;background:var(--panel);box-shadow:inset 0 0 0 1.5px #C6C6C2;scale:.85;transition:background-color .2s ease-out,box-shadow .2s ease-out,scale .3s cubic-bezier(.34,1.45,.64,1)}
.cf-dots b.on{background:#1E7D4F;box-shadow:none;scale:1}.cf-dots b.am{background:#D9860B;box-shadow:none;scale:1}
.cf-pill{flex:none;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font:500 12px/1.2 var(--body);border-radius:99px;padding:4px 9px;background:var(--panel);color:var(--ink2);transition:background-color .2s ease-out,color .2s ease-out}
.cf-pill .ic{width:12px;height:12px;flex:none}
.cf-pill.run{background:#E6F1FB;color:#17578F}.cf-pill.ok{background:#E3F3EA;color:#12613A;padding-left:7px}.cf-pill.al{background:#FFF1D0;color:#7A4B00}
.cf-spin{width:9px;height:9px;border-radius:50%;border:1.5px solid currentColor;border-top-color:transparent;animation:cf-turn .6s linear infinite}
.cf-still{width:7px;height:7px;border-radius:50%;background:currentColor}
@keyframes cf-turn{to{rotate:360deg}}
.cf-wires{display:none;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1;transition:opacity .25s ease-out}
.cf-wires.fade{opacity:0;transition-duration:.15s}
.cf-who{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.cf-p{background:#fff;border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px;min-width:0}
.cf-ph{display:grid;grid-template-columns:28px minmax(0,1fr);gap:0 8px;align-items:center}
.cf-pi{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--panel);color:var(--ink3);transition:background-color .2s ease-out,color .2s ease-out}
.cf-pi .ic{width:16px;height:16px}
.cf-pn{margin:0;font:500 16px/1.2 var(--display);letter-spacing:-.01em}
.cf-pl{display:none;grid-column:1/-1;margin:10px 0 0;font-size:14px;line-height:1.4;color:var(--ink2)}
.cf-b{margin:0;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--wash);border-radius:10px;padding:10px 8px;font:500 14px/1.35 var(--display);text-align:center}
.cf-b .ic{width:16px;height:16px;flex:none;color:var(--c)}
.cf-b.al{background:#FFF1D0}.cf-b.al .ic{color:#B56A00}.cf-b.ok{background:#E3F3EA}.cf-b.ok .ic{color:#1E7D4F}
.cf-r{margin:4px 0 0;display:grid;gap:4px}
.cf-r b{font:500 22px/1.05 var(--display);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.cf-r span{font-size:14px;line-height:1.35}.cf-q span{color:var(--ink2)}
@media (min-width:400px){.cf-dots{display:flex}}
/* PHONE (under 600): the people are rows under the card, like the card's own lines: icon and name on the left, badge on the right.
   A rail down the left joins them to the card, with a ring at each person that fills in their colour when it is their turn. */
@media (max-width:599px){
  .cf-who{position:relative;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:0;padding:14px 0 0 26px}
  .cf-who::before{content:"";position:absolute;left:10px;top:0;bottom:30px;width:1.5px;background:#C6C6C2;border-radius:2px}
  .cf-p{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 10px;padding:10px 10px 10px 12px;border-radius:12px}
  .cf-p::before{content:"";position:absolute;left:-21px;top:50%;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.75px #C6C6C2;transition:background-color .25s ease-out,box-shadow .25s ease-out,scale .3s cubic-bezier(.34,1.45,.64,1)}
  .cf-p.hot::before{background:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 22%,transparent);scale:1.1}
  .cf-b{padding:6px 10px;font-size:13px;gap:6px;border-radius:99px;white-space:nowrap}.cf-b .ic{width:14px;height:14px}
  .cf-r{grid-column:1/-1;margin:0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}.cf-r b{font-size:16px;letter-spacing:-.01em}.cf-r span{font-size:13px}
  .cf-pi{display:none}.cf-ph{grid-template-columns:minmax(0,1fr)}.cf-pn{font-size:16px}
  .cf-live .cf-p,.cf-live .cf-p.show.p1,.cf-live .cf-p.show.p2,.cf-live .cf-p.p1{scale:1;box-shadow:none}
  .cf-live .cf-p{translate:-10px 0}.cf-live .cf-p.show,.cf-live .cf-p.show.p1,.cf-live .cf-p.show.p2{translate:0 0}
  .cf-live .cf-p.hot{box-shadow:0 0 0 1.75px var(--c)}
  .cf-live .cf-who::before{scale:1 0;transform-origin:50% 0;transition:scale .6s cubic-bezier(.65,0,.35,1)}
  .cf-live .cf-who.rail::before{scale:1 1}
}
/* TABLET (600 to 999): four people in one row under the card with the curves, as on desktop, but each card is icon over name and has no role line */
@media (min-width:600px){.cf-app{grid-template-columns:repeat(4,minmax(0,1fr))}.cf-app p:nth-child(odd){border-left:1px solid var(--hair)}.cf-app p:first-child{border-left:0}.cf-app p:nth-child(n+3){border-top:0}
  .cf-rl em{display:block}.cf-row{padding:10px 16px;gap:16px}
  .cf-wires{display:block}
  .cf-who{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:60px}
  .cf-p{padding:14px;gap:12px}
  .cf-ph{grid-template-columns:minmax(0,1fr);gap:10px}.cf-pi{width:32px;height:32px;border-radius:9px}.cf-pi .ic{width:17px;height:17px}.cf-pn{font-size:17px}
  .cf-b{font-size:13px;padding:6px;gap:6px;min-height:46px}.cf-b .ic{width:14px;height:14px}
  .cf-r b{font-size:20px}.cf-r span{font-size:13px}}
/* DESKTOP (from 1000): icon beside name, the role line, more room */
@media (min-width:1000px){.cf-who{gap:12px;margin-top:72px}.cf-p{padding:18px;gap:14px}
  .cf-ph{grid-template-columns:36px minmax(0,1fr);gap:0 12px}.cf-pi{width:36px;height:36px;border-radius:10px}.cf-pi .ic{width:18px;height:18px}.cf-pn{font-size:24px;letter-spacing:-.02em}.cf-pl{display:block}
  .cf-b{font-size:14px;padding:10px 12px;gap:8px;min-height:0}.cf-b .ic{width:16px;height:16px}.cf-r b{font-size:26px}.cf-r span{font-size:14px}}
/* the curves: one per person, from the person up to one point on the card's bottom edge */
.cf-wires path{fill:none;stroke:#D2D2CE;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.cf-wires .nd{fill:#fff;stroke:#C6C6C2;stroke-width:1.75}
.cf-wires .dot{fill:var(--c);display:none}
.cf-wires .w{opacity:0;transition:opacity .2s ease-out}.cf-wires .w.drawn{opacity:1}
.cf-wires .w.drawn path{stroke-dashoffset:0;transition:stroke-dashoffset .5s cubic-bezier(.65,0,.35,1),stroke .25s ease-in-out}
.cf-wires .w.on path{stroke:var(--c);stroke-width:1.75}.cf-wires .w.on .nd{stroke:var(--c)}
.cf-wires .w.on:not(.dn) .dot:not(.dn),.cf-wires .w.on.dn .dot.dn{display:block}
.cf-wires .hub circle{fill:#1F6FB8;stroke:#fff;stroke-width:3;transform-box:fill-box;transform-origin:center;scale:.3;transition:scale .4s cubic-bezier(.34,1.45,.64,1)}
.cf-wires .hub.drawn circle{scale:1}
/* playing: everything starts hidden and arrives in order */
.cf-live .cf-app{opacity:0;translate:0 12px;scale:.98}
.cf-live .cf-app.in{opacity:1;translate:0 0;scale:1;transition:opacity .3s ease-out,translate .55s cubic-bezier(.22,1,.36,1),scale .55s cubic-bezier(.22,1,.36,1),border-radius .3s ease-out}
.cf-live .cf-app p>*{opacity:0;translate:0 6px}
.cf-live .cf-app p.in>*{opacity:1;translate:0 0;transition:opacity .25s ease-out,translate .45s cubic-bezier(.22,1,.36,1)}
.cf-live .cf-app p.typing b::after{content:"";display:inline-block;width:1.5px;height:1em;margin-left:2px;vertical-align:-2px;background:#1F6FB8;animation:cf-caret .7s steps(1) infinite}
@keyframes cf-caret{50%{opacity:0}}
.cf-live .cf-row{max-height:0;overflow:hidden;opacity:0;padding-block:0;border-top-width:0;translate:0 -8px;transition:max-height .5s cubic-bezier(.65,0,.35,1),padding .5s cubic-bezier(.65,0,.35,1),opacity .3s ease-out .15s,translate .5s cubic-bezier(.22,1,.36,1)}
.cf-live .cf-row.on{max-height:120px;opacity:1;padding-block:10px;border-top-width:1px;translate:0 0}
.cf-live .cf-row:last-child:not(.last){border-radius:0}
.cf-live .cf-p{opacity:0;translate:0 18px;scale:.97}
.cf-live .cf-p.show{opacity:1;translate:0 0;scale:1;transition:opacity .4s ease-out,translate .65s cubic-bezier(.22,1,.36,1),scale .65s cubic-bezier(.22,1,.36,1),box-shadow .3s ease-in-out}
.cf-live .cf-p.hot{box-shadow:0 0 0 1.75px var(--c)}
.cf-live .cf-p.hot .cf-pi{background:var(--wash);color:var(--c)}
/* the buyer's card: appears in the middle of the board, moves down, then to its place */
.cf-live .cf-p.p1,.cf-live .cf-p.p2{position:relative;z-index:3}
.cf-live .cf-p.p1{translate:var(--dx,0) calc(var(--dy,0px) + 16px)}
.cf-live .cf-p.show.p1{translate:var(--dx,0) var(--dy,0);scale:1.06;box-shadow:0 14px 36px rgba(20,70,120,.14)}
.cf-live .cf-p.show.p2{translate:var(--dx,0) 0}
.cf-live .cf-p:first-child.show{transition:opacity .4s ease-out,translate .8s cubic-bezier(.65,0,.35,1),scale .8s cubic-bezier(.65,0,.35,1),box-shadow .5s ease-in-out}
.cf-live .cf-b{opacity:0;scale:.96}
.cf-live .cf-p.in .cf-b{opacity:1;scale:1;transition:opacity .2s ease-out,scale .4s cubic-bezier(.34,1.45,.64,1)}
.cf-live .cf-b.pop{animation:cf-pop .4s cubic-bezier(.34,1.45,.64,1)}
@keyframes cf-pop{from{scale:.9;opacity:.4}to{scale:1;opacity:1}}
.cf-live .cf-r{display:none}
.cf-live .cf-p.res .cf-r{display:grid;animation:cf-in .45s cubic-bezier(.22,1,.36,1) both}
.cf-live .cf-p.res:nth-child(2) .cf-r{animation-delay:.1s}.cf-live .cf-p.res:nth-child(3) .cf-r{animation-delay:.2s}.cf-live .cf-p.res:nth-child(4) .cf-r{animation-delay:.3s}
@keyframes cf-in{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
.cf.cf-snap,.cf.cf-snap *{transition:none!important;animation:none!important}
/* phone: the buyer's row does not travel across the board, it just arrives like the others */
@media (max-width:599px){.cf-live .cf-p.p1{translate:-10px 0}.cf-live .cf-p.show.p1,.cf-live .cf-p.show.p2{translate:0 0;scale:1;box-shadow:none}
  .cf-live .cf-p:first-child.show{transition:opacity .4s ease-out,translate .5s cubic-bezier(.22,1,.36,1),box-shadow .3s ease-in-out}}
@media (max-width:599px){
  /* a name is never cut: the badge takes what is left and may wrap; the result sits on one line under the name */
  .cf-p{grid-template-columns:auto minmax(0,1fr)}
  .cf-b{justify-self:end;white-space:normal;text-align:left;max-width:100%}
  .cf-live .cf-p.res .cf-r{display:flex}
  .cf-r b{font-size:15px;line-height:1.3}.cf-r span{font-size:13px;line-height:1.3}
}
@media (min-width:600px) and (max-width:767px){.cf-pn{font-size:15px}.cf-p{padding:12px}.cf-who{gap:8px}}

/* PHONE, while it plays: the explanation stays in view with the animation.
   The three points become a small bar of three labels with the sentence of the step now playing under it, and that bar sticks under the site's nav
   while the card passes below. Nothing here uses a fixed screen height: the bar is as tall as its words, it sticks with position:sticky, and its offset
   is the nav's real bottom edge (measured by caseflow.js into --cf-top). The card is tightened so that on most phones bar and card fit one screen;
   on a shorter phone the card simply continues below and the bar stays put. Without the script, or with reduced motion, the plain list shows. */
.cf-pts b i{font-style:normal}
@media (max-width:599px){
  .caseflow .cf-head[data-beat]{display:contents}
  .caseflow .cf-head[data-beat] .sec-head{margin-bottom:20px}
  .caseflow .cf-head[data-beat] .cf-pts{position:sticky;top:var(--cf-top,72px);z-index:5;display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:8px 6px;margin:0 calc(var(--gut,16px)*-1) 12px;padding:8px var(--gut,16px) 10px;background:var(--bg,#fff);border-bottom:1px solid var(--hair)}
  .cf-head[data-beat] .cf-pts li,.cf-head[data-beat] .cf-pts li>span{display:contents}
  .cf-head[data-beat] .cf-pts li::before{display:none}
  .cf-head[data-beat] .cf-pts b{grid-row:1;display:inline-flex;align-items:center;gap:6px;padding:6px 10px 6px 6px;border-radius:99px;background:var(--panel);color:var(--ink2);font:500 13px/1.2 var(--display);white-space:nowrap;transition:background-color .25s ease-out,color .25s ease-out}
  .cf-head[data-beat] .cf-pts b::before{content:counter(pt);display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#fff;color:var(--ink2);font:600 11px/1 var(--body)}
  .cf-head[data-beat] .cf-pts b i{display:none}
  .cf-head[data-beat] .cf-pts .cf-say{grid-row:2;grid-column:1/-1;display:none;font-size:15px;line-height:1.4;color:var(--ink)}
  .cf-head[data-beat="1"] .cf-pts li:nth-child(1) b,.cf-head[data-beat="2"] .cf-pts li:nth-child(2) b,.cf-head[data-beat="3"] .cf-pts li:nth-child(3) b{background:#1F6FB8;color:#fff}
  .cf-head[data-beat="1"] .cf-pts li:nth-child(1) b::before,.cf-head[data-beat="2"] .cf-pts li:nth-child(2) b::before,.cf-head[data-beat="3"] .cf-pts li:nth-child(3) b::before{color:#1F6FB8}
  .cf-head[data-beat="1"] .cf-pts li:nth-child(1) .cf-say,.cf-head[data-beat="2"] .cf-pts li:nth-child(2) .cf-say,.cf-head[data-beat="3"] .cf-pts li:nth-child(3) .cf-say{display:block}
  /* a tighter card on phones */
  .cf{padding:12px;border-radius:20px}
  .cf-app p{padding:8px 12px;gap:2px}.cf-app span{font-size:12px}
  .cf-row{padding:8px 12px;font-size:14px}.cf-live .cf-row.on{padding-block:8px}
  .cf-who{padding-top:10px;gap:6px}
  .cf-p{padding:8px 8px 8px 12px;gap:2px 10px}
  .cf-pn{font-size:15px}.cf-b{padding:5px 9px;font-size:12.5px}
  .cf-r b{font-size:14px}.cf-r span{font-size:12.5px}
  .caseflow .proof-note{margin-top:12px}
}
@media (max-width:599px){
  /* the bar keeps room for a two-line sentence, so the card under it never moves when the step changes */
  .cf-head[data-beat] .cf-pts .cf-say{min-height:2.8em}
  .cf{padding:10px}
  .cf-app p{padding:6px 10px}.cf-app b{font-size:13.5px}
  .cf-row{padding:7px 10px;gap:8px}.cf-live .cf-row.on{padding-block:7px}
  .cf-who{padding-top:8px;gap:5px}
  .cf-p{padding:6px 8px 6px 12px;gap:1px 8px}
  .cf-r b,.cf-r span{line-height:1.25}
}
/* narrow phones (under 380): slightly smaller words so labels, pills and badges stay on one line and the three labels fit the bar */
@media (max-width:379px){
  .cf-head[data-beat] .cf-pts{gap:8px 4px}
  .cf-head[data-beat] .cf-pts b{font-size:12px;padding:5px 8px 5px 5px;gap:5px}.cf-head[data-beat] .cf-pts b::before{width:16px;height:16px;font-size:10.5px}
  .cf-head[data-beat] .cf-pts .cf-say{font-size:14px}
  .cf-app b{font-size:13px}.cf-app p{padding:6px 8px}
  .cf-row{font-size:13px}.cf-pill{font-size:11.5px;padding:3px 7px}
  .cf-pn{font-size:14px}.cf-b{font-size:12px;padding:5px 8px;gap:5px}.cf-b .ic{width:13px;height:13px}
  .cf-r b{font-size:13.5px}.cf-r span{font-size:12px}
}
@media (max-width:599px){
  .caseflow .cf-head[data-beat] .cf-pts{padding:6px var(--gut,16px) 8px;margin-bottom:8px;gap:6px}
  .cf-head[data-beat] .cf-pts .cf-say{font-size:14px;line-height:1.35;min-height:2.7em}
  .cf{padding:8px;border-radius:18px}
  .cf-app p{padding:5px 10px}
  .cf-row{padding:6px 10px}.cf-live .cf-row.on{padding-block:6px}
  .cf-who{padding-top:8px;gap:4px}
  .cf-p{padding:5px 8px 5px 12px}
  .cf-r b{font-size:13.5px}.cf-r span{font-size:12px}
}
@media (max-width:599px){
  /* the numbers in the bar count on the labels themselves (the list items are layout-less here) */
  .cf-head[data-beat] .cf-pts li{counter-increment:none}.cf-head[data-beat] .cf-pts b{counter-increment:pt}
  /* the conveyancer has no figure, only a sentence; on phones it is left out so the four rows stay equal and the card fits */
  .cf-q{display:none!important}
}
@media (max-width:339px){
  .cf-head[data-beat] .cf-pts b{font-size:11.5px;padding:5px 8px}.cf-head[data-beat] .cf-pts b::before{display:none}
}
@media (max-width:599px){.cf-who::before{bottom:18px}}

/* the government block is its own section now (after How it works): the section's own padding gives the space above it */
#reform .rf3-h{margin-top:0}

/* Who builds it (10 Oct): the three number cards are gone; the Catura card follows the head at the usual head-to-card gap */
.dyn6 .cx-run{margin-top:clamp(32px,4vw,56px)}