/* ===================================================================
   CONTENT PAGES
   Shared template for the text pages (services, security, about,
   policies). Mirrors the Cascade platform: page banner (label, title,
   lede), sticky section tabs, a 720px reading column and app-style cards.
   Pairs with tokens.css, reset.css, layout.css and navigation.css.
   =================================================================== */

main.content-page {

     background: var(--md-sys-color-surface);
     background-image: none;
     color: var(--md-sys-color-on-surface);
     font-family: var(--md-sys-typescale-body-large-font);
     font-size: var(--md-sys-typescale-body-large-size);
     line-height: var(--md-sys-typescale-body-large-line-height);
     font-weight: var(--md-sys-typescale-body-large-weight);
     letter-spacing: var(--md-sys-typescale-body-large-tracking);
     scroll-snap-type: none;
}

main.content-page *,
main.content-page *::before,
main.content-page *::after {
     box-sizing: border-box;
}

/* layout.css turns every <section> into a centred flex column; content pages use normal flow */
main.content-page section {
     display: block;
     flex: none;
     scroll-snap-align: none;
     text-align: left;
}

main.content-page h1,
main.content-page h2,
main.content-page h3,
main.content-page p,
main.content-page ul,
main.content-page ol {
     margin: 0;
     padding: 0;
     text-transform: none;
     text-align: left;
}

main.content-page img {
     display: block;
     max-width: 100%;
}

.cp-container {
     width: 100%;
     max-width: var(--md-comp-content-max-width);
     margin-inline: auto;
     padding-inline: var(--md-comp-page-padding);  /* 16px at compact, 24px from medium */
}

/* ---------- Banner (app .entity-banner) ---------- */

.cp-banner {
     padding-top: calc(var(--app-bar-current-height, var(--md-comp-app-bar-height)) + var(--md-sys-space-600));
     padding-bottom: var(--md-sys-space-500);
     background: var(--md-sys-color-surface);
}

/* Rows that wrap are spaced so each link's 48px target (states.css) stays clear of the next row's */
.cp-breadcrumb ol {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: calc(var(--md-comp-icon-button-target) - 1lh) var(--md-sys-space-100);
     list-style: none;
     font-family: var(--md-sys-typescale-label-large-font);
     font-size: var(--md-sys-typescale-label-large-size);
     line-height: var(--md-sys-typescale-label-large-line-height);
     font-weight: var(--md-sys-typescale-label-large-weight);
     letter-spacing: var(--md-sys-typescale-label-large-tracking);
     color: var(--md-sys-color-on-surface-variant);
}

.cp-breadcrumb li {
     display: inline-flex;
     align-items: center;
     gap: var(--md-sys-space-100);
}

.cp-breadcrumb li + li::before {
     content: "/";
     color: var(--md-sys-color-on-surface-variant);
}

.cp-breadcrumb a {
     color: var(--md-sys-color-on-surface-variant);
     text-decoration: none;
}

.cp-breadcrumb a:hover {
     text-decoration: underline;
}

.cp-breadcrumb [aria-current="page"] {
     color: var(--md-sys-color-tertiary);
}

main.content-page .cp-title {
     margin-top: var(--md-sys-space-200);
     font-family: var(--md-sys-typescale-display-medium-font);
     font-size: var(--md-sys-typescale-display-medium-size);
     line-height: var(--md-sys-typescale-display-medium-line-height);
     font-weight: var(--md-sys-typescale-display-medium-weight);
     letter-spacing: var(--md-sys-typescale-display-medium-tracking);
     color: var(--md-sys-color-on-surface);
     text-wrap: balance;
}

main.content-page .cp-lede {
     max-width: 40rem;  /* one-off: a reading measure */
     margin-top: var(--md-sys-space-200);
     font-family: var(--md-sys-typescale-body-large-font);
     font-size: var(--md-sys-typescale-body-large-size);
     line-height: var(--md-sys-typescale-body-large-line-height);
     font-weight: var(--md-sys-typescale-body-large-weight);
     letter-spacing: var(--md-sys-typescale-body-large-tracking);
     color: var(--md-sys-color-on-surface-variant);
}

/* ---------- Section tabs (app section nav) ---------- */

.cp-tabs {
     position: sticky;
     top: var(--app-bar-current-height, var(--md-comp-app-bar-height));
     z-index: 5;
     background: var(--app-glass-surface);
     -webkit-backdrop-filter: blur(8px);  /* one-off: the sticky tabs' glass */
     backdrop-filter: blur(8px);  /* one-off */
     border-bottom: var(--md-comp-hairline-width) solid var(--md-sys-color-outline-variant);
}

.cp-tabs__list {
     display: flex;
     gap: var(--md-sys-space-50);
     list-style: none;
}

.cp-tabs a {
     position: relative;
     display: inline-flex;
     align-items: center;
     height: var(--md-comp-tab-height);  /* M3's primary tabs, as Admin's */
     padding: 0 var(--md-sys-space-200);
     font-family: var(--md-sys-typescale-title-small-font);
     font-size: var(--md-sys-typescale-title-small-size);
     line-height: var(--md-sys-typescale-title-small-line-height);
     font-weight: var(--md-sys-typescale-title-small-weight);
     letter-spacing: var(--md-sys-typescale-title-small-tracking);
     color: var(--md-sys-color-on-surface-variant);
     text-decoration: none;
     white-space: nowrap;
     transition: color var(--md-sys-motion-spring-fast-effects);
}

.cp-tabs a[aria-current="page"] {
     color: var(--md-sys-color-on-surface);
}

.cp-tabs a[aria-current="page"]::after {
     content: "";
     position: absolute;
     left: var(--md-sys-space-200);
     right: var(--md-sys-space-200);
     bottom: -1px;  /* one-off: the indicator sits on the divider */
     height: var(--md-comp-indicator-height);
     border-radius: var(--md-sys-shape-corner-full);
     background: var(--md-sys-color-primary);
}

/* ---------- Body: reading column + side panel ---------- */

.cp-body {
     padding-block: var(--md-sys-space-700) var(--md-sys-space-900);
}

.cp-layout {
     display: grid;
     grid-template-columns: minmax(0, 720px) minmax(0, 300px);
     justify-content: space-between;
     gap: var(--md-sys-space-800);
     align-items: start;
}

/* Long-form text (app reading column) */
.cp-prose {
     font-family: var(--md-sys-typescale-body-large-font);
     font-size: var(--md-sys-typescale-body-large-size);
     line-height: var(--md-sys-typescale-body-large-line-height);
     font-weight: var(--md-sys-typescale-body-large-weight);
     letter-spacing: var(--md-sys-typescale-body-large-tracking);
     color: var(--md-sys-color-on-surface);
}

main.content-page .cp-prose > * + * {
     margin-top: var(--md-sys-space-225);
}

main.content-page .cp-prose h2 {
     margin-top: var(--md-sys-space-600);
     font-family: var(--md-sys-typescale-headline-small-font);
     font-size: var(--md-sys-typescale-headline-small-size);
     line-height: var(--md-sys-typescale-headline-small-line-height);
     font-weight: var(--md-sys-typescale-headline-small-weight);
     letter-spacing: var(--md-sys-typescale-headline-small-tracking);
     color: var(--md-sys-color-on-surface);
}

main.content-page .cp-prose h2:first-child {
     margin-top: 0;
}

main.content-page .cp-prose h2 + * {
     margin-top: var(--md-sys-space-150);
}

main.content-page .cp-prose h3 {
     margin-top: var(--md-sys-space-400);
     font-family: var(--md-sys-typescale-title-large-font);
     font-size: var(--md-sys-typescale-title-large-size);
     line-height: var(--md-sys-typescale-title-large-line-height);
     font-weight: var(--md-sys-typescale-title-large-weight);
     letter-spacing: var(--md-sys-typescale-title-large-tracking);
     color: var(--md-sys-color-on-surface);
}

main.content-page .cp-prose p {
     font-size: inherit;
     line-height: inherit;
}

/* Prose lists (style guide, Selection, menus and lists; DEV-233), as Admin's .prose-list:
   the tertiary dot, the numbered circle on tertiary container, and the tick and cross on
   the success and error roles (Material Symbols check and close). The explainer dialog's
   lists and the calculator's next steps share them. */
main.content-page :is(.cp-prose ul, .cp-prose ol, .modal-list, .calc-next-steps) {
     display: block;
     margin-inline: 0;
     padding-inline-start: var(--md-sys-space-250);
     list-style: none;
     font-size: inherit;
}

main.content-page :is(.cp-prose ul, .cp-prose ol, .modal-list, .calc-next-steps) > li {
     position: relative;
     padding-block: var(--md-sys-space-100);
}

main.content-page :is(.cp-prose ul, .modal-list) > li::before {
     content: "";
     position: absolute;
     top: calc(var(--md-sys-space-100) + 0.6em);
     inset-inline-start: calc(-1 * var(--md-sys-space-200));
     width: var(--md-comp-prose-dot);
     height: var(--md-comp-prose-dot);
     border-radius: var(--md-sys-shape-corner-full);
     background-color: var(--md-sys-color-tertiary);
}

main.content-page :is(.cp-prose ol, .calc-next-steps) {
     padding-inline-start: calc(var(--md-comp-prose-number) + var(--md-sys-space-150));
     counter-reset: prose-number;
}

main.content-page :is(.cp-prose ol, .calc-next-steps) > li {
     counter-increment: prose-number;
}

main.content-page :is(.cp-prose ol, .calc-next-steps) > li::before {
     content: counter(prose-number);
     position: absolute;
     top: var(--md-sys-space-100);
     inset-inline-start: calc(-1 * (var(--md-comp-prose-number) + var(--md-sys-space-150)));
     display: flex;
     align-items: center;
     justify-content: center;
     width: var(--md-comp-prose-number);
     height: var(--md-comp-prose-number);
     border-radius: var(--md-sys-shape-corner-full);
     background: var(--md-sys-color-tertiary-container);
     color: var(--md-sys-color-on-tertiary-container);
     font-family: var(--md-sys-typescale-label-medium-font);
     font-size: var(--md-sys-typescale-label-medium-size);
     line-height: var(--md-sys-typescale-label-medium-line-height);
     font-weight: var(--md-sys-typescale-label-medium-weight);
     letter-spacing: var(--md-sys-typescale-label-medium-tracking);
}

main.content-page :is(.modal-list.check, .modal-list.cross) {
     padding-inline-start: calc(var(--md-comp-icon-small) + var(--md-sys-space-100));
}

main.content-page :is(.modal-list.check, .modal-list.cross) > li::before {
     top: var(--md-sys-space-100);
     inset-inline-start: calc(-1 * (var(--md-comp-icon-small) + var(--md-sys-space-100)));
     width: var(--md-comp-icon-small);
     height: var(--md-comp-icon-small);
     border-radius: 0;
     -webkit-mask: var(--prose-icon) center / contain no-repeat;
     mask: var(--prose-icon) center / contain no-repeat;
}

main.content-page .modal-list.check > li::before {
     --prose-icon: url('/wwwroot/icons/check.svg');
     background-color: var(--md-sys-color-success);
}

main.content-page .modal-list.cross > li::before {
     --prose-icon: url('/wwwroot/icons/close.svg');
     background-color: var(--md-sys-color-error);
}

main.content-page .cp-prose a:not(.cp-btn) {
     color: var(--md-sys-color-primary);
     text-decoration: underline;
     text-underline-offset: 2px;  /* one-off: link underline */
}

main.content-page .cp-prose strong {
     font-weight: var(--md-sys-typescale-emphasized-weight);
     color: var(--md-sys-color-on-surface);
}

/* Highlighted summary, like the app's methodology conclusion: a filled card (DEV-233) */
main.content-page .cp-prose .cp-callout {
     margin-top: var(--md-sys-space-400);
     padding: var(--md-comp-card-padding);
     background: var(--md-sys-color-surface-container);
     border-radius: var(--md-sys-shape-corner-medium);
     color: var(--md-sys-color-on-surface);
}

/* Abbreviations keep their dotted underline in body text, but not in headings or intros */
main.content-page .cp-prose h2 abbr,
main.content-page .cp-prose h3 abbr,
main.content-page .cp-lede abbr {
     text-decoration: none;
}

/* Short teal tagline under a section, e.g. a value's strapline */
main.content-page .cp-prose .cp-kicker {
     margin-top: var(--md-sys-space-150);
     font-family: var(--md-sys-typescale-title-small-font);
     font-size: var(--md-sys-typescale-title-small-size);
     line-height: var(--md-sys-typescale-title-small-line-height);
     font-weight: var(--md-sys-typescale-title-small-weight);
     letter-spacing: var(--md-sys-typescale-title-small-tracking);
     color: var(--md-sys-color-tertiary);
}

/* Card grid inside the reading column (About us core values): filled cards, as grouped content */
main.content-page .cp-prose ul.cp-values {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: var(--md-comp-card-gap);
     margin-top: var(--md-sys-space-250);
     padding: 0;
}

main.content-page .cp-prose ul.cp-values li.cp-value {
     display: flex;
     flex-direction: column;
     padding: var(--md-comp-card-padding);
     background: var(--md-sys-color-surface-container);
     border-radius: var(--md-sys-shape-corner-medium);
}

main.content-page .cp-prose ul.cp-values li.cp-value::before {
     display: none;
}

main.content-page .cp-prose .cp-value h3 {
     margin-top: 0;
     font-family: var(--md-sys-typescale-title-medium-font);
     font-size: var(--md-sys-typescale-title-medium-size);
     line-height: var(--md-sys-typescale-title-medium-line-height);
     font-weight: var(--md-sys-typescale-title-medium-weight);
     letter-spacing: var(--md-sys-typescale-title-medium-tracking);
}

main.content-page .cp-prose .cp-value p {
     margin-top: var(--md-sys-space-100);
     font-family: var(--md-sys-typescale-body-medium-font);
     font-size: var(--md-sys-typescale-body-medium-size);
     line-height: var(--md-sys-typescale-body-medium-line-height);
     font-weight: var(--md-sys-typescale-body-medium-weight);
     letter-spacing: var(--md-sys-typescale-body-medium-tracking);
}

main.content-page .cp-prose .cp-value .cp-kicker {
     margin-top: auto;
     padding-top: var(--md-sys-space-200);
}

/* Tables (policies) */
main.content-page .cp-prose .cp-table-wrap {
     overflow-x: auto;
     border: var(--md-comp-hairline-width) solid var(--md-sys-color-outline-variant);
     border-radius: var(--md-sys-shape-corner-medium);
     background: var(--md-sys-color-surface);
}

main.content-page .cp-prose table {
     width: 100%;
     border-collapse: collapse;
     font-family: var(--md-sys-typescale-body-medium-font);
     font-size: var(--md-sys-typescale-body-medium-size);
     line-height: var(--md-sys-typescale-body-medium-line-height);
     font-weight: var(--md-sys-typescale-body-medium-weight);
     letter-spacing: var(--md-sys-typescale-body-medium-tracking);
}

main.content-page .cp-prose th,
main.content-page .cp-prose td {
     padding: var(--md-sys-space-150) var(--md-sys-space-200);
     text-align: left;
     vertical-align: top;
     border-bottom: var(--md-comp-hairline-width) solid var(--md-sys-color-outline-variant);
}

main.content-page .cp-prose thead th {
     font-family: var(--md-sys-typescale-label-large-font);
     font-size: var(--md-sys-typescale-label-large-size);
     line-height: var(--md-sys-typescale-label-large-line-height);
     font-weight: var(--md-sys-typescale-label-large-weight);
     letter-spacing: var(--md-sys-typescale-label-large-tracking);
     color: var(--md-sys-color-on-surface-variant);
     background: var(--md-sys-color-surface-container-low);
}

main.content-page .cp-prose tr:last-child :is(td, th) {
     border-bottom: 0;
}

/* Each row's heading: the cookie's name. Long names break after a dot or hyphen (<wbr> in the
   markup), or anywhere if they must, rather than push the table wider than its column */
main.content-page .cp-prose tbody th {
     font-weight: var(--md-sys-typescale-emphasized-weight);
     color: var(--md-sys-color-on-surface);
     overflow-wrap: anywhere;
}

/* ---------- Tables at every size (style guide, Accessibility; Admin's .table-reflow; DEV-237) ----------
   Below 600px each row is a card: its row heading on its own line, then each cell beside its
   column's name (data-label), the names in on surface variant across no more than 40%. From
   600px a table wider than its box scrolls sideways, and the edge with more to see fades, as
   Admin's; the fade follows the scroll position with CSS scroll-driven animation, where the
   browser has it (elsewhere the table scrolls without the fade). */

@media (max-width: 599px) {
     .table-reflow table,
     .table-reflow tbody {
          display: block;
          width: 100%;
     }

     .table-reflow thead {
          display: none;
     }

     .table-reflow tbody tr {
          display: block;
          padding-block: var(--md-sys-space-100);
          border-bottom: var(--md-comp-hairline-width) solid var(--md-sys-color-outline-variant);
     }

     .table-reflow tbody tr:last-child {
          border-bottom: 0;
     }

     main.content-page .table-reflow tbody :is(td, th) {
          display: grid;
          grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
          gap: var(--md-sys-space-200);
          padding: var(--md-sys-space-50) var(--md-sys-space-200);
          border-bottom: 0;
          text-align: start;
          white-space: normal;
          overflow-wrap: anywhere;
     }

     .table-reflow tbody td::before {
          content: attr(data-label);
          color: var(--md-sys-color-on-surface-variant);
          font-family: var(--md-sys-typescale-label-large-font);
          font-size: var(--md-sys-typescale-label-large-size);
          line-height: var(--md-sys-typescale-label-large-line-height);
          font-weight: var(--md-sys-typescale-label-large-weight);
          letter-spacing: var(--md-sys-typescale-label-large-tracking);
     }

     main.content-page .table-reflow tbody td:not([data-label]) {
          grid-template-columns: minmax(0, 1fr);
     }

     .table-reflow tbody td:not([data-label])::before {
          content: none;
     }

     /* A row heading heads its card on its own line */
     main.content-page .table-reflow tbody th {
          display: block;
          font-family: var(--md-sys-typescale-title-small-font);
          font-size: var(--md-sys-typescale-title-small-size);
          line-height: var(--md-sys-typescale-title-small-line-height);
          font-weight: var(--md-sys-typescale-title-small-weight);
          letter-spacing: var(--md-sys-typescale-title-small-tracking);
          color: var(--md-sys-color-on-surface);
     }
}

@property --table-fade-start {
     syntax: "<length>";
     inherits: false;
     initial-value: 0;
}

@property --table-fade-end {
     syntax: "<length>";
     inherits: false;
     initial-value: 0;
}

@media (min-width: 600px) {
     @supports (animation-timeline: scroll()) {
          .table-reflow {
               overflow-x: auto;
               -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--table-fade-start), #000 calc(100% - var(--table-fade-end)), transparent);
               mask-image: linear-gradient(to right, transparent, #000 var(--table-fade-start), #000 calc(100% - var(--table-fade-end)), transparent);
               animation: table-scroll-fade linear both;
               animation-timeline: scroll(self inline);
          }
     }
}

/* Faded where there is more: the end at the start, both in the middle, the start at the end.
   A table that fits has no scroll timeline, so the animation doesn't run and nothing fades. */
@keyframes table-scroll-fade {
     from { --table-fade-start: 0; --table-fade-end: var(--md-sys-space-300); }
     8%, 92% { --table-fade-start: var(--md-sys-space-300); --table-fade-end: var(--md-sys-space-300); }
     to { --table-fade-start: var(--md-sys-space-300); --table-fade-end: 0; }
}

/* The fade follows the scroll, not time, so reduced motion leaves it be */
@media (prefers-reduced-motion: reduce) {
     .table-reflow {
          animation-duration: auto !important;
     }
}

html[data-motion="reduced"] .table-reflow {
     animation-duration: auto !important;
}

/* ---------- Side panel ---------- */

.cp-aside {
     position: sticky;
     top: calc(var(--app-bar-current-height, var(--md-comp-app-bar-height)) + var(--md-sys-space-900));
     display: grid;
     gap: var(--md-comp-card-gap);
}

/* A filled card: grouped content (style guide, Containment) */
.cp-card {
     padding: var(--md-comp-card-padding);
     background: var(--md-sys-color-surface-container);
     border-radius: var(--md-sys-shape-corner-medium);
}

main.content-page .cp-card__title {
     font-family: var(--md-sys-typescale-title-medium-font);
     font-size: var(--md-sys-typescale-title-medium-size);
     line-height: var(--md-sys-typescale-title-medium-line-height);
     font-weight: var(--md-sys-typescale-title-medium-weight);
     letter-spacing: var(--md-sys-typescale-title-medium-tracking);
     color: var(--md-sys-color-on-surface);
}

main.content-page .cp-card__text {
     margin-top: var(--md-sys-space-75);
     font-family: var(--md-sys-typescale-body-medium-font);
     font-size: var(--md-sys-typescale-body-medium-size);
     line-height: var(--md-sys-typescale-body-medium-line-height);
     font-weight: var(--md-sys-typescale-body-medium-weight);
     letter-spacing: var(--md-sys-typescale-body-medium-tracking);
     color: var(--md-sys-color-on-surface-variant);
}

.cp-contact-list {
     display: grid;
     gap: var(--md-sys-space-50);
     margin: var(--md-sys-space-200) 0 var(--md-sys-space-250) !important;
     list-style: none;
}

/* Links styled as rows: the state layer (states.css) on a small-cornered row, which reaches 8px
   past the icon and text so the layer doesn't hug them */
.cp-contact-list a {
     display: flex;
     align-items: center;
     gap: var(--md-sys-space-125);
     min-height: var(--md-comp-icon-button-target);  /* a 48px target (DEV-237) */
     margin-inline: calc(-1 * var(--md-sys-space-100));
     padding: 0 var(--md-sys-space-100);
     border-radius: var(--md-sys-shape-corner-small);
     font-family: var(--md-sys-typescale-label-large-font);
     font-size: var(--md-sys-typescale-label-large-size);
     line-height: var(--md-sys-typescale-label-large-line-height);
     font-weight: var(--md-sys-typescale-label-large-weight);
     letter-spacing: var(--md-sys-typescale-label-large-tracking);
     color: var(--md-sys-color-on-surface);
     text-decoration: none;
}

.cp-contact-list svg {
     flex-shrink: 0;
     width: var(--md-comp-icon-small);
     height: var(--md-comp-icon-small);
     fill: var(--md-sys-color-tertiary);
}

/* ---------- Buttons (style guide, Buttons; DEV-233) ----------
   As Admin's buttons.css: S (40px) by default and M (56px, title medium) for a view's
   primary action and the button beside it; fully rounded, no shadow; filled in primary,
   tonal on secondary container, outlined with a primary label on outline variant, and text
   in primary. Links styled as buttons navigate (a site departure, style guide). Disabled
   takes M3's disabled colours; busy keeps the label and leads with a loading indicator.
   The press morph is in reset.css; home.css has the same rules for .home-btn. */

.cp-btn {
     --btn-height: var(--md-comp-button-s-height);
     --btn-padding: var(--md-comp-button-s-padding);
     display: flex;
     align-items: center;
     justify-content: center;
     gap: var(--md-sys-space-100);
     min-height: var(--btn-height);
     padding: 0 var(--btn-padding);
     border: var(--md-comp-hairline-width) solid transparent;
     border-radius: calc(var(--btn-height) / 2);  /* full, as a length the press morph can ease from (reset.css) */
     font-family: var(--md-sys-typescale-label-large-font);
     font-size: var(--md-sys-typescale-label-large-size);
     line-height: var(--md-sys-typescale-label-large-line-height);
     font-weight: var(--md-sys-typescale-label-large-weight);
     letter-spacing: var(--md-sys-typescale-label-large-tracking);
     text-decoration: none;
     text-align: center;  /* the label wraps at large text sizes rather than overflowing (DEV-237) */
     transition: background-color var(--md-sys-motion-spring-fast-effects), border-color var(--md-sys-motion-spring-fast-effects), color var(--md-sys-motion-spring-fast-effects), border-radius var(--md-sys-motion-spring-fast-spatial);
     /* The state layer, cursor and disabled response are in states.css */
}

.cp-btn + .cp-btn {
     margin-top: var(--md-sys-space-100);
}

.cp-btn--m {
     --btn-height: var(--md-comp-button-m-height);
     --btn-padding: var(--md-comp-button-m-padding);
     font-family: var(--md-sys-typescale-title-medium-font);
     font-size: var(--md-sys-typescale-title-medium-size);
     line-height: var(--md-sys-typescale-title-medium-line-height);
     font-weight: var(--md-sys-typescale-title-medium-weight);
     letter-spacing: var(--md-sys-typescale-title-medium-tracking);
}

.cp-btn--primary {
     background-color: var(--md-sys-color-primary);
     color: var(--md-sys-color-on-primary);
}

.cp-btn--tonal {
     background-color: var(--md-sys-color-secondary-container);
     color: var(--md-sys-color-on-secondary-container);
}

.cp-btn--outlined {
     border-color: var(--md-sys-color-outline-variant);
     background-color: transparent;
     color: var(--md-sys-color-primary);
}

/* Text buttons pad less, as M3's do, so the label lines up with the content around it */
.cp-btn--text {
     padding-inline: calc(var(--btn-padding) - var(--md-sys-space-50));
     background-color: transparent;
     color: var(--md-sys-color-primary);
}

.cp-btn:disabled {
     color: var(--md-sys-color-disabled-content);
}

.cp-btn:disabled:not(.cp-btn--text, .cp-btn--outlined) {
     background-color: var(--md-sys-color-disabled-container);
     border-color: transparent;
}

.cp-btn--outlined:disabled {
     border-color: var(--md-sys-color-disabled-container);
}

/* Busy (Admin's BusyButton): disabled with the label kept, the small indicator leading */
.cp-btn .loading-indicator {
     display: none;
}

.cp-btn[aria-busy="true"] .loading-indicator {
     display: inline-grid;
}

/* Inline row of buttons inside prose (404, thank you) */
.cp-actions {
     display: flex;
     flex-wrap: wrap;
     gap: var(--md-sys-space-150);
}

main.content-page .cp-prose > .cp-actions,
main.content-page .cp-prose > .cp-actions + * {
     margin-top: var(--md-sys-space-400);
}

main.content-page .cp-actions .cp-btn + .cp-btn {
     margin-top: 0;
}

/* A real button in running text that opens something on the page: it reads as the link beside it */
.link-button {
     display: inline;
     padding: 0;
     border: 0;
     background: none;
     color: var(--md-sys-color-primary);
     font: inherit;
     font-weight: var(--md-sys-typescale-emphasized-weight);
     letter-spacing: inherit;
     text-decoration: underline;
     text-underline-offset: 2px;  /* one-off: link underline */
}

/* ---------- Keep reading (app quick-action cards) ---------- */

.cp-related {
     padding-block: var(--md-sys-space-700) var(--md-sys-space-800);
     background: var(--md-sys-color-surface-container-low);
}

main.content-page .cp-related__label {
     margin-bottom: var(--md-sys-space-100);
     font-family: var(--md-sys-typescale-label-medium-font);
     font-size: var(--md-sys-typescale-label-medium-size);
     line-height: var(--md-sys-typescale-label-medium-line-height);
     font-weight: var(--md-sys-typescale-label-medium-weight);
     letter-spacing: var(--md-sys-typescale-label-medium-tracking);
     color: var(--md-sys-color-on-surface-variant);
}

main.content-page .cp-related__title {
     margin-bottom: var(--md-sys-space-300);
     font-family: var(--md-sys-typescale-headline-small-font);
     font-size: var(--md-sys-typescale-headline-small-size);
     line-height: var(--md-sys-typescale-headline-small-line-height);
     font-weight: var(--md-sys-typescale-headline-small-weight);
     letter-spacing: var(--md-sys-typescale-headline-small-tracking);
     color: var(--md-sys-color-on-surface);
}

.cp-related__grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
     gap: var(--md-comp-card-gap);
     list-style: none;
}

/* Outlined cards, as they act (style guide, Containment; DEV-233) */
.cp-action {
     display: flex;
     align-items: center;
     gap: var(--md-sys-space-200);
     height: 100%;
     padding: var(--md-comp-card-padding);
     background-color: var(--md-sys-color-surface);
     border: var(--md-comp-hairline-width) solid var(--md-sys-color-outline-variant);
     border-radius: var(--md-sys-shape-corner-medium);
     color: inherit;
     text-decoration: none;
     transition: background var(--md-sys-motion-spring-fast-effects), border-color var(--md-sys-motion-spring-fast-effects);
}

.cp-action__body {
     display: flex;
     flex: 1;
     flex-direction: column;
     min-width: 0;
}

.cp-action__title {
     font-family: var(--md-sys-typescale-title-medium-font);
     font-size: var(--md-sys-typescale-title-medium-size);
     line-height: var(--md-sys-typescale-title-medium-line-height);
     font-weight: var(--md-sys-typescale-title-medium-weight);
     letter-spacing: var(--md-sys-typescale-title-medium-tracking);
     color: var(--md-sys-color-on-surface);
}

.cp-action__description {
     margin-top: var(--md-sys-space-50);
     font-family: var(--md-sys-typescale-body-medium-font);
     font-size: var(--md-sys-typescale-body-medium-size);
     line-height: var(--md-sys-typescale-body-medium-line-height);
     font-weight: var(--md-sys-typescale-body-medium-weight);
     letter-spacing: var(--md-sys-typescale-body-medium-tracking);
     color: var(--md-sys-color-on-surface-variant);
}

/* The hover lift follows --lift, 0 at rest and 1 lifted: CSS sets it on hover and transitions the
   result without JavaScript; the site script springs it instead (DEV-240) */
.cp-action__chevron {
     flex-shrink: 0;
     width: var(--md-comp-icon-medium);
     height: var(--md-comp-icon-medium);
     fill: var(--md-sys-color-on-surface-variant);
     transform: translateX(calc(var(--lift, 0) * 2px));
     transition: fill var(--md-sys-motion-spring-fast-effects), transform var(--md-sys-motion-spring-standard-fast-spatial);
}

@media (hover: hover) {
     .cp-action:hover {
          --lift: 1;
     }

     .cp-action:hover .cp-action__chevron {
          fill: var(--md-sys-color-primary);
     }
}

html[data-springs] .cp-action__chevron {
     transition-property: fill;
}

/* ===================================================================
   PROFILE PAGES (The Cascaders)
   =================================================================== */

.pf-banner__grid {
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
     align-items: center;
     gap: var(--md-sys-space-600);
}

main.content-page .pf-role {
     margin-top: var(--md-sys-space-150);
     font-family: var(--md-sys-typescale-title-large-font);
     font-size: var(--md-sys-typescale-title-large-size);
     line-height: var(--md-sys-typescale-title-large-line-height);
     font-weight: var(--md-sys-typescale-title-large-weight);
     letter-spacing: var(--md-sys-typescale-title-large-tracking);
     color: var(--md-sys-color-tertiary);
}

main.content-page .pf-credentials {
     margin-top: var(--md-sys-space-50);
     font-family: var(--md-sys-typescale-label-large-font);
     font-size: var(--md-sys-typescale-label-large-size);
     line-height: var(--md-sys-typescale-label-large-line-height);
     font-weight: var(--md-sys-typescale-label-large-weight);
     letter-spacing: var(--md-sys-typescale-label-large-tracking);
     color: var(--md-sys-color-on-surface-variant);
}

.pf-photo img {
     width: 100%;
     aspect-ratio: 4 / 5;
     object-fit: cover;
     border-radius: var(--md-sys-shape-corner-large-increased);
     filter: grayscale(100%);
     box-shadow: var(--md-sys-elevation-level2);
}

/* Likes: one filled card per row (grouped content); the Material Symbols icon is a mask so it takes tertiary */
main.content-page .cp-prose ul.pf-likes {
     display: grid;
     gap: var(--md-comp-card-gap);
     margin-top: var(--md-sys-space-200);
     padding: 0;
}

main.content-page .cp-prose ul.pf-likes li {
     display: flex;
     align-items: center;
     gap: var(--md-sys-space-200);
     padding: var(--md-comp-card-padding);
     background: var(--md-sys-color-surface-container);
     border-radius: var(--md-sys-shape-corner-medium);
}

main.content-page .cp-prose ul.pf-likes li::before {
     display: none;
}

.pf-like__icon {
     flex-shrink: 0;
     width: var(--md-comp-icon-large);
     height: var(--md-comp-icon-large);
     background-color: var(--md-sys-color-tertiary);
     -webkit-mask: var(--icon) center / contain no-repeat;
     mask: var(--icon) center / contain no-repeat;
}

/* Favourite quote: a filled card */
main.content-page .cp-prose .pf-quote {
     margin: var(--md-sys-space-600) 0 0;
     padding: var(--md-comp-card-padding);
     background: var(--md-sys-color-surface-container);
     border-radius: var(--md-sys-shape-corner-medium);
}

main.content-page .cp-prose .pf-quote blockquote {
     margin: 0;
}

main.content-page .cp-prose .pf-quote blockquote::before {
     content: "\201C";
     display: block;
     height: 2.25rem;  /* one-off: the quote mark's box */
     font-family: var(--md-sys-typescale-display-large-font);
     font-size: var(--md-sys-typescale-display-large-size);
     font-weight: var(--md-sys-typescale-display-large-weight);
     letter-spacing: var(--md-sys-typescale-display-large-tracking);
     line-height: 1;
     color: var(--md-sys-color-tertiary);
}

main.content-page .cp-prose .pf-quote blockquote p {
     font-family: var(--md-sys-typescale-title-large-font);
     font-size: var(--md-sys-typescale-title-large-size);
     line-height: var(--md-sys-typescale-title-large-line-height);
     font-weight: var(--md-sys-typescale-title-large-weight);
     letter-spacing: var(--md-sys-typescale-title-large-tracking);
     color: var(--md-sys-color-on-surface);
}

main.content-page .cp-prose .pf-quote figcaption {
     margin-top: var(--md-sys-space-200);
     font-family: var(--md-sys-typescale-label-large-font);
     font-size: var(--md-sys-typescale-label-large-size);
     line-height: var(--md-sys-typescale-label-large-line-height);
     font-weight: var(--md-sys-typescale-label-large-weight);
     letter-spacing: var(--md-sys-typescale-label-large-tracking);
     color: var(--md-sys-color-on-surface-variant);
}

main.content-page .cp-prose .pf-quote figcaption::before {
     content: "\2014\00a0";
}

/* ---------- Responsive ---------- */

@media (max-width: 839px) {
     .cp-banner {
          padding-top: calc(var(--app-bar-current-height, var(--md-comp-app-bar-height)) + var(--md-sys-space-400));
          padding-bottom: var(--md-sys-space-400);
     }

     /* Tabs wrap into pills instead of scrolling sideways (no JavaScript needed) */
     .cp-tabs {
          position: static;
          background: var(--md-sys-color-surface);
          border-bottom: 0;
          padding-top: var(--md-sys-space-250);
     }

     .cp-tabs__list {
          flex-wrap: wrap;
          gap: var(--md-sys-space-100);
     }

     .cp-tabs a {
          height: var(--md-comp-button-s-height);
          padding: 0 var(--md-sys-space-200);
          border: var(--md-comp-hairline-width) solid var(--md-sys-color-outline-variant);
          border-radius: var(--md-sys-shape-corner-full);
          background-color: var(--md-sys-color-surface);
     }

     .cp-tabs a[aria-current="page"] {
          background-color: var(--md-sys-color-secondary-container);
          border-color: transparent;
          color: var(--md-sys-color-on-secondary-container);
     }

     .cp-tabs a[aria-current="page"]::after {
          display: none;
     }

     .cp-body {
          padding-block: var(--md-sys-space-400) var(--md-sys-space-600);
     }

     .cp-layout {
          grid-template-columns: minmax(0, 1fr);
          gap: var(--md-sys-space-500);
     }

     .pf-banner__grid {
          grid-template-columns: minmax(0, 1fr);
          gap: var(--md-sys-space-300);
     }

     .pf-photo {
          order: -1;
          width: min(100%, 280px);  /* one-off: the profile photo */
     }

     .cp-aside {
          position: static;
     }

     main.content-page .cp-prose h2 {
          margin-top: var(--md-sys-space-500);
     }

     main.content-page .cp-prose ul.cp-values {
          grid-template-columns: minmax(0, 1fr);
     }

     .cp-related {
          padding-block: var(--md-sys-space-500) var(--md-sys-space-600);
     }
}

/* Page titles step down to display small at compact (style guide, Typography) */
@media (max-width: 599px) {
     main.content-page .cp-title {
          font-family: var(--md-sys-typescale-display-small-font);
          font-size: var(--md-sys-typescale-display-small-size);
          line-height: var(--md-sys-typescale-display-small-line-height);
          font-weight: var(--md-sys-typescale-display-small-weight);
          letter-spacing: var(--md-sys-typescale-display-small-tracking);
     }
}

/* Quotes with more than one attribution line (e.g. Gretzky, then Michael Scott) */
main.content-page .cp-prose .pf-quote figcaption:has(span)::before {
     content: none;
}

main.content-page .cp-prose .pf-quote figcaption span {
     display: block;
}

main.content-page .cp-prose .pf-quote figcaption span::before {
     content: "\2014\00a0";
}

/* ===================================================================
   TEAM GRID (The Cascaders page)
   Portrait cards, black and white, teal bar on hover. Four across on
   desktop, three on tablets, two on phones; a short last row centres.
   =================================================================== */

.team-list {
     --team-cols: 4;
     --team-gap: var(--md-sys-space-400);
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: var(--md-sys-space-600) var(--team-gap);
     margin: 0;
     padding: 0;
     list-style: none;
}

.team-list > li {
     flex: 0 0 calc((100% - (var(--team-cols) - 1) * var(--team-gap)) / var(--team-cols));
     min-width: 0;
}

/* The portrait's zoom and teal bar on hover are the site's flourish (DEV-236 keeps them, style
   guide); the tile takes the one focus ring on the photo's corners */
.team-member {
     display: flex;
     flex-direction: column;
     height: 100%;
     border-radius: var(--md-sys-shape-corner-medium);
     color: var(--md-sys-color-on-surface);
     text-decoration: none;
}

.team-member-photo {
     position: relative;
     display: block;
     aspect-ratio: 4 / 5;
     overflow: hidden;
     margin-bottom: var(--md-sys-space-200);
     border-radius: var(--md-sys-shape-corner-medium);
     background-color: var(--md-sys-color-surface-container-high);
}

.team-member-photo::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: 0;
     width: calc(var(--lift, 0) * 100%);
     height: 4px;  /* one-off: the portrait's hover bar */
     background-color: var(--cascade-brand-teal);
     transition: width var(--md-sys-motion-spring-standard-default-spatial);
}

/* The zoom and bar follow the tile's --lift (as the cards' arrows; DEV-240) */
.team-member-photo img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     filter: grayscale(100%);
     transform: scale(calc(1.001 + var(--lift, 0) * 0.039));
     transition: transform var(--md-sys-motion-spring-standard-default-spatial);
}

a.team-member:focus-visible,
.team-feature:focus-visible {
     --lift: 1;
}

@media (hover: hover) {
     a.team-member:hover,
     .team-feature:hover {
          --lift: 1;
     }
}

html[data-springs] .team-member-photo img,
html[data-springs] .team-member-photo::after {
     transition: none;
}

main.content-page .team-member-name {
     font-family: var(--md-sys-typescale-title-medium-font);
     font-size: var(--md-sys-typescale-title-medium-size);
     line-height: var(--md-sys-typescale-title-medium-line-height);
     font-weight: var(--md-sys-typescale-title-medium-weight);
     letter-spacing: var(--md-sys-typescale-title-medium-tracking);
     color: var(--md-sys-color-on-surface);
}

a.team-member:hover .team-member-name {
     text-decoration: underline;
}

main.content-page .team-member-role,
main.content-page .team-member-note {
     margin-top: var(--md-sys-space-50);
     font-family: var(--md-sys-typescale-body-medium-font);
     font-size: var(--md-sys-typescale-body-medium-size);
     line-height: var(--md-sys-typescale-body-medium-line-height);
     font-weight: var(--md-sys-typescale-body-medium-weight);
     letter-spacing: var(--md-sys-typescale-body-medium-tracking);
     color: var(--md-sys-color-on-surface-variant);
}

main.content-page .team-member-note {
     font-style: italic;
     color: var(--md-sys-color-on-surface-variant);
}

/* Placeholder for people without a photo yet */
.team-member-initials {
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--md-sys-color-primary-container);
     color: var(--md-sys-color-on-primary-container);
     font-family: var(--md-sys-typescale-display-medium-font);
     font-size: var(--md-sys-typescale-display-medium-size);
     line-height: var(--md-sys-typescale-display-medium-line-height);
     font-weight: var(--md-sys-typescale-display-medium-weight);
     letter-spacing: var(--md-sys-typescale-display-medium-tracking);
}

@media (max-width: 839px) {
     .team-list {
          --team-cols: 3;
          --team-gap: var(--md-sys-space-300);
     }
}

@media (max-width: 599px) {
     .team-list {
          --team-cols: 2;
          --team-gap: var(--md-sys-space-200);
          row-gap: var(--md-sys-space-400);
     }

     .team-member-photo {
          margin-bottom: var(--md-sys-space-150);
     }

     .team-member-initials {
          font-family: var(--md-sys-typescale-display-small-font);
          font-size: var(--md-sys-typescale-display-small-size);
          line-height: var(--md-sys-typescale-display-small-line-height);
          font-weight: var(--md-sys-typescale-display-small-weight);
          letter-spacing: var(--md-sys-typescale-display-small-tracking);
     }
}

/* ---------- Team page sections (leadership, relationship managers, account managers) ---------- */

.team-group + .team-group {
     margin-top: var(--md-sys-space-800);
     padding-top: var(--md-sys-space-600);
     border-top: var(--md-comp-hairline-width) solid var(--md-sys-color-outline-variant);
}

.team-group__head {
     max-width: 40rem;  /* one-off: a reading measure */
     margin-bottom: var(--md-sys-space-400);
}

main.content-page .team-group__title {
     font-family: var(--md-sys-typescale-headline-small-font);
     font-size: var(--md-sys-typescale-headline-small-size);
     line-height: var(--md-sys-typescale-headline-small-line-height);
     font-weight: var(--md-sys-typescale-headline-small-weight);
     letter-spacing: var(--md-sys-typescale-headline-small-tracking);
     color: var(--md-sys-color-on-surface);
}

main.content-page .team-group__intro {
     margin-top: var(--md-sys-space-100);
     font-family: var(--md-sys-typescale-body-large-font);
     font-size: var(--md-sys-typescale-body-large-size);
     line-height: var(--md-sys-typescale-body-large-line-height);
     font-weight: var(--md-sys-typescale-body-large-weight);
     letter-spacing: var(--md-sys-typescale-body-large-tracking);
     color: var(--md-sys-color-on-surface-variant);
}

/* Featured card for the CEO: photo beside name, role and a line of bio */
.team-feature {
     display: grid;
     grid-template-columns: 240px minmax(0, 1fr);
     align-items: center;
     gap: var(--md-sys-space-500);
     max-width: 880px;  /* one-off: a reading measure */
     padding: var(--md-comp-card-padding);
     background-color: var(--md-sys-color-surface);
     border: var(--md-comp-hairline-width) solid var(--md-sys-color-outline-variant);
     border-radius: var(--md-sys-shape-corner-medium);
     color: inherit;
     text-decoration: none;
     transition: background var(--md-sys-motion-spring-fast-effects), border-color var(--md-sys-motion-spring-fast-effects);
}

.team-feature .team-member-photo {
     margin-bottom: 0;
}

main.content-page .team-feature .team-member-name {
     font-family: var(--md-sys-typescale-headline-medium-font);
     font-size: var(--md-sys-typescale-headline-medium-size);
     line-height: var(--md-sys-typescale-headline-medium-line-height);
     font-weight: var(--md-sys-typescale-headline-medium-weight);
     letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
}

main.content-page .team-feature .team-member-role {
     margin-top: var(--md-sys-space-75);
     font-family: var(--md-sys-typescale-title-medium-font);
     font-size: var(--md-sys-typescale-title-medium-size);
     line-height: var(--md-sys-typescale-title-medium-line-height);
     font-weight: var(--md-sys-typescale-title-medium-weight);
     letter-spacing: var(--md-sys-typescale-title-medium-tracking);
     color: var(--md-sys-color-tertiary);
}

main.content-page .team-feature__credentials {
     margin-top: var(--md-sys-space-25);
     font-family: var(--md-sys-typescale-label-large-font);
     font-size: var(--md-sys-typescale-label-large-size);
     line-height: var(--md-sys-typescale-label-large-line-height);
     font-weight: var(--md-sys-typescale-label-large-weight);
     letter-spacing: var(--md-sys-typescale-label-large-tracking);
     color: var(--md-sys-color-on-surface-variant);
}

main.content-page .team-feature__bio {
     margin-top: var(--md-sys-space-200);
     font-family: var(--md-sys-typescale-body-large-font);
     font-size: var(--md-sys-typescale-body-large-size);
     line-height: var(--md-sys-typescale-body-large-line-height);
     font-weight: var(--md-sys-typescale-body-large-weight);
     letter-spacing: var(--md-sys-typescale-body-large-tracking);
     color: var(--md-sys-color-on-surface);
}

main.content-page .team-feature__link {
     display: inline-flex;
     align-items: center;
     gap: var(--md-sys-space-75);
     margin-top: var(--md-sys-space-250);
     font-family: var(--md-sys-typescale-label-large-font);
     font-size: var(--md-sys-typescale-label-large-size);
     line-height: var(--md-sys-typescale-label-large-line-height);
     font-weight: var(--md-sys-typescale-label-large-weight);
     letter-spacing: var(--md-sys-typescale-label-large-tracking);
     color: var(--md-sys-color-primary);
}

/* Material Symbols arrow_forward, as the other cards' trailing arrow */
.team-feature__link::after {
     content: "";
     width: var(--md-comp-icon-small);
     height: var(--md-comp-icon-small);
     background-color: currentColor;
     -webkit-mask: url('/wwwroot/icons/arrow_forward.svg') center / contain no-repeat;
     mask: url('/wwwroot/icons/arrow_forward.svg') center / contain no-repeat;
     transform: translateX(calc(var(--lift, 0) * 3px));
     transition: transform var(--md-sys-motion-spring-standard-fast-spatial);
}

html[data-springs] .team-feature__link::after {
     transition: none;
}

/* Team rows sit left-aligned under their heading */
.team-group .team-list {
     justify-content: flex-start;
}

@media (max-width: 599px) {
     .team-group + .team-group {
          margin-top: var(--md-sys-space-500);
          padding-top: var(--md-sys-space-400);
     }

     .team-feature {
          grid-template-columns: minmax(0, 1fr);
          gap: var(--md-sys-space-250);
     }

     .team-feature .team-member-photo {
          width: min(100%, 240px);  /* one-off: the feature photo */
     }

}

/* layout.css centres every <section>; team sections should read left to right */
main.content-page section.team-group {
     display: block;
     width: 100%;
     text-align: left;
     scroll-snap-align: none;
}

/* ===================================================================
   CONTACT PAGE - form card beside a contact details card
   Field styling follows the app's inputs. Validation states come from
   the existing form script (aria-invalid) and the browser (:user-invalid).
   =================================================================== */

.ct-layout {
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
     grid-template-areas: "form details";
     gap: var(--md-sys-space-600);
     align-items: start;
}

.ct-details { grid-area: details; position: sticky; top: calc(var(--app-bar-current-height, var(--md-comp-app-bar-height)) + var(--md-sys-space-400)); }
.ct-form-card { grid-area: form; }

/* The form's card is outlined (it holds actions); the contact details card beside it is filled */
.ct-form-card {
     padding: var(--md-comp-card-padding);
     background: var(--md-sys-color-surface);
     border: var(--md-comp-hairline-width) solid var(--md-sys-color-outline-variant);
     border-radius: var(--md-sys-shape-corner-medium);
}

main.content-page .ct-form-card__title {
     font-family: var(--md-sys-typescale-title-large-font);
     font-size: var(--md-sys-typescale-title-large-size);
     line-height: var(--md-sys-typescale-title-large-line-height);
     font-weight: var(--md-sys-typescale-title-large-weight);
     letter-spacing: var(--md-sys-typescale-title-large-tracking);
     color: var(--md-sys-color-on-surface);
}

main.content-page .ct-form-card__intro {
     margin-top: var(--md-sys-space-75);
     margin-bottom: var(--md-sys-space-400);
     font-family: var(--md-sys-typescale-body-medium-font);
     font-size: var(--md-sys-typescale-body-medium-size);
     line-height: var(--md-sys-typescale-body-medium-line-height);
     font-weight: var(--md-sys-typescale-body-medium-weight);
     letter-spacing: var(--md-sys-typescale-body-medium-tracking);
     color: var(--md-sys-color-on-surface-variant);
}

/* ---------- Text fields (style guide, Inputs; Admin's inputs.css; DEV-233) ----------
   56px outlined fields with 4px corners: the outline role at rest, on surface on hover and
   a 2px primary outline on focus, with the 3px secondary ring only when focus came from the
   keyboard (the site script marks the modality). The label floats onto the outline in body
   small once the field is focused or filled; every input carries a placeholder (a format
   example or a space) so :placeholder-shown can tell. Supporting text is body small and the
   error replaces it, in the error role with a leading icon and role="alert". The page's
   script sets aria-invalid when a changed field is left or the form is sent, and marks the
   group .is-correcting while an error is being fixed, so the error steps back. */

.ct-form {
     display: grid;
     gap: var(--md-sys-space-300);
}

.ct-form .form-required-note {
     font-family: var(--md-sys-typescale-body-small-font);
     font-size: var(--md-sys-typescale-body-small-size);
     line-height: var(--md-sys-typescale-body-small-line-height);
     font-weight: var(--md-sys-typescale-body-small-weight);
     letter-spacing: var(--md-sys-typescale-body-small-tracking);
     color: var(--md-sys-color-on-surface-variant);
}

.ct-form .form-group {
     display: flex;
     flex-direction: column;
     gap: var(--md-sys-space-50);
     container-type: inline-size;  /* for the label above a cramped field, below */
}

.ct-form .field {
     position: relative;
     display: flex;
     align-items: center;
     border-radius: var(--md-sys-shape-corner-extra-small);
}

.ct-form .form-input,
.ct-form .form-textarea {
     width: 100%;
     min-height: var(--md-comp-field-height);
     margin: 0;
     padding: calc(var(--md-sys-space-200) - var(--md-comp-hairline-width));  /* 56px with the outline */
     border: var(--md-comp-hairline-width) solid var(--md-sys-color-outline);
     border-radius: var(--md-sys-shape-corner-extra-small);
     background-color: transparent;
     color: var(--md-sys-color-on-surface);
     font-family: var(--md-sys-typescale-body-large-font);
     font-size: var(--md-sys-typescale-body-large-size);
     line-height: var(--md-sys-typescale-body-large-line-height);
     font-weight: var(--md-sys-typescale-body-large-weight);
     letter-spacing: var(--md-sys-typescale-body-large-tracking);
     transition: border-color var(--md-sys-motion-spring-fast-effects), box-shadow var(--md-sys-motion-spring-fast-effects);
}

.ct-form .form-textarea {
     resize: vertical;
}

/* Placeholders are format examples, shown once the label has floated out of the way */
.ct-form :is(.form-input, .form-textarea)::placeholder {
     color: transparent;
     opacity: 1;
}

.ct-form :is(.form-input, .form-textarea):focus::placeholder {
     color: var(--md-sys-color-on-surface-variant);
     opacity: 0.72;
}

@media (hover: hover) {
     .ct-form .field:hover :is(.form-input, .form-textarea):not(:focus, :disabled, [aria-invalid="true"]) {
          border-color: var(--md-sys-color-on-surface);
     }
}

/* Focus: a 2px outline (the border plus an inset shadow, so nothing moves) */
.ct-form :is(.form-input, .form-textarea):focus {
     outline: none;
     border-color: var(--md-sys-color-primary);
     box-shadow: inset 0 0 0 calc(var(--md-comp-field-focus-outline-width) - var(--md-comp-hairline-width)) var(--md-sys-color-primary);
}

/* The ring is on the field. Text inputs match :focus-visible on a click too, so the site script
   records how focus came and a pointer focus shows none; without the script it always shows */
:root:not([data-input-modality="pointer"]) .ct-form .field:has(:focus-visible) {
     outline: var(--md-comp-focus-ring-width) solid var(--md-sys-color-secondary);
     outline-offset: var(--md-comp-focus-ring-offset);
}

.ct-form :is(.form-input, .form-textarea):disabled {
     border-color: var(--md-sys-color-disabled-container);
     color: var(--md-sys-color-disabled-content);
}

/* The label: in the field at rest, on the outline once focused or filled */
.ct-form .form-label {
     position: absolute;
     top: var(--md-sys-space-200);
     inset-inline-start: calc(var(--md-sys-space-200) - var(--md-sys-space-50));
     max-width: calc(100% - 2 * var(--md-sys-space-150));
     padding-inline: var(--md-sys-space-50);
     overflow: hidden;
     background: var(--md-sys-color-surface);
     color: var(--md-sys-color-on-surface-variant);
     font-family: var(--md-sys-typescale-body-large-font);
     font-size: var(--md-sys-typescale-body-large-size);
     line-height: var(--md-sys-typescale-body-large-line-height);
     font-weight: var(--md-sys-typescale-body-large-weight);
     letter-spacing: var(--md-sys-typescale-body-large-tracking);
     text-overflow: ellipsis;
     white-space: nowrap;
     pointer-events: none;
     transition: top var(--md-sys-motion-spring-standard-fast-spatial), transform var(--md-sys-motion-spring-standard-fast-spatial), font-size var(--md-sys-motion-spring-standard-fast-spatial), line-height var(--md-sys-motion-spring-standard-fast-spatial), color var(--md-sys-motion-spring-fast-effects);
}

.ct-form .field:where(:has(:focus, :is(input, textarea):not(:placeholder-shown), select)) .form-label {
     top: 0;
     transform: translateY(-50%);
     font-family: var(--md-sys-typescale-body-small-font);
     font-size: var(--md-sys-typescale-body-small-size);
     line-height: var(--md-sys-typescale-body-small-line-height);
     letter-spacing: var(--md-sys-typescale-body-small-tracking);
}

/* A select with nothing chosen keeps its label in the field until it is opened */
.ct-form .field:where(:has(select:not(:focus) option[value=""]:checked)) .form-label {
     top: var(--md-sys-space-200);
     transform: none;
     font-family: var(--md-sys-typescale-body-large-font);
     font-size: var(--md-sys-typescale-body-large-size);
     line-height: var(--md-sys-typescale-body-large-line-height);
     letter-spacing: var(--md-sys-typescale-body-large-tracking);
}

.ct-form .field:has(:focus) .form-label {
     color: var(--md-sys-color-primary);
}

.ct-form .field:has(:disabled) .form-label {
     color: var(--md-sys-color-disabled-content);
}

/* Prefix and suffix text (£, %): shown once the label has floated, hidden from screen readers,
   whose label names the unit instead */
.ct-form .field__affix {
     position: absolute;
     color: var(--md-sys-color-on-surface-variant);
     font-family: var(--md-sys-typescale-body-large-font);
     font-size: var(--md-sys-typescale-body-large-size);
     line-height: var(--md-sys-typescale-body-large-line-height);
     letter-spacing: var(--md-sys-typescale-body-large-tracking);
     pointer-events: none;
     opacity: 0;
     transition: opacity var(--md-sys-motion-spring-fast-effects);
}

.ct-form .field:where(:has(:focus, input:not(:placeholder-shown))) .field__affix {
     opacity: 1;
}

.ct-form .field--prefix .field__affix { inset-inline-start: var(--md-sys-space-200); }
.ct-form .field--suffix .field__affix { inset-inline-end: var(--md-sys-space-200); }
/* Room for the £ or % grows with the text (ch is the width of a digit) */
.ct-form .field--prefix .form-input { padding-inline-start: calc(var(--md-sys-space-200) + 1ch + var(--md-sys-space-50)); }
.ct-form .field--suffix .form-input { padding-inline-end: calc(var(--md-sys-space-200) + 1.5ch + var(--md-sys-space-50)); }

/* Hide number spinners */
.ct-form input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.ct-form input[type="number"]::-webkit-outer-spin-button,
.ct-form input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* A field too narrow for its text (large text sizes on small screens: under 14em, the width the
   longest label needs in the field) puts its label above it, in full and wrapping, rather than
   cutting it short (DEV-237). The field becomes a grid so the prefix and suffix stay on the input. */
@container (max-width: 14em) {
     .ct-form .form-group .field {
          display: grid;
          grid-template-columns: minmax(0, 1fr);
          gap: var(--md-sys-space-50);
     }

     .ct-form .form-group .field > * {
          grid-column: 1;
     }

     .ct-form .form-group .field .form-label {
          position: static;
          grid-row: 1;
          max-width: none;
          padding: 0;
          overflow: visible;
          background: none;
          font-family: var(--md-sys-typescale-body-small-font);
          font-size: var(--md-sys-typescale-body-small-size);
          line-height: var(--md-sys-typescale-body-small-line-height);
          letter-spacing: var(--md-sys-typescale-body-small-tracking);
          white-space: normal;
          transform: none;
     }

     .ct-form .form-group .field :is(.form-input, .form-textarea) {
          grid-row: 2;
     }

     .ct-form .form-group .field .field__affix {
          position: static;
          grid-row: 2;
          align-self: center;
          z-index: 1;
          margin-inline: var(--md-sys-space-200);
          opacity: 1;
     }

     .ct-form .form-group .field--prefix .field__affix { justify-self: start; }
     .ct-form .form-group .field--suffix .field__affix { justify-self: end; }

     .ct-form .form-group :is(.form-input, .form-textarea)::placeholder {
          color: var(--md-sys-color-on-surface-variant);
          opacity: 0.72;
     }
}

/* Supporting text and the error that replaces it */
.ct-form :is(.form-hint, .form-error) {
     margin-inline: var(--md-sys-space-200);
     font-family: var(--md-sys-typescale-body-small-font);
     font-size: var(--md-sys-typescale-body-small-size);
     line-height: var(--md-sys-typescale-body-small-line-height);
     font-weight: var(--md-sys-typescale-body-small-weight);
     letter-spacing: var(--md-sys-typescale-body-small-tracking);
     color: var(--md-sys-color-on-surface-variant);
}

.ct-form .form-error {
     color: var(--md-sys-color-error);
}

.ct-form .form-error:not(:empty)::before {
     content: "";
     display: inline-block;
     width: var(--md-comp-supporting-icon);
     height: var(--md-comp-supporting-icon);
     margin-inline-end: var(--md-sys-space-50);
     vertical-align: top;
     background-color: currentColor;
     -webkit-mask: url('/wwwroot/icons/error.svg') center / contain no-repeat;
     mask: url('/wwwroot/icons/error.svg') center / contain no-repeat;
}

.ct-form .form-group:has(.form-error:not(:empty)) .form-hint {
     display: none;
}

/* Empty errors stay rendered so screen readers announce the alert when a message appears;
   the negative margin cancels the form-group gap. */
.ct-form .form-error:empty {
     margin-top: calc(-1 * var(--md-sys-space-50));
}

.ct-form .field:has([aria-invalid="true"]) :is(.form-input, .form-textarea) {
     border-color: var(--md-sys-color-error);
}

.ct-form .field:has([aria-invalid="true"]:focus) :is(.form-input, .form-textarea) {
     box-shadow: inset 0 0 0 calc(var(--md-comp-field-focus-outline-width) - var(--md-comp-hairline-width)) var(--md-sys-color-error);
}

.ct-form .field:has([aria-invalid="true"]) .form-label {
     color: var(--md-sys-color-error);
}

/* While someone fixes a field in error, the error steps back until they leave it */
.ct-form .form-group.is-correcting .form-error {
     visibility: hidden;
}

.ct-form .form-group.is-correcting .field :is(.form-input, .form-textarea) {
     border-color: var(--md-sys-color-primary);
     box-shadow: inset 0 0 0 calc(var(--md-comp-field-focus-outline-width) - var(--md-comp-hairline-width)) var(--md-sys-color-primary);
}

.ct-form .form-group.is-correcting .form-label {
     color: var(--md-sys-color-primary);
}

.ct-form .form-actions {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: var(--md-sys-space-150) var(--md-sys-space-200);
     margin-top: var(--md-sys-space-50);
}

/* Contact details card */
.ct-details .cp-card__title + .cp-card__text {
     margin-bottom: var(--md-sys-space-100);
}

/* Each detail is a linked row: the state layer (states.css) on a small-cornered row that reaches
   8px past its content */
.ct-detail {
     display: flex;
     gap: var(--md-sys-space-200);
     margin-inline: calc(-1 * var(--md-sys-space-100));
     padding: var(--md-sys-space-200) var(--md-sys-space-100);
     border-top: var(--md-comp-hairline-width) solid var(--md-sys-color-outline-variant);
     border-radius: var(--md-sys-shape-corner-small);
     text-decoration: none;
     color: inherit;
}

.ct-detail:first-of-type {
     border-top: 0;
}

.ct-detail svg {
     flex-shrink: 0;
     width: var(--md-comp-icon-medium);
     height: var(--md-comp-icon-medium);
     fill: var(--md-sys-color-tertiary);
}

.ct-detail__label {
     display: block;
     font-family: var(--md-sys-typescale-label-medium-font);
     font-size: var(--md-sys-typescale-label-medium-size);
     line-height: var(--md-sys-typescale-label-medium-line-height);
     font-weight: var(--md-sys-typescale-label-medium-weight);
     letter-spacing: var(--md-sys-typescale-label-medium-tracking);
     color: var(--md-sys-color-on-surface-variant);
}

.ct-detail__value {
     display: block;
     margin-top: var(--md-sys-space-25);
     font-family: var(--md-sys-typescale-title-medium-font);
     font-size: var(--md-sys-typescale-title-medium-size);
     line-height: var(--md-sys-typescale-title-medium-line-height);
     font-weight: var(--md-sys-typescale-title-medium-weight);
     letter-spacing: var(--md-sys-typescale-title-medium-tracking);
     color: var(--md-sys-color-on-surface);
     overflow-wrap: anywhere;
}

.ct-detail__hint {
     display: block;
     margin-top: var(--md-sys-space-25);
     font-family: var(--md-sys-typescale-body-small-font);
     font-size: var(--md-sys-typescale-body-small-size);
     line-height: var(--md-sys-typescale-body-small-line-height);
     font-weight: var(--md-sys-typescale-body-small-weight);
     letter-spacing: var(--md-sys-typescale-body-small-tracking);
     color: var(--md-sys-color-on-surface-variant);
}

@media (max-width: 839px) {
     .ct-layout {
          grid-template-columns: minmax(0, 1fr);
          grid-template-areas: "details" "form";
          gap: var(--md-sys-space-300);
     }

     .ct-details {
          position: static;
     }
}

/* ===================================================================
   CASH CALCULATOR
   Styles <cascade-calculator> (components/cascade-calculator.js). The script
   shows one .step-content at a time (inline display + aria-hidden), sets the
   progress's data-step, toggles .hidden-initially, and checks the fields as
   the contact form does (aria-invalid, .is-correcting).
   =================================================================== */

/* The calculator's card is outlined: it holds the form and its actions */
.calc-card {
     padding: var(--md-comp-card-padding);
     background: var(--md-sys-color-surface);
     border: var(--md-comp-hairline-width) solid var(--md-sys-color-outline-variant);
     border-radius: var(--md-sys-shape-corner-medium);
}

cascade-calculator {
     display: block;
}

/* ---------- Progress (style guide, Communication; DEV-233) ----------
   The step as Admin's eyebrow ("Step 2 of 4 · Your results") over Admin's determinate wavy
   linear indicator: a primary wave for the steps reached, a 4px gap, then the secondary
   container track with its stop indicator. The wave holds still: it marks a place in the
   form rather than a wait, so it doesn't move for the whole visit. The script sets the
   step; before it runs the bar shows step 1. */

.calc-progress {
     display: block;
     margin-bottom: var(--md-sys-space-400);
}

main.content-page .calc-progress__label {
     display: block;
     margin-bottom: var(--md-sys-space-100);
     font-family: var(--md-sys-typescale-label-medium-font);
     font-size: var(--md-sys-typescale-label-medium-size);
     line-height: var(--md-sys-typescale-label-medium-line-height);
     font-weight: var(--md-sys-typescale-label-medium-weight);
     letter-spacing: var(--md-sys-typescale-label-medium-tracking);
     color: var(--md-sys-color-on-surface-variant);
}

.wavy-progress__bar {
     position: relative;
     display: flex;
     align-items: center;
     gap: var(--md-sys-space-50);
     height: var(--md-comp-progress-wave-height);
     overflow: hidden;
}

.wavy-progress__active {
     flex: 0 0 auto;
     width: calc(25% - var(--md-sys-space-50));
     height: var(--md-comp-progress-wave-height);
     background: var(--md-sys-color-primary);
     -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10'%3E%3Cpath d='M0 5 Q10 1 20 5 T40 5' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / var(--md-comp-progress-wave-length) var(--md-comp-progress-wave-height);
     mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='10'%3E%3Cpath d='M0 5 Q10 1 20 5 T40 5' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / var(--md-comp-progress-wave-length) var(--md-comp-progress-wave-height);
     transition: width var(--md-sys-motion-spring-standard-default-spatial);
}

.calc-progress[data-step="2"] .wavy-progress__active { width: calc(50% - var(--md-sys-space-50)); }
.calc-progress[data-step="3"] .wavy-progress__active { width: calc(75% - var(--md-sys-space-50)); }
.calc-progress[data-step="4"] .wavy-progress__active { width: calc(100% - var(--md-sys-space-50)); }

.wavy-progress__track {
     position: relative;
     flex: 1 1 auto;
     height: var(--md-comp-progress-track-height);
     border-radius: var(--md-sys-shape-corner-full);
     background: var(--md-sys-color-secondary-container);
}

.wavy-progress__track::after {
     content: "";
     position: absolute;
     inset-block: 0;
     inset-inline-end: 0;
     width: var(--md-comp-progress-track-height);
     border-radius: var(--md-sys-shape-corner-full);
     background: var(--md-sys-color-primary);
}

/* ---------- Inline alerts (style guide, Communication; Admin's InlineAlert) ----------
   The static colours' container roles with no outline: a filled 20px icon in the role's
   colour on the first line, the message in on-container text, 12px corners, 12 by 16px padding. */

.inline-alert {
     display: flex;
     align-items: flex-start;
     gap: var(--md-sys-space-150);
     padding: var(--md-sys-space-150) var(--md-sys-space-200);
     border-radius: var(--md-sys-shape-corner-medium);
     font-family: var(--md-sys-typescale-body-medium-font);
     font-size: var(--md-sys-typescale-body-medium-size);
     line-height: var(--md-sys-typescale-body-medium-line-height);
     font-weight: var(--md-sys-typescale-body-medium-weight);
     letter-spacing: var(--md-sys-typescale-body-medium-tracking);
}

.inline-alert[hidden] {
     display: none;
}

.inline-alert__icon {
     flex: 0 0 auto;
     width: var(--md-comp-icon-small);
     height: var(--md-comp-icon-small);
     fill: currentColor;
}

.inline-alert__body {
     flex: 1 1 auto;
     min-width: 0;
     overflow-wrap: anywhere;
}

main.content-page .inline-alert__body > * {
     margin: 0;
}

main.content-page .inline-alert__body > * + * {
     margin-top: var(--md-sys-space-50);
}

.inline-alert a {
     color: inherit;
     font-weight: var(--md-sys-typescale-emphasized-weight);
     text-decoration: underline;
}

.inline-alert--error {
     background: var(--md-sys-color-error-container);
     color: var(--md-sys-color-on-error-container);
}

.inline-alert--info {
     background: var(--md-sys-color-info-container);
     color: var(--md-sys-color-on-info-container);
}

.inline-alert--success {
     background: var(--md-sys-color-success-container);
     color: var(--md-sys-color-on-success-container);
}

.inline-alert--error .inline-alert__icon { color: var(--md-sys-color-error); }
.inline-alert--info .inline-alert__icon { color: var(--md-sys-color-info); }
.inline-alert--success .inline-alert__icon { color: var(--md-sys-color-success); }

/* ---------- Loading indicator (style guide, Communication; Admin's LoadingIndicator) ----------
   M3 Expressive's shape morph, small (20px, in the label's colour) for busy buttons: the
   shape cycles through the shape library (soft burst, cookie 9, pentagon, pill, sunny,
   cookie 4, oval) on the expressive spring while it turns, each the same 48-point polygon so
   the browser can interpolate. It appears only after 200ms, so a fast reply never flickers one. */

.loading-indicator {
     place-items: center;
     flex: 0 0 auto;
     width: var(--md-comp-button-s-icon);
     height: var(--md-comp-button-s-icon);
     color: inherit;
     animation: cascade-appear-after-wait 1ms linear 200ms both;
}

.loading-indicator__shape {
     width: 100%;
     height: 100%;
     background: currentColor;
     animation:
          loading-indicator-morph 4.55s cubic-bezier(0.42, 1.67, 0.21, 0.9) infinite,
          loading-indicator-turn 4.55s linear infinite;
}

@keyframes cascade-appear-after-wait {
     from { opacity: 0; }
     to { opacity: 1; }
}

@keyframes loading-indicator-turn {
     to { transform: rotate(1turn); }
}

@keyframes loading-indicator-morph {
     0.00% { clip-path: polygon(98.00% 50.00%, 94.38% 55.84%, 88.50% 60.32%, 87.46% 65.52%, 89.68% 72.91%, 87.96% 79.13%, 80.86% 80.86%, 74.00% 81.28%, 70.73% 85.90%, 67.88% 93.17%, 62.27% 95.80%, 55.55% 92.14%, 50.00% 89.27%, 44.45% 92.14%, 37.73% 95.80%, 32.12% 93.17%, 29.27% 85.90%, 26.00% 81.28%, 19.14% 80.86%, 12.04% 79.13%, 10.32% 72.91%, 12.54% 65.52%, 11.50% 60.32%, 5.62% 55.84%, 2.00% 50.00%, 5.62% 44.16%, 11.50% 39.68%, 12.54% 34.48%, 10.32% 27.09%, 12.04% 20.87%, 19.14% 19.14%, 26.00% 18.72%, 29.27% 14.10%, 32.12% 6.83%, 37.73% 4.20%, 44.45% 7.86%, 50.00% 10.73%, 55.55% 7.86%, 62.27% 4.20%, 67.88% 6.83%, 70.73% 14.10%, 74.00% 18.72%, 80.86% 19.14%, 87.96% 20.87%, 89.68% 27.09%, 87.46% 34.48%, 88.50% 39.68%, 94.38% 44.16%); } /* soft-burst */
     14.29% { clip-path: polygon(98.00% 50.00%, 95.67% 56.01%, 91.19% 61.04%, 88.76% 66.06%, 88.85% 72.43%, 87.89% 79.08%, 83.29% 83.29%, 76.58% 84.64%, 70.86% 86.13%, 66.71% 90.33%, 62.19% 95.48%, 56.23% 97.35%, 50.00% 94.86%, 44.52% 91.60%, 38.96% 91.19%, 32.37% 92.56%, 26.00% 91.57%, 21.96% 86.54%, 19.85% 80.15%, 16.71% 75.54%, 11.15% 72.43%, 5.87% 68.28%, 4.52% 62.19%, 6.72% 55.70%, 8.28% 50.00%, 6.72% 44.30%, 4.52% 37.81%, 5.87% 31.72%, 11.15% 27.57%, 16.71% 24.46%, 19.85% 19.85%, 21.96% 13.46%, 26.00% 8.43%, 32.37% 7.44%, 38.96% 8.81%, 44.52% 8.40%, 50.00% 5.14%, 56.23% 2.65%, 62.19% 4.52%, 66.71% 9.67%, 70.86% 13.87%, 76.58% 15.36%, 83.29% 16.71%, 87.89% 20.92%, 88.85% 27.57%, 88.76% 33.94%, 91.19% 38.96%, 95.67% 43.99%); } /* cookie-9 */
     28.57% { clip-path: polygon(92.12% 50.00%, 90.67% 55.35%, 89.15% 60.49%, 87.49% 65.53%, 85.68% 70.60%, 83.65% 75.82%, 81.38% 81.38%, 78.78% 87.51%, 72.70% 89.33%, 66.50% 89.83%, 60.77% 90.19%, 55.32% 90.41%, 50.00% 90.48%, 44.68% 90.41%, 39.23% 90.19%, 33.50% 89.83%, 27.30% 89.33%, 21.22% 87.51%, 18.62% 81.38%, 16.35% 75.82%, 14.32% 70.60%, 12.51% 65.53%, 10.85% 60.49%, 9.33% 55.35%, 7.88% 50.00%, 6.46% 44.27%, 4.98% 37.94%, 7.51% 32.40%, 12.33% 28.25%, 16.80% 24.52%, 21.09% 21.09%, 25.35% 17.87%, 29.67% 14.79%, 34.16% 11.76%, 38.94% 8.71%, 44.14% 5.51%, 50.00% 2.00%, 55.86% 5.51%, 61.06% 8.71%, 65.84% 11.76%, 70.33% 14.79%, 74.65% 17.87%, 78.91% 21.09%, 83.20% 24.52%, 87.67% 28.25%, 92.49% 32.40%, 95.02% 37.94%, 93.54% 44.27%); } /* pentagon */
     42.86% { clip-path: polygon(98.00% 50.00%, 96.95% 56.18%, 94.06% 61.81%, 89.91% 66.53%, 85.13% 70.28%, 80.17% 73.15%, 75.29% 75.29%, 70.62% 76.87%, 66.18% 78.02%, 61.94% 78.82%, 57.87% 79.36%, 53.90% 79.66%, 50.00% 79.76%, 46.10% 79.66%, 42.13% 79.36%, 38.06% 78.82%, 33.82% 78.02%, 29.38% 76.87%, 24.71% 75.29%, 19.83% 73.15%, 14.87% 70.28%, 10.09% 66.53%, 5.94% 61.81%, 3.05% 56.18%, 2.00% 50.00%, 3.05% 43.82%, 5.94% 38.19%, 10.09% 33.47%, 14.87% 29.72%, 19.83% 26.85%, 24.71% 24.71%, 29.38% 23.13%, 33.82% 21.98%, 38.06% 21.18%, 42.13% 20.64%, 46.10% 20.34%, 50.00% 20.24%, 53.90% 20.34%, 57.87% 20.64%, 61.94% 21.18%, 66.18% 21.98%, 70.62% 23.13%, 75.29% 24.71%, 80.17% 26.85%, 85.13% 29.72%, 89.91% 33.47%, 94.06% 38.19%, 96.95% 43.82%); } /* pill */
     57.14% { clip-path: polygon(98.00% 50.00%, 96.56% 56.13%, 93.37% 61.62%, 90.53% 66.79%, 88.88% 72.45%, 87.26% 78.59%, 83.94% 83.94%, 78.59% 87.26%, 72.45% 88.88%, 66.79% 90.53%, 61.62% 93.37%, 56.13% 96.56%, 50.00% 98.00%, 43.87% 96.56%, 38.38% 93.37%, 33.21% 90.53%, 27.55% 88.88%, 21.41% 87.26%, 16.06% 83.94%, 12.74% 78.59%, 11.12% 72.45%, 9.47% 66.79%, 6.63% 61.62%, 3.44% 56.13%, 2.00% 50.00%, 3.44% 43.87%, 6.63% 38.38%, 9.47% 33.21%, 11.12% 27.55%, 12.74% 21.41%, 16.06% 16.06%, 21.41% 12.74%, 27.55% 11.12%, 33.21% 9.47%, 38.38% 6.63%, 43.87% 3.44%, 50.00% 2.00%, 56.13% 3.44%, 61.62% 6.63%, 66.79% 9.47%, 72.45% 11.12%, 78.59% 12.74%, 83.94% 16.06%, 87.26% 21.41%, 88.88% 27.55%, 90.53% 33.21%, 93.37% 38.38%, 96.56% 43.87%); } /* sunny */
     71.43% { clip-path: polygon(98.00% 50.00%, 96.86% 56.17%, 93.70% 61.71%, 89.24% 66.26%, 84.40% 69.86%, 79.91% 72.95%, 76.13% 76.13%, 72.95% 79.91%, 69.86% 84.40%, 66.26% 89.24%, 61.71% 93.70%, 56.17% 96.86%, 50.00% 98.00%, 43.83% 96.86%, 38.29% 93.70%, 33.74% 89.24%, 30.14% 84.40%, 27.05% 79.91%, 23.87% 76.13%, 20.09% 72.95%, 15.60% 69.86%, 10.76% 66.26%, 6.30% 61.71%, 3.14% 56.17%, 2.00% 50.00%, 3.14% 43.83%, 6.30% 38.29%, 10.76% 33.74%, 15.60% 30.14%, 20.09% 27.05%, 23.87% 23.87%, 27.05% 20.09%, 30.14% 15.60%, 33.74% 10.76%, 38.29% 6.30%, 43.83% 3.14%, 50.00% 2.00%, 56.17% 3.14%, 61.71% 6.30%, 66.26% 10.76%, 69.86% 15.60%, 72.95% 20.09%, 76.13% 23.87%, 79.91% 27.05%, 84.40% 30.14%, 89.24% 33.74%, 93.70% 38.29%, 96.86% 43.83%); } /* cookie-4 */
     85.71% { clip-path: polygon(98.00% 50.00%, 97.36% 56.24%, 95.51% 62.20%, 92.63% 67.66%, 88.92% 72.47%, 84.64% 76.58%, 79.99% 79.99%, 75.11% 82.73%, 70.13% 84.86%, 65.10% 86.45%, 60.06% 87.55%, 55.03% 88.19%, 50.00% 88.40%, 44.97% 88.19%, 39.94% 87.55%, 34.90% 86.45%, 29.87% 84.86%, 24.89% 82.73%, 20.01% 79.99%, 15.36% 76.58%, 11.08% 72.47%, 7.37% 67.66%, 4.49% 62.20%, 2.64% 56.24%, 2.00% 50.00%, 2.64% 43.76%, 4.49% 37.80%, 7.37% 32.34%, 11.08% 27.53%, 15.36% 23.42%, 20.01% 20.01%, 24.89% 17.27%, 29.87% 15.14%, 34.90% 13.55%, 39.94% 12.45%, 44.97% 11.81%, 50.00% 11.60%, 55.03% 11.81%, 60.06% 12.45%, 65.10% 13.55%, 70.13% 15.14%, 75.11% 17.27%, 79.99% 20.01%, 84.64% 23.42%, 88.92% 27.53%, 92.63% 32.34%, 95.51% 37.80%, 97.36% 43.76%); } /* oval */
     100% { clip-path: polygon(98.00% 50.00%, 94.38% 55.84%, 88.50% 60.32%, 87.46% 65.52%, 89.68% 72.91%, 87.96% 79.13%, 80.86% 80.86%, 74.00% 81.28%, 70.73% 85.90%, 67.88% 93.17%, 62.27% 95.80%, 55.55% 92.14%, 50.00% 89.27%, 44.45% 92.14%, 37.73% 95.80%, 32.12% 93.17%, 29.27% 85.90%, 26.00% 81.28%, 19.14% 80.86%, 12.04% 79.13%, 10.32% 72.91%, 12.54% 65.52%, 11.50% 60.32%, 5.62% 55.84%, 2.00% 50.00%, 5.62% 44.16%, 11.50% 39.68%, 12.54% 34.48%, 10.32% 27.09%, 12.04% 20.87%, 19.14% 19.14%, 26.00% 18.72%, 29.27% 14.10%, 32.12% 6.83%, 37.73% 4.20%, 44.45% 7.86%, 50.00% 10.73%, 55.55% 7.86%, 62.27% 4.20%, 67.88% 6.83%, 70.73% 14.10%, 74.00% 18.72%, 80.86% 19.14%, 87.96% 20.87%, 89.68% 27.09%, 87.46% 34.48%, 88.50% 39.68%, 94.38% 44.16%); } /* soft-burst */
}

/* Reduced motion: a still circle (reset.css stops the animation) */
@media (prefers-reduced-motion: reduce) {
     .loading-indicator__shape {
          clip-path: circle(48%);
     }
}

html[data-motion="reduced"] .loading-indicator__shape {
     clip-path: circle(48%);
}

/* ---------- Steps ---------- */

cascade-calculator .step-content {
     display: flex;
     flex-direction: column;
     gap: var(--md-sys-space-300);
}

main.content-page cascade-calculator .calc-step-heading {
     font-family: var(--md-sys-typescale-title-large-font);
     font-size: var(--md-sys-typescale-title-large-size);
     line-height: var(--md-sys-typescale-title-large-line-height);
     font-weight: var(--md-sys-typescale-title-large-weight);
     letter-spacing: var(--md-sys-typescale-title-large-tracking);
     color: var(--md-sys-color-on-surface);
}

main.content-page cascade-calculator .calc-step-intro {
     margin-top: calc(-1 * var(--md-sys-space-200));
     font-family: var(--md-sys-typescale-body-medium-font);
     font-size: var(--md-sys-typescale-body-medium-size);
     line-height: var(--md-sys-typescale-body-medium-line-height);
     font-weight: var(--md-sys-typescale-body-medium-weight);
     letter-spacing: var(--md-sys-typescale-body-medium-tracking);
     color: var(--md-sys-color-on-surface-variant);
}

cascade-calculator .hidden-initially {
     display: none !important;
}

.ct-form select.form-input {
     appearance: none;
     padding-right: var(--md-sys-space-500);
     background-image: linear-gradient(45deg, transparent 50%, var(--md-sys-color-on-surface-variant) 50%), linear-gradient(135deg, var(--md-sys-color-on-surface-variant) 50%, transparent 50%);
     background-position: calc(100% - 1.25rem) 50%, calc(100% - 0.875rem) 50%;  /* one-off: the select arrow */
     background-size: 6px 6px, 6px 6px;  /* one-off: the select arrow */
     background-repeat: no-repeat;
}

.ct-form .form-hint a {
     color: var(--md-sys-color-primary);
     font-weight: var(--md-sys-typescale-emphasized-weight);
     text-decoration: underline;
     text-underline-offset: 2px;  /* one-off: link underline */
}

/* Buttons: Back on the left, the step's primary action on the right */
.calc-actions {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     gap: var(--md-sys-space-150);
}

.calc-actions--end {
     justify-content: flex-end;
}

cascade-calculator .cp-btn + .cp-btn {
     margin-top: 0;
}

/* ---------- Step 2: results ---------- */

.calc-compare {
     display: grid;
     grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
     align-items: stretch;
     gap: var(--md-sys-space-200);
}

.calc-compare__arrow {
     align-self: center;
     width: var(--md-comp-icon-medium);
     height: var(--md-comp-icon-medium);
     fill: var(--md-sys-color-tertiary);
}

/* Filled cards: grouped figures, Cascade's on tertiary container */
cascade-calculator .stat-box {
     display: flex;
     flex-direction: column;
     gap: var(--md-sys-space-50);
     padding: var(--md-comp-card-padding);
     border-radius: var(--md-sys-shape-corner-medium);
     background: var(--md-sys-color-surface-container);
}

cascade-calculator .stat-box.good {
     background: var(--md-sys-color-tertiary-container);
}

cascade-calculator .stat-box.good :is(.percentage, .value, .sub) {
     color: var(--md-sys-color-on-tertiary-container);
}

cascade-calculator .stat-box .label {
     font-family: var(--md-sys-typescale-label-medium-font);
     font-size: var(--md-sys-typescale-label-medium-size);
     line-height: var(--md-sys-typescale-label-medium-line-height);
     font-weight: var(--md-sys-typescale-label-medium-weight);
     letter-spacing: var(--md-sys-typescale-label-medium-tracking);
     color: var(--md-sys-color-on-surface-variant);
}

cascade-calculator .stat-box.good .label {
     color: var(--md-sys-color-on-tertiary-container);
}

cascade-calculator .stat-box .percentage {
     font-family: var(--md-sys-typescale-title-medium-font);
     font-size: var(--md-sys-typescale-title-medium-size);
     line-height: var(--md-sys-typescale-title-medium-line-height);
     font-weight: var(--md-sys-typescale-title-medium-weight);
     letter-spacing: var(--md-sys-typescale-title-medium-tracking);
     color: var(--md-sys-color-on-surface-variant);
}

cascade-calculator .stat-box .percentage::after {
     content: "%";
}

cascade-calculator .stat-box .value {
     font-family: var(--md-sys-typescale-headline-large-font);
     font-size: var(--md-sys-typescale-headline-large-size);
     line-height: var(--md-sys-typescale-headline-large-line-height);
     font-weight: var(--md-sys-typescale-headline-large-weight);
     letter-spacing: var(--md-sys-typescale-headline-large-tracking);
     color: var(--md-sys-color-on-surface);
}

cascade-calculator .stat-box .sub {
     font-family: var(--md-sys-typescale-body-small-font);
     font-size: var(--md-sys-typescale-body-small-size);
     line-height: var(--md-sys-typescale-body-small-line-height);
     font-weight: var(--md-sys-typescale-body-small-weight);
     letter-spacing: var(--md-sys-typescale-body-small-tracking);
     color: var(--md-sys-color-on-surface-variant);
}

.calc-table-wrap {
     overflow-x: auto;
     border: var(--md-comp-hairline-width) solid var(--md-sys-color-outline-variant);
     border-radius: var(--md-sys-shape-corner-medium);
}

cascade-calculator .projection-table {
     width: 100%;
     border-collapse: collapse;
     font-family: var(--md-sys-typescale-body-medium-font);
     font-size: var(--md-sys-typescale-body-medium-size);
     line-height: var(--md-sys-typescale-body-medium-line-height);
     font-weight: var(--md-sys-typescale-body-medium-weight);
     letter-spacing: var(--md-sys-typescale-body-medium-tracking);
     font-variant-numeric: tabular-nums;
}

cascade-calculator .projection-table caption {
     padding: var(--md-sys-space-200) var(--md-sys-space-200) var(--md-sys-space-50);
     caption-side: top;
     text-align: left;
     font-family: var(--md-sys-typescale-title-medium-font);
     font-size: var(--md-sys-typescale-title-medium-size);
     line-height: var(--md-sys-typescale-title-medium-line-height);
     font-weight: var(--md-sys-typescale-title-medium-weight);
     letter-spacing: var(--md-sys-typescale-title-medium-tracking);
     color: var(--md-sys-color-on-surface);
}

cascade-calculator .projection-table th,
cascade-calculator .projection-table td {
     padding: var(--md-sys-space-150) var(--md-sys-space-200);
     text-align: right;
     border-bottom: var(--md-comp-hairline-width) solid var(--md-sys-color-outline-variant);
     white-space: nowrap;
}

cascade-calculator .projection-table th:first-child,
cascade-calculator .projection-table td:first-child {
     text-align: left;
}

cascade-calculator .projection-table th {
     font-family: var(--md-sys-typescale-label-large-font);
     font-size: var(--md-sys-typescale-label-large-size);
     line-height: var(--md-sys-typescale-label-large-line-height);
     font-weight: var(--md-sys-typescale-label-large-weight);
     letter-spacing: var(--md-sys-typescale-label-large-tracking);
     color: var(--md-sys-color-on-surface-variant);
}

cascade-calculator .projection-table tbody tr:last-child td {
     border-bottom: 0;
}

cascade-calculator .projection-table td.highlight {
     font-weight: var(--md-sys-typescale-emphasized-weight);
     color: var(--md-sys-color-on-surface);
}

cascade-calculator .projection-table td.gain {
     font-weight: var(--md-sys-typescale-emphasized-weight);
     color: var(--md-sys-color-success);
}

cascade-calculator .total-gain-banner {
     padding: var(--md-comp-card-padding);
     background: var(--md-sys-color-primary-container);
     border-radius: var(--md-sys-shape-corner-medium);
     font-family: var(--md-sys-typescale-body-large-font);
     font-size: var(--md-sys-typescale-body-large-size);
     line-height: var(--md-sys-typescale-body-large-line-height);
     font-weight: var(--md-sys-typescale-body-large-weight);
     letter-spacing: var(--md-sys-typescale-body-large-tracking);
     color: var(--md-sys-color-on-primary-container);
}

cascade-calculator .total-gain-banner strong {
     display: block;
     margin: var(--md-sys-space-25) 0;
     font-family: var(--md-sys-typescale-headline-large-font);
     font-size: var(--md-sys-typescale-headline-large-size);
     line-height: var(--md-sys-typescale-headline-large-line-height);
     font-weight: var(--md-sys-typescale-headline-large-weight);
     letter-spacing: var(--md-sys-typescale-headline-large-tracking);
     color: var(--md-sys-color-on-primary-container);
}

/* ---------- Step 4: done ---------- */

main.content-page .calc-call {
     font-family: var(--md-sys-typescale-body-medium-font);
     font-size: var(--md-sys-typescale-body-medium-size);
     line-height: var(--md-sys-typescale-body-medium-line-height);
     font-weight: var(--md-sys-typescale-body-medium-weight);
     letter-spacing: var(--md-sys-typescale-body-medium-tracking);
     color: var(--md-sys-color-on-surface-variant);
}

.calc-call a {
     display: inline-block;
     margin-top: var(--md-sys-space-50);
     font-family: var(--md-sys-typescale-title-large-font);
     font-size: var(--md-sys-typescale-title-large-size);
     line-height: var(--md-sys-typescale-title-large-line-height);
     font-weight: var(--md-sys-typescale-title-large-weight);
     letter-spacing: var(--md-sys-typescale-title-large-tracking);
     color: var(--md-sys-color-on-surface);
     text-decoration: none;
}

.calc-call a:hover {
     text-decoration: underline;
}

/* ---------- Explainer dialog (style guide, Containment; Admin's containment.css; DEV-233) ----------
   A basic dialog: 280 to 560px, 28px corners, surface container high at level 3 over the
   32% scrim with its blur. Headline small; 24px padding, 16px under the headline; the text
   action trails. It scrolls, so dividers separate the content from the headline and action
   (M3's scrolling dialog). It expands along the vertical axis with a brief fade, and
   contracts with a shorter one, as Admin's dialogs (Firefox closes without the exit). */

cascade-calculator dialog {
     width: min(var(--md-comp-dialog-max-width), calc(100vw - 2 * var(--md-sys-space-200)));
     min-width: min(var(--md-comp-dialog-min-width), calc(100vw - 2 * var(--md-sys-space-200)));
     max-height: calc(100vh - 2 * var(--md-sys-space-400));
     max-height: calc(100dvh - 2 * var(--md-sys-space-400)); /* fits above iOS Safari's toolbars */
     overflow: hidden;
     padding: 0;
     border: 0;
     border-radius: var(--md-sys-shape-corner-extra-large);
     background: var(--md-sys-color-surface-container-high);
     color: var(--md-sys-color-on-surface);
     box-shadow: var(--md-sys-elevation-level3);
     transform-origin: top center;
     opacity: 0;
     transform: scaleY(0.94);
     transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate),
                 transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-accelerate),
                 overlay var(--md-sys-motion-duration-short4) allow-discrete,
                 display var(--md-sys-motion-duration-short4) allow-discrete;
}

cascade-calculator dialog[open] {
     opacity: 1;
     transform: none;
     animation: cascade-dialog-in var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-emphasized-decelerate) both;
}

cascade-calculator dialog::backdrop {
     background: var(--md-sys-color-scrim-overlay);
     -webkit-backdrop-filter: blur(var(--md-comp-scrim-blur));
     backdrop-filter: blur(var(--md-comp-scrim-blur));
     opacity: 0;
     transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard-accelerate),
                 overlay var(--md-sys-motion-duration-short4) allow-discrete,
                 display var(--md-sys-motion-duration-short4) allow-discrete;
}

cascade-calculator dialog[open]::backdrop {
     opacity: 1;
     transition-duration: var(--md-sys-motion-duration-short3);
     transition-timing-function: var(--md-sys-motion-easing-standard-decelerate);
}

@starting-style {
     cascade-calculator dialog[open]::backdrop {
          opacity: 0;
     }
}

@keyframes cascade-dialog-in {
     from { opacity: 0; transform: scaleY(0.88); }
     30% { opacity: 1; }
     to { opacity: 1; transform: scaleY(1); }
}

/* Reduced motion (DEV-240): the dialog fades in place, as the apps' dialogs; reset.css cuts
   every other transition short */
@media (prefers-reduced-motion: reduce) {
     cascade-calculator dialog,
     cascade-calculator dialog[open] {
          transform: none;
          animation: none;
          transition-property: opacity, overlay, display;
          transition-duration: var(--md-sys-motion-duration-short3) !important;
          transition-timing-function: linear;
          transition-behavior: allow-discrete;
     }

     @starting-style {
          cascade-calculator dialog[open] {
               opacity: 0;
          }
     }
}

html[data-motion="reduced"] cascade-calculator dialog,
html[data-motion="reduced"] cascade-calculator dialog[open] {
     transform: none;
     animation: none;
     transition-property: opacity, overlay, display;
     transition-duration: var(--md-sys-motion-duration-short3) !important;
     transition-timing-function: linear;
     transition-behavior: allow-discrete;
}

@starting-style {
     html[data-motion="reduced"] cascade-calculator dialog[open] {
          opacity: 0;
     }
}

cascade-calculator .modal-content {
     display: flex;
     flex-direction: column;
     max-height: calc(100vh - 2 * var(--md-sys-space-400));
     max-height: calc(100dvh - 2 * var(--md-sys-space-400));
}

main.content-page cascade-calculator .modal-title {
     flex-shrink: 0;
     padding: var(--md-sys-space-300) var(--md-sys-space-300) var(--md-sys-space-200);
     border-bottom: var(--md-comp-hairline-width) solid var(--md-sys-color-outline-variant);
     font-family: var(--md-sys-typescale-headline-small-font);
     font-size: var(--md-sys-typescale-headline-small-size);
     line-height: var(--md-sys-typescale-headline-small-line-height);
     font-weight: var(--md-sys-typescale-headline-small-weight);
     letter-spacing: var(--md-sys-typescale-headline-small-tracking);
     color: var(--md-sys-color-on-surface);
}

cascade-calculator .modal-body {
     overflow-y: auto;
     padding: var(--md-sys-space-200) var(--md-sys-space-300);
     font-family: var(--md-sys-typescale-body-large-font);
     font-size: var(--md-sys-typescale-body-large-size);
     line-height: var(--md-sys-typescale-body-large-line-height);
     font-weight: var(--md-sys-typescale-body-large-weight);
     letter-spacing: var(--md-sys-typescale-body-large-tracking);
}

main.content-page cascade-calculator .modal-body > * + * {
     margin-top: var(--md-sys-space-200);
}

main.content-page cascade-calculator .modal-body h3 {
     margin-top: var(--md-sys-space-400);
     font-family: var(--md-sys-typescale-title-medium-font);
     font-size: var(--md-sys-typescale-title-medium-size);
     line-height: var(--md-sys-typescale-title-medium-line-height);
     font-weight: var(--md-sys-typescale-title-medium-weight);
     letter-spacing: var(--md-sys-typescale-title-medium-tracking);
     color: var(--md-sys-color-on-surface);
}

main.content-page cascade-calculator .modal-body h3:first-child {
     margin-top: 0;
}

cascade-calculator .modal-table-wrap {
     overflow-x: auto;
}

cascade-calculator .modal-table {
     width: 100%;
     border-collapse: collapse;
     font-family: var(--md-sys-typescale-body-medium-font);
     font-size: var(--md-sys-typescale-body-medium-size);
     line-height: var(--md-sys-typescale-body-medium-line-height);
     font-weight: var(--md-sys-typescale-body-medium-weight);
     letter-spacing: var(--md-sys-typescale-body-medium-tracking);
}

cascade-calculator .modal-table th,
cascade-calculator .modal-table td {
     padding: var(--md-sys-space-125) var(--md-sys-space-150);
     border-bottom: var(--md-comp-hairline-width) solid var(--md-sys-color-outline-variant);
     text-align: left;
}

cascade-calculator .modal-table thead th {
     font-family: var(--md-sys-typescale-label-large-font);
     font-size: var(--md-sys-typescale-label-large-size);
     line-height: var(--md-sys-typescale-label-large-line-height);
     font-weight: var(--md-sys-typescale-label-large-weight);
     letter-spacing: var(--md-sys-typescale-label-large-tracking);
     color: var(--md-sys-color-on-surface-variant);
     background: var(--md-sys-color-surface-container-highest);
}

cascade-calculator .modal-table tbody th {
     font-weight: var(--md-sys-typescale-emphasized-weight);
     color: var(--md-sys-color-on-surface);
}

cascade-calculator .modal-code {
     display: block;
     padding: var(--md-sys-space-150) var(--md-sys-space-200);
     background: var(--md-sys-color-surface-container-highest);
     border-radius: var(--md-sys-shape-corner-small);
     font-family: ui-monospace, Menlo, Consolas, monospace;
     font-size: var(--md-sys-typescale-body-medium-size);
     line-height: var(--md-sys-typescale-body-medium-line-height);
     font-weight: var(--md-sys-typescale-body-medium-weight);
     letter-spacing: var(--md-sys-typescale-body-medium-tracking);
     color: var(--md-sys-color-on-surface);
}

main.content-page cascade-calculator .modal-source {
     font-family: var(--md-sys-typescale-body-small-font);
     font-size: var(--md-sys-typescale-body-small-size);
     line-height: var(--md-sys-typescale-body-small-line-height);
     font-weight: var(--md-sys-typescale-body-small-weight);
     letter-spacing: var(--md-sys-typescale-body-small-tracking);
}

cascade-calculator .modal-body a {
     color: var(--md-sys-color-primary);
     text-decoration: underline;
     text-underline-offset: 2px;  /* one-off: link underline */
}

cascade-calculator .modal-sources {
     margin-top: var(--md-sys-space-400);
     padding-top: var(--md-sys-space-250);
     border-top: var(--md-comp-hairline-width) solid var(--md-sys-color-outline-variant);
     font-family: var(--md-sys-typescale-body-medium-font);
     font-size: var(--md-sys-typescale-body-medium-size);
     line-height: var(--md-sys-typescale-body-medium-line-height);
     font-weight: var(--md-sys-typescale-body-medium-weight);
     letter-spacing: var(--md-sys-typescale-body-medium-tracking);
}

cascade-calculator .modal-sources > * + * {
     margin-top: var(--md-sys-space-150);
}

cascade-calculator .modal-footer {
     flex-shrink: 0;
     display: flex;
     justify-content: flex-end;
     gap: var(--md-sys-space-100);
     padding: var(--md-sys-space-300);
     border-top: var(--md-comp-hairline-width) solid var(--md-sys-color-outline-variant);
}

/* ---------- Calculator responsive ---------- */

@media (max-width: 599px) {
     .calc-compare {
          grid-template-columns: minmax(0, 1fr);
     }

     .calc-compare__arrow {
          justify-self: center;
          transform: rotate(90deg);
     }

     cascade-calculator .projection-table th,
     cascade-calculator .projection-table td {
          padding: var(--md-sys-space-125);
     }

     .calc-actions .cp-btn {
          flex: 1 1 auto;
     }
}