/*
|--------------------------------------------------------------------------
| PAGES — styles that belong to one page, or to one page-specific block
|--------------------------------------------------------------------------
|
| WHAT THIS FILE IS
|   Anything that only appears in a single place lives here, so components.css
|   stays limited to the pieces that are genuinely reused. Each block below is
|   labelled with the page or template file it belongs to, so you can jump
|   straight to the rules for the page you are editing.
|
| LOAD ORDER (set in includes/head.php — do not reorder)
|   variables → base → layout → components → pages → responsive → print
|
| MOBILE FIRST
|   Everything here is written for a narrow screen first. The multi-column
|   layouts are switched on in responsive.css at 768px / 1024px. If a block
|   looks stacked on desktop, the rule you want is probably in that file.
|
| SAFE TO EDIT
|   All of it. Colours and sizes come from variables.css; keep using the
|   var(--token) names rather than typing hex codes or pixel values.
*/


/*
|--------------------------------------------------------------------------
| 1. HOME — hero  (pages/home.php)
|--------------------------------------------------------------------------
| The hero is a two-part layout: the pitch on the left, the "IT in a box"
| summary card on the right. On phones the card drops underneath the copy.
*/

.home-hero {
    background:
        radial-gradient(60rem 32rem at 82% -12%, var(--blue-tint) 0%, transparent 62%),
        linear-gradient(180deg, var(--surface) 0%, var(--canvas) 100%);
    border-bottom: 1px solid var(--line);
}

.hero-grid {
    display: grid;
    gap: var(--space-7);
    align-items: center;
}

.hero-copy {
    max-width: 40ch;
}

/* The coloured half of the headline. A flat colour, not a gradient — the
   brand does not use gradient text anywhere. */
.accent {
    color: var(--blue);
}

/* --- The "IT in a box" card ------------------------------------------- */

.box-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-float);
    padding: var(--space-5);
    display: grid;
    gap: var(--space-5);
    align-content: start;
}

.box-card-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.box-card-head img {
    flex: none;
    border-radius: var(--r-sm);
}

.box-card-title {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--ink);
    line-height: var(--lh-heading);
}

.box-card-sub {
    font-size: var(--fs-sm);
    color: var(--slate-soft);
}

.box-list {
    display: grid;
    gap: var(--space-3);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding-block: var(--space-5);
}

.box-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--fs-sm);
    color: var(--slate);
}

.box-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
}

.box-price {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--ink);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-display);
}

.box-price-unit {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--slate-soft);
    letter-spacing: normal;
    margin-left: 0.15em;
}


/*
|--------------------------------------------------------------------------
| 2. HOME — who we look after  (pages/home.php)
|--------------------------------------------------------------------------
| A quiet band of industry labels between the hero and the service grid.
*/

.audience-strip {
    padding-block: var(--space-7);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.audience-strip .eyebrow {
    margin-bottom: var(--space-4);
}

.audience-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
}

.audience-list li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--slate);
}

.audience-list .icon {
    color: var(--blue);
}


/*
|--------------------------------------------------------------------------
| 3. SHARED — tinted section wrapper  (components/service-body.php)
|--------------------------------------------------------------------------
| Some components render their own <section class="section">. When one of
| those needs the alternate background, it gets wrapped in this div instead
| of the component learning about page context.
*/

.section-alt-wrap {
    background: var(--canvas);
    border-block: 1px solid var(--line);
}

.section-alt-wrap > .section {
    background: transparent;
    border: 0;
}

/* Component-owned sections. Named so a page can target them if it ever has
   to; by default they simply inherit the standard section rhythm. */
.feature-section,
.faq-section,
.pledge-section {
    background: transparent;
}

.pledge-copy,
.cta-copy,
.deliverable-copy {
    color: var(--slate);
    line-height: var(--lh-body);
}


/*
|--------------------------------------------------------------------------
| 4. SERVICES INDEX — the eight service rows  (pages/services.php)
|--------------------------------------------------------------------------
| Each row is a card split into the pitch and a list of child-service chips.
*/

.service-rows,
.study-rows {
    display: grid;
    gap: var(--space-5);
}

.service-row {
    display: grid;
    gap: var(--space-5);
}

.service-row-main {
    display: grid;
    gap: var(--space-3);
    align-content: start;
}

.service-row-title {
    font-size: var(--fs-md);
    font-weight: 650;
    line-height: var(--lh-heading);
    color: var(--ink);
}

.service-row-title a {
    color: inherit;
    text-decoration: none;
}

.service-row-title a:hover {
    color: var(--blue);
}

.service-row-headline {
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--blue);
}

.service-row-summary {
    color: var(--slate);
    line-height: var(--lh-body);
}

.service-row-main .btn {
    justify-self: start;
    margin-top: var(--space-2);
}

.service-row-aside {
    display: grid;
    gap: var(--space-3);
    align-content: start;
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
}


/*
|--------------------------------------------------------------------------
| 5. CASE STUDIES INDEX — study rows  (pages/case-studies.php)
|--------------------------------------------------------------------------
*/

.study-row {
    display: grid;
    gap: var(--space-5);
}

.study-row-main {
    display: grid;
    gap: var(--space-3);
    align-content: start;
}

.study-row-title {
    font-size: var(--fs-md);
    font-weight: 650;
    line-height: var(--lh-heading);
    color: var(--ink);
}

.study-row-title a {
    color: inherit;
    text-decoration: none;
}

.study-row-title a:hover {
    color: var(--blue);
}

.study-row-excerpt {
    color: var(--slate);
    line-height: var(--lh-body);
}

.study-row-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: var(--space-4);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
}


/*
|--------------------------------------------------------------------------
| 6. ARTICLE PAGES — case study and resource  (pages/case-study.php,
|    pages/resource.php)
|--------------------------------------------------------------------------
| .article-layout itself is in layout.css; these are the trimmings.
*/

.article-meta {
    margin-bottom: var(--space-5);
}

.article-main {
    min-width: 0;
}

.article-actions {
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
}

.article-aside {
    display: grid;
    gap: var(--space-5);
    align-content: start;
}

.aside-list {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.aside-list a {
    display: grid;
    gap: 0.15rem;
    text-decoration: none;
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--line);
}

.aside-list li:last-child a {
    padding-bottom: 0;
    border-bottom: 0;
}

.aside-kicker {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--slate-soft);
}

.aside-title {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--ink);
    line-height: var(--lh-heading);
}

.aside-list a:hover .aside-title {
    color: var(--blue);
}


/*
|--------------------------------------------------------------------------
| 7. RESOURCES INDEX — the featured article  (pages/resources.php)
|--------------------------------------------------------------------------
*/

.featured-article {
    display: grid;
    gap: var(--space-5);
    background: var(--surface);
    border-left: 3px solid var(--blue);
}

.featured-copy {
    display: grid;
    gap: var(--space-3);
    align-content: start;
}

.featured-title {
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: var(--lh-heading);
    letter-spacing: var(--tracking-display);
    color: var(--ink);
}

.featured-title a {
    color: inherit;
    text-decoration: none;
}

.featured-title a:hover {
    color: var(--blue);
}

.featured-excerpt {
    color: var(--slate);
    line-height: var(--lh-body);
    max-width: 62ch;
}

.featured-mark {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
}

.featured-mark img {
    flex: none;
}


/*
|--------------------------------------------------------------------------
| 8. PRICING — sample totals strip  (pages/pricing.php)
|--------------------------------------------------------------------------
| One small card per plan, showing what a ten-user office would pay.
*/

.sample-totals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-7);
}

.sample-total {
    display: grid;
    gap: var(--space-1);
    align-content: start;
    padding: var(--space-4);
}

.sample-amount {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: var(--tracking-display);
}

.sample-unit {
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--slate-soft);
    letter-spacing: normal;
    margin-left: 0.15em;
}

.sample-per-user {
    font-size: var(--fs-xs);
    color: var(--slate-soft);
}


/*
|--------------------------------------------------------------------------
| 9. CALCULATOR  (pages/calculator.php)
|--------------------------------------------------------------------------
| The interactive calculator is built by assets/js/calculator.js. The static
| rate card underneath it is server-rendered and is what visitors without
| JavaScript — and every printed copy — get instead. base.css owns the
| .js-only / .no-js-only switching; these are the surface styles.
*/

.calculator {
    display: grid;
    gap: var(--space-6);
}

.calculator-fallback {
    display: grid;
    gap: var(--space-4);
}

.calculator-fallback .section-intro {
    margin-bottom: var(--space-2);
}


/*
|--------------------------------------------------------------------------
| 10. HOW WE SAVE YOU MONEY — discount cards  (pages/savings.php)
|--------------------------------------------------------------------------
*/

.discount-card {
    display: grid;
    gap: var(--space-2);
    align-content: start;
}

.discount-value {
    font-size: var(--fs-xl);
    font-weight: 800;
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-display);
    color: var(--blue);
}


/*
|--------------------------------------------------------------------------
| 11. CONSULTATION — what the call covers  (pages/consultation.php)
|--------------------------------------------------------------------------
*/

.agenda-card {
    display: grid;
    gap: var(--space-2);
    align-content: start;
    border-top: 3px solid var(--blue-tint-strong);
}


/*
|--------------------------------------------------------------------------
| 12. CONTACT & SUPPORT — contact channels  (pages/contact.php,
|     pages/support.php)
|--------------------------------------------------------------------------
| On contact.php each channel is a link; on support.php it is a plain list
| item. Same card either way.
*/

.contact-aside {
    display: grid;
    gap: var(--space-4);
    align-content: start;
}

.channel-card {
    display: grid;
    gap: var(--space-2);
    align-content: start;
    text-decoration: none;
    color: inherit;
}

a.channel-card:hover {
    border-color: var(--blue);
    box-shadow: var(--shadow-float);
}

.channel-value {
    font-size: var(--fs-md);
    font-weight: 650;
    color: var(--ink);
    line-height: var(--lh-heading);
    overflow-wrap: anywhere;
}

a.channel-card:hover .channel-value {
    color: var(--blue);
}


/*
|--------------------------------------------------------------------------
| 13. ABOUT  (pages/about.php)
|--------------------------------------------------------------------------
*/

.about-aside {
    display: grid;
    gap: var(--space-4);
    align-content: start;
}

/* The community / giving-back panel at the foot of the page. */
.give-back {
    border-left: 3px solid var(--red);
}


/*
|--------------------------------------------------------------------------
| 14. SERVICE DETAIL — supporting blocks  (components/service-body.php,
|     components/service-extras.php)
|--------------------------------------------------------------------------
*/

/* "What's included" panel that sits beside the service intro. */
.included-card {
    align-self: start;
    position: relative;
}

/* Cards inside the extras: AI frameworks and review cadences. */
.framework-card,
.cadence-card {
    display: grid;
    gap: var(--space-2);
    align-content: start;
}

/* The source line under a framework name (NIST, CIS, and so on). Kept small
   and muted: it is a citation, not a claim. */
.framework-citation {
    font-size: var(--fs-xs);
    color: var(--slate-soft);
    overflow-wrap: anywhere;
}

.framework-citation a {
    color: inherit;
}


/*
|--------------------------------------------------------------------------
| 15. PRICING TABLES — sliding labour scale  (components/labor-scale-table.php)
|--------------------------------------------------------------------------
| Inherits .data-table; only the first column needs different treatment.
*/

.labor-table th[scope="row"] {
    min-width: 12rem;
}


/*
|--------------------------------------------------------------------------
| 16. PRIVACY / LEGAL  (pages/privacy.php)
|--------------------------------------------------------------------------
| Long-form legal copy. Narrower measure, tighter type, no decoration.
*/

.legal-body {
    max-width: 68ch;
}

.legal-body .rb-h2 {
    margin-top: var(--space-7);
}

.legal-body .rb-p,
.legal-body .rb-list li {
    font-size: var(--fs-sm);
}


/*
|--------------------------------------------------------------------------
| 17. SEARCH  (pages/search.php)
|--------------------------------------------------------------------------
| Deliberately plain. This page is noindex; it exists to get a visitor to the
| page they wanted, not to be admired.
*/

.result-count {
    font-size: var(--fs-sm);
    color: var(--slate-soft);
    margin-bottom: var(--space-5);
}

.search-results {
    display: grid;
    gap: var(--space-5);
    list-style: none;
    counter-reset: none;
}

.search-result {
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--line);
}

.search-results li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.search-result-title {
    font-size: var(--fs-base);
    font-weight: 650;
    line-height: var(--lh-heading);
    color: var(--ink);
}

.search-result-title a {
    color: inherit;
    text-decoration: none;
}

.search-result-title a:hover {
    color: var(--blue);
    text-decoration: underline;
}

.search-result-url {
    font-size: var(--fs-xs);
    color: var(--ok);
    margin-top: 0.15rem;
    overflow-wrap: anywhere;
}

.search-result-excerpt {
    font-size: var(--fs-sm);
    color: var(--slate);
    line-height: var(--lh-body);
    margin-top: var(--space-2);
}


/*
|--------------------------------------------------------------------------
| 18. ERROR PAGES — 403 / 404 / 500  (pages/error.php)
|--------------------------------------------------------------------------
*/

.error-section {
    text-align: center;
    padding-block: var(--section-y);
}

.error-section .eyebrow {
    justify-content: center;
    color: var(--red);
}

.error-section .hero-lead {
    margin-inline: auto;
}

.error-section .button-row,
.error-section .search-form {
    justify-content: center;
}

.error-phone {
    margin-top: var(--space-5);
    font-size: var(--fs-sm);
    color: var(--slate-soft);
}

.error-phone a {
    font-weight: 600;
    color: var(--ink);
}


/*
|--------------------------------------------------------------------------
| 19. CALCULATOR UI  (built by assets/js/calculator.js)
|--------------------------------------------------------------------------
| These classes never appear in the PHP: the calculator builds its own markup
| in the browser. They are grouped here so the whole calculator — behaviour in
| one JS file, appearance in one CSS block — is easy to find.
|
| The layout is one column on a phone and inputs-plus-sticky-summary from
| 1024px up; that breakpoint lives in responsive.css with everything else.
*/

.calc-grid {
    display: grid;
    gap: var(--space-7);
    align-items: start;
}

.calc-main {
    display: grid;
    gap: var(--space-7);
    min-width: 0;
}

.calc-section {
    display: grid;
    gap: var(--space-4);
}

.calc-panel {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-card);
}

.calc-step {
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: var(--lh-heading);
    letter-spacing: var(--tracking-display);
    color: var(--ink);
}

.calc-step-body {
    font-size: var(--fs-sm);
    color: var(--slate);
    line-height: var(--lh-body);
    max-width: 60ch;
}

.calc-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3);
}

.calc-clear {
    border: 0;
    background: none;
    padding: 0;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--slate-soft);
}

.calc-clear:hover {
    color: var(--red);
}

/* --- Quantities -------------------------------------------------------- */

.calc-qty-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--space-4);
}

.calc-qty,
.calc-field {
    display: grid;
    gap: var(--space-2);
}

.calc-qty-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--slate-soft);
}

.calc-qty-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* 44px targets: comfortable on a phone, and the size WCAG asks for. */
.calc-step-btn {
    flex: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--slate);
    font-size: var(--fs-md);
    line-height: 1;
}

.calc-step-btn:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.calc-qty-input,
.calc-select {
    width: 100%;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
}

.calc-qty-input {
    text-align: center;
    font-weight: 600;
}

.calc-qty-input:focus-visible,
.calc-select:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 1px;
}

/* --- Plan presets ------------------------------------------------------ */

.calc-tiers {
    display: grid;
    gap: var(--space-4);
}

.calc-tier {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-card);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.calc-tier:hover {
    border-color: var(--blue);
}

.calc-tier.is-active {
    border-color: var(--blue);
    box-shadow: var(--shadow-float), inset 0 0 0 1px var(--blue-tint-strong);
}

.calc-tier-main {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}

.calc-tier-name {
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--ink);
}

.calc-tier-tagline {
    font-size: var(--fs-sm);
    color: var(--slate);
    line-height: var(--lh-body);
}

.calc-tier-side {
    display: grid;
    gap: var(--space-1);
}

.calc-tier-price {
    font-size: var(--fs-lg);
    font-weight: 800;
    letter-spacing: var(--tracking-display);
    color: var(--ink);
    line-height: var(--lh-tight);
}

.calc-tier-unit {
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--slate-soft);
    letter-spacing: normal;
    margin-left: 0.2em;
}

.calc-tier-state {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--slate-soft);
}

.calc-tier.is-active .calc-tier-state {
    color: var(--blue);
}

/* --- Line items -------------------------------------------------------- */

.calc-cat {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.calc-cat-title {
    padding: var(--space-3) var(--space-5);
    background: var(--canvas);
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--ink);
}

.calc-items {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

.calc-item {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--line);
}

.calc-items > .calc-item:last-child {
    border-bottom: 0;
}

.calc-item.is-on {
    background: var(--blue-tint);
}

.calc-item.is-locked {
    background: var(--ink-tint);
}

.calc-item-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.calc-check {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.2rem;
    accent-color: var(--blue);
}

.calc-item-label {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    min-width: 0;
    cursor: pointer;
}

.calc-item-name {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink);
}

.calc-item-blurb {
    flex-basis: 100%;
    font-size: var(--fs-xs);
    color: var(--slate);
    line-height: var(--lh-body);
}

.calc-item-price {
    flex: none;
    display: grid;
    justify-items: end;
    gap: 0.1rem;
    text-align: right;
}

.calc-item-amount {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--ink);
}

.calc-item-free {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--ok);
}

.calc-item-unit {
    font-size: var(--fs-xs);
    color: var(--slate-soft);
}

.calc-item-more {
    margin-top: var(--space-2);
    padding: 0;
    border: 0;
    background: none;
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--blue);
}

.calc-item-more:hover {
    text-decoration: underline;
}

.calc-item-detail {
    margin-top: var(--space-3);
    padding-left: calc(1.15rem + var(--space-3));
    display: grid;
    gap: var(--space-3);
}

.calc-m365 {
    margin-top: var(--space-2);
}

/* --- Equipment mode ---------------------------------------------------- */

.calc-choices {
    display: grid;
    gap: var(--space-4);
}

.calc-choice {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-5);
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-card);
}

.calc-choice.is-active {
    border-color: var(--blue);
    box-shadow: var(--shadow-float);
}

.calc-choice-title {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--ink);
}

.calc-choice-body {
    font-size: var(--fs-sm);
    color: var(--slate);
    line-height: var(--lh-body);
}

.calc-inline-check {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--fs-sm);
    color: var(--slate);
}

/* --- The estimate summary ---------------------------------------------- */

.calc-summary {
    min-width: 0;
}

.calc-summary-card {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-float);
}

.calc-total {
    font-size: var(--fs-xl);
    font-weight: 800;
    letter-spacing: var(--tracking-display);
    line-height: var(--lh-tight);
    color: var(--ink);
}

.calc-total-unit {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: normal;
    color: var(--slate-soft);
    margin-top: var(--space-1);
}

.calc-total-sub {
    font-size: var(--fs-sm);
    color: var(--slate);
    margin-top: calc(var(--space-4) * -1 + var(--space-1));
}

.calc-sum-rows {
    display: grid;
    gap: var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
}

.calc-sum-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    font-size: var(--fs-sm);
    color: var(--slate);
}

.calc-sum-value {
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
}

.calc-sum-row.is-credit .calc-sum-value {
    color: var(--ok);
}

.calc-sum-row.is-subtotal {
    padding-top: var(--space-2);
    border-top: 1px solid var(--line);
    font-weight: 600;
    color: var(--ink);
}

.calc-onboarding {
    display: grid;
    gap: var(--space-1);
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
}

.calc-onboarding-value {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink);
}

.calc-onboarding-note,
.calc-empty {
    font-size: var(--fs-xs);
    color: var(--slate-soft);
    line-height: var(--lh-body);
}