/* The SACCO and fintech page (services/pages/sacco-and-fintech.html), after its own design (2026-10-29: "the sacco-and-fintech
   page", with kweepa-sacco-fintech-interactive (1).html). Until then the page was drawn to the design of 2026-10-25 (a laptop with the
   product's dashboard, a lifecycle, six capabilities, markets and a closing band); this stylesheet replaces that design's, and the
   picture it used is left, unused. The new design carries no picture: its hero is a sample workspace drawn in HTML, which a visitor
   may switch between three screens, and its phone is drawn too.

   Its type is typography.md's: every text takes one of its roles, set in the Type roles block below and nowhere else, and its sizes
   are the tokens', in rem, not the design's (which sets its workspace in 9 to 13px and its titles in 38 to 70px with a tracking of
   -0.06em: the workspace is set in the roles' sizes, so it is larger, and gives way where its own width is short, by container
   queries, not the page's media). Mobile first: one column, the workspace under the hero's words and beside them from 64rem, a
   heading beside what it heads from 48rem. Where the page asks for a script (the workspace's screens, the choice of a workflow, the
   calculator, the ledger's button) every answer is in the markup, and what chooses is a link to what it means, or a button
   `disabled` or `hidden`, until site.js makes it work; the questions need none.

   The space between rows, columns and items is 20px at the most (--gap-max, site.css); a painted band or card has the room it needs
   inside itself. A list has a line between two of its rows and none over the first or under the last. Everything is scoped to .fin;
   its colours are the --fin-* tokens, set again for the dark theme, and its text takes typography.md's two text colours through
   them. The deep blue band is deep blue on both themes, as the design draws it, and so is the phone's frame. */

:root {
    --fin-surface: #ffffff;
    /* the text: headings and body text in typography.md's primary colour, small text in its secondary */
    --fin-ink: var(--text-primary);
    --fin-muted: var(--text-secondary);
    --fin-eyebrow: #0a4ce9;
    --fin-blue: #0154e5;
    --fin-blue-hover: #0043bd;
    --fin-on-blue: #ffffff;
    --fin-blue-soft: #e8f1ff;
    --fin-blue-soft-edge: #cbdcff;
    --fin-blue-ink: #0a3fb8;
    --fin-outline: #b4c9e8;
    --fin-outline-ink: #0f47a8;
    --fin-outline-bg: rgb(255 255 255 / 0.74);
    --fin-outline-hover: #eef6ff;
    --fin-line: #e4e9f1;
    --fin-line-strong: #d3deec;
    --fin-wash: #f5f8fc;
    --fin-band: #f4f8fe;
    --fin-crumb-chevron: #8790a8;
    /* what a status says */
    --fin-green: #0b7a57;
    --fin-dot: #17b982;
    --fin-green-soft: #e4f6ee;
    --fin-green-edge: #bfe6d5;
    --fin-amber: #8a5200;
    --fin-amber-soft: #fff4e0;
    --fin-purple: #5233b8;
    --fin-purple-soft: #efe9ff;
    --fin-gray: #4a4a4a;
    --fin-gray-soft: #eef1f5;
    /* the hero: a pale sky at the right, as the design draws it */
    --fin-hero-bg: radial-gradient(circle at 82% 20%, #dbebff 0, transparent 42%), linear-gradient(115deg, #ffffff 0%, #ffffff 39%, #f5f9ff 100%);
    /* the sample workspace and the workflows: white cards on the page */
    --fin-card: #ffffff;
    --fin-card-edge: #dbe5f3;
    --fin-card-shadow: 0 17px 45px rgb(34 61 100 / 0.1);
    --fin-surface-edge: #d6e2f3;
    --fin-surface-shadow: 0 22px 60px rgb(14 53 98 / 0.15);
    --fin-side-bg: #f4f7fc;
    --fin-avatar: #5a45b5;
    --fin-nav-on-bg: #e1ecfd;
    --fin-nav-on-ink: #0a3fb8;
    --fin-arrow: #7487a6;
    --fin-bar-top: #78b7ff;
    --fin-bar-bottom: #156aec;
    --fin-bar-grid: #eef2f9;
    --fin-float-shadow: 0 14px 35px rgb(23 57 104 / 0.14);
    --fin-result-bg: #f2f7ff;
    --fin-result-edge: #dbe8fb;
    --fin-tag-bg: #f6f9fd;
    --fin-tag-edge: #cbd8e9;
    --fin-tag-ink: #273d5e;
    /* the deep blue band, and what is on it */
    --fin-night: linear-gradient(115deg, #071b42, #0b2b61);
    --fin-night-eyebrow: #8fbcff;
    --fin-night-text: #b9c9e3;
    --fin-night-line: rgb(255 255 255 / 0.2);
    --fin-night-accent: #8db8f5;
    --fin-night-ring: rgb(125 165 255 / 0.3);
    --fin-night-glow: radial-gradient(circle, rgb(53 107 192 / 0.38), transparent 56%);
    /* the member's phone: a dark frame and a light screen, on both themes */
    --fin-phone-frame: #17233d;
    --fin-phone-body: #0f1623;
    --fin-phone-screen: #ffffff;
    --fin-phone-ink: #172640;
    --fin-phone-muted: #4f5d73;
    --fin-phone-blue: #0759e9;
    --fin-phone-line: #e5ebf4;
    /* the closing call: a blue card with a ring of light */
    --fin-closing: #0653da;
    --fin-closing-ring: rgb(255 255 255 / 0.22);
    --fin-closing-text: #e3eeff;
    --fin-closing-eyebrow: #e3eeff;
    --fin-closing-shadow: 0 24px 50px rgb(10 48 156 / 0.22);
    --fin-white-ink: #0643be;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --fin-surface: #131314;
        --fin-eyebrow: #a8c7fa;
        --fin-blue: #a8c7fa;
        --fin-blue-hover: #c2d7fb;
        --fin-on-blue: #062e6f;
        --fin-blue-soft: rgb(168 199 250 / 0.14);
        --fin-blue-soft-edge: rgb(168 199 250 / 0.3);
        --fin-blue-ink: #a8c7fa;
        --fin-outline: rgb(255 255 255 / 0.2);
        --fin-outline-ink: #a8c7fa;
        --fin-outline-bg: rgb(255 255 255 / 0.04);
        --fin-outline-hover: rgb(168 199 250 / 0.12);
        --fin-line: rgb(255 255 255 / 0.09);
        --fin-line-strong: rgb(255 255 255 / 0.16);
        --fin-wash: #17181b;
        --fin-band: #161719;
        --fin-crumb-chevron: #7f889c;
        --fin-green: #6dd5a8;
        --fin-dot: #4cd9a0;
        --fin-green-soft: rgb(109 213 168 / 0.12);
        --fin-green-edge: rgb(109 213 168 / 0.3);
        --fin-amber: #f2c46d;
        --fin-amber-soft: rgb(242 196 109 / 0.12);
        --fin-purple: #c8b6ff;
        --fin-purple-soft: rgb(200 182 255 / 0.14);
        --fin-gray: #c4c7c5;
        --fin-gray-soft: rgb(255 255 255 / 0.08);
        --fin-hero-bg: radial-gradient(circle at 82% 20%, #1b2a47 0, transparent 42%), linear-gradient(115deg, #131722 0%, #131720 45%, #121a2b 100%);
        --fin-card: #1c1f25;
        --fin-card-edge: rgb(255 255 255 / 0.12);
        --fin-card-shadow: 0 17px 45px rgb(0 0 0 / 0.45);
        --fin-surface-edge: rgb(255 255 255 / 0.14);
        --fin-surface-shadow: 0 22px 60px rgb(0 0 0 / 0.55);
        --fin-side-bg: #181a1f;
        --fin-avatar: #5a45b5;
        --fin-nav-on-bg: rgb(168 199 250 / 0.16);
        --fin-nav-on-ink: #a8c7fa;
        --fin-arrow: #8397b8;
        --fin-bar-top: #5f9be0;
        --fin-bar-bottom: #3478e0;
        --fin-bar-grid: rgb(255 255 255 / 0.07);
        --fin-float-shadow: 0 14px 35px rgb(0 0 0 / 0.5);
        --fin-result-bg: rgb(168 199 250 / 0.08);
        --fin-result-edge: rgb(168 199 250 / 0.22);
        --fin-tag-bg: rgb(255 255 255 / 0.05);
        --fin-tag-edge: rgb(255 255 255 / 0.18);
        --fin-tag-ink: #d5deee;
        --fin-night: linear-gradient(115deg, #061633, #0a2552);
        --fin-closing: #0a3d9d;
        --fin-closing-ring: rgb(255 255 255 / 0.18);
        --fin-closing-text: #dbe7ff;
        --fin-closing-eyebrow: #dbe7ff;
        --fin-closing-shadow: 0 24px 50px rgb(0 0 0 / 0.4);
    }
}

:root[data-theme="dark"] {
    --fin-surface: #131314;
    --fin-eyebrow: #a8c7fa;
    --fin-blue: #a8c7fa;
    --fin-blue-hover: #c2d7fb;
    --fin-on-blue: #062e6f;
    --fin-blue-soft: rgb(168 199 250 / 0.14);
    --fin-blue-soft-edge: rgb(168 199 250 / 0.3);
    --fin-blue-ink: #a8c7fa;
    --fin-outline: rgb(255 255 255 / 0.2);
    --fin-outline-ink: #a8c7fa;
    --fin-outline-bg: rgb(255 255 255 / 0.04);
    --fin-outline-hover: rgb(168 199 250 / 0.12);
    --fin-line: rgb(255 255 255 / 0.09);
    --fin-line-strong: rgb(255 255 255 / 0.16);
    --fin-wash: #17181b;
    --fin-band: #161719;
    --fin-crumb-chevron: #7f889c;
    --fin-green: #6dd5a8;
    --fin-dot: #4cd9a0;
    --fin-green-soft: rgb(109 213 168 / 0.12);
    --fin-green-edge: rgb(109 213 168 / 0.3);
    --fin-amber: #f2c46d;
    --fin-amber-soft: rgb(242 196 109 / 0.12);
    --fin-purple: #c8b6ff;
    --fin-purple-soft: rgb(200 182 255 / 0.14);
    --fin-gray: #c4c7c5;
    --fin-gray-soft: rgb(255 255 255 / 0.08);
    --fin-hero-bg: radial-gradient(circle at 82% 20%, #1b2a47 0, transparent 42%), linear-gradient(115deg, #131722 0%, #131720 45%, #121a2b 100%);
    --fin-card: #1c1f25;
    --fin-card-edge: rgb(255 255 255 / 0.12);
    --fin-card-shadow: 0 17px 45px rgb(0 0 0 / 0.45);
    --fin-surface-edge: rgb(255 255 255 / 0.14);
    --fin-surface-shadow: 0 22px 60px rgb(0 0 0 / 0.55);
    --fin-side-bg: #181a1f;
    --fin-avatar: #5a45b5;
    --fin-nav-on-bg: rgb(168 199 250 / 0.16);
    --fin-nav-on-ink: #a8c7fa;
    --fin-arrow: #8397b8;
    --fin-bar-top: #5f9be0;
    --fin-bar-bottom: #3478e0;
    --fin-bar-grid: rgb(255 255 255 / 0.07);
    --fin-float-shadow: 0 14px 35px rgb(0 0 0 / 0.5);
    --fin-result-bg: rgb(168 199 250 / 0.08);
    --fin-result-edge: rgb(168 199 250 / 0.22);
    --fin-tag-bg: rgb(255 255 255 / 0.05);
    --fin-tag-edge: rgb(255 255 255 / 0.18);
    --fin-tag-ink: #d5deee;
    --fin-night: linear-gradient(115deg, #061633, #0a2552);
    --fin-closing: #0a3d9d;
    --fin-closing-ring: rgb(255 255 255 / 0.18);
    --fin-closing-text: #dbe7ff;
    --fin-closing-eyebrow: #dbe7ff;
    --fin-closing-shadow: 0 24px 50px rgb(0 0 0 / 0.4);
}

/* ------------------------------------------------------------------ */
/* Type roles (typography.md, 3)                                        */
/* ------------------------------------------------------------------ */

/* The page's texts take typography.md's roles (section 3) here, and only here: the rules below set none of their family, size,
   weight, line height, letter spacing or case. A heading's tag gives it its role (site.css's base) unless it is listed here, taking
   another level's style; the rest are listed by their roles. A button's text is the button role by site.css's base, so the small
   buttons of the workspace and the ledger are listed under the form label's; a th, a td and a strong are what site.css's base makes
   them. */

/* H3 (28px, 500): the calculator's result */
.fin-calc__monthly {
    font-family: var(--font-sans);
    font-size: var(--fs-h3);
    font-weight: var(--fw-medium);
    line-height: var(--lh-h3);
    letter-spacing: 0;
}

/* H4 (card title): sans 500 */
.fin-pane__title,
.fin-cap__name,
.fin-step__name,
.fin-callout__title,
.fin-faq__question,
.fin-index__name,
.fin-group__title,
.fin-rollout__title,
.fin-view__title,
.fin-stat__value,
.fin-phone__name,
.fin-phone__balance {
    font-family: var(--font-sans);
    font-size: var(--fs-h4);
    font-weight: var(--fw-medium);
    line-height: var(--lh-h4);
    letter-spacing: 0;
}

/* Body: sans 400 */
.fin-lead,
.fin-hero__lead,
.fin-cap__text,
.fin-step__text,
.fin-callout__text,
.fin-connect__lead,
.fin-faq__answer,
.fin-night__lead,
.fin-night__item,
.fin-closing__text {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    letter-spacing: 0;
}

/* Small, captions: sans 400 */
.fin-notes,
.fin-search,
.fin-state,
.fin-stat__label,
.fin-stat__note,
.fin-panel__note,
.fin-activity__when,
.fin-chart__labels,
.fin-table td,
.fin-table__ref,
.fin-flow__text,
.fin-profile__words span,
.fin-fact dt,
.fin-pane__foot,
.fin-index__line,
.fin-index__note,
.fin-slider__ends,
.fin-calc__label,
.fin-calc__row span,
.fin-calc__note,
.fin-ledger__summary,
.fin-night__foot,
.fin-closing__note,
.fin-float__words span,
.fin-surface__sample,
.fin-phone__greeting,
.fin-phone__label,
.fin-phone__link,
.fin-phone__bar,
.fin-phone__list,
.fin-phone__actions,
.fin-phone__tabs {
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    font-weight: var(--fw-regular);
    line-height: var(--lh-small);
    letter-spacing: 0;
}

/* Form labels: sans 500 (the workspace's names, pills, choices and small buttons, the calculator's labels) */
.fin-preview__label,
.fin-switch__button,
.fin-brand,
.fin-nav__item,
.fin-avatar,
.fin-pill,
.fin-panel__head,
.fin-table th,
.fin-table__name,
.fin-activity__name,
.fin-activity__amount,
.fin-flow__title,
.fin-fact dd,
.fin-profile__words strong,
.fin-profile__avatar,
.fin-profile__action,
.fin-table__amount,
.fin-table td.fin-table__name,
.fin-phone__heading,
.fin-slider__label,
.fin-slider__value,
.fin-calc__row strong,
.fin-refresh,
.fin-tags__item,
.fin-ribbon__list,
.fin-float__words strong {
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    line-height: var(--lh-small);
    letter-spacing: 0;
}

/* Buttons and navigation links: sans 500 */
.fin-btn,
.fin-crumbs__list,
.fin-link {
    font-family: var(--font-sans);
    font-size: var(--fs-button);
    font-weight: var(--fw-medium);
    line-height: var(--lh-button);
    letter-spacing: 0;
}

/* Eyebrow labels and tags: mono 500, uppercase */
.fin-eyebrow,
.fin-tag {
    font-family: var(--font-mono);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-medium);
    line-height: var(--lh-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* The page                                                            */
/* ------------------------------------------------------------------ */

/* a long word breaks (`anywhere`, which, unlike `break-word`, also shortens what the words ask for) rather than push a column out
   of the window, at 200% text on a small screen */
.fin {
    background: var(--fin-surface);
    color: var(--fin-ink);
    overflow-wrap: anywhere;
}

/* a heading's own `break-word` (site.css) does not shorten what its words ask for */
.fin :is(h1, h2, h3, h4, h5) {
    overflow-wrap: anywhere;
}

.fin .icon {
    width: 1.25rem;
    height: 1.25rem;
}

/* this page's icons are lines (site.css's .icon fills with currentColor) */
.fin .fin-icon {
    fill: none;
}

.fin-eyebrow,
.fin-tag {
    margin: 0;
}

.fin-eyebrow {
    color: var(--fin-eyebrow);
}

/* the label of the hero has a short rule before it, as the design draws it */
.fin-eyebrow--rule {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.fin-eyebrow--rule::before {
    content: "";
    flex: none;
    width: 2rem;
    height: 2px;
    background: var(--fin-blue);
}

.fin-eyebrow--night {
    color: var(--fin-night-eyebrow);
}

/* a section's heading (an h2, the H2 role), its lines balanced */
.fin-title {
    margin: 0.5rem 0 0;
    color: var(--fin-ink);
    text-wrap: balance;
}

.fin-title--night {
    color: #ffffff;
}

.fin-accent {
    color: var(--fin-eyebrow);
}

.fin-lead {
    margin: 0.75rem 0 0;
    max-width: 36rem;
    color: var(--fin-muted);
    text-wrap: pretty;
}

/* a link of its own, in the blue, with its arrow; a long word in its words breaks rather than widen it past its column, at 200% text
   on a small screen */
.fin-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    color: var(--fin-eyebrow);
    text-decoration: none;
    transition: gap var(--spring) var(--ease-spring);
}

.fin-link > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.fin-link:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* a section has its room over it and none under it (--gap-max); a band has the room it needs inside itself */
.fin-section {
    padding-top: var(--gap-max);
}

.fin-dot {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--fin-dot);
}

/* paragraphs that are rows of their own words are as wide as their rows, not as the base's 70ch */
.fin-notes,
.fin-preview__label,
.fin-search,
.fin-state,
.fin-view__over,
.fin-view__title,
.fin-stat__label,
.fin-stat__note,
.fin-panel__head,
.fin-activity__when,
.fin-chart__labels,
.fin-flow__text,
.fin-profile__who,
.fin-profile__action,
.fin-slider__ends,
.fin-calc__label,
.fin-calc__row,
.fin-calc__note,
.fin-pane__over,
.fin-pane__foot,
.fin-pane__status,
.fin-index__note,
.fin-ledger__summary,
.fin-night__foot,
.fin-closing__note,
.fin-groups__note,
.fin-demo-tag,
.fin-surface__sample,
.fin-brand,
.fin-phone__bar,
.fin-phone__greeting,
.fin-phone__name,
.fin-phone__label,
.fin-phone__balance,
.fin-phone__link,
.fin-phone__heading,
.fin-night__caption {
    max-width: none;
}

/* ------------------------------------------------------------------ */
/* Buttons: pills that answer the press itself                         */
/* ------------------------------------------------------------------ */

.fin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    min-height: 3rem;
    padding: 0.625rem 1.5rem;
    border: 1px solid transparent;
    max-width: 100%;
    border-radius: 0.5rem;
    overflow-wrap: anywhere;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 200ms var(--ease-standard), border-color 200ms var(--ease-standard),
        color 200ms var(--ease-standard), box-shadow 250ms var(--ease-standard),
        scale var(--spring-quick) var(--ease-spring);
}

.fin-btn .icon {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
    transition: translate var(--spring) var(--ease-spring);
}

.fin-btn--filled {
    background: var(--fin-blue);
    color: var(--fin-on-blue);
    box-shadow: 0 11px 20px -13px var(--fin-blue);
}

.fin-btn--filled:hover {
    background: var(--fin-blue-hover);
    color: var(--fin-on-blue);
}

.fin-btn--outlined {
    border-color: var(--fin-outline);
    background: var(--fin-outline-bg);
    color: var(--fin-outline-ink);
}

.fin-btn--outlined:hover {
    background: var(--fin-outline-hover);
    color: var(--fin-outline-ink);
}

.fin-btn--white {
    background: #ffffff;
    color: var(--fin-white-ink);
}

.fin-btn--white:hover {
    background: #eef4ff;
    color: var(--fin-white-ink);
}

.fin-btn:active {
    scale: var(--press-scale);
    transition-duration: 200ms, 200ms, 200ms, 250ms, var(--press-in);
}

@media (hover: hover) and (pointer: fine) {
    /* an arrow moves the way it points */
    .fin-btn:hover .fin-icon--arrow-up-right,
    .fin-link:hover .fin-icon--arrow-up-right,
    .fin-index__link:hover .fin-icon--arrow-up-right {
        translate: 2px -2px;
    }

    .fin-btn:hover .fin-icon--arrow-down {
        translate: 0 3px;
    }
}

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */

.fin-hero {
    position: relative;
    overflow: clip;
    isolation: isolate;
    background: var(--fin-hero-bg);
    border-bottom: 1px solid var(--fin-line);
}

.fin-hero__inner {
    display: grid;
    gap: var(--gap-max);
    padding-block: 0.5rem 1.75rem;
}

.fin-hero__words {
    min-width: 0;
}

.fin-crumbs {
    min-width: 0;
}

.fin-crumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fin-crumbs__list li {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.fin-crumbs__list .icon {
    width: 1rem;
    height: 1rem;
    color: var(--fin-crumb-chevron);
}

.fin-crumbs__link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--fin-muted);
    text-decoration: none;
}

.fin-crumbs__link:hover {
    color: var(--fin-eyebrow);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.fin-crumbs__current {
    color: var(--fin-ink);
}

.fin-hero__words > .fin-eyebrow {
    margin-top: 0.5rem;
}

.fin-hero__title {
    margin: 0.75rem 0 0;
    color: var(--fin-ink);
}

.fin-hero__lead {
    margin: 1rem 0 0;
    max-width: 34rem;
    color: var(--fin-muted);
    text-wrap: pretty;
}

.fin-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.fin-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--fin-muted);
}

.fin-notes li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.fin-notes__dot {
    flex: none;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: var(--fin-dot);
}

.fin-hero__visual {
    min-width: 0;
}

/* the preview: its head (what it is, and the choice of screen), the window, and a card over the window's corner */
.fin-preview {
    position: relative;
    padding-bottom: 2rem;
}

.fin-preview__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.fin-preview__label {
    margin: 0;
    color: var(--fin-muted);
}

.fin-switch {
    display: inline-flex;
    max-width: 100%;
    margin-left: auto;
    padding: 0.1875rem;
    border: 1px solid var(--fin-card-edge);
    border-radius: 0.5rem;
    background: var(--fin-wash);
}

.fin-switch__button {
    min-height: 2.75rem;
    padding: 0.375rem 0.75rem;
    border: 0;
    border-radius: 0.375rem;
    background: transparent;
    color: var(--fin-muted);
    cursor: pointer;
    transition: background-color 150ms var(--ease-standard), color 150ms var(--ease-standard),
        scale var(--spring-quick) var(--ease-spring);
}

.fin-switch__button:disabled {
    cursor: default;
    opacity: 1;
}

.fin-switch__button:hover:not(:disabled) {
    color: var(--fin-ink);
}

.fin-switch__button[aria-pressed="true"] {
    background: var(--fin-card);
    color: var(--fin-eyebrow);
    box-shadow: 0 1px 3px rgb(16 41 72 / 0.14);
}

.fin-switch__button:active:not(:disabled) {
    scale: var(--press-scale);
    transition-duration: 150ms, 150ms, var(--press-in);
}

/* the window: a size container, what it holds follows its own width, not the page's. Its side is a rail of icons below 34rem and a
   list with names from 34rem */
.fin-surface {
    container: fin-surface / inline-size;
    border: 1px solid var(--fin-surface-edge);
    border-radius: 0.9rem;
    background: var(--fin-card);
    box-shadow: var(--fin-surface-shadow);
    color: var(--fin-ink);
    overflow: hidden;
}

.fin-surface__body {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
}

.fin-surface__side {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.875rem 0.375rem;
    border-right: 1px solid var(--fin-line);
    background: var(--fin-side-bg);
}

.fin-brand {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-content: center;
    column-gap: 0.5rem;
    margin: 0;
    color: var(--fin-ink);
}

.fin-brand__k {
    display: grid;
    grid-row: 1 / span 2;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.375rem;
    background: var(--fin-blue);
    color: var(--fin-on-blue);
}

.fin-brand > span:not(.fin-brand__k) {
    display: none;
    grid-column: 2;
}

.fin-nav {
    display: grid;
    gap: 0.125rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fin-nav__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    min-height: 2.25rem;
    padding: 0.375rem 0.5rem;
    border-radius: 0.5rem;
    color: var(--fin-muted);
}

.fin-nav__item > span {
    display: none;
}

.fin-nav__item.is-on {
    background: var(--fin-nav-on-bg);
    color: var(--fin-nav-on-ink);
}

.fin-nav__item .icon {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
}

.fin-surface__sample {
    display: none;
    margin: 0;
    padding: 0.5rem 0.75rem 0;
    border-top: 1px solid var(--fin-line);
    color: var(--fin-muted);
}

.fin-surface__main {
    min-width: 0;
}

.fin-surface__top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
}

.fin-search {
    display: none;
    flex: 1 1 auto;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--fin-line);
    border-radius: 0.5rem;
    background: var(--fin-wash);
    color: var(--fin-muted);
}

.fin-search .icon {
    width: 1rem;
    height: 1rem;
    flex: none;
}

.fin-search > span {
    min-width: 0;
}

.fin-avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 2rem;
    height: 2rem;
    margin-left: auto;
    border-radius: 50%;
    background: var(--fin-avatar);
    color: #ffffff;
}

/* the screens, and which is shown: the window's data-view */
.fin-view {
    display: none;
    padding: 0.25rem 1rem 1.25rem;
}

.fin-surface[data-view="operations"] .fin-view[data-v="operations"],
.fin-surface[data-view="lending"] .fin-view[data-v="lending"],
.fin-surface[data-view="digital"] .fin-view[data-v="digital"] {
    display: block;
}

.fin-view__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
}

.fin-view__head > div {
    flex: 1 1 10rem;
    min-width: 0;
}

.fin-view__over,
.fin-view__title {
    margin: 0;
}

.fin-view__over {
    color: var(--fin-muted);
}

.fin-view__title {
    margin-top: 0.25rem;
    color: var(--fin-ink);
}

.fin-state {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--fin-green);
}

/* the figures: rows where the window is narrow (a value and what it counts), a strip of three where it is wide */
.fin-stats {
    display: grid;
    margin: 1rem 0 0;
    padding: 0;
    border: 1px solid var(--fin-line);
    border-radius: 0.5rem;
    list-style: none;
    overflow: hidden;
}

.fin-stat {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 0.75rem;
    align-items: center;
    padding: 0.625rem 0.875rem;
}

.fin-stat + .fin-stat {
    border-top: 1px solid var(--fin-line);
}

.fin-stat__label {
    grid-column: 1;
    color: var(--fin-muted);
}

.fin-stat__value {
    grid-column: 2;
    grid-row: 1 / span 2;
    color: var(--fin-ink);
    text-align: right;
}

.fin-stat__note {
    grid-column: 1;
    color: var(--fin-green);
}

/* the panels: a chart and what has just happened, a table of applications, a flow of three boxes */
.fin-panels {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.fin-panel {
    min-width: 0;
    margin-top: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--fin-line);
    border-radius: 0.5rem;
}

.fin-panels > .fin-panel {
    margin-top: 0;
}

/* the chart and what has just happened share the panels' row */
.fin-chart,
.fin-recent {
    min-width: 0;
}

.fin-panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
    margin: 0;
    color: var(--fin-ink);
}

.fin-panel__note {
    color: var(--fin-muted);
}

.fin-chart {
    display: flex;
    flex-direction: column;
}

.fin-bars {
    flex: 1 1 6.5rem;
    display: flex;
    align-items: flex-end;
    gap: 0.375rem;
    min-height: 6.5rem;
    margin: 0.75rem 0 0.25rem;
    padding: 0;
    border-bottom: 1px solid var(--fin-line);
    background: repeating-linear-gradient(to top, transparent, transparent 1.5rem, var(--fin-bar-grid) 1.5rem, var(--fin-bar-grid) calc(1.5rem + 1px));
    list-style: none;
}

.fin-bar {
    flex: 1 1 0;
    min-width: 0;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(var(--fin-bar-top), var(--fin-bar-bottom));
}

.fin-bar--30 { height: 30%; }
.fin-bar--40 { height: 40%; }
.fin-bar--43 { height: 43%; }
.fin-bar--53 { height: 53%; }
.fin-bar--65 { height: 65%; }
.fin-bar--74 { height: 74%; }
.fin-bar--80 { height: 80%; }
.fin-bar--82 { height: 82%; }
.fin-bar--92 { height: 92%; }
.fin-bar--98 { height: 98%; }

.fin-chart__labels {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 0.25rem;
    margin: 0;
    color: var(--fin-muted);
}

/* the activity's own width decides whether its rows have their icons: its words come first */
.fin-recent {
    container: fin-panel / inline-size;
}

.fin-recent__list {
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.fin-activity {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.625rem;
    padding-block: 0.5rem;
}

.fin-activity + .fin-activity {
    border-top: 1px solid var(--fin-line);
}

.fin-activity__icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
}

.fin-activity__icon .icon {
    width: 1rem;
    height: 1rem;
}

.fin-activity__icon--mint {
    background: var(--fin-green-soft);
    color: var(--fin-green);
}

.fin-activity__icon--blue {
    background: var(--fin-blue-soft);
    color: var(--fin-blue-ink);
}

.fin-activity__icon--purple {
    background: var(--fin-purple-soft);
    color: var(--fin-purple);
}

.fin-activity__words {
    display: grid;
    min-width: 0;
}

.fin-activity__when {
    color: var(--fin-muted);
}

.fin-activity__amount {
    text-align: right;
}

.fin-table {
    width: 100%;
    margin: 0.5rem 0 0;
    border-collapse: collapse;
    text-align: left;
}

.fin-table th,
.fin-table td {
    padding: 0.5rem 0.5rem 0.5rem 0;
    text-align: left;
    vertical-align: middle;
}

.fin-table tbody tr {
    border-top: 1px solid var(--fin-line);
}

.fin-table th {
    color: var(--fin-muted);
}

.fin-table td {
    color: var(--fin-ink);
}

strong.fin-table__name,
.fin-table__ref {
    display: block;
}

.fin-table__ref {
    color: var(--fin-muted);
}

/* a pill: what a status says, in a tone of its own */
.fin-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    background: var(--fin-gray-soft);
    color: var(--fin-gray);
}

.fin-pill--green {
    background: var(--fin-green-soft);
    color: var(--fin-green);
}

.fin-pill--blue {
    background: var(--fin-blue-soft);
    color: var(--fin-blue-ink);
}

.fin-pill--amber {
    background: var(--fin-amber-soft);
    color: var(--fin-amber);
}

.fin-flow {
    display: grid;
    gap: 0.5rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.fin-flow__box {
    display: grid;
    align-content: start;
    gap: 0.25rem;
    padding: 0.75rem;
    border: 1px solid var(--fin-line);
    border-radius: 0.5rem;
    background: var(--fin-wash);
}

.fin-flow__title {
    color: var(--fin-ink);
}

.fin-flow__text {
    color: var(--fin-muted);
}

.fin-flow__arrow {
    display: grid;
    place-items: center;
    color: var(--fin-arrow);
}

/* the arrows point down where the boxes are one under another */
.fin-flow__arrow .icon {
    rotate: 90deg;
}

/* the card that lies over the window's corner */
.fin-float {
    position: absolute;
    right: 0.5rem;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    max-width: calc(100% - 1rem);
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--fin-card-edge);
    border-radius: 0.625rem;
    background: var(--fin-card);
    box-shadow: var(--fin-float-shadow);
}

.fin-float__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--fin-green-soft);
    color: var(--fin-green);
}

.fin-float__icon .icon {
    width: 1rem;
    height: 1rem;
}

.fin-float__words {
    display: grid;
    min-width: 0;
    color: var(--fin-ink);
}

.fin-float__words span {
    color: var(--fin-muted);
}

/* where the window is 34rem wide: its side has names, the strip is of three, the panels are side by side */
/* the figures in a strip of three, the panels side by side, the flow in a row and the search over the work, where the window is wide
   enough for their words (the side is a rail of icons until it is wider still) */
@container fin-surface (min-width: 35rem) {
    .fin-search {
        display: inline-flex;
    }

    .fin-view {
        padding-inline: 1.25rem;
    }

    .fin-surface__top {
        padding-inline: 1.25rem;
    }

    .fin-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .fin-stat {
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        row-gap: 0.125rem;
        padding: 0.75rem 0.875rem;
    }

    .fin-stat + .fin-stat {
        border-top: 0;
        border-left: 1px solid var(--fin-line);
    }

    .fin-stat__value {
        grid-column: 1;
        grid-row: auto;
        text-align: left;
    }

    .fin-panels {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    }

    .fin-flow {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: stretch;
    }

    .fin-flow__arrow .icon {
        rotate: 0deg;
    }
}

/* the side has its names where the window is wider still */
@container fin-surface (min-width: 44rem) {
    .fin-surface__body {
        grid-template-columns: 11rem minmax(0, 1fr);
    }

    .fin-surface__side {
        padding: 0.875rem 0.625rem;
    }

    .fin-brand {
        justify-content: flex-start;
        padding-inline: 0.5rem;
    }

    .fin-brand > span:not(.fin-brand__k) {
        display: inline;
    }

    .fin-brand__platform {
        color: var(--fin-muted);
    }

    .fin-nav__item {
        justify-content: flex-start;
    }

    .fin-nav__item > span {
        display: inline;
        min-width: 0;
    }

    .fin-surface__sample {
        display: block;
    }
}

/* a row of the activity in a narrow panel: the name and the amount on a line, when it was under them, and no icon */
@container fin-panel (max-width: 17.99rem) {
    .fin-activity {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 0;
    }

    .fin-activity__icon {
        display: none;
    }

    .fin-activity__words {
        display: contents;
    }

    .fin-activity__name {
        grid-column: 1;
        grid-row: 1;
    }

    .fin-activity__when {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .fin-activity__amount {
        grid-column: 2;
        grid-row: 1;
    }
}

/* the product is left out of the queue where the window is narrow: a row is a member, an amount and a status */
@container fin-surface (max-width: 34.99rem) {
    .fin-queue .fin-table :is(th, td):nth-child(2) {
        display: none;
    }
}

/* at very large text on a small screen (the window is under 10rem wide, which is a phone's at 200%) the window has no side, which was a
   picture of a menu, and its queue says a member and a status: what is left fits where the rem-wide side and padding left no room */
@container fin-surface (max-width: 9.99rem) {
    .fin-surface__body {
        grid-template-columns: minmax(0, 1fr);
    }

    .fin-surface__side {
        display: none;
    }

    .fin-view {
        padding-inline: 0.75rem;
    }

    .fin-queue .fin-table :is(th, td):nth-child(3) {
        display: none;
    }
}

/* ------------------------------------------------------------------ */
/* The strip of five areas, and the introduction                       */
/* ------------------------------------------------------------------ */

.fin-ribbon {
    border-bottom: 1px solid var(--fin-line);
    background: var(--fin-surface);
}

.fin-ribbon__inner {
    display: grid;
    gap: 0.25rem 0.75rem;
    padding-block: 0.75rem;
}

.fin-ribbon__inner > .fin-eyebrow {
    color: var(--fin-eyebrow);
}

/* the five names in a row; a dot between two of them on a line (it lies in the gap before each name and the list, which clips what
   is outside it, hides the one before the first of a line) */
.fin-ribbon__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.25rem;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    color: var(--fin-ink);
}

.fin-ribbon__list li {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
}

.fin-ribbon__list li::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(-0.625rem - 2px);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--fin-crumb-chevron);
    translate: 0 -50%;
}

.fin-intro {
    display: grid;
    gap: var(--gap-max);
}

.fin-intro__head,
.fin-intro__body {
    min-width: 0;
}

.fin-intro__body .fin-lead {
    margin: 0 0 1rem;
    max-width: 40rem;
}

.fin-intro__body .fin-link {
    text-decoration: underline;
    text-decoration-color: var(--fin-blue-soft-edge);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.35em;
}

.fin-intro__body .fin-link:hover {
    text-decoration-color: currentColor;
}

/* a heading beside its lead, or over it */
.fin-head {
    display: grid;
    gap: 0.75rem var(--gap-max);
    align-items: end;
}

.fin-head > div,
.fin-head > .fin-lead {
    min-width: 0;
}

.fin-head > .fin-lead {
    margin: 0;
}

/* ------------------------------------------------------------------ */
/* Three workflows to explore                                          */
/* ------------------------------------------------------------------ */

/* a band the page's pale blue, which has room inside itself and 20px over it */
.fin-experience {
    margin-top: var(--gap-max);
    padding-block: 1.75rem;
    background: var(--fin-band);
}

.fin-demo-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--fin-muted);
}

/* one card: the choice at its left (over the work below 48rem) and the workflow chosen at its right */
.fin-explore {
    display: grid;
    margin-top: 1rem;
    border: 1px solid var(--fin-card-edge);
    border-radius: 1rem;
    background: var(--fin-card);
    box-shadow: var(--fin-card-shadow);
    overflow: hidden;
}

.fin-index {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fin-index__tabs {
    display: grid;
}

.fin-index__link {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) 1.25rem;
    align-items: start;
    gap: 0.5rem;
    min-height: 4.25rem;
    padding: 1rem 1.25rem;
    color: var(--fin-ink);
    text-decoration: none;
    transition: background-color 150ms var(--ease-standard), scale var(--spring-quick) var(--ease-spring);
}

.fin-index__link + .fin-index__link {
    border-top: 1px solid var(--fin-line);
}

/* a ring inside the card's edge, which clips what lies outside it */
.fin-index__link:focus-visible {
    outline-offset: -3px;
}

.fin-index__link:hover {
    background: var(--fin-wash);
}

.fin-index__link:active {
    scale: var(--press-scale-card);
    transition-duration: 150ms, var(--press-in);
}

.fin-index__no {
    margin: 0;
    padding-top: 0.3125rem;
    color: var(--fin-muted);
}

.fin-index__text {
    display: grid;
    min-width: 0;
}

.fin-index__name,
.fin-index__line {
    display: block;
}

.fin-index__line {
    color: var(--fin-muted);
}

.fin-index__link .icon {
    margin-top: 0.125rem;
    color: var(--fin-arrow);
    transition: translate var(--spring) var(--ease-spring), color 150ms var(--ease-standard);
}

.fin-index__link[aria-selected="true"] {
    background: var(--fin-wash);
}

.fin-index__link[aria-selected="true"] .fin-index__no,
.fin-index__link[aria-selected="true"] .icon {
    color: var(--fin-eyebrow);
}

.fin-index__note {
    margin: 0;
    padding: 0.75rem 1.25rem 1.25rem;
    border-top: 1px solid var(--fin-line);
    color: var(--fin-muted);
}

/* the workflow: its own width decides what it holds (the calculator's two columns, the ledger's channel) */
.fin-stage {
    container: fin-stage / inline-size;
    display: grid;
    align-content: start;
    gap: var(--gap-max);
    min-width: 0;
    padding: 1.25rem;
    border-top: 1px solid var(--fin-line);
}

.fin-pane {
    display: grid;
    align-content: start;
    gap: 0.5rem;
    min-width: 0;
}

.fin-pane[hidden] {
    display: none;
}

/* with no script every workflow is in the page, one after another, with a line between two */
.fin-explore:not(.is-ready) .fin-pane + .fin-pane {
    padding-top: var(--gap-max);
    border-top: 1px solid var(--fin-line);
}

.fin-pane__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--fin-line);
}

.fin-pane__head > div {
    flex: 1 1 12rem;
    min-width: 0;
}

.fin-pane__over {
    margin: 0;
    color: var(--fin-eyebrow);
}

.fin-pane__title {
    margin: 0.25rem 0 0;
    color: var(--fin-ink);
}

.fin-pane__status {
    flex: none;
    max-width: 100%;
}

.fin-pane__foot {
    margin: 0;
    color: var(--fin-muted);
}

/* the member's record */
.fin-profile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--fin-line);
}

.fin-profile__who {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    margin: 0;
}

.fin-profile__avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--fin-blue-soft);
    color: var(--fin-blue-ink);
}

.fin-profile__words {
    display: grid;
    min-width: 0;
}

.fin-profile__words strong {
    color: var(--fin-ink);
}

.fin-profile__words span {
    color: var(--fin-muted);
}

.fin-profile__action {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    color: var(--fin-eyebrow);
}

.fin-profile__action .icon {
    width: 1rem;
    height: 1rem;
}

/* a row for each fact: its name, and what it is at the right; a line between two rows only */
.fin-facts {
    display: grid;
    margin: 0;
}

.fin-fact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
    padding-block: 0.625rem;
}

.fin-fact + .fin-fact {
    border-top: 1px solid var(--fin-line);
}

.fin-fact dt {
    margin: 0;
    color: var(--fin-muted);
}

.fin-fact dd {
    margin: 0;
    color: var(--fin-ink);
    text-align: right;
}

/* the loan calculator */
.fin-calc {
    display: grid;
    gap: var(--gap-max);
}

.fin-calc__fields {
    display: grid;
    gap: 0.75rem;
    min-width: 0;
}

.fin-slider {
    display: grid;
    gap: 0.125rem;
    min-width: 0;
}

.fin-slider__label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.125rem 0.75rem;
    color: var(--fin-ink);
}

.fin-slider__value {
    color: var(--fin-eyebrow);
}

.fin-range {
    display: block;
    width: 100%;
    min-height: 2.75rem;
    margin: 0;
    accent-color: var(--fin-blue);
    cursor: pointer;
}

.fin-range:disabled {
    cursor: default;
}

.fin-slider__ends {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0;
    color: var(--fin-muted);
}

.fin-calc__result {
    display: grid;
    align-content: start;
    min-width: 0;
    padding: 1.25rem;
    border: 1px solid var(--fin-result-edge);
    border-radius: 0.75rem;
    background: var(--fin-result-bg);
}

.fin-calc__label {
    margin: 0;
    color: var(--fin-muted);
}

.fin-calc__monthly {
    display: block;
    margin: 0.25rem 0 0.75rem;
    color: var(--fin-ink);
}

.fin-calc__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.125rem 0.75rem;
    margin: 0;
    padding-block: 0.5rem;
    border-top: 1px solid var(--fin-result-edge);
}

.fin-calc__row span {
    color: var(--fin-muted);
}

.fin-calc__row strong {
    color: var(--fin-ink);
}

.fin-calc__note {
    margin: 0.5rem 0 0;
    color: var(--fin-muted);
}

/* the ledger: the table of postings, and under it what it says and the button that refreshes the example */
.fin-ledger__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
}

.fin-ledger__summary {
    flex: 1 1 14rem;
    min-width: 0;
    margin: 0;
    color: var(--fin-muted);
}

.fin-table__amount {
    color: var(--fin-ink);
}

/* the ledger's table follows its heading, whose own room is the pane's gap */
.fin-ledger {
    margin-top: 0;
}

.fin-refresh {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    max-width: 100%;
    padding: 0.5rem 1rem;
    border: 1px solid var(--fin-outline);
    border-radius: 0.5rem;
    background: var(--fin-outline-bg);
    color: var(--fin-outline-ink);
    cursor: pointer;
    overflow-wrap: anywhere;
    transition: background-color 150ms var(--ease-standard), scale var(--spring-quick) var(--ease-spring);
}

.fin-refresh[hidden] {
    display: none;
}

.fin-refresh .icon {
    width: 1rem;
    height: 1rem;
    flex: none;
}

/* once it has been pressed, for a moment, a tick takes the place of the arrows */
.fin-refresh .fin-icon--check {
    display: none;
}

.fin-refresh.is-done .fin-icon--check {
    display: block;
}

.fin-refresh.is-done .fin-icon--refresh {
    display: none;
}

.fin-refresh:hover {
    background: var(--fin-outline-hover);
}

.fin-refresh.is-done {
    border-color: var(--fin-green-edge);
    background: var(--fin-green-soft);
    color: var(--fin-green);
}

.fin-refresh:active {
    scale: var(--press-scale);
    transition-duration: 150ms, var(--press-in);
}

/* the table below a stage's width: the channel is left out of the ledger */
@container fin-stage (max-width: 29.99rem) {
    .fin-ledger :is(th, td):nth-child(2) {
        display: none;
    }
}

@container fin-stage (min-width: 34rem) {
    .fin-calc {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        align-items: start;
    }
}

/* ------------------------------------------------------------------ */
/* What the platform covers                                            */
/* ------------------------------------------------------------------ */

.fin-groups {
    display: grid;
    gap: var(--gap-max);
    margin-top: var(--gap-max);
}

.fin-group {
    min-width: 0;
}

.fin-group__title {
    margin: 0;
    color: var(--fin-ink);
}

.fin-group__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* a line between two things, none over the first or under the last */
.fin-cap {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.5rem 0.75rem;
    padding-block: 0.875rem;
}

.fin-cap + .fin-cap {
    border-top: 1px solid var(--fin-line);
}

.fin-cap__no {
    margin: 0;
    padding-top: 0.3125rem;
    color: var(--fin-eyebrow);
}

.fin-cap__name {
    margin: 0;
    color: var(--fin-ink);
}

.fin-cap__text {
    margin: 0.25rem 0 0;
    max-width: 36rem;
    color: var(--fin-muted);
}

.fin-groups__note {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: var(--gap-max) 0 0;
    color: var(--fin-muted);
}

.fin-groups__note::before {
    content: "";
    flex: none;
    width: 2rem;
    height: 1px;
    background: var(--fin-line-strong);
}

/* ------------------------------------------------------------------ */
/* A member's phone, on a deep blue band                               */
/* ------------------------------------------------------------------ */

/* deep blue on both themes, as the design draws it */
.fin-night {
    position: relative;
    isolation: isolate;
    margin-top: var(--gap-max);
    padding-block: 1.75rem;
    overflow: hidden;
    background: var(--fin-night);
    color: #ffffff;
}

.fin-night__inner {
    display: grid;
    gap: var(--gap-max);
    align-items: center;
}

.fin-night__words,
.fin-night__visual {
    min-width: 0;
}

.fin-night__lead {
    margin: 0.75rem 0 0;
    max-width: 34rem;
    color: var(--fin-night-text);
    text-wrap: pretty;
}

.fin-night__list {
    max-width: 36rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.fin-night__row {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    align-items: baseline;
    gap: 0.5rem;
    padding-block: 0.625rem;
}

.fin-night__row + .fin-night__row {
    border-top: 1px solid var(--fin-night-line);
}

.fin-night__no {
    margin: 0;
    color: var(--fin-night-accent);
}

.fin-night__item {
    color: #ffffff;
}

.fin-night__foot {
    max-width: 34rem;
    margin: 1rem 0 0;
    color: var(--fin-night-text);
}

/* the phone stands in a glow, and from 64rem (where the band has room round it, beside the words) in the middle of two rings of
   light, which the band clips: on a narrower band the rings would reach over the words above */
.fin-night__visual {
    position: relative;
    isolation: isolate;
    display: grid;
    justify-items: center;
    gap: 0.75rem;
}

.fin-night__visual::before,
.fin-night__visual::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 46%;
    left: 50%;
    border-radius: 50%;
    translate: -50% -50%;
    pointer-events: none;
}

.fin-night__visual::before {
    width: 24rem;
    max-width: 100%;
    aspect-ratio: 1;
    background: var(--fin-night-glow);
}

.fin-night__visual::after {
    display: none;
    width: 38rem;
    height: 38rem;
    border: 1px solid var(--fin-night-ring);
}

.fin-night__caption {
    justify-self: end;
    margin: 0;
    color: var(--fin-night-eyebrow);
}

/* the phone: a dark frame and a light screen, drawn here and not a picture, so that its words are the roles' and a screen reader
   has its one description. What does not fit it at 200% text is clipped by the screen, which is a picture of an interface. */
.fin-phone {
    width: min(19.5rem, 100%);
    padding: 0.5rem;
    border-radius: 2.25rem;
    background: var(--fin-phone-frame);
    box-shadow: 0 28px 60px rgb(0 0 0 / 0.4), inset 0 0 0 1px rgb(255 255 255 / 0.1);
}

.fin-phone__screen {
    position: relative;
    overflow: hidden;
    border-radius: 1.75rem;
    background: var(--fin-phone-screen);
    color: var(--fin-phone-ink);
}

.fin-phone__screen::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 50%;
    width: 5rem;
    height: 1.125rem;
    border-radius: 0 0 0.75rem 0.75rem;
    background: var(--fin-phone-body);
    translate: -50% 0;
}

.fin-phone__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0.625rem 1.25rem 0;
    background: var(--fin-phone-blue);
    color: #ffffff;
}

.fin-phone__status {
    display: inline-flex;
    align-items: center;
    gap: 0.1875rem;
}

.fin-phone__status i {
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 50%;
    background: currentColor;
}

.fin-phone__status b {
    width: 0.875rem;
    height: 0.4375rem;
    border: 1px solid currentColor;
    border-radius: 2px;
}

.fin-phone__hero {
    padding: 0.75rem 1.25rem 3.25rem;
    background: var(--fin-phone-blue);
    color: #ffffff;
}

.fin-phone__hero > p {
    margin: 0;
}

.fin-phone__greeting {
    color: #e3eeff;
}

.fin-phone__name {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.fin-phone__name .icon {
    width: 0.875rem;
    height: 0.875rem;
    color: #e3eeff;
}

.fin-phone__label {
    margin-top: 0.5rem;
    color: #e3eeff;
}

.fin-phone__balance {
    margin-top: 0.125rem;
}

.fin-phone__link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.25rem;
    color: #e3eeff;
}

.fin-phone__link .icon {
    width: 0.875rem;
    height: 0.875rem;
}

/* four actions in tiles that lie over the blue's foot */
.fin-phone__actions {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.25rem;
    margin: -2.5rem 0.5rem 0;
    padding: 0;
    list-style: none;
}

.fin-phone__actions li {
    display: grid;
    justify-items: center;
    gap: 0.125rem;
    min-width: 0;
    padding: 0.5rem 0.125rem;
    border: 1px solid var(--fin-phone-line);
    border-radius: 0.625rem;
    background: var(--fin-phone-screen);
    box-shadow: 0 6px 14px rgb(14 40 90 / 0.12);
    color: var(--fin-phone-ink);
}

.fin-phone__actions .icon,
.fin-phone__tabs .icon,
.fin-phone__list .icon {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--fin-phone-blue);
}

.fin-phone__heading {
    margin: 0;
    padding: 0.75rem 1rem 0.25rem;
    color: var(--fin-phone-ink);
}

.fin-phone__list {
    margin: 0;
    padding: 0 1rem;
    list-style: none;
}

.fin-phone__list li {
    display: grid;
    grid-template-columns: 1.125rem minmax(0, 1fr) 0.875rem;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    color: var(--fin-phone-ink);
}

.fin-phone__list li + li {
    border-top: 1px solid var(--fin-phone-line);
}

.fin-phone__list li > .icon:last-child {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--fin-phone-muted);
}

.fin-phone__tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0.5rem 0 0;
    padding: 0.375rem 0.25rem 0.5rem;
    border-top: 1px solid var(--fin-phone-line);
    list-style: none;
}

.fin-phone__tabs li {
    display: grid;
    justify-items: center;
    gap: 0.0625rem;
    min-width: 0;
    color: var(--fin-phone-muted);
}

.fin-phone__tabs li:first-child,
.fin-phone__tabs li:first-child .icon {
    color: var(--fin-phone-blue);
}

/* ------------------------------------------------------------------ */
/* How an introduction goes, and what the platform connects to          */
/* ------------------------------------------------------------------ */

.fin-rollout {
    display: grid;
    gap: var(--gap-max);
    margin-top: var(--gap-max);
}

.fin-process,
.fin-connect {
    min-width: 0;
}

.fin-rollout__title {
    margin: 0;
    color: var(--fin-ink);
}

.fin-steps {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fin-step {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.5rem 0.75rem;
    padding-block: 0.875rem;
}

.fin-step + .fin-step {
    border-top: 1px solid var(--fin-line);
}

.fin-step__no {
    margin: 0;
    padding-top: 0.3125rem;
    color: var(--fin-eyebrow);
}

.fin-step__name {
    margin: 0;
    color: var(--fin-ink);
}

.fin-step__text {
    margin: 0.25rem 0 0;
    max-width: 36rem;
    color: var(--fin-muted);
}

.fin-connect__lead {
    margin: 0.5rem 0 0;
    color: var(--fin-muted);
}

.fin-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.fin-tags__item {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--fin-tag-edge);
    border-radius: 0.375rem;
    background: var(--fin-tag-bg);
    color: var(--fin-tag-ink);
}

.fin-callout {
    margin-top: 1.25rem;
    padding-left: 1rem;
    border-left: 3px solid var(--fin-blue);
}

.fin-callout__title {
    margin: 0;
    color: var(--fin-ink);
}

.fin-callout__text {
    margin: 0.25rem 0 0;
    max-width: 36rem;
    color: var(--fin-muted);
}

/* ------------------------------------------------------------------ */
/* Common questions                                                    */
/* ------------------------------------------------------------------ */

.fin-faq {
    display: grid;
    gap: var(--gap-max);
}

.fin-faq__head,
.fin-faq__list {
    min-width: 0;
}

.fin-faq__head .fin-lead {
    max-width: 22rem;
}

.fin-faq__item + .fin-faq__item {
    border-top: 1px solid var(--fin-line);
}

.fin-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.5rem;
    padding-block: 0.75rem;
    color: var(--fin-ink);
    cursor: pointer;
    list-style: none;
}

.fin-faq__question::-webkit-details-marker {
    display: none;
}

.fin-faq__question > span {
    min-width: 0;
}

/* the first question is level with the label over the heading beside it, and is as high as a press needs */
.fin-faq__item:first-child > .fin-faq__question {
    min-height: 2.75rem;
    padding-top: 0;
}

.fin-faq__question .icon {
    flex: none;
    color: var(--fin-eyebrow);
    transition: rotate var(--spring) var(--ease-spring);
}

.fin-faq__item[open] > .fin-faq__question .icon {
    rotate: 45deg;
}

.fin-faq__question:focus-visible {
    outline-offset: 2px;
}

.fin-faq__answer {
    padding: 0 2.5rem 0.75rem 0;
}

.fin-faq__answer p {
    margin: 0;
    max-width: 40rem;
    color: var(--fin-muted);
}

/* where the browser can animate a disclosure's content, a question opens to its height and closes back, on the site's spring */
@supports (interpolate-size: allow-keywords) {
    .fin-faq__item {
        interpolate-size: allow-keywords;
    }

    .fin-faq__item::details-content {
        block-size: 0;
        overflow: clip;
        opacity: 0;
        transition: block-size var(--spring) var(--ease-spring), opacity 250ms var(--ease-standard),
            content-visibility var(--spring) allow-discrete;
    }

    .fin-faq__item[open]::details-content {
        block-size: auto;
        opacity: 1;
    }
}

/* ------------------------------------------------------------------ */
/* The closing call: a blue card in the column                          */
/* ------------------------------------------------------------------ */

.fin-closing-wrap {
    padding-block: var(--gap-max);
}

.fin-closing {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: center;
    gap: var(--gap-max);
    padding: 1.75rem 1.25rem;
    overflow: hidden;
    border-radius: clamp(1rem, 1.5vw, 1.5rem);
    background: var(--fin-closing);
    box-shadow: var(--fin-closing-shadow);
    color: #ffffff;
}

/* a ring of light, from 64rem, whose arc crosses the card from its top to its foot in the gap between the words and the call: it is drawn
   from the call's own edge (the circle is wide, so that its arc is nearly straight over the card's height and never reaches the note's
   first letters), and the words are on the gap's other side, never across it */
.fin-closing__actions {
    position: relative;
}

.fin-closing__actions::before {
    content: "";
    display: none;
    position: absolute;
    z-index: -1;
    top: 50%;
    left: -0.625rem;
    width: 75rem;
    height: 75rem;
    border: 1px solid var(--fin-closing-ring);
    border-radius: 50%;
    translate: 0 -50%;
    pointer-events: none;
}

.fin-closing__words,
.fin-closing__actions {
    min-width: 0;
}

.fin-closing .fin-eyebrow--night {
    color: var(--fin-closing-eyebrow);
}

.fin-closing__title {
    margin: 0.5rem 0 0.75rem;
    max-width: 41rem;
    color: #ffffff;
    text-wrap: balance;
}

.fin-closing__text {
    margin: 0;
    max-width: 41rem;
    color: var(--fin-closing-text);
}

.fin-closing__actions {
    display: grid;
    justify-items: start;
    gap: 0.75rem;
}

.fin-closing__note {
    margin: 0;
    color: var(--fin-closing-text);
}

/* ------------------------------------------------------------------ */
/* Where a script chooses                                              */
/* ------------------------------------------------------------------ */

/* a page without a script has every workflow one after another; where a script will make the choice, only the first, until it
   has (the markup has no `hidden` on them, which a page without a script could not undo) */
@media (scripting: enabled) {
    [data-tabs]:not(.is-ready) .fin-pane ~ .fin-pane {
        display: none;
    }
}

/* ------------------------------------------------------------------ */
/* Contrast and transparency                                           */
/* ------------------------------------------------------------------ */

@media (prefers-contrast: more) {
    .fin-night__visual::before,
    .fin-night__visual::after,
    .fin-closing__actions::before {
        display: none;
    }

    .fin-surface,
    .fin-explore,
    .fin-switch,
    .fin-panel,
    .fin-stats,
    .fin-float,
    .fin-flow__box,
    .fin-calc__result,
    .fin-refresh,
    .fin-tags__item,
    .fin-btn--outlined {
        border-color: var(--md-outline);
    }

    .fin-index__link + .fin-index__link,
    .fin-cap + .fin-cap,
    .fin-step + .fin-step,
    .fin-fact + .fin-fact,
    .fin-faq__item + .fin-faq__item {
        border-color: var(--md-outline);
    }
}

/* ------------------------------------------------------------------ */
/* Motion                                                              */
/* ------------------------------------------------------------------ */

/* As the page opens the hero's words settle (the title and the lead only rise, so that they are painted at once), the rest comes
   in after them, and the sample workspace last. A workflow that is chosen comes up under the choice. */
@media (prefers-reduced-motion: no-preference) {
    .fin-hero__title,
    .fin-hero__lead {
        animation: hero-settle var(--spring-slow) var(--ease-spring) both;
    }

    .fin-hero__lead {
        animation-delay: 60ms;
    }

    .fin-crumbs__list,
    .fin-hero__words > .fin-eyebrow,
    .fin-hero__actions,
    .fin-notes {
        animation: hero-enter var(--spring-slow) var(--ease-spring) both;
    }

    .fin-hero__actions {
        animation-delay: 140ms;
    }

    .fin-notes {
        animation-delay: 220ms;
    }

    .fin-preview {
        animation: hero-enter var(--spring-slow) var(--ease-spring) 180ms both;
    }

    .fin-pane:not([hidden]) > :not(.fin-pane__head) {
        animation: fin-swap var(--spring) var(--ease-spring) both;
    }

    .fin-view {
        animation: fin-swap var(--spring) var(--ease-spring) both;
    }
}

@keyframes fin-swap {
    from {
        opacity: 0;
        translate: 0 0.5rem;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

@media print {
    .fin-hero,
    .fin-experience {
        background: none;
    }

    .fin-night,
    .fin-closing {
        background: none;
        color: inherit;
    }

    .fin-night .fin-title,
    .fin-night__item,
    .fin-night__lead,
    .fin-night__foot,
    .fin-closing__title,
    .fin-closing__text,
    .fin-closing__note {
        color: inherit;
    }

    .fin-night__visual::before,
    .fin-night__visual::after,
    .fin-closing__actions::before {
        display: none;
    }
}

/* ------------------------------------------------------------------ */
/* From 40rem                                                          */
/* ------------------------------------------------------------------ */

@media (min-width: 40rem) {
    .fin-index__link {
        padding-inline: 1.5rem;
    }

    .fin-index__note {
        padding-inline: 1.5rem;
    }

    .fin-stage {
        padding: 1.5rem;
    }

    .fin-closing {
        padding: 2rem;
    }
}

/* ------------------------------------------------------------------ */
/* From 48rem: a heading beside what it heads, the card's two columns   */
/* ------------------------------------------------------------------ */

@media (min-width: 48rem) {
    .fin-ribbon__inner {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 0.25rem var(--gap-max);
    }

    .fin-head {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    }

    .fin-head > .fin-demo-tag {
        justify-self: end;
    }

    .fin-explore {
        grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
    }

    .fin-stage {
        padding: 1.5rem 1.75rem;
        border-top: 0;
        border-left: 1px solid var(--fin-line);
    }

    .fin-groups {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fin-rollout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}

/* ------------------------------------------------------------------ */
/* From 64rem: the hero's two columns, the band's, the questions'       */
/* ------------------------------------------------------------------ */

@media (min-width: 64rem) {
    .fin-hero__inner {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        align-items: center;
        padding-block: 1rem 1.75rem;
    }

    .fin-intro {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .fin-night__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fin-night__visual::before {
        width: 28rem;
        max-width: none;
        height: 28rem;
        aspect-ratio: auto;
        border: 1px solid var(--fin-night-ring);
    }

    .fin-night__visual::after {
        display: block;
    }

    .fin-faq {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
        align-items: start;
    }

    .fin-closing {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 2rem 2.5rem;
    }

    .fin-closing__actions::before {
        display: block;
    }

    .fin-closing__actions {
        justify-items: start;
    }
}

@media (min-width: 80rem) {
    .fin-hero__inner {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    }
}