/* Investment, Pension & Financial Operations industry page (pages/ind/finance.py): the hero scene, the four pillar tiles and
   the Manual / Automated comparison. Every class here starts if-. Dark scenes with glowing mint glass panels, like the live
   page's pictures. Narrow scene windows (a phone, or the tiles two to a row on a tablet) get their own layouts in the
   @container blocks: the window is the container, so the parts that belong together stay together at any size. */

/* mint glass: the panels that carry the new way of working */
.p .if-node,.p .if-hub,.p .if-exc,.p .if-fld{background:linear-gradient(160deg,rgba(var(--cc-mint-rgb, 23, 255, 197),.1),rgba(10,24,21,.92) 45%);border-color:rgba(var(--cc-mint-rgb, 23, 255, 197),.38);box-shadow:0 0 0 1px rgba(var(--cc-mint-rgb, 23, 255, 197),.06),0 0 34px rgba(var(--cc-mint-rgb, 23, 255, 197),.1),0 18px 40px rgba(var(--cc-k, 0, 0, 0), calc(.4 * var(--cc-ka, 1)))}

/* ---------- hero, frame 1: manual work ---------- */
.p .if-pile .if-doc{display:block;position:absolute;width:74%;height:80%;padding:12px 12px 0;overflow:hidden;background:#101a18}
.p .if-d3{left:24%;top:0;transform:rotate(5deg)}
.p .if-d2{left:12%;top:6%;transform:rotate(-4deg)}
.p .if-d1{left:0;top:14%;background:#13201d}
/* a factsheet's performance chart at the foot of its page */
.p .if-doc .if-chart{position:absolute;left:12px;right:12px;bottom:12px;height:24%;border-radius:4px;background:linear-gradient(0deg,rgba(var(--cc-mint-rgb, 23, 255, 197),.28),rgba(var(--cc-mint-rgb, 23, 255, 197),.04))}
.p .if-pdf{display:inline-block;padding:2px 6px;border-radius:4px;background:#ff6b6b;color:var(--cc-fff, #fff);font-size:9px;font-weight:800;letter-spacing:.04em}
.p .if-doc b{display:block;margin:8px 0 10px;font-size:11.5px;font-weight:600;line-height:1.25;color:var(--cc-fff, #fff)}
.p .if-ln{display:block;height:5px;margin-top:7px;border-radius:3px;background:rgba(var(--cc-fg, 255, 255, 255),.14)}
.p .if-ln.t{width:70%;height:8px;margin:10px 0 12px;background:rgba(var(--cc-fg, 255, 255, 255),.3)}
.p .if-hi{position:absolute;left:10px;top:62px;width:58%;height:11px;border-radius:2px;background:rgba(255,214,90,.28)}
.p .if-xl{overflow:hidden;background:#0e1715}
.p .if-xh{display:flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-bottom:1px solid rgba(var(--cc-fg, 255, 255, 255),.08);font-size:11.5px;color:var(--cc-soft)}
.p .if-xh i,.p .if-cb-t i{display:grid;place-items:center;width:16px;height:16px;border-radius:3px;background:#1d7a47;color:var(--cc-fff, #fff);font-size:9px;font-style:normal;font-weight:800}
.p .if-xg{display:grid;grid-template-columns:1fr 1fr 1fr 34px}
.p .if-xg>span{display:flex;align-items:center;height:30px;padding:0 10px;border-right:1px solid rgba(var(--cc-fg, 255, 255, 255),.06);border-bottom:1px solid rgba(var(--cc-fg, 255, 255, 255),.06);font-size:12px;color:#dfe9e6;font-variant-numeric:tabular-nums}
.p .if-xg>span:nth-child(-n+4){height:26px;background:rgba(var(--cc-fg, 255, 255, 255),.04);font-size:10.5px;color:var(--cc-mute)}
.p .if-xg>span:nth-child(4n){justify-content:center;border-right:0}
.p .if-xg em{font-style:normal;box-shadow:inset -1.5px 0 0 var(--cc-mint)}
.p .if-xg .if-bad{background:rgba(255,122,122,.14);color:#ffc2c2}
.p .if-q{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#ffd166;color:#221a00;font-size:11px;font-weight:800}
.p .if-inbox{padding:12px 14px;background:#0e1715}
.p .if-ih{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.p .if-ih b{font-size:13px;font-weight:600}
.p .if-ct{padding:1px 7px;border-radius:99px;background:#ff7a7a;color:var(--cc-d-1d0606, #1d0606);font-size:10.5px;font-weight:800}
.p .if-mail{display:flex;align-items:center;gap:8px;padding:5px 0;border-top:1px solid rgba(var(--cc-fg, 255, 255, 255),.06);font-size:11.5px;color:var(--cc-soft);white-space:nowrap}
.p .if-mail i{flex:none;width:7px;height:7px;border-radius:50%;background:#3d8bff}
.p .if-sticky{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:10px 14px;border:0;border-radius:4px;background:#f3d86b;box-shadow:0 14px 30px rgba(var(--cc-k, 0, 0, 0), calc(.45 * var(--cc-ka, 1)));transform:rotate(3deg);color:#3a2f06}
.p .if-sticky b{font-size:13px;font-weight:700}
.p .if-sticky span{font-size:12px;line-height:1.35}

/* ---------- hero, frame 2: one connected flow ---------- */
.p .if-node{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:10px 14px}
.p .if-node .s-p{font-size:11.5px;line-height:1.35}
.p .if-pipe{height:2px}
.p .if-pipe i{position:absolute;inset:0;background:rgba(var(--cc-mint-rgb, 23, 255, 197),.55);transform-origin:left}
.p .if-wire{pointer-events:none}
.p .if-ok{display:flex;flex-direction:column;justify-content:center;padding:12px 16px}
.p .if-ok .s-big{margin:2px 0 4px;font-size:32px}
.p .if-ok .s-p{display:flex;align-items:center;gap:6px}
.p .if-exc{padding:12px 16px}
.p .if-exc .s-h{margin-top:4px}
.p .if-exc>.s-p{margin-top:2px;color:#ffd0d0}
.p .if-who{margin-top:10px}
.p .if-acts{position:absolute;left:16px;bottom:12px;gap:8px}
.p .if-apv{display:inline-grid;transition:box-shadow .3s}
.p .if-apv>span{grid-area:1/1;text-align:center}
.p .if-apv .a2{visibility:hidden}
.p .if-apv.on .a1{visibility:hidden}
.p .if-apv.on .a2{visibility:visible}
.p .if-apv.on{box-shadow:0 0 0 4px rgba(var(--cc-mint-rgb, 23, 255, 197),.2),0 0 18px rgba(var(--cc-mint-rgb, 23, 255, 197),.5)}
.p .if-cur{left:52px;bottom:4px;z-index:2}
.p .if-cur svg{display:block;width:20px;height:20px;filter:drop-shadow(0 2px 4px rgba(var(--cc-k, 0, 0, 0), calc(.5 * var(--cc-ka, 1))))}
.p .if-n{display:none}

/* ---------- pillar tiles ---------- */
.p .if-col{padding:12px 12px 10px}
.p .if-col .s-cap{margin-bottom:8px}
.p .if-now .s-cap{color:var(--cc-mint)}
.p .if-lit{position:absolute;box-sizing:border-box;border:1.5px solid transparent;border-radius:14px;pointer-events:none;transition:border-color .4s,box-shadow .4s,background .4s}
.p .if-lit.on{border-color:var(--cc-mint);background:rgba(var(--cc-mint-rgb, 23, 255, 197),.05);box-shadow:0 0 0 3px rgba(var(--cc-mint-rgb, 23, 255, 197),.16),0 0 26px rgba(var(--cc-mint-rgb, 23, 255, 197),.18)}
.p .if-it{display:flex;align-items:flex-start;gap:7px;margin-top:7px;font-size:12px;line-height:1.3;color:var(--cc-fff, #fff)}
.p .if-it i{flex:none;width:6px;height:6px;margin-top:5px;border-radius:50%;background:var(--cc-mint)}
.p .if-src{display:flex;align-items:center;padding:0 12px;background:#0e1715}
.p .if-src span{font-size:12px;color:var(--cc-fff, #fff);white-space:nowrap}
.p .if-ic{display:grid;flex:none;place-items:center;width:20px;height:20px;border-radius:5px;background:rgba(var(--cc-fg, 255, 255, 255),.08);color:var(--cc-soft);font-size:11px;font-style:normal}
.p .if-hub{display:flex;flex-direction:column;justify-content:center;padding:12px 16px}
.p .if-hr{margin-top:8px;font-size:12.5px;color:var(--cc-fff, #fff)}
.p .if-sdoc{padding:12px 12px 0;overflow:hidden;background:#101a18}
.p .if-dh{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.p .if-dh b{font-size:12px;font-weight:600}
.p .if-dl{margin:0 -4px 8px;padding:4px;border:1px solid transparent;border-radius:5px;transition:border-color .3s,background .3s}
.p .if-dl i{display:block;height:6px;border-radius:3px;background:rgba(var(--cc-fg, 255, 255, 255),.18)}
.p .if-dl.on{border-color:rgba(var(--cc-mint-rgb, 23, 255, 197),.55);background:rgba(var(--cc-mint-rgb, 23, 255, 197),.1)}
.p .if-dl.r.on{border-color:rgba(255,122,122,.7);background:rgba(255,122,122,.12)}
.p .if-scan{position:absolute;left:0;right:0;bottom:8px;height:2px;background:var(--cc-mint);box-shadow:0 0 12px 2px rgba(var(--cc-mint-rgb, 23, 255, 197),.6)}
.p .if-fld{display:flex;flex-direction:column;justify-content:center;padding:10px 16px}
.p .if-fr{display:grid;grid-template-columns:minmax(0,1fr) auto 18px;gap:10px;align-items:center;padding:5px 0;border-bottom:1px solid rgba(var(--cc-fg, 255, 255, 255),.07)}
.p .if-fr span{font-size:11.5px;color:var(--cc-mute)}
.p .if-fr b{font-size:12.5px;font-weight:600;color:var(--cc-fff, #fff);font-variant-numeric:tabular-nums}
.p .if-fld .s-cap{margin-bottom:4px}
.p .if-note{margin-top:6px;font-size:11.5px;color:#ffc2c2}
.p .if-fld .s-tag.if-rev{position:static;display:inline-block;align-self:flex-start;margin-top:6px}
.p .if-use{display:flex;flex-direction:column;justify-content:center}
.p .if-ur{margin-top:9px}
.p .if-ur span{font-size:12.5px;color:var(--cc-fff, #fff)}
.p .if-pd{margin:8px 0 0 26px}
.p .if-pd .s-chip{padding:3px 10px 3px 3px}
.p .if-pd .s-av{width:20px;height:20px;font-size:9px}

/* ---------- Manual / Automated ---------- */
.p .if-cb{margin-top:44px;max-width:470px;border:1px solid #c9c3b6;background:#f7f5ef;font:12px/1.4 Arial,Helvetica,sans-serif;color:#333}
.p .if-cb-t{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid #c9c3b6;background:#e2ddd2;font-size:12px;color:#444}
.p .if-cb-g{display:grid;grid-template-columns:1fr 1fr 1fr 1.3fr}
.p .if-cb-g span{min-height:28px;padding:7px 8px;box-sizing:border-box;border-right:1px solid #ddd8cc;border-bottom:1px solid #ddd8cc;font-variant-numeric:tabular-nums}
.p .if-cb-g span:nth-child(-n+4){background:#ebe7de;font-weight:700;color:#555}
.p .if-cb-g span:nth-child(4n){border-right:0}
.p .if-cb-g .y{background:#fff3a8}
.p .if-cb-f{padding:8px 10px;font-size:11.5px;color:#8a3b3b}
.p .if-ca{margin-top:44px;max-width:470px}
.p .if-ca-h{display:flex;align-items:baseline;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--cc-line)}
.p .if-ca-h b{font-size:16px;font-weight:600}
.p .if-ca-ok{display:flex;align-items:center;gap:10px;margin:14px 0 16px;font-size:14px;color:var(--cc-soft)}
.p .if-ca-ok b{font-size:18px;color:var(--cc-fff, #fff);font-variant-numeric:tabular-nums}
.p .if-ca-r{display:flex;align-items:center;gap:12px;margin-top:8px;padding:10px 12px;border:1px solid rgba(var(--cc-mint-rgb, 23, 255, 197),.3);border-radius:12px;background:linear-gradient(160deg,rgba(var(--cc-mint-rgb, 23, 255, 197),.08),rgba(10,24,21,.9))}
.p .if-ca-r div{flex:1;min-width:0}
.p .if-ca-r b{display:block;font-size:13.5px;font-weight:600}
.p .if-ca-r div span{display:block;margin-top:2px;font-size:12px;color:#ffc2c2}
/* light theme: the automated rows sit on the card's white, their flag in a red that reads on it */
html[data-theme="light"] .p .if-ca-r{background:linear-gradient(160deg,rgba(0,112,92,.08),#fff)}
html[data-theme="light"] .p .if-ca-r div span{color:#B42318}
.p .if-ca-f{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:12.5px;color:var(--cc-soft)}

@media (max-width:767.98px){
  .p .if-cb,.p .if-ca{margin-top:40px}
  .p .if-ca{margin-top:34px}
  .p .if-ca-h{padding-bottom:10px}
  .p .if-cb{font-size:11px}
  .p .if-cb-g span{min-height:24px;padding:5px 6px}
  .p .if-cb-g span:nth-child(n+21):nth-child(-n+24){display:none}
  .p .if-ca-ok{margin:10px 0 12px;font-size:13px}
  .p .if-ca-r{padding:8px 10px}
  .p .if-ca-r b{font-size:12.5px}
  .p .if-ca-r div span{font-size:11px}
  .p .if-ca-f{margin-top:10px;font-size:11.5px}
}

@container (max-width:480px){
  /* hero, manual work: the pile and the inbox side by side on top, the spreadsheet across under them */
  .p .if-w{display:none}
  .p .if-n{display:block}
  .p .if-doc b{font-size:10.5px;margin:6px 0 8px}
  .p .if-pile .if-doc{width:78%;padding:10px 10px 0}
  .p .if-hi{top:52px}
  .p .if-xh{height:26px;font-size:11px}
  .p .if-xg>span{height:26px;padding:0 8px;font-size:11.5px}
  .p .if-xg>span:nth-child(-n+4){height:22px}
  .p .if-inbox{padding:10px 12px}
  .p .if-mail{font-size:10.5px}
  .p .if-m3{display:none}
  /* hero, the flow: three short steps on top, the matched lines and the exception side by side under them */
  .p .if-node{gap:3px;padding:8px}
  .p .if-node .s-h{font-size:11.5px}
  .p .if-node .s-p{font-size:10px;line-height:1.3}
  .p .if-ok{padding:10px 12px}
  .p .if-ok .s-big{font-size:28px}
  .p .if-ok .s-p{align-items:flex-start;font-size:11px}
  .p .if-ok .s-ok{margin-top:1px}
  .p .if-exc{padding:10px 12px}
  .p .if-exc .s-h{font-size:13px}
  .p .if-exc>.s-p{font-size:11px}
  .p .if-who .s-p{font-size:11px}
  .p .if-acts{left:12px;bottom:10px;gap:6px}
  .p .if-acts .s-btn{padding:6px 10px;font-size:11px}
  .p .if-cur{left:44px;bottom:2px}
  /* tiles: the plan in three rows, each stage's name, then its two steps side by side */
  .p .if-col{display:flex;align-items:center;gap:10px;padding:0 12px}
  .p .if-col .s-cap{flex:none;width:46px;margin:0}
  .p .if-its{display:flex;flex-wrap:wrap;gap:2px 14px}
  .p .if-it{gap:6px;margin-top:0;font-size:11.5px;white-space:nowrap}
  .p .if-src{padding:0 10px}
  .p .if-src span{font-size:11px}
  .p .if-hub{padding:10px 12px}
  .p .if-hr{margin-top:6px;font-size:11.5px}
  .p .if-sdoc{padding:10px 9px 0}
  .p .if-dh{gap:5px}
  .p .if-dh b{font-size:10.5px}
  .p .if-fld{padding:8px 12px}
  .p .if-fr{gap:8px;padding:4px 0}
  .p .if-fr span{font-size:10.5px}
  .p .if-fr b{font-size:11.5px}
  .p .if-ur{margin-top:8px}
  .p .if-ur span{font-size:12px}
}