/* Generated by tools/mr-site-v3/bento_css.py from v3.css (D-327 to D-331). Do not edit here. */
.bento{--ink:#121316;--ink2:#5E626A;--ink3:#8A8E96;--line:#E7E9ED;--blue:#1F6FB8;--ok:#1F9D57;--display:"Inter","Inter Display",system-ui,sans-serif;--body:"Instrument Sans",system-ui,sans-serif;--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.bento .ic{display:inline-block;flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.75}
.bento .btn3{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 22px;border-radius:999px;background:var(--blue);color:#fff;font:600 16px/1 var(--body);text-decoration:none}
/* ===== D-327: the underwriting bento, round 2 (owner on D-326: the head's subtext and Book a demo misplaced, grounds too
   subtle, the UI "more like an AI designed"; then "use simple way of communication like how JammJar and mQube … the workflow
   and the things how they are connecting"). Cards laid out like the owner's references: label, title, one line, a call;
   the picture is the workflow as chips joined by lines, on a light blue mesh with grain. Most cards still; three move once. ===== */
.bento .lvg,.bento .lvk{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.bento .keep-sec .lvk{margin-top:56px}
@media (min-width:640px){.bento .lvg{grid-template-columns:repeat(2,minmax(0,1fr))}.bento .lvg .lc-broker-portal{grid-column:1/-1}}
@media (min-width:1024px){.bento .lvg{grid-template-columns:repeat(12,minmax(0,1fr))}.bento .lvg .lc{grid-column:span 4}
  .bento .lvg .lc-broker-portal{grid-column:span 7}.bento .lvg .lc-affordability-agent{grid-column:span 5}
  .bento .lvk{grid-template-columns:repeat(2,minmax(0,1fr))}.bento .lvk .lc-call{grid-column:1/-1}}

/* the ground: one recipe (pale blue base, a brand-blue glow, a white light, a mid-blue wash, grain); placement per card */
.bento .lc{--ax:80%;--ay:30%;--bx:15%;--by:85%;--cx:55%;--cy:105%;--as:.30;
  position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;isolation:isolate;border-radius:24px;
  border:1px solid rgba(31,111,184,.16);color:var(--ink);text-decoration:none;
  background:radial-gradient(55% 65% at var(--ax) var(--ay),rgba(31,111,184,var(--as)),transparent 72%),
    radial-gradient(50% 60% at var(--bx) var(--by),#fff,transparent 70%),
    radial-gradient(75% 70% at var(--cx) var(--cy),#BFD6F1,transparent 75%),#E3EEFA}
.bento .lc::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--grain);background-size:220px 220px;mix-blend-mode:soft-light;opacity:.55}
.bento .lc::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,0),rgba(255,255,255,.7),transparent 70%)}
.bento .lc:hover::before{opacity:1}
.bento .lc > *{position:relative;z-index:1}
.bento .lc:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.bento .lc-affordability-agent{--ax:70%;--ay:20%;--bx:10%;--by:80%}
.bento .lc-valuation-agent{--ax:30%;--ay:15%;--bx:90%;--by:85%;--cx:40%}
.bento .lc-product-agent{--ax:65%;--ay:25%;--bx:15%;--by:20%;--cx:70%}
.bento .lc-customer-portal{--ax:45%;--ay:10%;--bx:85%;--by:75%;--cx:20%}
.bento .lc-yours{--ax:85%;--ay:50%;--bx:10%;--by:15%;--cx:40%}
.bento .lc-ours{--ax:70%;--ay:60%;--bx:15%;--by:90%;--cx:90%}
.bento .lc-call{--ax:88%;--ay:50%;--as:.55;--bx:20%;--by:10%;--cx:60%}

/* text block: label, title, one line, the call */
.bento .lc-tx{display:flex;flex-direction:column;align-items:flex-start;padding:4px 32px 32px}
.bento .lc-lab{display:inline-flex;align-items:center;gap:7px;font:500 14px/1 var(--body);color:var(--blue)}
.bento .lc-lab .ic{width:16px;height:16px}
.bento .lc-tx b{margin-top:14px;font:600 22px/1.2 var(--display);letter-spacing:-.02em}
.bento .lc-sub{margin-top:8px;font:400 15px/1.5 var(--body);color:var(--ink2);max-width:36ch}
.bento .lc-go{display:inline-flex;align-items:center;gap:6px;height:36px;margin-top:20px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.75);
  box-shadow:inset 0 0 0 1px rgba(18,19,22,.08);font:500 14px/1 var(--body);color:var(--ink);transition:background .2s}
.bento .lc-go .ic{width:14px;height:14px;transition:transform .25s cubic-bezier(.2,0,0,1)}
.bento .lc:hover .lc-go{background:#fff}.bento .lc:hover .lc-go .ic{transform:translateX(3px)}

/* picture area: tall cards put the workflow on top; wide cards put the words left and the workflow right */
.bento .lc-ui{display:flex;align-items:center;justify-content:center;height:290px;padding:28px 24px 12px}
.bento .lc-wide{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);grid-template-areas:"tx ui";align-items:center;min-height:380px}
.bento .lc-wide .lc-ui{grid-area:ui;height:100%;padding:32px 32px 32px 0}
.bento .lc-wide .lc-tx{grid-area:tx;padding:32px 24px 32px 36px}
.bento .lc-call{display:flex;flex-direction:row;align-items:center;justify-content:space-between;min-height:0}
.bento .lc-call .lc-tx{padding:36px 40px}
.bento .lc-call .lc-tx b{font-size:28px}
.bento .lc-cta{padding:36px 40px}

/* the workflow pieces: chips, a check node, short lines; one blue moment per card */
.bento .lw{display:flex;flex-direction:column;align-items:center;font:500 13px/1 var(--body)}
.bento .lw-c{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 12px;border-radius:11px;background:#fff;color:var(--ink);white-space:nowrap;
  box-shadow:0 1px 2px rgba(18,40,80,.06),0 6px 16px rgba(18,40,80,.07),inset 0 0 0 1px rgba(18,19,22,.07)}
.bento .lw-c .ic{width:16px;height:16px;color:var(--ink3)}
.bento .lw-c.is-b{background:var(--blue);color:#fff}.bento .lw-c.is-b .ic{color:#fff}
.bento .lw-c.is-warn{background:#FFF4E0;color:#8A5A12;box-shadow:inset 0 0 0 1px rgba(217,138,28,.25)}.bento .lw-c.is-warn .ic{color:#D98A1C}
.bento .lw-c.is-out{color:var(--ink3);background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px rgba(18,19,22,.06)}
.bento .lw-c.is-out span{text-decoration:line-through;text-decoration-color:rgba(18,19,22,.35)}
.bento .lw-c.is-out em{font-style:normal;font-size:12px;color:var(--ink2)}
.bento .lw-n{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;color:var(--ink);box-shadow:0 6px 16px rgba(18,40,80,.1),inset 0 0 0 1px rgba(18,19,22,.08)}
.bento .lw-n .ic{width:20px;height:20px}
.bento .lw-n.is-b{background:var(--ink);color:#fff}
.bento .lw-v{display:block;width:1.5px;height:18px;background:rgba(18,19,22,.28)}
.bento .lw-h{display:block;flex:0 0 18px;height:1.5px;background:rgba(18,19,22,.28)}
.bento .lw-docs{display:grid;grid-template-columns:repeat(2,auto);gap:8px}
.bento .lw-end{display:flex;flex-direction:column;align-items:center;gap:10px}
.bento .lw-say{position:relative;display:block;height:16px;width:220px;font:500 13px/16px var(--body);color:var(--ink2);text-align:center}
.bento .lw-say i{position:absolute;inset:0;font-style:normal;transition:opacity .4s}
.bento .lw-say i + i{opacity:0;color:var(--blue);font-weight:600}
.bento .lw-tri{display:flex;gap:8px}
.bento .lw-fan{position:relative;display:block;width:66%;height:18px;border:1.5px solid rgba(18,19,22,.28);border-top:0;border-radius:0 0 12px 12px;margin-bottom:18px}
.bento .lw-fan.two{width:52%}
.bento .lw-fan::after{content:"";position:absolute;left:50%;top:100%;width:1.5px;height:18px;margin-left:-.75px;background:rgba(18,19,22,.28)}
.bento .lw-fan i{display:none}
.bento .lw-model{display:inline-flex;align-items:center;gap:12px;padding:12px 18px 12px 14px;border-radius:14px;background:#fff;box-shadow:0 6px 16px rgba(18,40,80,.08),inset 0 0 0 1px rgba(18,19,22,.07)}
.bento .lw-model .ic,.bento .lw-sys .ic{width:22px;height:22px;color:var(--blue)}
.bento .lw-model span,.bento .lw-sys span{font:600 14px/1.25 var(--body);white-space:nowrap}
.bento .lw-model small,.bento .lw-sys small{display:block;font:400 12px/1.3 var(--body);color:var(--ink2)}
.bento .lw-pairs,.bento .lw-list{display:flex;flex-direction:column;align-items:center;gap:8px}
.bento .lw-pair{display:flex;align-items:center}
.bento .lw-msg{max-width:250px;padding:12px 14px;border-radius:16px 16px 16px 4px;background:#fff;color:var(--ink);font:400 13px/1.45 var(--body);
  box-shadow:0 6px 16px rgba(18,40,80,.08),inset 0 0 0 1px rgba(18,19,22,.07)}
.bento .lw-hub{display:flex;align-items:center}
.bento .lw-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.bento .lw-join{position:relative;align-self:stretch;width:20px;margin:19px 18px 19px 0;border:1.5px solid rgba(18,19,22,.28);border-left:0;border-radius:0 12px 12px 0}
.bento .lw-join::after{content:"";position:absolute;left:100%;top:50%;width:18px;height:1.5px;background:rgba(18,19,22,.28)}
.bento .lw-sys{display:inline-flex;align-items:center;gap:12px;padding:16px 18px 16px 14px;border-radius:16px;background:var(--ink);color:#fff}
.bento .lw-sys .ic{color:#fff}.bento .lw-sys small{color:rgba(255,255,255,.7)}
.bento .lc-yours:hover .lw-join,.bento .lc-yours:hover .lw-join::after{border-color:var(--blue);background-color:transparent}
.bento .lc-yours:hover .lw-join::after{background:var(--blue)}
.bento .lw-stackrow{display:flex;align-items:center;gap:14px}
.bento .lw-stack{display:flex;flex-direction:column;gap:5px;padding:8px;border-radius:16px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(18,19,22,.06)}
.bento .lw-stack span{display:block;white-space:nowrap;padding:10px 14px;border-radius:10px;background:#fff;font:500 13px/1 var(--body);box-shadow:inset 0 0 0 1px rgba(18,19,22,.06)}
.bento .lw-stack .is-base{background:#0B2545;color:#fff;font-weight:600}

/* the three single changes: the last payslip arrives and the case goes complete; the buyers hear; a case comes out an offer */
.bento .lc .is-late{opacity:0;transform:translateY(-8px);transition:opacity .4s,transform .45s cubic-bezier(.2,0,0,1)}
.bento .lc.on .is-late{opacity:1;transform:none}
.bento .lc-broker-portal .lw-end .lw-c{transition:background .35s .7s,color .35s .7s}
.bento .lc-broker-portal.on .lw-end .lw-c{background:var(--blue);color:#fff}.bento .lc-broker-portal.on .lw-end .lw-c .ic{color:#fff}
.bento .lc-broker-portal.on .lw-say i:first-child{opacity:0}.bento .lc-broker-portal.on .lw-say i + i{opacity:1;transition-delay:.7s}
.bento .lc-customer-portal .lw-msg{opacity:0;transform:translateY(8px) scale(.98);transition:opacity .4s,transform .45s cubic-bezier(.2,0,0,1)}
.bento .lc-customer-portal.on .lw-msg{opacity:1;transform:none}
.bento .lc-ours .is-case{transition:transform .8s cubic-bezier(.65,0,.35,1),opacity .4s .5s}
.bento .lc-ours.on .is-case{transform:translateX(60px);opacity:0}
.bento .lc-ours .is-offer{opacity:.25;transition:opacity .4s .9s}
.bento .lc-ours.on .is-offer{opacity:1}

@media (max-width:1023px){.bento .lc-wide:not(.lc-call){grid-template-columns:minmax(0,1fr);grid-template-areas:"ui" "tx"}
  .bento .lc-wide:not(.lc-call) .lc-ui{height:300px;padding:28px 24px 12px}.bento .lc-wide .lc-tx{padding:4px 32px 32px}}
@media (max-width:639px){.bento .lc-ui{height:auto;min-height:250px;padding:26px 16px 12px}.bento .lc-tx,.bento .lc-wide .lc-tx{padding:4px 22px 26px}
  .bento .lc-call{flex-direction:column;align-items:flex-start}.bento .lc-call .lc-tx{padding:28px 22px 8px}.bento .lc-cta{padding:12px 22px 28px}
  .bento .lc-call .lc-tx b{font-size:22px}.bento .lw-stackrow{flex-direction:column}.bento .lc-ours.on .is-case{transform:translateY(30px)}
  .bento .lw-c{height:36px;font-size:12.5px}.bento .lw-hub{flex-direction:column}.bento .lw-col{align-items:center}
  .bento .lw-join{align-self:center;width:66%;height:16px;margin:0 0 18px;border:1.5px solid rgba(18,19,22,.28);border-top:0;border-radius:0 0 12px 12px}
  .bento .lw-join::after{left:50%;top:100%;width:1.5px;height:18px}}
@media (prefers-reduced-motion:reduce){.bento .lc .is-late,.bento .lc-customer-portal .lw-msg,.bento .lc-ours .is-offer{opacity:1;transform:none}.bento .lc-ours .is-case{opacity:1;transform:none}}
/* D-327: the two options are tall cards (picture on top); "use ours" runs top to bottom: the case, our system on Catura, the offer */
.bento .keep-sec .lc-tall .lc-ui{height:350px}
.bento .lw-stackrow{flex-direction:column;gap:12px}
.bento .lw-stack span{padding:8px 14px}
.bento .lc-ours.on .is-case{transform:translateY(40px)}
/* the case stays where it is; the one change is the offer coming out at the bottom */
.bento .lc-ours .is-case,.bento .lc-ours.on .is-case{transform:none;opacity:1;transition:none}

/* ===== D-328: text and call placement (owner, on D-327: "button placements and the title and the things were not good").
   Every card is picture on top, words at the bottom left: label, title, one line, kept together. The call is a round arrow
   at the bottom right, level with the words. Picture areas share one height per section, so titles line up across a row. ===== */
.bento .lc-tx{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:20px;padding:0 28px 28px 32px;margin-top:auto}
.bento .lc-t{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.bento .lc-tx b{margin-top:12px}
.bento .lc-sub{margin-top:6px}
.bento .lc-go{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border-radius:50%;background:#fff;color:var(--ink);
  box-shadow:0 1px 2px rgba(18,40,80,.06),0 6px 16px rgba(18,40,80,.08),inset 0 0 0 1px rgba(18,19,22,.06);transition:background .2s,color .2s}
.bento .lc-go .ic{width:18px;height:18px}
.bento .lc:hover .lc-go{background:var(--blue);color:#fff}
.bento .lc .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bento .pb-sec .lc-ui{height:300px;padding:28px 24px 8px}
.bento .keep-sec .lc-tall .lc-ui{height:340px}
.bento .keep-sec .lc-tx{padding:0 32px 32px}
/* the broker's workflow runs across its wide card: documents, the check, the lender */
.bento .lw-across{display:flex;align-items:center}
.bento .lw-across .lw-h{flex-basis:28px}
.bento .lw-across .lw-end{position:relative}
.bento .lw-across .lw-say{position:absolute;top:calc(100% + 10px);left:50%;width:200px;margin-left:-100px}
@media (max-width:767px){.bento .lw-across{flex-direction:column}.bento .lw-across .lw-h{width:1.5px;height:18px;flex-basis:auto}
  .bento .lw-across .lw-end{padding-bottom:26px}.bento .pb-sec .lc-ui{height:auto;min-height:250px}}
@media (max-width:639px){.bento .lc-tx,.bento .keep-sec .lc-tx{padding:0 20px 24px 22px}.bento .lc-go{width:40px;height:40px}}
/* the walkthrough card keeps its words stacked; the words start right under the picture so titles share a line */
.bento .lc-call .lc-tx{flex-direction:column;align-items:flex-start;justify-content:center;gap:0;padding:36px 40px;margin:0}
.bento .lc-call .btn3{white-space:nowrap}
.bento .lc-tall .lc-tx{margin-top:0}
@media (max-width:639px){.bento .lc-call .lc-tx{padding:28px 22px 8px}}
@media (max-width:767px){.bento .lw-across .lw-end{padding-bottom:0}.bento .lw-across .lw-say{position:relative;top:auto;left:auto;margin:10px 0 0;width:200px}
  .bento .pb-sec .lc-ui{padding-bottom:24px}}

/* ===== D-329: the comparison without the odd space (owner: "i feel odd space here, deal that"). The job column is only as
   wide as its labels need, the table is centred under its centred title, and the last row's three cells share one line. ===== */
@media (min-width:768px){
  .bento .cmp4{max-width:1040px;margin-inline:auto}
  .bento .cmp4-r{grid-template-columns:minmax(190px,.62fr) minmax(0,1fr) minmax(0,1fr)}
  .bento .cmp4-r > .cmp4-j{justify-content:flex-start;padding-right:8px}
  .bento .cmp4-r:last-child > *{min-height:64px;padding-bottom:6px}
}

/* D-329: the words of every bento card sit on white (owner: "text reabaility is not good here, make this text area white");
   the blue ground and grain stay with the picture above. The walkthrough card keeps its ground (large type, one line). */
.bento .lc-tall .lc-tx{margin-top:auto;padding:24px 28px 28px 32px;background:#fff;box-shadow:0 -1px 0 rgba(31,111,184,.12)}
.bento .keep-sec .lc-tall .lc-tx{padding:26px 32px 32px}
.bento .lc-tall .lc-go{background:#F2F6FB;box-shadow:inset 0 0 0 1px rgba(18,19,22,.05)}
.bento .lc-tall:hover .lc-go{background:var(--blue)}
.bento .lc-tall .lc-ui{flex:1 0 auto}
@media (max-width:639px){.bento .lc-tall .lc-tx,.bento .keep-sec .lc-tall .lc-tx{padding:20px 20px 24px 22px}}
/* D-329: the walkthrough card is plain black, no gradient (owner: "no need of this much gradient, use black bg") */
.bento .lc-call{background:var(--ink);border-color:var(--ink);color:#fff}
.bento .lc-call::after{opacity:.08}
.bento .lc-call::before{background:radial-gradient(320px circle at var(--mx,50%) var(--my,0),rgba(255,255,255,.08),transparent 70%)}
.bento .lc-call .lc-lab{color:#8FB8E6}
.bento .lc-call .lc-tx b{color:#fff}
.bento .lc-call .lc-sub{color:rgba(255,255,255,.72)}
/* pictures hold one height per section; the white words area fills the rest, words at its top, the arrow at its bottom right */
.bento .lc-tall .lc-ui{flex:none}
.bento .lc-tall .lc-tx{flex:1 1 auto;align-items:flex-start}
.bento .lc-tall .lc-go{align-self:flex-end}
/* D-330: contrast (owner: "accessibility is very low"). Today's words were #8A8E96 on #F2F3F5 = 2.96:1; now ink-2 = 5.51:1
   (WCAG AA 4.5). Their clock icons were 1.82:1; now 3.62:1 (non-text 3:1). The ruled-out product chip follows. */
.bento .cmp4-t{color:var(--ink2)}
.bento .cmp4-t svg{color:#7A7F88}
.bento .lw-c.is-out{color:var(--ink2);background:#fff}
.bento .lw-c.is-out span{text-decoration-color:rgba(18,19,22,.5)}

/* ===== D-331: the home's parts section uses these cards (bento.css is generated from here). Two rows of three, 4 columns
   each, one picture height; the broker workflow stacks top to bottom in its narrower card. ===== */
.bento .lvg-home{margin-bottom:8px}
@media (min-width:1024px){.bento .lvg-home .lc,.bento .lvg-home .lc-broker-portal,.bento .lvg-home .lc-affordability-agent{grid-column:span 4}}
@media (min-width:640px) and (max-width:1023px){.bento .lvg-home .lc-broker-portal{grid-column:auto}}
.bento .lvg-home .lc-ui{height:320px;padding:28px 20px 8px}
.bento .lvg-home .lw-across{flex-direction:column}
.bento .lvg-home .lw-across .lw-h{width:1.5px;height:18px;flex-basis:auto}
.bento .lvg-home .lw-across .lw-say{position:relative;top:auto;left:auto;margin:10px 0 0}
.bento .lvg-home + .p6lab{margin-top:clamp(28px,3.2vw,44px)}
@media (max-width:767px){.bento .lvg-home .lc-ui{height:auto;min-height:250px;padding-bottom:24px}}
/* tablet: three cards in two columns would leave one alone; the first card of each row spans both columns */
@media (min-width:640px) and (max-width:1023px){.bento .lvg-home .lc:first-child{grid-column:1/-1}.bento .lvg-home .lc:first-child .lc-ui{height:300px}}

/* ===== D-333: drift fixes from the 23 Oct audit (checks/2026-10-23-drift-audit), owner's calls:
   display weight follows home (500); greys follow home (warm #F4F4F2); labels follow home (sentence case, blue);
   the comparison title sits on the common left edge with the table full width (decided); page-level corners 24
   (decided; product cards inside a frame keep 16); Keep yours loses its old inset panel so its title is on the edge. ===== */
.bento h1,.bento h2,.bento h3,.bento h4{font-weight:500}
.bento .close6 .t-h2{font-weight:500!important;letter-spacing:-.03em!important}
.bento .sf h2,.bento footer h2{font-weight:500}
.bento .lc-tx b{font-weight:500}
.v3{--band:#F4F4F2}
.bento .cmp4-t{background:#F4F4F2}
.bento .rb-k{font:500 14px/1.3 var(--body);letter-spacing:0;text-transform:none;color:var(--blue)}
.bento .rb-lead .rb-k{color:rgba(255,255,255,.92)}
@media (min-width:768px){
  .bento .cmp-sec .cmp4{max-width:none;margin-inline:0}
  .bento .cmp-sec .cmp4-r{grid-template-columns:220px minmax(0,1fr) minmax(0,1fr)}
}
.bento .cmp4-h .cmp4-t,.bento .cmp4-h .cmp4-m{border-radius:24px 24px 0 0}
.bento .cmp4-r:last-child .cmp4-t,.bento .cmp4-r:last-child .cmp4-m{border-radius:0 0 24px 24px}
.bento .pg-underwriting .keep-sec{margin-inline:0;margin-block:0;border-radius:0}
.bento .pg-underwriting .keep-sec > .w{padding-inline:var(--gut,64px)}
@media (max-width:767px){.bento .pg-underwriting .keep-sec > .w{padding-inline:var(--gut,16px)}}

/* ===== D-334: three workflows redrawn so each shows what the part does (owner: the underwriting motion "is not defining
   the underwriting system", and the same for broker portal and product agent). One change each, in short beats. ===== */
.bento .lw-box{display:block;width:min(300px,100%);padding:12px 14px;border-radius:14px;background:#fff;text-align:left;
  box-shadow:0 1px 2px rgba(18,40,80,.06),0 6px 16px rgba(18,40,80,.07),inset 0 0 0 1px rgba(18,19,22,.07)}
.bento .lw-box-t{display:block;margin-bottom:8px;font:600 12px/1.3 var(--body);color:var(--ink2)}
.bento .lw-tags{display:flex;flex-wrap:wrap;gap:6px}
.bento .lw-tags i{display:inline-flex;align-items:center;height:26px;padding:0 9px;border-radius:7px;background:#F4F4F2;font:500 12px/1 var(--body);font-style:normal;color:var(--ink);transition:background .35s,color .35s}
/* broker: the last document drops in, is checked on upload, then the lender accepts the case first time */
.bento .lw-drop{display:flex;align-items:center;gap:8px;margin-top:8px;min-height:38px}
.bento .lw-drop .is-drop{height:34px;box-shadow:inset 0 0 0 1.5px rgba(31,111,184,.5);opacity:0;transform:translateY(-16px);transition:opacity .35s,transform .45s cubic-bezier(.2,0,0,1)}
.bento .lw-ok{font:600 12px/1 var(--body);font-style:normal;color:#17733F;background:#E7F5EC;padding:6px 8px;border-radius:7px;opacity:0;transition:opacity .35s .6s}
.bento .lc.on .lw-drop .is-drop{opacity:1;transform:none}
.bento .lc.on .lw-ok{opacity:1}
.bento .lc-broker-portal .lw-end .lw-c{transition:background .35s 1.2s,color .35s 1.2s}
.bento .lc-broker-portal.on .lw-say i + i{transition-delay:1.2s}
.bento .lc-broker-portal.on .lw-say i:first-child{transition-delay:1.1s}
/* product: a fact arrives about the case; the list is put right (Tracker drops out with its reason) */
.bento .lw-fact .is-fact{background:#fff;color:var(--blue);box-shadow:inset 0 0 0 1.5px var(--blue);opacity:0;transform:translateX(-24px);transition:opacity .35s,transform .45s cubic-bezier(.2,0,0,1)}
.bento .lw-fact .is-fact .ic{color:var(--blue)}
.bento .lc.on .lw-fact .is-fact{opacity:1;transform:none}
.bento .lw-prods .lw-p{display:flex;align-items:center;justify-content:space-between;height:30px;font:500 13px/1 var(--body);color:var(--ink)}
.bento .lw-prods .lw-p em{position:relative;font-style:normal;font-weight:600;color:var(--blue)}
.bento .lw-p.is-drops span{transition:color .35s .8s,text-decoration-color .35s .8s;text-decoration:line-through;text-decoration-color:transparent}
.bento .lw-p.is-drops em b{font-weight:600;transition:opacity .3s .8s}
.bento .lw-p.is-drops em b + b{position:absolute;right:0;top:0;white-space:nowrap;opacity:0;color:var(--ink2);font-weight:500}
.bento .lc.on .lw-p.is-drops span{color:var(--ink3);text-decoration-color:rgba(18,19,22,.45)}
.bento .lc.on .lw-p.is-drops em b:first-child{opacity:0}
.bento .lc.on .lw-p.is-drops em b + b{opacity:1}
/* underwriting: four cases arrive and are checked; three are ready, only the exception goes to the underwriter */
.bento .lw-cases{display:grid;grid-template-columns:repeat(2,auto);gap:6px}
.bento .lw-cases i{justify-content:center;background:#fff;box-shadow:inset 0 0 0 1px rgba(18,19,22,.08)}
.bento .lc.on .lw-cases i.ex{background:#FFF4E0;color:#8A5A12;transition-delay:.3s}
.bento .lw-cases + .lw-fan{width:42%}
.bento .lw-fork{position:relative;display:block;width:180px;height:18px;margin-top:18px;border:1.5px solid rgba(18,19,22,.28);border-bottom:0;border-radius:12px 12px 0 0}
.bento .lw-fork::before{content:"";position:absolute;left:50%;bottom:100%;width:1.5px;height:18px;margin-left:-.75px;background:rgba(18,19,22,.28)}
.bento .lw-outs{display:grid;grid-template-columns:180px 180px;justify-content:center}
.bento .lw-out{display:flex;flex-direction:column;align-items:center;opacity:.3;transition:opacity .4s}
.bento .lw-out .lw-c{height:36px;font-size:12.5px}
.bento .lc.on .lw-out:first-child{opacity:1;transition-delay:.6s}
.bento .lc.on .lw-out + .lw-out{opacity:1;transition-delay:.9s}
.bento .lw-c.is-ok{background:#E7F5EC;color:#17733F;box-shadow:inset 0 0 0 1px rgba(23,115,63,.18)}.bento .lw-c.is-ok .ic{color:#17733F}
.bento .lw-out .is-jo{opacity:0;transition:opacity .4s}
.bento .lc.on .lw-out .is-jo{opacity:1;transition-delay:1.4s}
@media (max-width:420px){.bento .lw-outs{grid-template-columns:150px 150px}.bento .lw-fork{width:150px}.bento .lw-out .lw-c{font-size:12px;padding:0 10px}}
@media (prefers-reduced-motion:reduce){.bento .lc .lw-drop .is-drop,.bento .lc .lw-ok,.bento .lc .lw-fact .is-fact,.bento .lw-out,.bento .lw-out .is-jo{opacity:1;transform:none}}
/* D-334 fixes: the fact and its line arrive together; Tracker's reason replaces "Fits" in place (no overlap);
   on the underwriting page's wide broker card the workflow runs left to right so it fits the picture height */
.bento .lw-fact{display:flex;flex-direction:column;align-items:center;opacity:0;transform:translateY(-10px);transition:opacity .35s,transform .45s cubic-bezier(.2,0,0,1)}
.bento .lw-fact .is-fact{opacity:1;transform:none}
.bento .lc.on .lw-fact{opacity:1;transform:none}
.bento .lw-p.is-drops em b + b{position:static;display:none;opacity:1}
.bento .lc.on .lw-p.is-drops em b:first-child{display:none}
.bento .lc.on .lw-p.is-drops em b + b{display:inline;animation:lvin .35s .8s both}
.bento .lw-p.is-drops em b:first-child{opacity:1!important}
@media (min-width:1024px){
  .bento .pb-sec .lc-broker-portal .lw{flex-direction:row;align-items:center}
  .bento .pb-sec .lc-broker-portal .lw-v{width:28px;height:1.5px}
  .bento .pb-sec .lc-broker-portal .lw-end{position:relative}
  .bento .pb-sec .lc-broker-portal .lw-say{position:absolute;top:calc(100% + 10px);left:50%;width:180px;margin-left:-90px}
  .bento .pb-sec .lc-broker-portal .lw-box{width:300px}
}
@media (prefers-reduced-motion:reduce){.bento .lw-fact{opacity:1;transform:none}}
.bento .lw-prods{width:250px}
.bento .lw-prods .lw-p{gap:16px}

/* ===== D-335: each part card takes its own part colour (owner: "previously you have added colours for each page right,
   follow the same colours with these gradients bento cards"). Colours from the part pages' --c/--wash; the broker portal
   is olive, not the old pink (D-283, DO-NOT #200). --ci is the colour darkened for text and filled chips (AA contrast).
   The Keep yours, Use ours and walkthrough cards stay brand blue. ===== */
.bento .lc{--c:#1F6FB8;--wash:#E3EEFA;--ci:color-mix(in srgb,var(--c) 78%,#000)}
.bento .lc-underwriting{--c:#2B8FD9;--wash:#E6F1FB}
.bento .lc-broker-portal{--c:#5B7F1F;--wash:#F1F5E6}
.bento .lc-customer-portal{--c:#B0641A;--wash:#FBF0E3}
.bento .lc-affordability-agent{--c:#4A5BE8;--wash:#E9EBFC}
.bento .lc-valuation-agent{--c:#16A38A;--wash:#E4F6F2}
.bento .lc-product-agent{--c:#7C4DD8;--wash:#F0EAFB}
.bento .lc:not(.lc-call){border-color:color-mix(in srgb,var(--c) 20%,transparent);
  background:radial-gradient(55% 65% at var(--ax) var(--ay),color-mix(in srgb,var(--c) 30%,transparent),transparent 72%),
    radial-gradient(50% 60% at var(--bx) var(--by),#fff,transparent 70%),
    radial-gradient(75% 70% at var(--cx) var(--cy),color-mix(in srgb,var(--c) 22%,#fff),transparent 75%),var(--wash)}
.bento .lc-tall .lc-tx{box-shadow:0 -1px 0 color-mix(in srgb,var(--c) 16%,transparent)}
.bento .lc:not(.lc-call) .lc-lab{color:var(--ci)}
.bento .lc-tall .lc-go{background:color-mix(in srgb,var(--c) 9%,#fff)}
.bento .lc-tall:hover .lc-go{background:var(--ci);color:#fff}
.bento .lc .lw-c.is-b{background:var(--ci)}
.bento .lc .lw-fact .is-fact{color:var(--ci);box-shadow:inset 0 0 0 1.5px var(--ci)}
.bento .lc .lw-fact .is-fact .ic{color:var(--ci)}
.bento .lc .lw-drop .is-drop{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 55%,transparent)}
.bento .lc .lw-prods .lw-p em{color:var(--ci)}
.bento .lc-broker-portal.on .lw-end .lw-c{background:var(--ci)}
.bento .lc-broker-portal .lw-say i + i{color:var(--ci)}
.bento .lc .lw-model .ic{color:var(--ci)}
/* D-336: plain words, no case codes (owner: "no one will understand that these are applications"). The two results take
   equal halves so the branch lines meet each chip's middle at any width; on phone "3 applications ready" reads "3 ready". */
.bento .lw-outs{grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:min(360px,100%)}
.bento .lw-fork{width:min(180px,50%)}
@media (max-width:420px){.bento .lw-outs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.bento .lw-fork{width:50%}.bento .lw-long{display:none}}

/* ===== D-338: the other five part pages take the underwriting page's structure (owner, 24 Oct: "follow these structures in
   the remaining pages … storytelling about each agent and each portal"). Each page keeps its own part colour (--dot / --s on
   the wrapper): the hero is the underwriting swirl drawn in that colour, the closing sections sit on white as on underwriting,
   and results, comparison and the keep cards take the part's dark tone (--pi, at least 4.9:1 with white). ===== */
.bento .pg-part{--pi:color-mix(in srgb,var(--dot) 78%,#000)}
.bento .pg-part:not(.pg-underwriting){--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.bento .pg-part:not(.pg-underwriting) .panel3{position:relative;isolation:isolate;background:color-mix(in srgb,var(--dot) 45%,#0A1220)}
.bento .pg-part:not(.pg-underwriting) .panel3::before{content:"";position:absolute;inset:-60%;z-index:0;pointer-events:none;filter:blur(40px);
  background:conic-gradient(from 220deg at 58% 46%,color-mix(in srgb,var(--dot) 30%,#0A1220),var(--dot),color-mix(in srgb,var(--dot) 40%,#fff),var(--dot),
    color-mix(in srgb,var(--dot) 30%,#0A1220),color-mix(in srgb,var(--dot) 55%,#0A1220),color-mix(in srgb,var(--dot) 80%,#fff),color-mix(in srgb,var(--dot) 30%,#0A1220));animation:uwspin 52s linear infinite}
.bento .pg-part:not(.pg-underwriting) .panel3::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--grain);background-size:220px 220px;mix-blend-mode:soft-light;opacity:.22}
.bento .pg-part:not(.pg-underwriting) .panel3 .hero3p{position:relative;z-index:2}
.bento .pg-part:not(.pg-underwriting) .panel3 .hero3p h1{color:#fff}
.bento .pg-part:not(.pg-underwriting) .panel3 .hero3p .lead{color:rgba(255,255,255,.88)}
.bento .pg-part:not(.pg-underwriting) .panel3 .btn3{background:#fff;color:#111}
.bento .pg-part:not(.pg-underwriting) .panel3 .btn3:hover{background:color-mix(in srgb,var(--dot) 8%,#fff)}
.bento .pg-part:not(.pg-underwriting) .panel3 .btn3.o{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.bento .pg-part:not(.pg-underwriting) .panel3 .btn3.o:hover{background:rgba(255,255,255,.1)}
.bento .pg-part:not(.pg-underwriting) .panel3 .hp-stage > .k{box-shadow:0 24px 60px -20px rgba(4,14,32,.5)}
.bento .pg-part:not(.pg-underwriting) .panel3 .hp-copy{position:relative}
.bento .pg-part:not(.pg-underwriting) .panel3 .hp-copy::before{content:"";position:absolute;inset:-18% -14% -18% -30%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(8,14,26,.62),rgba(8,14,26,.32) 60%,transparent);filter:blur(10px)}
@media (prefers-reduced-motion:reduce){.bento .pg-part .panel3::before{animation:none}}
/* closing sections on white, full width, as on underwriting */
.bento .pg-part .keep-sec{margin:0;border-radius:0;background:#fff;background-image:none;box-shadow:none}
.bento .pg-part .keep-sec > .w{padding-inline:var(--gut,64px)}
.bento .pg-part .pb-sec{margin:0;border-radius:0;background:#fff}
/* results, comparison and the two option cards speak in the part's colour */
.bento .pg-part:not(.pg-underwriting) .rb-lead{background:var(--pi)}
.bento .pg-part:not(.pg-underwriting) .rb-k{color:var(--pi)}
.bento .pg-part:not(.pg-underwriting) .rb-lead .rb-k{color:rgba(255,255,255,.92)}
.bento .pg-part:not(.pg-underwriting) .cmp4-m{background:var(--pi)}
.bento .pg-part:not(.pg-underwriting) .lvk .lc:not(.lc-call){--c:var(--dot);--wash:var(--s)}
.bento .pg-part:not(.pg-underwriting) .lc-call .lc-lab{color:color-mix(in srgb,var(--dot) 45%,#fff)}
/* "the other parts": the first two cards share the top row whichever part comes first (7 + 5, then 4 + 4 + 4) */
@media (min-width:640px){.bento .pb-sec .lvg .lc-broker-portal{grid-column:auto}.bento .pb-sec .lvg .lc:first-child{grid-column:1/-1}}
@media (min-width:1024px){.bento .pb-sec .lvg .lc,.bento .pb-sec .lvg .lc-broker-portal,.bento .pb-sec .lvg .lc-affordability-agent{grid-column:span 4}
  .bento .pb-sec .lvg .lc:nth-child(1){grid-column:span 7}.bento .pb-sec .lvg .lc:nth-child(2){grid-column:span 5}}
/* D-338: a before→after figure ("25%→70%") is twice as long as a single one, so it steps down a size to fit a phone */
.bento .rb-lead .rb-n.rb-n2{font-size:clamp(56px,7.4vw,112px)}
/* D-338: a title's claim words (D-316) take the part's own dark tone on its page, so they sit with its results and comparison */
.bento .pg-part:not(.pg-underwriting) .sec .h2 .g{color:var(--pi)}
/* D-338 contrast: the lead under the white h1 needs 4.5:1 on its lightest patch. The swirl's light stops come down and the shade
   behind the words deepens (measured by checks/2026-10-24-part-pages/contrast.cjs at 1440 and 390) */
.bento .pg-part:not(.pg-underwriting) .panel3{background:color-mix(in srgb,var(--dot) 40%,#070C16)}
.bento .pg-part:not(.pg-underwriting) .panel3::before{
  background:conic-gradient(from 220deg at 58% 46%,color-mix(in srgb,var(--dot) 30%,#070C16),color-mix(in srgb,var(--dot) 80%,#070C16),color-mix(in srgb,var(--dot) 80%,#fff),color-mix(in srgb,var(--dot) 80%,#070C16),
    color-mix(in srgb,var(--dot) 30%,#070C16),color-mix(in srgb,var(--dot) 50%,#070C16),var(--dot),color-mix(in srgb,var(--dot) 30%,#070C16))}
.bento .pg-part:not(.pg-underwriting) .panel3 .hp-copy::before{background:radial-gradient(closest-side,rgba(6,10,20,.72),rgba(6,10,20,.45) 60%,transparent)}
@media (max-width:1199px){.bento .pg-part:not(.pg-underwriting) .panel3 .hp-copy::before{inset:-12% -10%;background:radial-gradient(closest-side,rgba(6,10,20,.7),rgba(6,10,20,.5) 70%,transparent)}}
.bento .pg-part:not(.pg-underwriting) .panel3 .hero3p .lead{color:rgba(255,255,255,.95)}
@media (max-width:1199px){.bento .pg-part:not(.pg-underwriting) .panel3 .hp-copy::before{background:radial-gradient(closest-side,rgba(6,10,20,.78),rgba(6,10,20,.6) 70%,transparent)}}
/* stacked heroes put the words over the swirl's whole width, so the swirl is dimmed a step there (teal, the lightest part, was 4.3:1) */
@media (max-width:1199px){.bento .pg-part:not(.pg-underwriting) .panel3::before{filter:blur(40px) brightness(.82)}}
/* D-341: the join lines meet every chip (owner: "lines are not connected properly"). The bracket is drawn at the column's
   right edge, so shorter chips ("Alerts") stopped short of it: the chips in the column now share one width. A column with a
   single chip gets a straight line instead of a bracket with no height. */
@media (min-width:640px){.bento .lw-col{align-items:stretch}}
.bento .lw-hub:has(.lw-col > :only-child) .lw-join{align-self:center;height:0;margin:0;border-width:1.5px 0 0;border-radius:0;width:20px}
.bento .lw-hub:has(.lw-col > :only-child) .lw-join::after{top:-1.5px}
@media (max-width:639px){.bento .lw-hub:has(.lw-col > :only-child) .lw-join{width:1.5px;height:18px;margin:0;border-width:0 0 0 1.5px}
  .bento .lw-hub:has(.lw-col > :only-child) .lw-join::after{display:none}}
/* D-341, phone: the chips stack, so a bracket under them only touched the last one. One straight line runs from the first chip
   down behind the others (white chips sit on it) to the system. */
@media (max-width:639px){.bento .lw-col{position:relative}
  .bento .lw-col::before{content:"";position:absolute;left:50%;top:18px;bottom:-1px;width:1.5px;margin-left:-.75px;background:rgba(18,19,22,.28)}
  .bento .lw-col > *{position:relative;z-index:1}
  .bento .lw-hub .lw-join{width:1.5px;height:18px;margin:0;border:0;border-radius:0;background:rgba(18,19,22,.28)}
  .bento .lw-hub .lw-join::after{display:none}
  .bento .lc-yours:hover .lw-join{background:var(--blue)}}

/* ===== D-342: no line leads to nothing (owner: "why we are showing a line when that is not connecting it … check all the
   places, all the cards, all the pages"). A connector appears and disappears with the thing it leads to; at rest every card
   is a complete picture. Checked by checks/2026-10-24-line-joints/audit.cjs (every line end, 7 pages, 5 widths, rest and on). */
/* underwriting card: before it plays, the applications reach the check and stop; the fork and both outcomes draw in together */
.bento .lc-underwriting .lw-fork{opacity:0;transition:opacity .35s}
.bento .lc-underwriting.on .lw-fork{opacity:1;transition-delay:.4s}
.bento .lc-underwriting .lw-out{opacity:0}
.bento .lc-underwriting .lw-out .lw-v{opacity:0;transition:opacity .3s}
.bento .lc-underwriting.on .lw-out .lw-v{opacity:1;transition-delay:1.2s}
/* valuation card: the branches are still, so they always show */
.bento .lw-br .lw-out{opacity:1}
.bento .lw-br .lw-out .lw-c{height:34px;font-size:12.5px}
@media (max-width:420px){.bento .lw-br .lw-out .lw-c{font-size:11.5px;padding:0 9px;gap:5px}.bento .lw-br .lw-out .lw-c .ic{width:13px;height:13px}}
/* customer card: the line under Tom and Emma comes with the message */
.bento .lw-tail{display:flex;flex-direction:column;align-items:center}
.bento .lc-customer-portal .lw-msg{opacity:1;transform:none;transition:none}
.bento .lc-customer-portal .lw-tail{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .45s cubic-bezier(.2,0,0,1)}
.bento .lc-customer-portal.on .lw-tail{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.bento .lc-underwriting .lw-fork,.bento .lc-underwriting .lw-out,.bento .lc-underwriting .lw-out .lw-v,.bento .lc-customer-portal .lw-tail{opacity:1;transform:none}}

/* ===== D-343: the customer portal's real screens (the 14 Oct scenes, rebuilt from the owner's Figma) sit in the v3 film
   frames. Their old page frame is dropped (the v3 frame holds them). The words beside each film are the v3 section's points,
   so the scenes' own caption column would only repeat them: the phone plays alone, centred, at the scene's own scale. ===== */
.bento .cp-v3{display:block;width:100%;background:none;padding:0;margin:0;box-shadow:none;min-height:0}
.bento .cp-v3 .cp-scene,.bento .cp-v3 .cp-scene.hero{display:flex;justify-content:center;gap:0}
.bento .cp-v3 .cp-side{display:none}
.bento .cp-v3 .illus{display:none}   /* the old page's "Illustrative example." caption, unreadable on the swirl */
/* the hero phone at the scale of the other heroes' cards, so the panel keeps the underwriting hero's height */
.bento .hp-stage > .cp-v3 .cp-dev{--z:.6}
@media (max-width:1199px){.bento .hp-stage > .cp-v3 .cp-dev{--z:.56}}
/* ===== D-344: a single result (owner, on the customer portal's 40%: "show the 40% at right side with a big font and move that
   text … just right below" the label). Words top left: the label, the claim, the source; the figure large on the right.
   When the label would only repeat the claim, the label text is left out (pages.py). ===== */
@media (min-width:768px){
  .bento .rb1 .rb-t{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto 1fr;column-gap:40px;row-gap:18px}
  .bento .rb1 .rb-tx{display:contents}
  .bento .rb1 .rb-top{grid-column:1;grid-row:1}
  .bento .rb1 .rb-w{grid-column:1;grid-row:2;max-width:18ch}
  .bento .rb1 .rb-s{grid-column:1;grid-row:3;align-self:start;margin-top:0}
  .bento .rb1 .rb-n{grid-column:2;grid-row:1/4;align-self:center;font-size:clamp(140px,16vw,240px);line-height:.82}
  .bento .rb1 .rb-lead .rb-w,.bento .rb1 .rb-t.rb-lead .rb-w{font-size:clamp(28px,3vw,40px);line-height:1.12}}
@media (min-width:768px){.bento .rb1 .rb-w::first-letter{text-transform:uppercase}}   /* the claim now opens the tile, so it starts as a sentence */
/* D-345: the single result breathes (owner: "why fit to the height, give that free space and top and bottom"). Taller padding,
   and the figure a step smaller so it no longer fills the tile edge to edge. */
@media (min-width:768px){.bento .rb1 .rb-t{padding-block:clamp(56px,6.5vw,104px);padding-inline:clamp(28px,4vw,64px)}
  .bento .rb1 .rb-n{font-size:clamp(120px,13vw,200px)}}
/* D-346: the counting figure keeps its final width; the single result's figure counts in place on the right */
.bento .rb1 .rb-n{text-align:right}