/* ═══════════════════════════════════════════════════════════════════════════
   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);
    padding: 76px 24px 26px;
}
.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); }

/* Клавіатурний фокус на темному тлі: синій акцент тут не читається. */
.site-footer a:focus-visible,
.site-footer .footer-cta:focus-visible,
.back-to-top:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
    border-radius: 2px;
}

/* ═══ 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 ───────────────────────────────────
   Одна вертикаль на блок. Раніше їх було дві: акцентна рейка самого блоку
   плюс рейка від загального `.single-body blockquote` всередині — два
   паралельні синіх штрихи й подвійний відступ. Цитата тут скидає донорські
   стилі blockquote, а роль «це цитата» бере на себе висяча лапка. */
.fs-expert {
    position: relative;
    margin: 40px 0;
    padding: 30px 34px 26px;
    background: var(--fs-canvas-2);
    border: 0;
    border-left: 3px solid var(--fs-accent);
}

/* Шапка: мітка ліворуч, автор праворуч — читач бачить, хто говорить,
   ще до самої цитати. */
.fs-expert__label {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--fs-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.fs-expert__label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--fs-line);
}

/* Цитата: скидаємо все, що донорський `.single-body blockquote` накидає
   зверху (рейка, відступ, курсив, вертикальні марджини). */
.single-body .fs-expert__quote,
.fs-expert .fs-expert__quote {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-style: normal;
    color: var(--fs-ink);
    font-size: 20px;
    line-height: 1.55;
    font-weight: 500;
    letter-spacing: -.011em;
}
/* Висяча лапка в полі відступу: типографічний сигнал цитати без другої лінії. */
.fs-expert .fs-expert__quote::before {
    content: "\201C";
    position: absolute;
    left: -.62em;
    top: -.1em;
    color: var(--fs-accent);
    opacity: .22;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2em;
    line-height: 1;
    pointer-events: none;
}
.fs-expert__quote p { margin: 0 0 14px; }
.fs-expert__quote p:last-child { margin-bottom: 0; }

.fs-expert__by {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--fs-line);
}
.fs-expert__ava img,
.fs-expert__ava .avatar {
    width: 48px; height: 48px;
    border-radius: 50% !important;
    object-fit: cover;
    display: block;
}
.fs-expert__meta { flex: 1; min-width: 0; }
.fs-expert__name { font-size: 15px; 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: 2px; font-size: 12.5px; line-height: 1.45; color: var(--fs-ink-muted); }
.fs-expert__link {
    flex: 0 0 auto;
    align-self: center;
    color: var(--fs-accent);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.fs-expert__link span { transition: transform .18s ease; display: inline-block; }
.fs-expert__link:hover { text-decoration: underline; }
.fs-expert__link:hover span { transform: translateX(3px); }

@media (max-width: 560px) {
    .fs-expert { padding: 24px 20px 20px; }
    .single-body .fs-expert__quote,
    .fs-expert .fs-expert__quote { font-size: 17.5px; }
    /* На вузькому екрані лапці немає де висіти — прибираємо, щоб не лізла за край. */
    .fs-expert .fs-expert__quote::before { display: none; }
    .fs-expert__by { flex-wrap: wrap; row-gap: 12px; }
    .fs-expert__link { flex-basis: 100%; }
}

/* ── Expert view, inline (другий і далі коментар у статті) ────────────────
   Тиха версія блоку вище: без плашки, одна рейка. У донорі тут теж було
   дві вертикалі — 3px від `.single-body blockquote` і 1px псевдоелемент. */
.igng-expert-comment--inline { margin: 30px 0; }
.igng-expert-comment--inline blockquote {
    position: relative;
    margin: 0;
    padding: 2px 0 2px 22px;
    border: 0;
    border-left: 2px solid var(--fs-accent);
    background: none;
    font-style: normal;
    color: var(--fs-ink-body);
    font-size: 17px;
    line-height: 1.62;
}
.igng-expert-comment--inline blockquote::before { display: none; }
.igng-expert-comment--inline blockquote p { margin: 0 0 12px; }
.igng-expert-comment--inline blockquote p:last-of-type { margin-bottom: 0; }
.igng-expert-comment--inline .igng-expert-comment__cite {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin-top: 12px;
    font-size: 13px;
}
.igng-expert-comment--inline .igng-expert-comment__cite-name { font-weight: 700; color: var(--fs-ink); }
.igng-expert-comment--inline .igng-expert-comment__cite-name a { color: var(--fs-ink); text-decoration: none; }
.igng-expert-comment--inline .igng-expert-comment__cite-name a:hover { color: var(--fs-accent); }
.igng-expert-comment--inline .igng-expert-comment__cite-position { color: var(--fs-ink-muted); }
.igng-expert-comment--inline .igng-expert-comment__cite-position::before {
    content: "·";
    margin-right: 8px;
    color: var(--fs-line-strong);
}

/* ── 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 ─────────────────────────────────────────
   Єдиний канонічний блок футера. Донорські шари в site.css (три конкурентні
   .footer-grid з !important і світлі кольори тексту) знято. */
.footer-grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1.15fr 1.15fr;
    gap: 28px 40px;
    align-items: start;
    margin-bottom: 44px;
}
/* Бренд-колонка ширша за решту: у ній логотип, абзац і головна дія. */
.footer-brand .footer-desc { max-width: 36ch; margin-top: 18px; }
.footer-logo { display: inline-block; }

.footer-cta {
    display: inline-flex;
    align-items: center;
    margin-top: 22px;
    padding: 11px 22px;
    border: 1px solid var(--fs-accent);
    border-radius: 3px;
    background: var(--fs-accent);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease;
}
/* .site-footer a переб'є коротший селектор — тому колір задаємо тут явно. */
.site-footer .footer-cta { color: #fff; }
.site-footer .footer-cta:hover {
    background: var(--fs-accent-deep);
    border-color: var(--fs-accent-deep);
    color: #fff;
}

/* Заголовок колонки: та сама «технічна» мітка з акцентною рискою, що й
   в сайдбарі («— НАЙБІЛЬШ ПОПУЛЯРНІ»), щоб футер говорив мовою сайту. */
.footer-col-title {
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, .92);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.footer-col-title::before {
    content: "";
    width: 14px;
    height: 2px;
    background: var(--fs-accent);
    flex: 0 0 auto;
}

/* Селектори нижче навмисно від `.site-footer`: у site.css лежить донорський
   `.footer-col ul li a { color: var(--muted) }` (#5d6b7f) — на темному тлі це
   контраст 3.2:1, нижче за WCAG AA, і він специфічніший за `.footer-menu-list a`. */
.footer-menu-list li { margin-bottom: 9px; }
.site-footer .footer-menu-list li a {
    display: inline-block;
    color: rgba(255, 255, 255, .74);
    font-size: 13.5px;
    line-height: 1.5;
    transition: color .18s ease, transform .18s ease;
}
.site-footer .footer-menu-list li a:hover { color: #fff; transform: translateX(3px); }

.site-footer .footer-contacts li { color: rgba(255, 255, 255, .74); font-size: 13.5px; line-height: 1.55; }
.site-footer .footer-contacts li a { color: rgba(255, 255, 255, .74); }
.site-footer .footer-contacts li a:hover { color: #fff; }
/* Іконки були акцентно-синіми — на темно-синьому тлі вони майже зникали. */
.footer-contacts svg,
.footer-contacts li svg { stroke: rgba(255, 255, 255, .45); fill: none; }

/* Нижній рядок: світла донорська лінія #dde3ec на темному тлі різала око. */
.footer-bottom {
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    text-align: left;
}
.footer-copy { color: rgba(255, 255, 255, .5); font-size: 12.5px; }
.site-footer .footer-privacy { color: rgba(255, 255, 255, .5); font-size: 12.5px; }
.site-footer .footer-privacy:hover { color: #fff; text-decoration: underline; }

@media (max-width: 1080px) {
    /* Бренд на всю ширину, посилання — рівною четвіркою під ним. */
    .footer-grid { grid-template-columns: repeat(4, 1fr); gap: 34px; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-brand .footer-desc { max-width: 60ch; }
}
@media (max-width: 860px) {
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
}
@media (max-width: 620px) {
    .site-footer { padding-top: 56px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* 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; }

/* ═══ 10. PILLAR-СТОРІНКИ — мова «досьє» ═════════════════════════════════
   Донорський шар подавав ці сторінки як стрічку центрованих секцій із
   заокругленими картками й чергуванням білого та сірого. Тут — інша
   подача: суцільне біле полотно, секції розділені волосяними лініями,
   заголовок винесено в ліву колонку-корінець із порядковим номером,
   а картки замінено на пласкі реєстрові рядки.
   Стосується /ecm-dms/, /bpm-automation/, /system-integration/,
   /cybersecurity/ та їхніх EN-двійників. */

main { counter-reset: pillarsec; }

.pillar-section {
    background: var(--fs-canvas);
    padding: 0;
}
.pillar-section--alt { background: var(--fs-canvas); }

/* Корінець + смуга контенту. Ліва колонка тримає номер, мітку й заголовок;
   права — власне матеріал. Це головний структурний зсув. */
.pillar-section > .container {
    display: grid;
    grid-template-columns: 216px minmax(0, 1fr);
    column-gap: 56px;
    align-items: start;
    padding-top: 64px;
    padding-bottom: 64px;
    border-top: 1px solid var(--fs-line);
}
.pillar-section > .container > .section-header { grid-column: 1; }
.pillar-section > .container > *:not(.section-header) { grid-column: 2; }
.pillar-intro > .container { border-top: 0; }

/* Секції без власного заголовка — суцільною смугою, без корінця. */
.pillar-signature-section > .container,
.pillar-cta-section > .container {
    grid-template-columns: minmax(0, 1fr);
    border-top: 0;
}
/* :not(.section-header) навмисно: без нього правило вище (воно теж має клас
   у :not) виявляється специфічнішим і кидає ці блоки в колонку 2, де grid
   створює неявний стовпець — блок з'їжджає праворуч на пів-екрана */
.pillar-signature-section > .container > *:not(.section-header),
.pillar-cta-section > .container > *:not(.section-header) { grid-column: 1; }
.pillar-signature-section > .container { padding-top: 0; }

/* ── Заголовок секції ──────────────────────────────────────────────────── */
.pillar-section .section-header,
.pillar-section .section-header.text-center {
    text-align: left;
    margin: 0;
    position: sticky;
    top: calc(var(--fs-hdr) + 20px);
}
.pillar-section:has(.section-header) { counter-increment: pillarsec; }
.pillar-section .section-header .tag {
    display: block;
    color: var(--fs-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin: 0 0 12px;
}
/* Дизайн-система вже дає .tag::before декоративну риску 18×2px із
   background: currentcolor. Тут замість риски — номер секції, тож розміри
   й фон треба скинути, інакше цифра малюється всередині сірого прямокутника. */
.pillar-section .section-header .tag::before {
    content: counter(pillarsec, decimal-leading-zero) " / ";
    width: auto;
    height: auto;
    background: none;
    color: var(--fs-ink-muted);
}
.pillar-section .section-header h2 {
    font-size: 25px;
    line-height: 1.22;
    letter-spacing: -.015em;
    color: var(--fs-ink);
    margin: 0;
}
/* центрувальна риска донора тут зайва — її роль виконує лінія секції */
.pillar-section .section-header .line { display: none; }
.pillar-section .section-header p,
.pillar-section .section-header .intro-narrow-650 {
    margin: 14px 0 0;
    max-width: none;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--fs-ink-muted);
}

/* ── Загальні правила реєстру: жодних заокруглень і тіней ──────────────── */
.pillar-marker-card,
.pillar-signature-card,
.pillar-filter-col,
.pillar-case,
.pillar-tech-block,
.pillar-mistake {
    border-radius: 0;
    box-shadow: none;
    background: var(--fs-canvas);
}

/* ── 01. Вступ ─────────────────────────────────────────────────────────── */
.pillar-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 36px;
    align-items: start;
}
.pillar-intro-text p { font-size: 16px; line-height: 1.72; color: var(--fs-ink-body); }
.pillar-marker-card {
    border: 1px solid var(--fs-line);
    border-top: 2px solid var(--fs-accent);
    padding: 24px 26px;
}
.pillar-marker-card h3 {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fs-ink);
    margin: 0 0 14px;
}
.pillar-marker-list { list-style: none; margin: 0; padding: 0; }
.pillar-marker-list li {
    position: relative;
    padding: 9px 0 9px 20px;
    border-top: 1px solid var(--fs-line-soft);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--fs-ink-body);
}
.pillar-marker-list li:first-child { border-top: 0; }
.pillar-marker-list li::before {
    content: "";
    position: absolute;
    left: 0; top: 17px;
    width: 8px; height: 1px;
    background: var(--fs-accent);
}

/* ── Тези-підпис ───────────────────────────────────────────────────────── */
.pillar-signature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-left: 1px solid var(--fs-line);
}
.pillar-signature-card {
    border: 0;
    border-right: 1px solid var(--fs-line);
    padding: 26px 28px 28px;
}
.pillar-signature-label {
    color: var(--fs-ink-muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.pillar-signature-card h3 { font-size: 17px; line-height: 1.35; margin: 0 0 10px; color: var(--fs-ink); }
.pillar-signature-card p { font-size: 14px; line-height: 1.62; color: var(--fs-ink-muted); margin: 0; }

/* ── Позиція: номер живе на полях ──────────────────────────────────────── */
.pillar-position-grid { display: block; }
.pillar-position-statement {
    /* донор робив із тези градієнтну картку з синьою рейкою і радіусом —
       знімаємо все, тут теза тримається на самій лінії й номері на полях */
    display: block;
    position: relative;
    grid-template-columns: none;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 26px 0 26px 62px;
    border-top: 1px solid var(--fs-line);
}
.pillar-position-statement:first-child { border-top: 0; padding-top: 0; }
.pillar-position-num {
    position: absolute;
    left: 0;
    top: 26px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--fs-accent);
}
.pillar-position-statement:first-child .pillar-position-num { top: 0; }
.pillar-position-statement h3 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--fs-ink);
    margin: 0 0 10px;
}
.pillar-position-statement p { font-size: 14.5px; line-height: 1.68; color: var(--fs-ink-muted); margin: 0; }

/* ── Чесний фільтр: дві колонки через волосяну лінію ───────────────────── */
.pillar-filter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--fs-line);
}
.pillar-filter-col { border: 0; padding: 24px 26px 26px; }
.pillar-filter-col--no { border-left: 1px solid var(--fs-line); }
.pillar-filter-col h3 {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin: 0 0 14px;
}
.pillar-filter-col--yes h3 { color: var(--fs-accent); }
.pillar-filter-col--no h3 { color: var(--fs-ink-muted); }
.pillar-filter-col ul { list-style: none; margin: 0; padding: 0; }
.pillar-filter-col li {
    padding: 9px 0;
    border-top: 1px solid var(--fs-line-soft);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--fs-ink-body);
}
.pillar-filter-col li:first-child { border-top: 0; }

/* ── Процес: сходинки на вертикальній лінії ────────────────────────────── */
/* донор роздавав .pillar-steps/.pillar-step власні grid-сітки (60px + 1fr);
   номер тут абсолютний, тож обидві сітки треба зняти, інакше текст
   затискається в 60-піксельну колонку */
.pillar-steps { display: block; position: relative; padding-left: 46px; }
.pillar-steps::before {
    content: "";
    position: absolute;
    left: 13px; top: 6px; bottom: 6px;
    width: 1px;
    background: var(--fs-line);
}
.pillar-step { display: block; position: relative; padding: 0 0 26px; border-bottom: 0; }
.pillar-step:last-child { padding-bottom: 0; }
.pillar-step-num {
    position: absolute;
    left: -46px; top: 0;
    width: 27px; height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fs-canvas);
    border: 1px solid var(--fs-accent);
    color: var(--fs-accent);
    font-size: 11px;
    font-weight: 700;
}
.pillar-step-body h3 { font-size: 16px; font-weight: 700; color: var(--fs-ink); margin: 3px 0 8px; line-height: 1.35; }
.pillar-step-meta { color: var(--fs-ink-muted); font-weight: 500; font-size: 13px; }
.pillar-step-body p { font-size: 14.5px; line-height: 1.65; color: var(--fs-ink-muted); margin: 0; }
.pillar-leads { margin-top: 26px; font-size: 14px; color: var(--fs-ink-muted); }

/* ── Антипатерни: рядки, а не картки ───────────────────────────────────── */
.pillar-mistakes-grid { display: block; }
.pillar-mistake {
    border: 0;
    border-top: 1px solid var(--fs-line);
    padding: 22px 0;
}
.pillar-mistake:first-child { border-top: 0; padding-top: 0; }
.pillar-mistake-mark {
    display: inline-block;
    color: var(--fs-accent);
    font-size: 12px;
    margin-bottom: 8px;
}
.pillar-mistake h3 { font-size: 16.5px; font-weight: 700; color: var(--fs-ink); margin: 0 0 8px; }
.pillar-mistake p { font-size: 14.5px; line-height: 1.65; color: var(--fs-ink-muted); margin: 0 0 10px; }
.pillar-mistake-fix {
    background: var(--fs-canvas-2);
    border-left: 2px solid var(--fs-accent);
    padding: 12px 16px;
    margin: 0 !important;
    color: var(--fs-ink-body) !important;
    font-size: 14px !important;
}
.pillar-mistake-fix strong { color: var(--fs-ink); }

/* ── Сценарії: пласкі панелі з реєстровим dl ───────────────────────────── */
/* у смузі контенту (828px) три колонки задавили б картки — тримаємо дві */
.pillar-cases-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.pillar-deepdives.news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
}
.pillar-case {
    border: 1px solid var(--fs-line);
    padding: 22px 24px 24px;
    transition: border-color .18s ease;
}
.pillar-case:hover { border-color: var(--fs-line-strong); }
.pillar-case-meta {
    color: var(--fs-ink-muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.pillar-case h3 { font-size: 16px; line-height: 1.35; color: var(--fs-ink); margin: 0 0 14px; }
.pillar-case-flow { margin: 0; }
.pillar-case-flow > div { padding: 10px 0; border-top: 1px solid var(--fs-line-soft); }
.pillar-case-flow dt {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fs-accent);
    margin-bottom: 4px;
}
.pillar-case-flow dd { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--fs-ink-muted); }

/* ── Технології: реєстр у два стовпці ──────────────────────────────────── */
.pillar-tech-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 40px;
}
.pillar-tech-block {
    border: 0;
    border-top: 1px solid var(--fs-line);
    padding: 16px 0;
}
.pillar-tech-block h3 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fs-accent);
    margin: 0 0 6px;
}
.pillar-tech-block p { font-size: 14px; line-height: 1.6; color: var(--fs-ink-body); margin: 0; }

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.pillar-faq { max-width: none; }
.pillar-faq-item { border-top: 1px solid var(--fs-line); }
.pillar-faq-item:first-child { border-top: 0; }
.pillar-faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    gap: 14px;
    align-items: baseline;
    padding: 16px 0;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--fs-ink);
}
.pillar-faq-item summary::-webkit-details-marker { display: none; }
.pillar-faq-item summary::before {
    content: "+";
    flex: 0 0 auto;
    color: var(--fs-accent);
    font-weight: 700;
}
.pillar-faq-item[open] summary::before { content: "\2212"; }
.pillar-faq-answer { padding: 0 0 18px 28px; }
.pillar-faq-answer p { font-size: 14.5px; line-height: 1.7; color: var(--fs-ink-muted); margin: 0 0 10px; }
.pillar-faq-answer p:last-child { margin-bottom: 0; }

/* ── Фінальний заклик ──────────────────────────────────────────────────────
   Темної плашки тут бути не може: одразу під нею темний футер, і два
   чорнильні прямокутники зливаються в одну масу. Тому світла акцентна
   смуга — вона відділяє себе і від білого полотна сторінки, і від футера.
   Розкладка горизонтальна: заклик ліворуч, дії праворуч. */
.pillar-cta-section > .container { padding-bottom: 56px; }
.pillar-cta-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 48px;
    align-items: center;
    background: var(--fs-accent-soft);
    border-top: 3px solid var(--fs-accent);
    padding: 36px 40px 38px;
    /* донорські max-width:760px + margin:0 auto: авто-марджини в grid
       з'їдають розтягування, і смуга виходила вужчою за сторінку */
    max-width: none;
    margin: 0;
    justify-self: stretch;
    text-align: left;
}
.pillar-cta-inner h2 {
    grid-column: 1;
    color: var(--fs-ink);
    font-size: 24px;
    line-height: 1.28;
    letter-spacing: -.015em;
    margin: 0 0 10px;
    max-width: 26ch;
}
.pillar-cta-inner p {
    grid-column: 1;
    color: var(--fs-ink-body);
    font-size: 14.5px;
    line-height: 1.6;
    margin: 0;
    max-width: 52ch;
}
.pillar-cta-buttons {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}
.pillar-cta-inner .btn-primary,
.pillar-cta-inner .btn-ghost {
    justify-content: center;
    white-space: nowrap;
}
.pillar-cta-inner .btn-ghost {
    color: var(--fs-accent);
    border-color: var(--fs-line-strong);
    background: var(--fs-canvas);
}
.pillar-cta-inner .btn-ghost:hover { border-color: var(--fs-accent); background: var(--fs-canvas); }
.pillar-cta-inner .btn-primary:focus-visible,
.pillar-cta-inner .btn-ghost:focus-visible { outline: 2px solid var(--fs-accent); outline-offset: 3px; }

@media (max-width: 900px) {
    .pillar-cta-inner { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
    .pillar-cta-inner h2, .pillar-cta-inner p { grid-column: 1; }
    .pillar-cta-buttons { grid-column: 1; grid-row: auto; flex-direction: row; flex-wrap: wrap; }
}

/* ── Адаптив ───────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
    .pillar-section > .container {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 26px;
        padding-top: 52px;
        padding-bottom: 52px;
    }
    .pillar-section > .container > .section-header,
    .pillar-section > .container > *:not(.section-header) { grid-column: 1; }
    .pillar-section .section-header,
    .pillar-section .section-header.text-center { position: static; }
    .pillar-section .section-header p { max-width: 68ch; }
    .pillar-intro-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .pillar-signature-grid { grid-template-columns: minmax(0, 1fr); border-left: 0; border-top: 1px solid var(--fs-line); }
    .pillar-signature-card { border-right: 0; border-bottom: 1px solid var(--fs-line); padding: 22px 0; }
    .pillar-filter-grid { grid-template-columns: minmax(0, 1fr); }
    .pillar-filter-col--no { border-left: 0; border-top: 1px solid var(--fs-line); }
    .pillar-cases-grid { grid-template-columns: minmax(0, 1fr); }
    .pillar-deepdives.news-grid { grid-template-columns: minmax(0, 1fr); }
    .pillar-tech-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .pillar-position-statement { padding-left: 0; padding-top: 44px; }
    .pillar-position-statement:first-child { padding-top: 22px; }
    .pillar-position-num { top: 22px; }
    .pillar-position-statement:first-child .pillar-position-num { top: 0; }
    .pillar-cta-inner { padding: 32px 24px 34px; }
    .pillar-cta-inner h2 { font-size: 22px; }
    .pillar-section .section-header h2 { font-size: 22px; }
}

/* ═══ 11. СТОРІНКА КОНТАКТІВ ═════════════════════════════════════════════
   Панель зі зв'язком ліворуч, форма праворуч (сітка вже в шаблоні).
   Тут — типографіка й поля: донор лишив заголовки 50px/800, підписи полів
   11px звичайним накресленням і поля висотою 34px, що не тримає ритм
   решти сайту. */

.finstar-contact__grid { align-items: start; }

/* ── Ліва панель ───────────────────────────────────────────────────────── */
.finstar-contact__panel {
    padding: 40px 38px 42px;
    border-top: 3px solid var(--fs-ink);
}
.finstar-contact__panel .finstar-kicker { color: rgba(255, 255, 255, .72); }
.finstar-contact__panel h2 {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.015em;
    margin: 10px 0 20px;
}
.finstar-contact__email {
    display: inline-block;
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .4);
    padding-bottom: 2px;
    transition: border-color .18s ease;
}
.finstar-contact__email:hover { border-bottom-color: #fff; }
.finstar-contact__location {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .22);
}
.finstar-contact__location strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}
.finstar-contact__location p {
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .8);
    margin: 0;
}
.finstar-contact__note {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .22);
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .8);
}

/* ── Права колонка: заголовок форми ────────────────────────────────────── */
.finstar-contact__form h2 {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.015em;
    color: var(--fs-ink);
    margin: 10px 0 10px;
}
.finstar-contact__form > p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--fs-ink-muted);
    margin: 0 0 26px;
    max-width: 54ch;
}

/* ── Поля ──────────────────────────────────────────────────────────────────
   `!important` тут вимушений: донорський site.css задає полям і кнопці
   `padding: 8px 11px !important`, `gap: 10px !important` тощо, і без
   такої ж ваги ці значення не перебити. Селектори — від `.ig-form-group`,
   бо частина інпутів у розмітці без атрибута type. */
.finstar-contact__form .ig-crm-form__fields { gap: 18px; }
.finstar-contact__form .ig-form-row { gap: 18px !important; }

.finstar-contact__form .ig-form-group label,
.finstar-contact__form .ig-form-group > label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fs-ink-muted);
    margin-bottom: 7px;
}
.finstar-contact__form .ig-form-group input,
.finstar-contact__form .ig-form-group select,
.finstar-contact__form .ig-form-group textarea {
    width: 100%;
    height: 44px;
    padding: 11px 14px !important;
    font-family: inherit;
    font-size: 14.5px !important;
    line-height: 1.4;
    color: var(--fs-ink);
    background: var(--fs-canvas);
    border: 1px solid var(--fs-line-strong);
    border-radius: 3px;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.finstar-contact__form .ig-form-group textarea {
    height: auto;
    min-height: 140px !important;
    resize: vertical;
}
.finstar-contact__form .ig-form-group input::placeholder,
.finstar-contact__form .ig-form-group textarea::placeholder { color: #9aa6b8; }
.finstar-contact__form .ig-form-group input:hover,
.finstar-contact__form .ig-form-group textarea:hover { border-color: #a9b8ce; }
.finstar-contact__form .ig-form-group input:focus,
.finstar-contact__form .ig-form-group textarea:focus,
.finstar-contact__form .ig-form-group select:focus {
    outline: none;
    border-color: var(--fs-accent);
    box-shadow: 0 0 0 3px rgba(3, 69, 191, .12);
}

/* ── Згода ─────────────────────────────────────────────────────────────── */
.finstar-contact__form .ig-form-privacy {
    align-items: flex-start;
    gap: 10px !important;
    margin-top: 6px;
    font-size: 13px !important;
    line-height: 1.5;
    color: var(--fs-ink-muted);
}
.finstar-contact__form .ig-form-privacy input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-top: 1px;
    accent-color: var(--fs-accent);
    flex: 0 0 auto;
}
.finstar-contact__form .ig-form-privacy a { color: var(--fs-accent); }

/* ── Кнопка ────────────────────────────────────────────────────────────── */
/* На всю ширину колонки кнопка виглядала як смуга; тримаємо її за змістом,
   у тому ж форматі, що й решта кнопок сайту. */
.finstar-contact__form .ig-crm-form .ig-form-submit,
.finstar-contact__form .ig-crm-form button[type="submit"] {
    width: auto;
    align-self: flex-start;
    height: auto;
    padding: 12px 26px !important;
    font-size: 14px !important;
    font-weight: 600;
    letter-spacing: normal;
    border-radius: 3px !important;   /* збігтися з радіусом полів */
    margin-top: 4px;
}
.finstar-contact__form .ig-form-submit:focus-visible {
    outline: 2px solid var(--fs-accent);
    outline-offset: 3px;
}

@media (max-width: 900px) {
    .finstar-contact__panel { padding: 30px 26px 32px; }
    .finstar-contact__form h2 { font-size: 25px; }
    .finstar-contact__form .ig-form-row { grid-template-columns: minmax(0, 1fr) !important; }
    .finstar-contact__form .ig-crm-form .ig-form-submit { width: 100%; }
}