/* Product screens rebuilt in HTML (underwriting system, built on Catura), drawn from the real product's screens of 29 Sep 2026:
   white case cards, grey "CASE" panels, coloured status pills, a seven-stage progress stepper and blue primary actions.
   They act out each step with the motion system in motion.css / motion.js. Each screen reflows to phone width (container queries). */
.app{--a-line:#E6E8EC;--a-soft:#F7F8FA;--a-blue:#1C74C9;--a-red:#C8322B;--a-red-t:#FDEDEC;--a-amb:#B0641A;--a-amb-t:#FDF4E3;--a-grn:#1F7A4D;--a-grn-t:#E7F5EC;--a-grey:#8A919C;
  container-type:inline-size;background:#fff;color:#1D2330;font:400 13px/1.45 var(--body);padding:18px 20px 20px;display:flex;flex-direction:column;gap:14px;text-align:left;position:relative;overflow:hidden}
.frame.app{border-radius:14px 14px 0 0;box-shadow:0 1px 2px rgba(10,20,40,.08),0 24px 48px -24px rgba(10,20,40,.35)}
.app b{font-weight:600}
.app .ic{width:15px;height:15px}
.ap-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.ap-h .ttl{font:600 16px/1.25 var(--display);font-variation-settings:"opsz" 32;letter-spacing:-.01em;margin-right:2px}
.ap-h .sp{flex:1}
.ap-sub{font-size:12px;color:#6B7280;margin-top:-8px}
.ap-pill{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-radius:999px;font:600 11.5px/1 var(--body);white-space:nowrap;flex:none}
.ap-pill .ic{width:12px;height:12px;stroke-width:2.2}
.ap-pill.amb{background:var(--a-amb-t);color:#8F4E10}.ap-pill.red{background:var(--a-red-t);color:var(--a-red)}.ap-pill.grn{background:var(--a-grn-t);color:var(--a-grn)}.ap-pill.blu{background:#E7F1FB;color:#1C6FB0}.ap-pill.gry{background:#EEF0F3;color:#4B5260}
.ap-pill.solid-amb{background:#F2A21B;color:#2B1B00}.ap-pill.solid-grn{background:var(--a-grn);color:#fff}
.ap-btn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:7px;font:600 12px/1 var(--body);white-space:nowrap;background:#fff;box-shadow:inset 0 0 0 1px #D5D9E0;color:#2B3140;flex:none;transition:background-color .3s var(--e-out),color .3s var(--e-out),box-shadow .3s var(--e-out)}
.ap-btn .ic{width:13px;height:13px;stroke-width:2}
.ap-btn.red{color:var(--a-red);box-shadow:inset 0 0 0 1.5px #EBA9A3}
.ap-btn.pri{background:var(--a-blue);color:#fff;box-shadow:none}
.ap-btn.grey{background:#EEF0F3;box-shadow:inset 0 0 0 1px #D5D9E0}
.ap-btn.ok{background:var(--a-grn);color:#fff;box-shadow:none}
.ap-btn.dis{background:#A9B0BA;color:#fff;box-shadow:none}
.ap-lab{font:600 10.5px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:#6B7280}
.ap-card{background:var(--a-soft);border:1px solid var(--a-line);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;min-width:0}
.ap-card .hd{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13.5px}
.ap-kv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;font-size:12.5px}
.ap-kv span{color:#6B7280}.ap-kv b{text-align:right;font-variant-numeric:tabular-nums}
.ap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}

/* stage stepper */
.ap-steps{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));padding-top:2px}
.ap-steps .ln{position:absolute;left:calc(100%/14);right:calc(100%/14);top:16px;height:2px;background:var(--a-line)}
.ap-steps .ln i{position:absolute;inset:0;background:#C9CED6;transform-origin:left}
.ap-steps .ln i.fx-wipe{clip-path:inset(0)}
.ap-st{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:#4B5260;text-align:center;line-height:1.2}
.ap-st .c{position:relative;width:32px;height:32px;border-radius:99px;display:grid;place-items:center;color:#fff;background:#E9EBEF;box-shadow:0 0 0 3px #fff;transition:background-color .35s var(--e-out),transform .5s var(--e-expo)}
.ap-st .c .ic{width:15px;height:15px;stroke-width:1.8}
.ap-st .c.grn{background:var(--a-grn)}.ap-st .c.amb{background:var(--a-amb)}.ap-st .c.red{background:var(--a-red)}.ap-st .c.gry{background:#E9EBEF;color:#9AA1AC}
.ap-st .c[data-st]{background:#E9EBEF!important;color:#B5BBC4;transform:scale(.9)}
.ap-st .c .bdg{position:absolute;right:-3px;top:-3px;width:12px;height:12px;border-radius:99px;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 1.5px currentColor}
.ap-st .c.red .bdg{color:var(--a-red)}.ap-st .c.grn .bdg{color:var(--a-grn)}
.ap-st .c .bdg::after{content:"";width:6px;height:6px;border-radius:9px;background:currentColor}
.ap-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11.5px;color:#4B5260}
.ap-legend i{width:8px;height:8px;border-radius:9px;display:inline-block;margin-right:5px;vertical-align:0}

/* priority action cards */
.ap-prio{border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;min-width:0;border:1px solid}
.ap-prio.red{background:#FEF5F4;border-color:#F4C9C4}.ap-prio.amb{background:#FFFAEC;border-color:#F3DFA6}.ap-prio.grn{background:#F1FAF4;border-color:#BFE3CC}
.ap-prio .hd{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:600;font-size:13.5px}
.ap-prio p{margin:0;font-size:12.5px;color:#4B5260}
.ap-prio .row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ap-prio{transition:background-color .4s var(--e-out),border-color .4s var(--e-out)}

/* tables */
.ap-tbl{border:1px solid var(--a-line);border-radius:10px;overflow:hidden}
.ap-tr{display:grid;gap:10px;align-items:center;padding:9px 12px;font-size:12.5px;border-top:1px solid var(--a-line);transition:background-color .35s var(--e-out)}
.ap-tr:first-child{border-top:0}
.ap-th{background:var(--a-soft);font-weight:600;color:#4B5260;font-size:11.5px;padding-block:8px}
.ap-tr .mut{color:#6B7280;font-size:11.5px}
.ap-tr .lnk{color:var(--a-blue);text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(28,116,201,.35)}
.ap-tr[data-st=scan]{background:#EEF5FD}
.ap-tr.new{background:#F1FAF4}
.ap-tr.alert{background:#FEF5F4}
.ap-tags{display:flex;gap:4px;margin-top:3px}
.fx-open.ap-tr{display:grid}
.ap-banner{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:9px;background:#FEF5F4;border:1px solid #F4C9C4;color:#7A1D17;font-size:12.5px}
.ap-banner .ic{color:var(--a-red);margin-top:1px;flex:none}

/* streaming text panel and score tiles */
.ap-text{background:#fff;border:1px solid var(--a-line);border-radius:9px;padding:10px 12px;font-size:12.5px;line-height:1.55;color:#2B3140}
.ap-sec{border:1px solid var(--a-line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px;transition:background-color .4s var(--e-out),border-color .4s var(--e-out)}
.ap-sec[data-st=ok],.ap-sec.ok{background:#F1FAF4;border-color:#9ED3B1}
.ap-sec[data-st=plain]{background:#fff;border-color:var(--a-line)}
.ap-sec .hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ap-sec .hd b{font-size:13.5px}
.ap-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.ap-tile{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;border:1px solid var(--a-line);border-radius:8px;font-size:12px;background:#fff}
.ap-tile b{font-variant-numeric:tabular-nums}

/* money rows */
.ap-money{display:flex;flex-direction:column}
.ap-money>div{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:8px;padding:6px 0;font-size:12.5px}
.ap-money>div+div{border-top:1px dashed var(--a-line)}
.ap-money .mi{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;background:#FFF6E5;color:#B7791F}
.ap-money .mi .ic{width:12px;height:12px}
.ap-money .mi.g{background:#E9F7EF;color:var(--a-grn)}
.ap-money b{font-variant-numeric:tabular-nums}
.ap-money .amt{color:#B7791F}.ap-money .pos{color:var(--a-grn)}
.ap-money .tot{font-size:13.5px}

/* offer timeline */
.ap-tl{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px 10px}
.ap-tl>div{display:flex;gap:8px;align-items:flex-start;min-width:0}
.ap-tl .c{width:24px;height:24px;border-radius:99px;display:grid;place-items:center;flex:none;color:#fff;background:var(--a-grn);transition:background-color .35s var(--e-out)}
.ap-tl .c .ic{width:12px;height:12px;stroke-width:2.4}
.ap-tl .c[data-st=pend]{background:var(--a-amb)}
.ap-tl .c[data-st=pend] .k{display:none}.ap-tl .c:not([data-st]) .p{display:none}.ap-tl .c[data-st=pend] .p{display:block}
.ap-tl b{display:block;font-size:12px;line-height:1.25}
.ap-tl small{display:block;font-size:11px;color:#6B7280;line-height:1.3}

/* switching chips and buttons reuse .mx-sw from motion.css */
.ap-btn.mx-sw[data-st=grey]{background:#EEF0F3;color:#2B3140;box-shadow:inset 0 0 0 1px #D5D9E0}
.ap-btn.mx-sw[data-st=dis]{background:#A9B0BA;color:#fff;box-shadow:none}
.ap-btn.mx-sw[data-st=pri]{background:var(--a-blue);color:#fff;box-shadow:none}
.ap-btn.mx-sw[data-st=down]{transform:scale(.94)}
.ap-btn.mx-sw>[data-v]{display:none}
.ap-btn.mx-sw[data-st=grey]>[data-v=grey],.ap-btn.mx-sw[data-st=dis]>[data-v=dis],.ap-btn.mx-sw[data-st=pri]>[data-v=pri],.ap-btn.mx-sw[data-st=down]>[data-v=down]{display:inline-flex;align-items:center;gap:6px}
.ap-pill.mx-sw[data-st=amb]{background:var(--a-amb-t);color:#8F4E10}.ap-pill.mx-sw[data-st=red]{background:var(--a-red-t);color:var(--a-red)}.ap-pill.mx-sw[data-st=gry]{background:#EEF0F3;color:#4B5260}.ap-pill.mx-sw[data-st=solid-amb]{background:#F2A21B;color:#2B1B00}
.ap-pill.mx-sw>[data-v=solid-amb]{display:none}.ap-pill.mx-sw[data-st=solid-amb]>[data-v=solid-amb]{display:inline-flex;align-items:center;gap:4px}

@container (max-width:520px){
  .app{padding:14px 14px 16px;font-size:12.5px}
  .ap-steps{grid-template-columns:repeat(7,minmax(0,1fr))}
  .ap-st{font-size:0;gap:0}
  .ap-st .c{width:26px;height:26px}
  .ap-steps .ln{top:13px}
  .ap-hide-s{display:none!important}
}
@container (max-width:380px){ .ap-hide-xs{display:none!important} .ap-h .ttl{font-size:15px} }
.ap-pill.mx-sw[data-st=spin]{background:#EEF0F3;color:#4B5260}
.ap-tr.alert[data-st=scan],.ap-tr.new[data-st=scan]{background:#EEF5FD}
.ap-tr[data-st=plain]{background:transparent}
.ap-prio[data-st=amb]{background:#FFFAEC;border-color:#F3DFA6}
.ap-btn.mx-sw[data-st=redb]{color:var(--a-red);box-shadow:inset 0 0 0 1.5px #EBA9A3;background:#fff}
.ap-btn.mx-sw[data-st=redb]>[data-v=redb]{display:inline-flex;align-items:center;gap:6px}
.ap-btn{position:relative}
/* chase log: dot, day, what happened; the rail is drawn inside each entry so it is never clipped while an entry opens */
.ap-log{display:flex;flex-direction:column;padding:2px 0}
.ap-log>div>div{position:relative;display:grid;grid-template-columns:18px 44px minmax(0,1fr);align-items:center;column-gap:8px;padding:6px 0;font-size:12.5px;line-height:1.4}
.ap-log>div>div::before{content:"";grid-column:1;justify-self:center;width:10px;height:10px;border-radius:99px;background:#fff;box-shadow:inset 0 0 0 2px var(--a-blue);position:relative;z-index:1}
.ap-log>div>div::after{content:"";position:absolute;left:8px;width:2px;top:0;bottom:0;background:var(--a-line)}
.ap-log>div:first-child>div::after{top:50%}
.ap-log>div:last-child>div::after{bottom:50%}
.ap-log>div:only-child>div::after{display:none}
.ap-log .when{font:600 10.5px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:#6B7280;white-space:nowrap}
.ap-log .done::before{background:var(--a-grn);box-shadow:none}
.ap-chips{display:flex;flex-wrap:wrap;gap:6px}
.q{grid-template-columns:1.25fr 1.3fr 1fr 1fr 1.25fr}
.d{grid-template-columns:2.1fr 1.2fr .9fr 1.1fr}
.au{grid-template-columns:2fr 1fr 1fr 1.1fr}
.ap-blk{margin:0;font-size:12.5px;color:#4B5260}
.ap-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
@container (max-width:520px){.q{grid-template-columns:1.2fr 1fr 1fr 1.25fr}.d{grid-template-columns:2fr 1fr 1.1fr}.au{grid-template-columns:2fr 1fr 1fr}}
@container (max-width:380px){.q{grid-template-columns:1.2fr 1fr 1.2fr}.d{grid-template-columns:2fr 1.2fr}.au{grid-template-columns:2fr 1fr}}
.mx-sw[data-st=p]>[data-v=p]{display:inline}
.ap-tr>*{min-width:0}
.ap-tr .lnk{overflow-wrap:anywhere}
.ap-tr .ap-pill{max-width:100%}

.ap-case .ap-kv{grid-template-columns:auto minmax(0,1fr)}
.ap-case .ap-kv b{text-align:right;overflow-wrap:anywhere}

/* whole window, not cut at the bottom (owner comment 1 Oct) */
.frame.app{border-radius:14px}