/* ═══════════════════════════════════════════════════════════════════════════
   FinStar — design system layer
   Loaded AFTER site.css. site.css keeps the donor structure; its palette was
   converted to the light institutional scale by exports/design/relight (see
   exports/design/*.bak for the original donor sheet).

   Concept: "інституційний реєстр" — біле полотно, волосяні лінії замість
   карток із тінями, один синій акцент дії, чорнильні заголовки, цифри
   табличними знаками. Сигнатура — синя планка: 3px по верху сторінки,
   коротка риска перед кожним чипом-рубрикатором.

   Layer 1: tokens (below) repaint everything the donor draws through vars.
   Layer 2: components — header, hero offsets, the finstar-* home/landing
            blocks, and the donor widgets that need light-theme geometry.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── surfaces ── */
    --fs-canvas: #ffffff;
    --fs-canvas-2: #f5f7fb;
    --fs-canvas-3: #eceff5;
    --fs-accent-soft: #eaf1ff;

    /* ── ink ── */
    --fs-ink: #0d1a2b;
    --fs-ink-body: #16243a;
    --fs-ink-muted: #5d6b7f;

    /* ── lines ── */
    --fs-line: #dde3ec;
    --fs-line-soft: #e9edf4;
    --fs-line-strong: #c6d1e2;

    /* ── accent ── */
    --fs-accent: #0345bf;
    --fs-accent-deep: #02328b;
    --fs-accent-ink: #143a86;

    /* ── header offset ────────────────────────────────────────────────────
       --fs-air is the ONLY number that controls the air under the fixed
       header. The header height itself changes at the theme's own
       breakpoints, so the offset must be computed, never hardcoded. ── */
    --fs-hdr: 102px;
    --fs-air: 88px;

    --fs-shadow-card: 0 1px 2px rgba(13, 26, 43, .05), 0 10px 30px rgba(13, 26, 43, .06);
}

@media (max-width: 1024px) { :root { --fs-hdr: 92px; --fs-air: 72px; } }
@media (max-width: 768px)  { :root { --fs-hdr: 84px; --fs-air: 56px; } }

/* ═══ 1. BASE ═══════════════════════════════════════════════════════════ */

html { background: var(--fs-canvas); }

body {
    background: var(--fs-canvas);
    color: var(--fs-ink-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.page { background: var(--fs-canvas); color: var(--fs-ink-body); }

h1, h2, h3, h4, h5, h6 { color: var(--fs-ink); letter-spacing: -.022em; }

/* Numbers read as data, not decoration. */
.hero-stat-num, .flagship-stat-num, .finstar-kicker, .finstar-practice__index,
.finstar-method-steps__list span, .finstar-principles__list span,
.finstar-lens__feature span, .finstar-sector span, .finstar-build__grid span,
.news-card-date, .post-date, .widget-calendar {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

a { color: var(--fs-accent); }
a:hover { color: var(--fs-accent-deep); }

::selection { background: rgba(3, 69, 191, .16); color: var(--fs-ink); }

:focus-visible {
    outline: 2px solid var(--fs-accent);
    outline-offset: 3px;
}

/* ═══ 2. HEADER ═════════════════════════════════════════════════════════
   The donor draws a floating capsule through .header::before. FinStar sits
   flush: a white bar on a hairline, with the signature accent rule on top. */

.header::before {
    inset: 0 !important;
    max-width: none !important;
    border: 0 !important;
    border-bottom: 1px solid var(--fs-line) !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, .93) !important;
    box-shadow: none !important;
}

.header.scrolled::before { box-shadow: 0 6px 24px rgba(13, 26, 43, .07) !important; }

.header::after {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--fs-accent);
    pointer-events: none;
}

.header, .header.scrolled { background: transparent !important; box-shadow: none !important; }

.header-nav a { color: var(--fs-ink); font-weight: 500; }
.header-nav a:hover,
.header-nav a.is-active,
.header-nav a[aria-current="page"] { color: var(--fs-accent); }

/* The donor already underlines .nav-text::after — never add a second rule. */
.header-nav a .nav-text::after { background: var(--fs-accent) !important; }

.lang-sw { color: var(--fs-ink-muted); }
.lang-sw:hover { color: var(--fs-accent); }
.lang-sw.active {
    color: var(--fs-accent);
    background: var(--fs-accent-soft);
    border-color: rgba(3, 69, 191, .28);
}

/* Plain-text button: an overlay pseudo-element would cover the label, and the
   donor sets `background` shorthand with !important, so only the colour moves. */
.header-cta {
    background: var(--fs-accent) !important;
    border: 1px solid var(--fs-accent) !important;
    color: #fff !important;
    font-weight: 600;
    border-radius: 3px;
    transition: background-color .18s ease, border-color .18s ease;
}
.header-cta:hover, .header-cta:focus-visible {
    background: var(--fs-accent-deep) !important;
    border-color: var(--fs-accent-deep) !important;
    color: #fff !important;
}

/* The wordmark is wide (6.2:1); cap it so it never dominates a phone header. */
.header-logo img { height: 30px; width: auto; max-width: 200px; }
.mobile-menu-logo img { height: 28px; width: auto; }

.burger span { background: var(--fs-ink); }
.mobile-menu { background: var(--fs-canvas); }
.mobile-nav a { color: var(--fs-ink); }
.mobile-nav a:hover { color: var(--fs-accent); }
/* The donor paints this one with !important, so the override needs it too. */
.mobile-contact-btn {
    background: var(--fs-accent) !important;
    border: 1px solid var(--fs-accent) !important;
    color: #fff !important;
}

/* ═══ 3. HEADER OFFSET ══════════════════════════════════════════════════
   Four opening sections exist, and every page type must end up with the
   same gap between header and first mark. Measured, not copied. */

.finstar-hero,
.finstar-page-hero,
.single-hero,
.hero-author,
.hero,
.hero-inner {
    padding-top: calc(var(--fs-hdr) + var(--fs-air)) !important;
}

/* .hero-inner is a flex box with a vh-bound min-height in the donor: the gap
   would then float with the window height. */
.hero-inner {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    padding-bottom: 76px !important;
}

/* Two opener types add their own space above the first mark. The offsets below
   are MEASURED against the home hero (header→chip must be one number on every
   page type), not copied from another site — they differ per clone. */
.single-hero { padding-top: calc(var(--fs-hdr) + var(--fs-air) - 31px) !important; }
.hero-inner, .hero.hero-inner { padding-top: calc(var(--fs-hdr) + var(--fs-air) - 32px) !important; }

.hero-home::after, .hero::after, .single-hero::after { opacity: .5; }

/* Hero rhythm: the whole opening block must read the same everywhere, not
   only the top gap — chip, chip→h1, h1 size, h1→lead, lead size, bottom air. */
.finstar-page-hero h1, .hero-inner h1, .hero h1 {
    font-size: clamp(38px, 4.8vw, 66px) !important;
    line-height: 1.04 !important;
    letter-spacing: -.035em !important;
    max-width: 17ch;
}
.finstar-kicker, .hero-tag, .ha-tag { margin-bottom: 24px !important; }
/* the kicker owns the gap — the heading must not add its own on top of it */
.finstar-hero h1, .finstar-page-hero h1 { margin-top: 0 !important; }
.hero-inner .hero-description, .hero .hero-description {
    margin-top: 26px !important;
    max-width: 58ch;
    color: var(--fs-ink-muted);
    font-size: 17.5px !important;
    line-height: 1.62 !important;
}
.hero-inner h1 .highlight, .hero h1 .highlight { color: var(--fs-accent); }

/* ═══ 4. KICKERS ════════════════════════════════════════════════════════
   The flagship writes "// label". FinStar uses a short accent rule instead. */

.finstar-kicker, .hero-tag, .ha-tag, .tag, .pillar-mention-label,
.igng-service-cta__eyebrow, .article-toc__title, .expert-card__role {
    /* block-level flex, not inline-flex: an inline chip inherits the hero's
       line-height as leading and drops ~33px below its own box */
    display: flex;
    align-items: center;
    width: fit-content;
    line-height: 1.2;
    gap: 10px;
    color: var(--fs-accent) !important;
    font-family: var(--font-family-base) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase;
    opacity: 1 !important;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
}

.finstar-kicker::before, .hero-tag::before, .ha-tag::before, .tag::before,
.pillar-mention-label::before, .igng-service-cta__eyebrow::before {
    content: "";
    flex: 0 0 auto;
    width: 18px;
    height: 2px;
    background: currentColor;
}

/* ═══ 5. DONOR WIDGETS ON A LIGHT CANVAS ════════════════════════════════ */

/* Cards: hairline + restrained lift instead of the donor's glow-on-dark. */
.news-card, .member-card, .method-card, .standard-card, .service-card,
.expert-card, .segment-card, .sla-tier, .widget, .flagship-stat {
    background: var(--fs-canvas);
    border: 1px solid var(--fs-line);
    box-shadow: none;
}
.news-card:hover, .member-card:hover, .method-card:hover,
.service-card:hover, .expert-card:hover, .segment-card:hover {
    border-color: var(--fs-line-strong);
    box-shadow: var(--fs-shadow-card);
}

/* Thumb placeholders were dark-on-dark after the conversion. */
.news-card-thumb, .news-card-band, .widget-about .widget-logo {
    background: var(--fs-canvas-3);
}
.news-card-thumb img { mix-blend-mode: normal; }

.news-card-title a { color: var(--fs-ink); }
.news-card-title a:hover { color: var(--fs-accent); }
.news-card-excerpt, .news-card-meta, .post-meta { color: var(--fs-ink-muted); }

/* Round avatars survive any radius reset. */
.expert-card__ava, .ha-ava, .ha-ava img, .igng-authorbox__avatar,
.igng-authorbox__avatar img, .igng-expert-comment__media,
.igng-expert-comment__media img, .person-avatar, .person-avatar img,
.widget-author-ava, .widget-author-ava img {
    border-radius: 50% !important;
    clip-path: none !important;
}

/* Pagination: the container carries the same class as its items — style only
   the links, keep the list transparent. */
.news-pagination .page-numbers,
.news-pagination ul.page-numbers { background: transparent !important; border: 0 !important; }
.news-pagination a.page-numbers,
.news-pagination span.page-numbers,
.news-pagination .page-numbers li a,
.news-pagination .page-numbers li span {
    border: 1px solid var(--fs-line);
    background: var(--fs-canvas);
    color: var(--fs-ink);
}
.news-pagination .page-numbers li a:hover {
    border-color: var(--fs-accent);
    background: var(--fs-accent-soft);
    color: var(--fs-accent);
}
.news-pagination .page-numbers li span.current,
.news-pagination span.page-numbers.current {
    background: var(--fs-accent);
    border-color: var(--fs-accent);
    color: #fff;
}

/* Filter tabs */
.filter-tab {
    border: 1px solid var(--fs-line);
    background: var(--fs-canvas);
    color: var(--fs-ink-muted);
}
.filter-tab:hover { border-color: var(--fs-line-strong); color: var(--fs-ink); background: var(--fs-canvas); }
.filter-tab.active {
    background: var(--fs-accent);
    border-color: var(--fs-accent);
    color: #fff;
}

/* Tag pills */
.tag-pill, .glossary-tag-pill {
    border: 1px solid var(--fs-line);
    background: var(--fs-canvas);
    color: var(--fs-ink-body);
}
.tag-pill:hover, .glossary-tag-pill:hover {
    border-color: var(--fs-accent);
    background: var(--fs-accent-soft);
    color: var(--fs-accent);
}

/* Article body. On a light canvas the donor's 16px over a 760px column runs to
   ~95 characters a line; long-form reading wants 65–75. */
.single-body {
    color: var(--fs-ink-body);
    font-size: 17.5px;
    line-height: 1.72;
}
/* `ch` is unreliable here — Montserrat's zero is wide, so 70ch measured 93
   characters. The measure is set in px and verified in the browser. */
.single-body p, .single-body li { font-size: 17.5px; }
.single-body p, .single-body ul, .single-body ol, .single-body blockquote { max-width: 620px; }
.single-body h2 {
    border-left: 3px solid var(--fs-accent) !important;
    color: var(--fs-ink);
    font-size: clamp(24px, 2.2vw, 30px);
    line-height: 1.22;
}
.single-body h3, .single-body h4 { color: var(--fs-ink); line-height: 1.3; }
.single-body a { color: var(--fs-accent); text-decoration-color: rgba(3, 69, 191, .4); }
.single-body blockquote {
    background: var(--fs-canvas-2);
    border-left: 3px solid var(--fs-accent);
    color: var(--fs-ink-body);
}
.single-body code { background: var(--fs-canvas-3); color: var(--fs-accent-ink); }
.single-body pre { background: var(--fs-canvas-3); border: 1px solid var(--fs-line); }
.single-body table { border: 1px solid var(--fs-line); }
.single-body thead th {
    background: var(--fs-canvas-2);
    color: var(--fs-ink);
    border-bottom: 1px solid var(--fs-line-strong);
}
.single-body tbody tr:hover { background: var(--fs-canvas-2); }
.single-body td, .single-body th { border-color: var(--fs-line); }

/* TOC / FAQ */
.article-toc, .article-faq { border-top: 2px solid var(--fs-accent); background: var(--fs-canvas-2); }
.article-toc__item a { color: var(--fs-ink-body); }
.article-toc__item a:hover { color: var(--fs-accent); }
.article-toc__item::before { color: var(--fs-accent); }
.article-faq__item { border: 1px solid var(--fs-line); background: var(--fs-canvas); }
.article-faq__item[open] { border-color: rgba(3, 69, 191, .35); background: var(--fs-canvas); }
.article-faq__item summary { color: var(--fs-ink); }

/* Expert comment / author box */
.igng-expert-comment__card, .igng-authorbox {
    background: var(--fs-canvas-2) !important;
    border: 1px solid var(--fs-line) !important;
    border-top: 2px solid var(--fs-accent) !important;
}
.igng-expert-comment__label, .igng-authorbox__label { color: var(--fs-accent) !important; }
.igng-expert-comment__profile, .igng-authorbox__link {
    border: 1px solid var(--fs-line-strong) !important;
    color: var(--fs-accent) !important;
}
.igng-expert-comment__profile:hover, .igng-authorbox__link:hover {
    background: var(--fs-accent-soft) !important;
    border-color: var(--fs-accent) !important;
}

/* Panels the donor filled with a translucent dark wash. They are light
   surfaces here; the accent carries the emphasis instead of the fill. */
.igng-service-cta__inner {
    background: var(--fs-accent-soft) !important;
    border: 1px solid rgba(3, 69, 191, .22) !important;
    border-left: 3px solid var(--fs-accent) !important;
    color: var(--fs-ink-body);
}
.igng-service-cta__inner h3, .igng-service-cta__inner strong { color: var(--fs-ink); }
.igng-service-cta__btn { background: var(--fs-accent); color: #fff; border-color: var(--fs-accent); }

.single-article .sidebar-widget, .single-sidebar .pillar-mention,
.sidebar-widget, .pillar-mention, .hero-stats-row, .flagship-stat, .ig-crm-result {
    background: var(--fs-canvas-2) !important;
    border: 1px solid var(--fs-line) !important;
    color: var(--fs-ink-body);
}
.sidebar-widget h3, .sidebar-widget h4, .pillar-mention h3,
.pillar-mention strong, .ig-crm-result h3 { color: var(--fs-ink); }
.sidebar-cta { background: var(--fs-accent); color: #fff; border-color: var(--fs-accent); }
.sidebar-cta:hover { background: var(--fs-accent-deep); border-color: var(--fs-accent-deep); color: #fff; }

/* Sidebar */
.sidebar .widget { background: var(--fs-canvas); border: 1px solid var(--fs-line); }
.widget-title { color: var(--fs-ink); }
.widget a { color: var(--fs-ink-body); }
.widget a:hover { color: var(--fs-accent); }

/* Forms — the donor never sets a width, and .ig-form-row has no grid. */
.ig-form-group input, .ig-form-group select, .ig-form-group textarea,
.ig-crm-form input:not([type="checkbox"]), .ig-crm-form select, .ig-crm-form textarea {
    width: 100% !important;
    box-sizing: border-box;
    background: var(--fs-canvas) !important;
    border: 1px solid var(--fs-line-strong) !important;
    color: var(--fs-ink) !important;
    border-radius: 3px;
}
.ig-form-group input:focus, .ig-form-group select:focus, .ig-form-group textarea:focus {
    border-color: var(--fs-accent) !important;
    background: var(--fs-canvas) !important;
    outline: 2px solid rgba(3, 69, 191, .22);
    outline-offset: 0;
}
.ig-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ig-form-group label { color: var(--fs-ink-body); }
.ig-form-privacy input[type="checkbox"], .ig-consent input[type="checkbox"] {
    width: auto !important;
    accent-color: var(--fs-accent);
}
.ig-form-submit, .ig-crm-form button[type="submit"] {
    background: var(--fs-accent) !important;
    color: #fff !important;
    border: 1px solid var(--fs-accent) !important;
    border-radius: 3px;
}
.ig-form-submit:hover, .ig-crm-form button[type="submit"]:hover {
    background: var(--fs-accent-deep) !important;
    border-color: var(--fs-accent-deep) !important;
    box-shadow: none !important;
}
input[type="range"] { background: transparent !important; border: none !important; }

/* Contact popup */
.ig-popup-box { background: var(--fs-canvas); border: 1px solid var(--fs-line); }
.ig-popup-header { background: var(--fs-canvas-2); border-bottom: 1px solid var(--fs-line); }
.ig-popup-header h3, .ig-popup-header h2 { color: var(--fs-ink); }
.ig-popup-close { color: var(--fs-ink-muted); }
.ig-popup-close:hover { color: var(--fs-ink); }

/* Buttons */
.btn-primary {
    background: var(--fs-accent);
    border: 1px solid var(--fs-accent);
    color: #fff;
    border-radius: 3px;
}
.btn-primary:hover { background: var(--fs-accent-deep); border-color: var(--fs-accent-deep); box-shadow: none; }
.btn-secondary, .btn-ghost, .btn-dark {
    background: transparent;
    border: 1px solid var(--fs-line-strong);
    color: var(--fs-ink);
    border-radius: 3px;
}
.btn-secondary:hover, .btn-ghost:hover, .btn-dark:hover {
    background: var(--fs-accent-soft);
    border-color: var(--fs-accent);
    color: var(--fs-accent);
}

/* Back to top */
.back-to-top {
    background: var(--fs-accent);
    color: #fff;
    box-shadow: 0 6px 20px rgba(3, 69, 191, .28);
}

/* Glossary */
.glossary-nav { border-bottom: 1px solid var(--fs-line); }
.glossary-nav-letter { border: 1px solid var(--fs-line); color: var(--fs-ink-body); }
.glossary-nav-letter:hover { background: var(--fs-accent-soft); border-color: var(--fs-accent); color: var(--fs-accent); }
.gloss-link, .glossary-link { text-decoration-color: rgba(3, 69, 191, .45); color: var(--fs-accent); }

/* ═══ 6. FINSTAR SECTIONS ═══════════════════════════════════════════════ */

.finstar-hero {
    position: relative;
    overflow: hidden;
    padding-bottom: clamp(64px, 8vw, 108px);
    background: var(--fs-canvas);
    border-bottom: 1px solid var(--fs-line);
}
/* A faint register grid: the only ornament in the system. */
.finstar-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(90deg, rgba(3, 69, 191, .07) 1px, transparent 1px);
    background-size: 76px 100%;
    mask-image: linear-gradient(to bottom, transparent, #000 45%, transparent);
}
.finstar-hero::after { content: none; }

.finstar-hero__grid { position: relative; z-index: 1; display: block; max-width: 62rem; }
.finstar-hero__copy { max-width: none; }
.finstar-hero__logo { display: none; }

.finstar-hero h1 {
    max-width: 18ch;
    margin: 26px 0 0;
    color: var(--fs-ink);
    font-size: clamp(40px, 5.4vw, 74px);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -.035em;
    text-wrap: balance;
}
.finstar-hero__lead {
    max-width: 58ch;
    margin: 26px 0 0;
    color: var(--fs-ink-muted);
    font-size: clamp(17px, 1.4vw, 20px);
    line-height: 1.62;
}
.finstar-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 36px; }

.finstar-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 24px;
    border: 1px solid var(--fs-accent);
    border-radius: 3px;
    background: var(--fs-accent);
    color: #fff;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease;
}
.finstar-button:hover, .finstar-button:focus-visible {
    background: var(--fs-accent-deep);
    border-color: var(--fs-accent-deep);
    color: #fff;
}
.finstar-button--light {
    background: var(--fs-canvas);
    border-color: var(--fs-line-strong);
    color: var(--fs-accent);
}
.finstar-button--light:hover { background: var(--fs-accent-soft); border-color: var(--fs-accent); color: var(--fs-accent-deep); }

.finstar-link {
    padding: 12px 0;
    border: 0;
    border-bottom: 2px solid var(--fs-accent);
    background: transparent;
    color: var(--fs-accent);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.finstar-link:hover { color: var(--fs-accent-deep); border-color: var(--fs-accent-deep); }

.finstar-hero__signal { display: none; }

/* Section rhythm: white and cool-grey alternate; no third surface. */
.finstar-lens, .finstar-news, .finstar-about-intro, .finstar-services-intro,
.finstar-segments-intro, .finstar-method-intro, .finstar-stack-intro,
.finstar-contact, .finstar-about-technology, .finstar-method-evidence,
.finstar-products, .finstar-engagement, .finstar-segment-lens {
    background: var(--fs-canvas);
}
.finstar-tech, .finstar-principles, .finstar-practices, .finstar-sector-atlas,
.finstar-method-steps, .finstar-build, .finstar-about-people,
.finstar-method-boundary, .finstar-segment-cta, .finstar-stack-check {
    background: var(--fs-canvas-2);
    border-top: 1px solid var(--fs-line);
    border-bottom: 1px solid var(--fs-line);
}

.finstar-section-head h2, .finstar-tech h2, .finstar-news h2, .finstar-cta h2,
.finstar-about-intro__statement h2, .finstar-about-technology h2,
.finstar-about-people h2, .finstar-services-intro h2, .finstar-engagement h2,
.finstar-service-cta h2, .finstar-segments-intro h2, .finstar-segment-lens h2,
.finstar-segment-cta h2, .finstar-method-intro h2, .finstar-method-evidence h2,
.finstar-method-boundary h2, .finstar-stack-intro h2, .finstar-products h2,
.finstar-stack-check h2, .finstar-contact__form h2, .finstar-contact__panel h2 {
    color: var(--fs-ink);
    font-weight: 800;
    letter-spacing: -.03em;
}

/* Page heroes on inner pages share the home hero's proportions exactly. */
.finstar-page-hero {
    position: relative;
    overflow: hidden;
    padding-bottom: clamp(56px, 7vw, 92px);
    background: var(--fs-canvas);
    border-bottom: 1px solid var(--fs-line);
}
.finstar-page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(90deg, rgba(3, 69, 191, .07) 1px, transparent 1px);
    background-size: 76px 100%;
    mask-image: linear-gradient(to bottom, transparent, #000 45%, transparent);
}
.finstar-page-hero::after { content: none; }
.finstar-page-hero__grid { position: relative; z-index: 1; align-items: end; }
.finstar-page-hero h1 {
    max-width: 16ch;
    margin: 22px 0 0;
    color: var(--fs-ink);
    font-size: clamp(38px, 4.8vw, 66px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.035em;
}
.finstar-page-hero__lead {
    max-width: 42ch;
    color: var(--fs-ink-muted);
    font-size: clamp(16px, 1.3vw, 19px);
    line-height: 1.62;
}

/* Register grids: hairline-separated cells, one accent cell per grid. */
.finstar-lens__grid, .finstar-practices__grid, .finstar-sector-atlas__grid,
.finstar-build__grid, .finstar-stack-check__inner > div {
    gap: 1px;
    background: var(--fs-line);
    border: 1px solid var(--fs-line);
}
.finstar-lens__feature, .finstar-practice, .finstar-sector,
.finstar-build__grid article, .finstar-stack-check span {
    background: var(--fs-canvas);
}
.finstar-lens__feature--wide, .finstar-practice--blue, .finstar-sector--feature,
.finstar-build__grid article:first-child {
    background: var(--fs-accent);
}
.finstar-lens__feature--wide h3, .finstar-practice--blue h3,
.finstar-sector--feature h3, .finstar-build__grid article:first-child h3 { color: #fff; }
.finstar-lens__feature--wide p, .finstar-practice--blue .finstar-practice__lead,
.finstar-practice--blue li, .finstar-sector--feature p,
.finstar-build__grid article:first-child p { color: rgba(255, 255, 255, .88); }
.finstar-lens__feature--wide span, .finstar-practice--blue .finstar-practice__index,
.finstar-sector--feature span, .finstar-build__grid article:first-child span { color: rgba(255, 255, 255, .82); }
.finstar-practice--blue li { border-color: rgba(255, 255, 255, .26); }
.finstar-practice--blue li::before { background: #fff; }

.finstar-lens__feature h3, .finstar-practice h3, .finstar-sector h3,
.finstar-build__grid h3, .finstar-principles__list h3, .finstar-method-steps__list h3 {
    color: var(--fs-ink);
    letter-spacing: -.03em;
}
.finstar-lens__feature p, .finstar-practice__lead, .finstar-practice li,
.finstar-sector p, .finstar-build__grid p, .finstar-principles__list p,
.finstar-method-steps__list p, .finstar-engagement span, .finstar-segment-lens li,
.finstar-method-evidence__list span, .finstar-products__list span,
.finstar-about-technology__notes span, .finstar-about-intro__copy p,
.finstar-services-intro__grid > p, .finstar-segments-intro__grid > p,
.finstar-method-intro__grid > p, .finstar-stack-intro__grid > p {
    color: var(--fs-ink-muted);
}
.finstar-lens__feature span, .finstar-sector span, .finstar-build__grid span,
.finstar-practice__index, .finstar-principles__list span,
.finstar-method-steps__list span { color: var(--fs-accent); }

.finstar-practice li::before, .finstar-segment-lens li::before { background: var(--fs-accent); }

/* Hairline lists */
.finstar-tech__list, .finstar-tech__list a, .finstar-principles__list,
.finstar-principles__list li, .finstar-engagement ol, .finstar-engagement li,
.finstar-segment-lens ul, .finstar-segment-lens li, .finstar-method-steps__list li,
.finstar-method-evidence__list, .finstar-method-evidence__list p,
.finstar-products__list, .finstar-products__list p,
.finstar-about-technology__notes, .finstar-about-technology__notes p,
.finstar-practice li { border-color: var(--fs-line); }

.finstar-tech__list a { color: var(--fs-ink); }
.finstar-tech__list a:hover { color: var(--fs-accent); }
.finstar-tech__list span { color: var(--fs-ink-muted); }
.finstar-engagement strong, .finstar-about-technology__notes strong,
.finstar-method-evidence__list strong, .finstar-products__list strong { color: var(--fs-ink); }

/* Accent panels */
.finstar-about-technology__panel, .finstar-method-evidence__panel,
.finstar-products__panel, .finstar-contact__panel {
    background: var(--fs-accent);
    color: #fff;
}
.finstar-about-technology__panel h2, .finstar-method-evidence__panel h2,
.finstar-products__panel h2, .finstar-contact__panel h2 { color: #fff; }
.finstar-about-technology__panel .finstar-kicker,
.finstar-method-evidence__panel .finstar-kicker,
.finstar-products__panel .finstar-kicker,
.finstar-contact__panel .finstar-kicker,
.finstar-cta .finstar-kicker, .finstar-service-cta .finstar-kicker { color: rgba(255, 255, 255, .92) !important; }
.finstar-about-technology__panel .finstar-text-link,
.finstar-products__panel .finstar-text-link { color: #fff; border-color: #fff; }
.finstar-contact__email, .finstar-contact__location strong { color: #fff; }
.finstar-contact__location p, .finstar-contact__note { color: rgba(255, 255, 255, .88); }
.finstar-contact__location, .finstar-contact__note { border-color: rgba(255, 255, 255, .3); }

/* Closing CTA bands */
.finstar-cta, .finstar-service-cta { background: var(--fs-accent); }
.finstar-cta h2, .finstar-service-cta h2 { color: #fff; }
.finstar-service-cta p:not(.finstar-kicker) { color: rgba(255, 255, 255, .9); }
.finstar-cta .finstar-button, .finstar-service-cta .finstar-button {
    background: var(--fs-canvas);
    border-color: var(--fs-canvas);
    color: var(--fs-accent);
}
.finstar-cta .finstar-button:hover, .finstar-service-cta .finstar-button:hover {
    background: var(--fs-accent-soft);
    border-color: var(--fs-accent-soft);
    color: var(--fs-accent-deep);
}
.finstar-method-boundary h2, .finstar-segment-cta h2, .finstar-stack-check h2 { color: var(--fs-ink); }
.finstar-method-boundary p:not(.finstar-kicker) { color: var(--fs-ink-muted); }
.finstar-stack-check span { color: var(--fs-ink); border: 0; }
.finstar-stack-check__inner > div { background: var(--fs-line); border-color: var(--fs-line); }

.finstar-text-link { color: var(--fs-accent); border-bottom: 2px solid var(--fs-accent); }
.finstar-text-link:hover { color: var(--fs-accent-deep); border-color: var(--fs-accent-deep); }

/* News cards inside the home grid follow the register look. */
.finstar-news__grid .news-card {
    background: var(--fs-canvas);
    border: 1px solid var(--fs-line);
    border-radius: 0;
    box-shadow: none;
}
.finstar-news__grid .news-card:hover { border-color: var(--fs-line-strong); box-shadow: var(--fs-shadow-card); }
.finstar-news__grid .news-card-title a { color: var(--fs-ink); }
.finstar-news__grid .news-card-title a:hover, .finstar-news__grid .news-card-more { color: var(--fs-accent); }

.finstar-contact__form .ig-form-group label,
.finstar-contact__form .ig-consent-label,
.finstar-contact__form .ig-form-status { color: var(--fs-ink-muted); }
.finstar-contact__form > p:not(.finstar-kicker) { color: var(--fs-ink-muted); }

/* ═══ 7. FOOTER ═════════════════════════════════════════════════════════
   The footer is the one dark surface: it closes the page and carries the
   brand mark without competing with the content above it. */

.site-footer {
    background: var(--fs-ink);
    border-top: 3px solid var(--fs-accent);
    color: rgba(255, 255, 255, .78);
}
.site-footer h4, .footer-col h4 { color: #fff; }
.footer-desc, .footer-contacts, .footer-copy, .footer-menu-list a, .site-footer a {
    color: rgba(255, 255, 255, .74);
}
.footer-menu-list a:hover, .site-footer a:hover, .footer-privacy:hover { color: #fff; }
.site-footer .footer-logo img { filter: brightness(0) invert(1); }
.footer-social a { border-color: rgba(255, 255, 255, .22); }
.footer-social a:hover { background: rgba(255, 255, 255, .12); }

/* ═══ 8. RESPONSIVE ═════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .finstar-hero__grid, .finstar-tech__grid { grid-template-columns: 1fr; }
    .ig-form-row { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .header-logo img { height: 24px; max-width: 152px; }
    .finstar-hero h1 { font-size: clamp(32px, 9vw, 44px); }
    .finstar-page-hero h1 { font-size: clamp(30px, 8.5vw, 42px); }
    .finstar-hero::before, .finstar-page-hero::before { opacity: .6; }
}
@media (prefers-reduced-motion: reduce) {
    .finstar-button, .finstar-tech__list a, .header-cta, .news-card { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FinStar — refinements (2026-07-23): news feed, expert quote, FAQ, footer.
   Мета: власна мова, помітно відмінна від донорської сітки карток-бандів.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── News feed: editorial register cards (no colour band) ───────────────── */
.news-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.finstar-news__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 44px;
}

.fs-card {
    position: relative;
    display: flex;
    background: var(--fs-canvas);
    border: 1px solid var(--fs-line);
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
/* signature: an accent rule that grows from the left edge on hover */
.fs-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 3px;
    background: var(--fs-accent);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .2s ease;
}
.fs-card:hover {
    border-color: var(--fs-line-strong);
    box-shadow: var(--fs-shadow-card);
    transform: translateY(-2px);
}
.fs-card:hover::before { transform: scaleY(1); }
.fs-card__link {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 26px 28px 22px;
    text-decoration: none;
    color: inherit;
}
.fs-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.fs-card__cat {
    color: var(--fs-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.3;
}
.fs-card__date {
    color: var(--fs-ink-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.fs-card__title {
    margin: 15px 0 0;
    color: var(--fs-ink);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.26;
    letter-spacing: -.02em;
}
.fs-card:hover .fs-card__title { color: var(--fs-accent); }
.fs-card__excerpt {
    flex: 1;
    margin: 11px 0 0;
    color: var(--fs-ink-muted);
    font-size: 15px;
    line-height: 1.6;
}
.fs-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--fs-line);
}
.fs-card__read {
    color: var(--fs-ink-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.fs-card__more { color: var(--fs-accent); font-size: 14px; font-weight: 600; }
.fs-card__more span { transition: transform .18s ease; display: inline-block; }
.fs-card:hover .fs-card__more span { transform: translateX(3px); }

@media (max-width: 900px) {
    .finstar-news__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
    .news-grid, .finstar-news__grid { grid-template-columns: 1fr; }
}

/* ── Expert view: editorial pull-quote (distinct from donor card) ────────── */
.fs-expert {
    position: relative;
    margin: 38px 0;
    padding: 34px 36px 28px;
    background: var(--fs-canvas-2);
    border: 1px solid var(--fs-line);
    border-left: 3px solid var(--fs-accent);
}
.fs-expert::before {
    content: "\201C";
    position: absolute;
    top: 10px; right: 28px;
    color: var(--fs-accent);
    opacity: .16;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 120px;
    line-height: 1;
    pointer-events: none;
}
.fs-expert__label {
    color: var(--fs-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.fs-expert__quote {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--fs-ink);
    font-size: 19px;
    line-height: 1.58;
    font-weight: 500;
    letter-spacing: -.01em;
}
.fs-expert__quote p { margin: 0 0 12px; }
.fs-expert__quote p:last-child { margin-bottom: 0; }
.fs-expert__by {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--fs-line);
}
.fs-expert__ava img,
.fs-expert__ava .avatar {
    width: 54px; height: 54px;
    border-radius: 50% !important;
    object-fit: cover;
    display: block;
}
.fs-expert__meta { flex: 1; min-width: 0; }
.fs-expert__name { font-size: 16px; font-weight: 700; color: var(--fs-ink); line-height: 1.3; }
.fs-expert__name a { color: var(--fs-ink); text-decoration: none; }
.fs-expert__name a:hover { color: var(--fs-accent); }
.fs-expert__pos { margin-top: 3px; font-size: 13px; color: var(--fs-ink-muted); }
.fs-expert__link {
    flex: 0 0 auto;
    color: var(--fs-accent);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.fs-expert__link span { transition: transform .18s ease; display: inline-block; }
.fs-expert__link:hover span { transform: translateX(3px); }
@media (max-width: 560px) {
    .fs-expert { padding: 26px 22px 22px; }
    .fs-expert__by { flex-wrap: wrap; }
    .fs-expert__link { flex-basis: 100%; }
}

/* ── FAQ: numbered register accordion (distinct from donor) ──────────────── */
.fs-faq { margin: 44px 0; }
.fs-faq__head { margin-bottom: 22px; }
.fs-faq__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--fs-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.fs-faq__eyebrow::before {
    content: "";
    width: 18px; height: 2px;
    background: currentColor;
}
.fs-faq__head h2 {
    margin: 12px 0 0;
    color: var(--fs-ink);
    font-size: clamp(24px, 2.4vw, 30px);
    font-weight: 800;
    letter-spacing: -.03em;
}
.fs-faq__list { border-top: 1px solid var(--fs-line-strong); }
.fs-faq__item { border-bottom: 1px solid var(--fs-line); }
.fs-faq__q {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 21px 0;
    cursor: pointer;
    list-style: none;
}
.fs-faq__q::-webkit-details-marker { display: none; }
.fs-faq__num {
    color: var(--fs-line-strong);
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: color .15s ease;
}
.fs-faq__text {
    color: var(--fs-ink);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    transition: color .15s ease;
}
.fs-faq__icon {
    position: relative;
    width: 20px; height: 20px;
    flex: 0 0 auto;
}
.fs-faq__icon::before,
.fs-faq__icon::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 13px; height: 2px;
    background: var(--fs-accent);
    transform: translate(-50%, -50%);
    transition: transform .2s ease, opacity .2s ease;
}
.fs-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.fs-faq__item[open] .fs-faq__icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(0); }
.fs-faq__item[open] .fs-faq__num { color: var(--fs-accent); }
.fs-faq__item[open] .fs-faq__text { color: var(--fs-accent); }
.fs-faq__a {
    padding: 0 46px 24px;
    color: var(--fs-ink-muted);
    font-size: 16px;
    line-height: 1.66;
}
.fs-faq__a p { margin: 0 0 12px; }
.fs-faq__a p:last-child { margin-bottom: 0; }
@media (max-width: 560px) {
    .fs-faq__q { gap: 12px; }
    .fs-faq__a { padding: 0 0 22px; }
}

/* ── Footer CTA button + column titles ───────────────────────────────────── */
.footer-cta {
    display: inline-flex;
    align-items: center;
    margin-top: 20px;
    padding: 11px 22px;
    border: 1px solid var(--fs-accent);
    border-radius: 3px;
    background: var(--fs-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease;
}
.footer-cta:hover { background: var(--fs-accent-deep); border-color: var(--fs-accent-deep); color: #fff; }
.footer-brand .footer-desc { max-width: 34ch; }
.footer-col-title {
    color: rgba(255, 255, 255, .55);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.footer-contacts svg { stroke: rgba(255, 255, 255, .5); fill: none; }

/* Legal / privacy prose */
.fs-legal { max-width: 760px; margin: 0 auto; }
.fs-legal__upd { color: var(--fs-ink-muted); font-size: 14px; margin: 0 0 28px; }
.fs-legal h2 {
    margin: 32px 0 10px;
    color: var(--fs-ink);
    font-size: clamp(20px, 2vw, 24px);
    font-weight: 800;
    letter-spacing: -.02em;
    padding-left: 14px;
    border-left: 3px solid var(--fs-accent);
    line-height: 1.25;
}
.fs-legal p { color: var(--fs-ink-body); font-size: 16.5px; line-height: 1.7; margin: 0 0 14px; }
.fs-legal a { color: var(--fs-accent); text-decoration: underline; text-decoration-color: rgba(3,69,191,.4); }
.fs-legal code { background: var(--fs-canvas-3); color: var(--fs-accent-ink); padding: 1px 6px; border-radius: 3px; font-size: .92em; }

/* ═══════════════════════════════════════════════════════════════════════════
   FinStar — section rhythm v3 (2026-07-23): світла → сіра → темна.
   Третій ярус — чорнильний #0d1a2b (колір чипа логотипа й футера), щоб
   сторінка мала виражений ритм, а не суцільне світле полотно.
   Плюс фікс: на акцентних (синіх) клітинках текст і номер мають бути білими —
   загальне muted-правило перебивало їх у каскаді.
   ═══════════════════════════════════════════════════════════════════════════ */

:root { --fs-dark: #0d1a2b; }

/* ── ярус 2: СІРІ секції (одразу після героя, тому без верхньої межі) ────── */
.finstar-lens, .finstar-about-intro, .finstar-services-intro,
.finstar-segments-intro, .finstar-method-intro, .finstar-stack-intro {
    /* помітно сіріша за біле полотно — інакше ритм не зчитується */
    background: #edf1f7;
    border-top: 0;
    border-bottom: 1px solid var(--fs-line);
}
/* сірі хвостові секції — той самий тон, щоб ярусів було рівно три */
.finstar-about-people, .finstar-method-boundary, .finstar-segment-cta,
.finstar-stack-check {
    background: #edf1f7;
}

/* ── ярус 3: ТЕМНІ секції ────────────────────────────────────────────────── */
.finstar-tech, .finstar-principles, .finstar-practices,
.finstar-sector-atlas, .finstar-method-steps, .finstar-build {
    background: var(--fs-dark);
    border-top: 0;
    border-bottom: 0;
}

/* текст на темному полотні */
.finstar-tech .finstar-kicker, .finstar-principles .finstar-kicker,
.finstar-practices .finstar-kicker, .finstar-sector-atlas .finstar-kicker,
.finstar-method-steps .finstar-kicker, .finstar-build .finstar-kicker {
    color: #8fb3ff !important;
}
.finstar-tech h2, .finstar-principles h2, .finstar-practices h2,
.finstar-sector-atlas h2, .finstar-method-steps h2, .finstar-build h2 {
    color: #ffffff;
}

/* списки, що лежать безпосередньо на темному тлі */
.finstar-tech__list, .finstar-tech__list a { border-color: rgba(255, 255, 255, .16); }
.finstar-tech__list a { color: #ffffff; }
.finstar-tech__list a:hover { color: #8fb3ff; }
.finstar-tech__list span { color: rgba(255, 255, 255, .62); }

.finstar-principles__list, .finstar-principles__list li,
.finstar-method-steps__list li, .finstar-method-steps__list li:last-child {
    border-color: rgba(255, 255, 255, .16);
}
.finstar-principles__list span, .finstar-method-steps__list span { color: #8fb3ff; }
.finstar-principles__list h3, .finstar-method-steps__list h3 { color: #ffffff; }
.finstar-principles__list p, .finstar-method-steps__list p { color: rgba(255, 255, 255, .72); }

/* реєстр-сітки на темному: клітинки лишаються світлими, рамка — світліша */
.finstar-practices__grid, .finstar-sector-atlas__grid, .finstar-build__grid {
    background: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .22);
}

/* ── фікс: акцентні (сині) клітинки — увесь текст білий, номер видимий ───── */
.finstar-lens__feature--wide h3, .finstar-practice--blue h3,
.finstar-sector--feature h3, .finstar-build__grid article:first-child h3 {
    color: #ffffff;
}
.finstar-lens__feature--wide p, .finstar-practice--blue .finstar-practice__lead,
.finstar-practice--blue p, .finstar-sector--feature p,
.finstar-build__grid article:first-child p {
    color: rgba(255, 255, 255, .94);
}
/* дрібний текст списку на насиченому синьому — повністю білий для чіткості */
.finstar-practice--blue li {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, .28);
}
.finstar-practice--blue li::before { background: #ffffff; }
.finstar-lens__feature--wide span, .finstar-practice--blue .finstar-practice__index,
.finstar-sector--feature span, .finstar-build__grid article:first-child span {
    color: rgba(255, 255, 255, .85);
}

/* ── Legal / privacy prose ───────────────────────────────────────────────── */
.fs-legal { max-width: 760px; margin: 0 auto; }
.fs-legal__upd { color: var(--fs-ink-muted); font-size: 14px; margin: 0 0 28px; }
.fs-legal h2 {
    margin: 32px 0 10px;
    color: var(--fs-ink);
    font-size: clamp(20px, 2vw, 24px);
    font-weight: 800;
    letter-spacing: -.02em;
    padding-left: 14px;
    border-left: 3px solid var(--fs-accent);
    line-height: 1.25;
}
.fs-legal p { color: var(--fs-ink-body); font-size: 16.5px; line-height: 1.7; margin: 0 0 14px; }
.fs-legal a { color: var(--fs-accent); text-decoration: underline; text-decoration-color: rgba(3,69,191,.4); }
.fs-legal code { background: var(--fs-canvas-3); color: var(--fs-accent-ink); padding: 1px 6px; border-radius: 3px; font-size: .92em; }