/* Home "Why Capnix" widgets: the minimal redesign. Loaded by Pages/Index.cshtml only, after
   why-widgets.css (the shared widget base, also used on /are-you-loan-ready), and scoped to
   .wg-mac so that page keeps its look.

   One anatomy for every card: head (icon, title, status pill), body (the one thing it shows),
   foot (one action or one note). One confirmation per action: the status pill flips and the
   foot line swaps; there is no toast.

   Colour and type come from the site tokens only (theme/_capnix-tokens.scss, @webority/theme):
   the widget palette (--wg-*) is mapped onto them here, so the shared base rules use them too.
   Accent only for what is next, success only for what is done. Type follows the site's design
   language: Webority Sans for UI text and figures, 12px uppercase captions, heading ink for
   numbers. References: Slash (one figure, quiet rows), Microsoft Copilot tasks (a timeline
   that marks the current step only), Heron (hairline structure). */

.wg-mac .wg-plate {
  --wg-accent: var(--wui-primary); --wg-accent-ink: var(--wui-primary); --wg-accent-bg: var(--wui-primary-10);
  --wg-well: var(--wui-primary-10);
  --wg-ok: var(--wui-success-text); --wg-ok-bg: var(--wui-success-10); --wg-ok-bar: var(--wui-success);
  --wg-ok-line: var(--wui-success-30); --wg-ok-tint: var(--wui-success-5);
  --wg-mid: var(--wui-warning-text); --wg-mid-bg: var(--wui-warning-10); --wg-mid-bar: var(--wui-warning);
  --wg-head: var(--wui-text-heading); --wg-text: var(--wui-text-1); --wg-sub: var(--wui-text-2);
  --wg-faint: var(--wui-text-3); --wg-muted: var(--wui-text-4);
  --wg-line: var(--wui-border-light); --wg-track: var(--wui-border-light); --wg-border: var(--wui-text-5);
  --wg-soft: var(--wui-bg-elevated); --wg-note: var(--wui-bg-elevated);
  --wg-ink: var(--wui-text-heading); --wg-ink-hot: var(--wui-text-1);
}

/* Card: same frame, size and white ground as before (50px in from the photo, 20px padding);
   head and foot sit at its edges, the body takes the middle. */
.wg-mac .wg-plate .wg {
  gap: 0; justify-content: flex-start; background: var(--wui-bg-light);
  font-family: var(--font-sans); font-size: 14px; font-weight: 400; line-height: 1.45; color: var(--wui-text-1);
}

/* ---- macOS window: a title bar with the three traffic lights, sharp corners, a soft
   window shadow. The bar runs edge to edge across the top of the card. ---- */
.wg-mac .wg-plate .wg { border-radius: 0; box-shadow: var(--wui-shadow-overlay-lg); }
/* The photo is the desktop: a frosted macOS menu bar runs across its top edge, above the
   window, inside the 50px the window already leaves. */
.wg-mac .wg-menubar { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 26px; display: flex; align-items: center; gap: 16px; padding: 0 14px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 400; color: var(--wui-text-heading);
  background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(255, 255, 255, .4); }
.wg-mac .wg-menubar b { font-weight: 600; }
.wg-mac .wg-menubar__end { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; }
.wg-mac .wg-chrome { display: flex; align-items: center; gap: 7px; flex: none; height: 32px; margin: -20px -20px 16px; padding: 0 14px;
  background: var(--wui-bg-elevated); border-bottom: 1px solid var(--wui-border-light); }
.wg-mac .wg-chrome i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.wg-mac .wg-chrome i:nth-child(1) { background: var(--wui-danger); }
.wg-mac .wg-chrome i:nth-child(2) { background: var(--wui-warning); }
.wg-mac .wg-chrome i:nth-child(3) { background: var(--wui-success); }

/* ---- Type scale (site design language) ----
   title 16 / 500 heading ink · row text 14 / 400 · secondary 13 / 400 text-3 ·
   caption 12 / 600 / .04em uppercase text-3 · figures sans 500, tabular. */
.wg-mac .wg-title { font-size: 16px; font-weight: 500; letter-spacing: -.01em; line-height: 1.3; color: var(--wui-text-heading); }
.wg-mac .wg-sub { font-size: 13px; font-weight: 400; color: var(--wui-text-3); }
.wg-mac .wg-label { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--wui-text-3); }
.wg-mac .wg-pill { font-size: 12px; font-weight: 600; }
.wg-mac :is(.sl-trend, .wg-status, .wg-note, .wg-tip) { font-size: 13px; font-weight: 400; }

/* ---- Anatomy ---- */
.wg-mac .wg-head { align-items: center; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--wui-border-light); }
.wg-mac .wg-hic { width: 36px; height: 36px; font-size: 18px; background: var(--wui-primary-10); color: var(--wui-primary); }
.wg-mac .wg-pill > span { padding: 4px 10px 4px 8px; }

.wg-mac .wg-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 20px 0; min-height: 0; }

.wg-mac .wg-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding-top: 18px; border-top: 1px solid var(--wui-border-light); }
.wg-mac .wg-status { color: var(--wui-text-2); }
.wg-mac .is-applied .wg-status .after { color: var(--wui-success-text); font-weight: 500; }

/* Notes: one quiet line, never a box. */
.wg-mac .wg-note { padding: 0; background: none; gap: 6px; color: var(--wui-text-3); }
.wg-mac .wg-note .icx { width: 14px; height: 14px; color: var(--wui-text-4); }

/* Rows run edge to edge with the head and foot rules; the hover ground reaches past the edge
   with a box-shadow, so the hairlines stay aligned. Row text: 14 / 400 in body ink; the
   thing the row names: 500 in heading ink. */
.wg-mac :is(.sf-row, .ap-step, .lm-row, .fr-row) { padding: 9px 0; margin: 0; border-radius: 0; font-size: 14px; font-weight: 400; color: var(--wui-text-1); transition: background .3s, box-shadow .3s; }
.wg-mac .is-hover :is(.sf-row, .ap-step, .lm-row, .fr-row)[data-cursor] { background: var(--wui-bg-elevated); box-shadow: 0 0 0 8px var(--wui-bg-elevated); border-radius: 2px; }
.wg-mac :is(.ap-txt, .lm-name, .fr-name) { font-weight: 500; color: var(--wui-text-heading); }
.wg-mac .wg-tip { color: var(--wui-text-3); }

/* Chips: one solid style; the one to act on carries the accent "Add". */
.wg-mac .wg-chip { font-size: 13px; font-weight: 500; padding: 5px 10px 5px 8px; color: var(--wui-text-1); border: 1px solid var(--wui-border-light); background: var(--wui-bg-light); }
.wg-mac .wg-chip .icx { color: var(--wui-text-3); }
.wg-mac .wg-chip.is-hot { border-color: var(--wui-primary); background: var(--wui-bg-light); }
.wg-mac .wg-chip__add { background: var(--wui-primary); color: var(--wui-bg-light); font-size: 12px; font-weight: 600; }
.wg-mac :is(.wg-chip.on, .wg-chip.is-on) { border-color: transparent; background: var(--wui-success-10); color: var(--wui-success-text); }
.wg-mac :is(.wg-chip.on, .wg-chip.is-on) .icx { color: var(--wui-success-text); }
.wg-mac :is(.wg-chip.on, .wg-chip.is-on) .wg-chip__ok { color: var(--wui-success); }

/* Buttons: the site's primary CTA (.btn-cta-arrow) at card scale. Accent pill, white 600
   label, the arrow in a round 20% white well on the right. */
.wg-mac .wg-btn { gap: 10px; height: 40px; padding: 0 7px 0 20px; font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  background: var(--wui-primary); color: var(--wui-bg-light); }
.wg-mac .wg-btn.is-hot { background: var(--wui-primary-hover); }
.wg-mac .wg-btn.is-busy { background: var(--wui-primary-pressed); }
.wg-mac .wg-btn__ico { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.wg-mac .wg-btn__ico .icx { width: 16px; height: 16px; color: var(--wui-bg-light); }
.wg-mac .wg-btn.is-busy :is(.wg-btn__label, .wg-btn__ico) { visibility: hidden; }
.wg-mac .wg-foot .wg-btn { max-width: 190px; overflow: hidden; transition: background .2s, opacity .3s, transform .3s var(--wg-ease), max-width .45s var(--wg-ease), padding .45s; }
/* Done: the button stays in place and turns into a quiet success state (no reflow). */
.wg-mac .is-applied .wg-foot .wg-btn { background: var(--wui-success-10); color: var(--wui-success-text); }
.wg-mac .is-applied .wg-foot .wg-btn__ico { background: var(--wui-success); }

/* ---- 0 · Read like a lender would: sources, a quiet sales chart, two findings ---- */
.wg-mac .sl-chart { padding: 14px 14px 12px; border-radius: 0; background: var(--wui-bg-elevated); gap: 10px; }
.wg-mac .sl-trend { color: var(--wui-text-3); }
.wg-mac .sl-bars { height: 52px; gap: 6px; }
.wg-mac .sl-bars i { background: var(--wui-text-5); opacity: .55; border-radius: 2px 2px 0 0; }
.wg-mac .sl-bars i:last-child { background: var(--wui-primary); opacity: 1; }
.wg-mac .sf-list { gap: 0; }
.wg-mac .sf-row { font-weight: 500; color: var(--wui-text-heading); }
.wg-mac .sf-row + .sf-row { border-top: 1px solid var(--wui-border-light); }
.wg-mac .sf-row:not(.is-known) .before { color: var(--wui-text-3); font-weight: 400; }
.wg-mac .wg-plate[data-widget="strength"] .wg-foot { justify-content: flex-start; }

/* ---- 1 · Your application: a timeline that marks only the current step ---- */
.wg-mac .ap-step:not(:last-child)::after { left: 9px; top: 30px; bottom: -8px; width: 1.5px; background: var(--wui-border-light); }
.wg-mac .ap-step.done::after, .wg-mac .is-applied .ap-step.next::after { background: var(--wui-success-30); }
.wg-mac .ap-step { grid-template-columns: 20px 1fr auto; padding: 8px 0; }
.wg-mac .ap-chk { width: 20px; height: 20px; border-color: var(--wui-text-5); background: var(--wui-bg-light); }
.wg-mac .ap-step.done .ap-chk, .wg-mac .is-applied .ap-step.next .ap-chk { background: var(--wui-success); border-color: var(--wui-success); }
.wg-mac .ap-step.next .ap-chk, .wg-mac .is-applied .ap-step.now .ap-chk { border-color: var(--wui-primary); }
.wg-mac .ap-chk .icx { width: 13px; height: 13px; }
.wg-mac .ap-step.later .ap-txt { font-weight: 400; color: var(--wui-text-4); }
.wg-mac .is-applied .ap-step.now .ap-txt { font-weight: 500; color: var(--wui-text-heading); }
.wg-mac .ap-own { font-size: 12px; font-weight: 500; padding: 2px 9px; color: var(--wui-text-2); background: var(--wui-bg-elevated); }
.wg-mac .ap-own.is-you { color: var(--wui-text-heading); background: var(--wui-bg-muted); }
.wg-mac .ap-own.is-lender { color: var(--wui-text-3); background: transparent; border-color: var(--wui-text-5); }

/* ---- 2 · Matched lenders: three rows, a fit tag that turns into "Sent" ---- */
.wg-mac .lm-rows { gap: 0; }
.wg-mac .lm-row + .lm-row { border-top: 1px solid var(--wui-border-light); }
.wg-mac .lm-row { grid-template-columns: 32px 1fr auto; }
.wg-mac .lm-logo { width: 32px; height: 32px; font-size: 16px; background: var(--wui-primary-10); color: var(--wui-primary); }
.wg-mac :is(.lm-fit, .lm-sent) { font-size: 12px; font-weight: 600; padding: 3px 10px; }
.wg-mac .lm-fit { color: var(--wui-success-text); background: var(--wui-success-10); }
.wg-mac .lm-fit.soft { color: var(--wui-warning-text); background: var(--wui-warning-10); }

/* ---- 3 · What you pay Capnix: a receipt. Line items, a rule, one figure ---- */
.wg-mac .fr-rows { gap: 0; }
.wg-mac .fr-row + .fr-row { border-top: 1px solid var(--wui-border-light); }
.wg-mac .fr-ic { width: 28px; height: 28px; font-size: 15px; background: var(--wui-primary-10); color: var(--wui-primary); }
.wg-mac .fr-amt { font-size: 14px; font-weight: 500; color: var(--wui-text-2); font-variant-numeric: tabular-nums; }
.wg-mac .fr-total { margin-top: 6px; padding: 12px 0 0; border-top: 1.5px solid var(--wui-text-heading); border-radius: 0; background: none; align-items: baseline; }
.wg-mac .fr-total__label { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--wui-text-3); }
.wg-mac .fr-total__amt { font-family: var(--font-sans); font-size: 32px; font-weight: 500; letter-spacing: -.02em; color: var(--wui-text-heading); font-variant-numeric: tabular-nums; }
.wg-mac .fr-qa.wg-foot { display: grid; justify-content: stretch; }
.wg-mac .fr-ask { justify-content: flex-start; }
.wg-mac .fr-ask .wg-chip { color: var(--wui-primary); background: var(--wui-primary-10); border-color: transparent; }
.wg-mac .fr-ask .wg-chip .icx { color: var(--wui-primary); }
.wg-mac .fr-ans-in { padding: 0; background: none; gap: 10px; }
.wg-mac .fr-ans-ic { width: 32px; height: 32px; font-size: 16px; background: var(--wui-success-10); color: var(--wui-success-text); }
.wg-mac .fr-ans b { font-size: 14px; font-weight: 500; color: var(--wui-text-heading); }
.wg-mac .fr-ans span { font-size: 13px; color: var(--wui-text-3); }

/* True circles: the shared base gives every widget corner a squircle; the arrow well and the
   traffic lights must stay round. */
.wg-mac :is(.wg-btn__ico, .wg-chrome i) { -webkit-corner-shape: round; corner-shape: round; }

/* Menu bar brand: the real Capnix wordmark (production artwork in every environment). */
.wg-mac .wg-menubar__logo { display: block; height: 14px; width: auto; margin-right: 2px; }

/* Contrast (WCAG AA 4.5:1): a later step reads one shade lighter than a done step, never the
   faint text-4 (2.6:1); the ask chip's words are heading ink with the accent on its icon only
   (accent on its own tint is 3.2:1). */
.wg-mac .ap-step.later .ap-txt { color: var(--wui-text-3); }
.wg-mac .fr-ask .wg-chip { color: var(--wui-text-heading); }

/* Button label and icon swap with the story: arrow while it invites, tick once done. */
.wg-mac .wg-btn__label { display: inline-grid; }
.wg-mac .wg-btn__ico { position: relative; }
.wg-mac .wg-btn__ico .icx { transition: opacity .3s, transform .45s var(--wg-spring); }
.wg-mac .wg-btn__ok { position: absolute; opacity: 0; transform: scale(.6); }
.wg-mac .is-applied .wg-btn__go { opacity: 0; transform: scale(.6); }
.wg-mac .is-applied .wg-btn__ok { opacity: 1; transform: none; }

/* ===== /are-you-loan-ready signal cards (.sig-panel__tile.wg-mac): static, no cursor story ===== */
/* Room for the menu bar above the window at every width (the tile frame is tighter than home). */
/* Outranks the page rule (body.page-are-you-loan-ready .sig-panel__tile .wg-plate) in site.css. */
body .sig-panel__tile.wg-mac .wg-plate:not(#_) { padding-top: 46px; }
/* Where the tile's card padding is 16px, the title bar meets the edges at 16px too. */
@media (min-width: 992px) and (max-width: 1399.98px) { .sig-panel__tile.wg-mac .wg-chrome { margin: -16px -16px 12px; } }
@media (max-width: 767.98px) { .sig-panel__tile.wg-mac .wg-chrome { margin: -16px -16px 12px; } }
.sig-panel__tile.wg-mac .wg-body { gap: 14px; padding: 16px 0; }
.sig-panel__tile.wg-mac .wg-head { padding-bottom: 16px; }
.sig-panel__tile.wg-mac .wg-foot { min-height: 0; padding-top: 14px; }

/* Metric rows: hairline separated; name 500 heading ink, value 12 / 600 success, a thin track. */
.wg-mac :is(.st-icon, .st-ic) { width: 32px; height: 32px; font-size: 16px; background: var(--wui-primary-10); color: var(--wui-primary); }
.wg-mac .st-rows { gap: 0; }
.wg-mac .st-row { padding: 10px 0; margin: 0; border-radius: 0; }
.wg-mac .st-row + .st-row { border-top: 1px solid var(--wui-border-light); }
.wg-mac .st-name { font-size: 14px; font-weight: 500; color: var(--wui-text-heading); }
.wg-mac .st-val { font-size: 12px; font-weight: 600; color: var(--wui-success-text); font-variant-numeric: tabular-nums; }
.wg-mac .wg-track { height: 4px; background: var(--wui-border-light); }
.wg-mac .st-row .wg-track > i { background: var(--wui-success); }

/* Dated steps: the date is a quiet caption. */
.wg-mac .ap-day { font-size: 12px; font-weight: 500; color: var(--wui-text-3); }

/* Twelve filed months: square cells on the success tint. */
.wg-mac .sv-months > span { border-radius: 0; background: var(--wui-success-5); font-size: 12px; font-weight: 500; color: var(--wui-text-2); }
.wg-mac .sv-months .icx { color: var(--wui-success); }

/* Bank lines and plan lines: hairline rows, amounts in heading ink, tags on the success tint. */
.wg-mac :is(.sv-tx__row, .sv-plan__row) { padding: 9px 0; border-top: 1px solid var(--wui-border-light); font-size: 14px; font-weight: 500; color: var(--wui-text-heading); }
.wg-mac :is(.sv-tx__row, .sv-plan__row):first-child { border-top: 0; }
.wg-mac :is(.sv-tx__row, .sv-plan__row) b { font-size: 14px; font-weight: 500; color: var(--wui-text-heading); font-variant-numeric: tabular-nums; }
.wg-mac .sv-tx__tag { font-size: 12px; font-weight: 600; color: var(--wui-success-text); background: var(--wui-success-10); padding: 3px 10px; border-radius: 999px; }
.wg-mac .sv-plan__row:not(.is-picked) { font-weight: 400; color: var(--wui-text-3); }
.wg-mac .sv-plan__row.is-picked { padding: 9px 10px; border-radius: 0; }