/* /Components/Layout/Footer.razor.rz.scp.css */
.site-footer[b-tqmk7aopgl] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--sf-space-2) var(--sf-space-6);
    margin-top: var(--sf-space-12);
    padding: var(--sf-space-5) var(--sf-space-6);
    border-top: 1px solid rgba(42, 33, 28, .10);
    color: var(--sf-muted);
    font-size: var(--sf-text-sm);
}

.site-footer p[b-tqmk7aopgl] {
    margin: 0;
}

.site-footer a[b-tqmk7aopgl] {
    color: inherit;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-ec59lw2vu6] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main[b-ec59lw2vu6] {
    flex: 1;
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
    /* The horizontal padding is the layout gutter. HomePage's hero cancels it with a negative
       margin to bleed its gradient edge to edge, so the two must stay the same token at both
       breakpoints — see .hero in HomePage.razor.css. */
    padding: 0 var(--sf-space-6) var(--sf-space-12);
}

@media (max-width: 700px) {
    main[b-ec59lw2vu6] {
        padding: 0 var(--sf-space-4) var(--sf-space-8);
    }
}

/* Blazor keeps this banner in the markup on every page and relies entirely on this
   stylesheet to hide it; `display: none` is what keeps it invisible until the framework
   itself unhides it after an unhandled error. Do not remove this rule while tidying. */
#blazor-error-ui[b-ec59lw2vu6] {
    background: var(--sf-surface);
    border-top: 1px solid var(--sf-ink);
    bottom: 0;
    box-sizing: border-box;
    color: var(--sf-ink);
    display: none;
    left: 0;
    padding: var(--sf-space-3) var(--sf-space-5);
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-ec59lw2vu6] {
        cursor: pointer;
        position: absolute;
        right: var(--sf-space-3);
        top: var(--sf-space-2);
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-rbwphgeoh1],
.components-reconnect-repeated-attempt-visible[b-rbwphgeoh1],
.components-reconnect-failed-visible[b-rbwphgeoh1],
.components-pause-visible[b-rbwphgeoh1],
.components-resume-failed-visible[b-rbwphgeoh1],
.components-rejoining-animation[b-rbwphgeoh1] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-rbwphgeoh1],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-rbwphgeoh1],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-rbwphgeoh1],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-rbwphgeoh1],
#components-reconnect-modal.components-reconnect-retrying[b-rbwphgeoh1],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-rbwphgeoh1],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-rbwphgeoh1],
#components-reconnect-modal.components-reconnect-failed[b-rbwphgeoh1],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-rbwphgeoh1] {
    display: block;
}


#components-reconnect-modal[b-rbwphgeoh1] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-rbwphgeoh1 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-rbwphgeoh1 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-rbwphgeoh1 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-rbwphgeoh1]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-rbwphgeoh1 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-rbwphgeoh1 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-rbwphgeoh1 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-rbwphgeoh1 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-rbwphgeoh1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-rbwphgeoh1] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-rbwphgeoh1] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-rbwphgeoh1] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-rbwphgeoh1] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-rbwphgeoh1] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-rbwphgeoh1] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-rbwphgeoh1 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-rbwphgeoh1] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-rbwphgeoh1 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/SiteHeader.razor.rz.scp.css */
.site-header[b-w1f0hjyojs] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sf-space-6);
    padding: var(--sf-space-4) var(--sf-space-6);
    border-bottom: 1px solid rgba(42, 33, 28, .10);
}

.brand[b-w1f0hjyojs] {
    font-family: var(--sf-display);
    font-weight: 600;
    font-size: var(--sf-text-md);
    color: var(--sf-ink);
    text-decoration: none;
}

.brand span[b-w1f0hjyojs] {
    color: var(--sf-accent);
}

.nav-links[b-w1f0hjyojs] {
    display: flex;
    align-items: center;
    gap: var(--sf-space-5);
}

.nav-links a[b-w1f0hjyojs] {
    color: var(--sf-muted);
    text-decoration: none;
    font-size: var(--sf-text-sm);
}

.nav-links a:hover[b-w1f0hjyojs],
.logout button:hover[b-w1f0hjyojs] {
    color: var(--sf-ink);
}

/* Shared .cta rule (app.css) covers background, radius and font-weight, so only the smaller
   padding — specific to the nav bar's tighter vertical space — would need repeating on that
   basis alone. colour must ALSO be repeated here even though it matches the shared value: the
   descendant selector ".nav-links a" above sets colour too, at higher specificity (0,1,1)
   than the shared ".cta" alone (0,1,0), and would otherwise win the cascade and paint this
   pill's text --sf-muted instead of --sf-page. Confirmed by checking computed style, not
   assumed. */
.nav-links .cta[b-w1f0hjyojs] {
    color: var(--sf-page);
    padding: var(--sf-space-2) var(--sf-space-4);
}

.logout button[b-w1f0hjyojs] {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: var(--sf-text-sm);
    color: var(--sf-muted);
    cursor: pointer;
}

/* display:none on purpose here: at desktop widths the nav-links are all visible and every
   navigation link is directly reachable by Tab, so the toggle has nothing to do and must
   stay out of the tab order. It only becomes focusable inside the mobile media query below,
   where it is the sole way to reveal the collapsed nav-links. */
.nav-toggle[b-w1f0hjyojs] {
    display: none;
}

.nav-toggle-label[b-w1f0hjyojs] {
    display: none;
}

@media (max-width: 700px) {
    .site-header[b-w1f0hjyojs] {
        flex-wrap: wrap;
    }

    /* Transparent rather than display:none. A display:none checkbox leaves the tab sequence
       and the accessibility tree, which made the mobile menu unopenable by keyboard. Here the
       input sits on top of the hamburger label, invisible (opacity: 0, not display: none) but
       focusable and clickable — opacity: 0 is precisely what keeps it in the tab order. */
    .nav-toggle[b-w1f0hjyojs] {
        display: block;
        position: absolute;
        right: var(--sf-space-6);
        /* Anchored to the header's first row, NOT centred with top: 50%. When the menu is open
           .nav-links takes flex-basis: 100% and the header grows a second row; a percentage top
           would drift to the middle of the expanded header while the label stays on the first
           row. 20px is where the flex-centred label actually sits (measured), and it happens to
           land on the ramp. */
        top: var(--sf-space-5);
        /* Icon geometry, not spacing: the 1.75/1.25rem box and the bar offsets below are the
           hamburger's own proportions, and the input must cover the label exactly. They are
           deliberately not spacing tokens — snapping them to the 4px ramp would misalign the
           input from the icon it overlays. */
        width: 1.75rem;
        height: 1.25rem;
        opacity: 0;
        margin: 0;
        cursor: pointer;
        z-index: 1;
    }

    /* The input is invisible, so the focus ring has to be drawn on the icon it covers.
       --sf-accent, not --sf-accent-bright: matches the one focus-ring colour used everywhere
       else in the app (see app.css). This ring sits on the header background, not the hero
       gradient, so --sf-accent-bright would actually have passed contrast here too — this
       change is for a single consistent ring colour, not a local fix. */
    .nav-toggle:focus-visible + .nav-toggle-label[b-w1f0hjyojs] {
        outline: 2px solid var(--sf-accent);
        outline-offset: 3px;
    }

    .nav-toggle-label[b-w1f0hjyojs] {
        display: block;
        width: 1.75rem;
        height: 1.25rem;
        cursor: pointer;
        position: relative;
    }

    .nav-toggle-label .bar[b-w1f0hjyojs],
    .nav-toggle-label .bar[b-w1f0hjyojs]::before,
    .nav-toggle-label .bar[b-w1f0hjyojs]::after {
        content: "";
        position: absolute;
        left: 0;
        width: 1.75rem;
        height: 2px;
        background: var(--sf-ink);
    }

    /* .5625rem = (1.25rem label height - 2px bar) / 2. A computed centring, not a spacing
       choice — it has to track the label height above, not the 4px ramp. */
    .nav-toggle-label .bar[b-w1f0hjyojs] { top: .5625rem; }
    .nav-toggle-label .bar[b-w1f0hjyojs]::before { top: -.5rem; }
    .nav-toggle-label .bar[b-w1f0hjyojs]::after { top: .5rem; }

    .nav-links[b-w1f0hjyojs] {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sf-space-3);
        padding: var(--sf-space-3) 0 var(--sf-space-1);
    }

    .nav-toggle:checked ~ .nav-links[b-w1f0hjyojs] {
        display: flex;
    }
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
.not-found[b-aw677i9hei] {
    max-width: 34rem;
    margin: var(--sf-space-16) auto;
    text-align: center;
}

.not-found h1[b-aw677i9hei] {
    font-size: var(--sf-text-2xl);
    margin: 0 0 var(--sf-space-3);
}

.not-found p[b-aw677i9hei] {
    color: var(--sf-muted);
    margin: 0 0 var(--sf-space-6);
}

.links[b-aw677i9hei] {
    display: flex;
    justify-content: center;
    gap: var(--sf-space-6);
}

.links a[b-aw677i9hei] {
    color: var(--sf-accent);
    font-weight: 600;
    text-decoration: none;
}
/* /Features/Account/ChangePassword/ChangePasswordPage.razor.rz.scp.css */
.change-password[b-v5uu9bpcaj] {
    max-width: 24rem;
    margin: var(--sf-space-16) auto;
}

.change-password h1[b-v5uu9bpcaj] {
    font-size: var(--sf-text-xl);
    margin: 0 0 var(--sf-space-6);
}

/* .form-group and .cta are the shared rules in app.css; only the extra top margin, specific
   to sitting under this form's fields, is declared here. */
.cta[b-v5uu9bpcaj] {
    margin-top: var(--sf-space-2);
}

.change-password-error[b-v5uu9bpcaj],
.change-password-success[b-v5uu9bpcaj] {
    margin-bottom: var(--sf-space-4);
    padding: var(--sf-space-3) var(--sf-space-4);
    background: var(--sf-surface);
    font-size: var(--sf-text-sm);
}

.change-password-error[b-v5uu9bpcaj] {
    border-left: 3px solid var(--sf-accent-bright);
}

.change-password-success[b-v5uu9bpcaj] {
    border-left: 3px solid var(--sf-ink);
}
/* /Features/Account/Login.razor.rz.scp.css */
.login[b-63cwc4mn6i] {
    max-width: 24rem;
    margin: var(--sf-space-16) auto;
}

.login h1[b-63cwc4mn6i] {
    font-size: var(--sf-text-xl);
    margin: 0 0 var(--sf-space-6);
}

/* .form-group and .cta are the shared rules in app.css; only the extra top margin, specific
   to sitting under this form's fields, is declared here. */
.cta[b-63cwc4mn6i] {
    margin-top: var(--sf-space-2);
}

.login-error[b-63cwc4mn6i] {
    margin-bottom: var(--sf-space-4);
    padding: var(--sf-space-3) var(--sf-space-4);
    border-left: 3px solid var(--sf-accent-bright);
    background: var(--sf-surface);
    font-size: var(--sf-text-sm);
}
/* /Features/Applications/ApplicationsListPage.razor.rz.scp.css */
.applications-list[b-42ca1lewj7] {
    max-width: 42rem;
    margin-top: var(--sf-space-10);
}

.applications-list .lede[b-42ca1lewj7] {
    color: var(--sf-muted);
    margin: 0 0 var(--sf-space-6);
}

.app-cards[b-42ca1lewj7] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--sf-space-4);
}

.app-card[b-42ca1lewj7] {
    padding: var(--sf-space-5);
    border-radius: var(--sf-radius-card);
    background: var(--sf-surface);
    box-shadow: var(--sf-shadow);
}

.app-card h2[b-42ca1lewj7] {
    font-size: var(--sf-text-md);
    margin: 0 0 var(--sf-space-1);
}

.app-card h2 a[b-42ca1lewj7] {
    color: var(--sf-ink);
    text-decoration: none;
}

.app-card p[b-42ca1lewj7] {
    margin: 0;
    color: var(--sf-muted);
    font-size: var(--sf-text-sm);
}
/* /Features/Applications/CatchLink/CatchLinkLanguageSwitcher.razor.rz.scp.css */
.catchlink-lang-switcher[b-71rxuer3bv] {
    display: flex;
    gap: var(--sf-space-3);
    margin-bottom: var(--sf-space-6);
    font-size: var(--sf-text-sm);
}

.current[b-71rxuer3bv] {
    color: var(--sf-ink);
    font-weight: 600;
}

a[b-71rxuer3bv] {
    color: var(--sf-muted);
}

a:hover[b-71rxuer3bv] {
    color: var(--sf-ink);
}
/* /Features/Blog/GetArticleBySlug/ArticleDetailPage.razor.rz.scp.css */
.article-detail[b-mfszbdp2ie] {
    max-width: 42rem;
    margin: var(--sf-space-10) auto 0;
}

.article-detail h1[b-mfszbdp2ie] {
    font-size: clamp(var(--sf-text-xl), 5vw, var(--sf-text-2xl));
    line-height: 1.1;
    margin: 0 0 var(--sf-space-2);
}

.article-meta[b-mfszbdp2ie] {
    display: flex;
    align-items: center;
    gap: var(--sf-space-3);
    margin: 0 0 var(--sf-space-8);
    padding-left: var(--sf-space-3);
    border-left: 3px solid var(--topic-ink);
}

.article-meta .date[b-mfszbdp2ie] {
    font-size: var(--sf-text-xs);
    color: var(--sf-faint);
}

/* The label is a link here, unlike in the lists. It keeps the topic-label typography
   from app.css and only drops the underline. */
.article-meta .topic-label[b-mfszbdp2ie] {
    text-decoration: none;
}

/* With the underline removed, colour alone would mark this as a link (WCAG 1.4.1),
   and it sits right beside the date, plain text of similar weight and case. Restore
   the underline on hover and keyboard focus so there is a non-colour affordance too. */
.article-meta .topic-label:hover[b-mfszbdp2ie],
.article-meta .topic-label:focus-visible[b-mfszbdp2ie] {
    text-decoration: underline;
}

.back[b-mfszbdp2ie] {
    display: inline-block;
    margin-top: var(--sf-space-10);
    color: var(--sf-accent);
    font-weight: 600;
    text-decoration: none;
}
/* /Features/Blog/GetArticlesList/ArticlesList.razor.rz.scp.css */
.blog-list h1[b-lo34s7hbdc] {
    font-size: clamp(var(--sf-text-xl), 4vw, var(--sf-text-2xl));
    margin: var(--sf-space-10) 0 var(--sf-space-2);
}

.lede[b-lo34s7hbdc] {
    font-size: var(--sf-text-base);
    color: var(--sf-muted);
    max-width: 46ch;
    margin: 0 0 var(--sf-space-6);
}

.state[b-lo34s7hbdc] {
    color: var(--sf-muted);
}

.rows[b-lo34s7hbdc] {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* The coloured rule. It identifies the topic; it is deliberately not a link — see the
   comment on the filter bar in ArticlesList.razor. */
.row[b-lo34s7hbdc] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--sf-space-6);
    align-items: start;
    padding: var(--sf-space-5) 0;
    border-bottom: 1px solid rgba(42, 33, 28, .09);
    border-left: 3px solid var(--topic-ink);
    padding-left: var(--sf-space-4);
}

.topic-label[b-lo34s7hbdc] {
    display: block;
    margin-bottom: var(--sf-space-1);
}

.topic-filters[b-lo34s7hbdc] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sf-space-2);
    margin-bottom: var(--sf-space-6);
}

.topic-filter[b-lo34s7hbdc] {
    /* Padding sized so the target clears the 24x24px minimum of WCAG 2.2 SC 2.5.8. */
    padding: var(--sf-space-2) var(--sf-space-3);
    border-radius: var(--sf-radius-pill);
    font-size: var(--sf-text-sm);
    font-weight: 600;
    text-decoration: none;
    color: var(--sf-muted);
}

/* The active filter is marked by weight and a tinted background, not by colour alone
   (WCAG 1.4.1). The "Tous" link has no topic class, so it falls back to the ink colour
   rather than inheriting an undefined --topic-ink. */
.topic-filter[aria-current="page"][b-lo34s7hbdc] {
    background: var(--topic-tint, var(--sf-surface));
    color: var(--topic-ink, var(--sf-ink));
    text-decoration: underline;
    text-underline-offset: 3px;
}

.topic-filter:hover[b-lo34s7hbdc] {
    color: var(--sf-ink);
}

.row h2[b-lo34s7hbdc] {
    font-size: var(--sf-text-md);
    line-height: 1.25;
    margin: 0 0 var(--sf-space-1);
}

.row h2 a[b-lo34s7hbdc] {
    color: var(--sf-ink);
    text-decoration: none;
}

.row p[b-lo34s7hbdc] {
    font-size: var(--sf-text-sm);
    line-height: 1.5;
    color: var(--sf-muted);
    margin: 0;
    max-width: 60ch;
}

.date[b-lo34s7hbdc] {
    font-size: var(--sf-text-2xs);
    color: var(--sf-faint);
    white-space: nowrap;
}

@media (max-width: 700px) {
    .row[b-lo34s7hbdc] {
        grid-template-columns: 1fr;
        gap: var(--sf-space-2);
    }
}
/* /Features/Company/LegalNoticePage.razor.rz.scp.css */
.legal-notice[b-urz9lkxghg] {
    max-width: 42rem;
    margin-top: var(--sf-space-10);
}

.legal-notice dl[b-urz9lkxghg] {
    display: grid;
    grid-template-columns: minmax(12rem, auto) 1fr;
    gap: var(--sf-space-2) var(--sf-space-6);
    margin-top: var(--sf-space-8);
}

.legal-notice dt[b-urz9lkxghg] {
    font-weight: 600;
    color: var(--sf-muted);
}

.legal-notice dd[b-urz9lkxghg] {
    margin: 0;
}

@media (max-width: 640px) {
    .legal-notice dl[b-urz9lkxghg] {
        grid-template-columns: 1fr;
        gap: var(--sf-space-1);
    }

    .legal-notice dd[b-urz9lkxghg] {
        margin-bottom: var(--sf-space-3);
    }
}
/* /Features/Home/HomePage.razor.rz.scp.css */
/* The warm light is anchored to the top of the page, so it is painted by the hero
   and bleeds past the layout gutters. */
/* The negative margin must be the exact negation of main's horizontal padding, or the
   gradient stops short of the viewport edge (too small) or forces a horizontal scrollbar
   (too large). Both sides now read from --sf-space-6, so they cannot drift apart. */
.hero[b-pk8um7b1dz] {
    margin: 0 calc(var(--sf-space-6) * -1);
    padding: var(--sf-space-14) var(--sf-space-6) var(--sf-space-10);
    background: var(--sf-gradient);
}

.hero h1[b-pk8um7b1dz] {
    font-size: clamp(var(--sf-text-xl), 5vw, var(--sf-text-3xl));
    line-height: 1.05;
    max-width: 17ch;
    margin: 0 0 var(--sf-space-3);
}

.hero h1 em[b-pk8um7b1dz] {
    font-style: normal;
    color: var(--sf-accent);
}

.lede[b-pk8um7b1dz] {
    font-size: var(--sf-text-md);
    line-height: 1.6;
    max-width: 46ch;
    color: var(--sf-muted);
}

.actions[b-pk8um7b1dz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sf-space-4);
    margin-top: var(--sf-space-6);
}

/* .cta itself is the shared rule in app.css — nothing here differs, so nothing is redeclared.
   .cta-quiet (a text-only link style, not part of the shared button set) stays local. */
.cta-quiet[b-pk8um7b1dz] {
    color: var(--sf-accent);
    font-weight: 600;
    text-decoration: none;
}

.eyebrow[b-pk8um7b1dz] {
    font-family: var(--sf-text);
    font-size: var(--sf-text-2xs);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--sf-faint);
    margin: var(--sf-space-10) 0 var(--sf-space-4);
}

.grid[b-pk8um7b1dz] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sf-space-6);
}

.grid h3[b-pk8um7b1dz] {
    font-size: var(--sf-text-base);
    margin: 0 0 var(--sf-space-1);
}

.grid p[b-pk8um7b1dz] {
    font-size: var(--sf-text-sm);
    line-height: 1.5;
    color: var(--sf-muted);
    margin: 0;
}

.cards[b-pk8um7b1dz] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sf-space-4);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--sf-space-5);
}

.card[b-pk8um7b1dz] {
    background: var(--sf-surface);
    border-radius: var(--sf-radius-card);
    padding: var(--sf-space-4);
    box-shadow: var(--sf-shadow);
    /* Horizontal here, vertical on the blog rows: the rule follows each surface's
       geometry. A vertical rule sits badly against a 16px corner radius. */
    border-top: 3px solid var(--topic-ink);
}

.card .topic-label[b-pk8um7b1dz] {
    display: block;
    margin-bottom: var(--sf-space-1);
}

.card h3[b-pk8um7b1dz] {
    font-size: var(--sf-text-base);
    line-height: 1.25;
    margin: 0 0 var(--sf-space-2);
}

.card h3 a[b-pk8um7b1dz] {
    color: var(--sf-ink);
    text-decoration: none;
}

.card p[b-pk8um7b1dz] {
    font-size: var(--sf-text-xs);
    line-height: 1.5;
    color: var(--sf-muted);
    margin: 0;
}

.contact[b-pk8um7b1dz] {
    margin-top: var(--sf-space-12);
    padding: var(--sf-space-8);
    background: var(--sf-surface);
    border-radius: var(--sf-radius-card);
    box-shadow: var(--sf-shadow);
}

.contact h2[b-pk8um7b1dz] {
    font-size: var(--sf-text-lg);
    margin: 0 0 var(--sf-space-2);
}

.contact p[b-pk8um7b1dz] {
    color: var(--sf-muted);
    margin: 0 0 var(--sf-space-5);
}

@media (max-width: 700px) {
    /* Mirrors main's narrower mobile gutter — see the note on .hero above. */
    .hero[b-pk8um7b1dz] {
        margin: 0 calc(var(--sf-space-4) * -1);
        padding: var(--sf-space-10) var(--sf-space-4) var(--sf-space-8);
    }

    .grid[b-pk8um7b1dz],
    .cards[b-pk8um7b1dz] {
        grid-template-columns: 1fr;
    }
}