/* =========================================================
   Syngeon AI section — standalone stylesheet, no build step.
   Light and airy, brand blue as the only accent.
   System fonts, no external requests.
   ========================================================= */

/* ---- Tokens ---------------------------------------------------------- */
:root {
    /* Brand ramp taken from the logo gradient. */
    --brand:     #22739F;   /* surfaces carrying white text */
    --brand-600: #14648D;
    --brand-700: #005A81;   /* text on light tints */
    --brand-100: #E2EDF9;
    --brand-050: #F3F8FC;

    /* Neutrals */
    --ink:     #333031;
    --slate:   #646263;
    /* Do not lighten: --muted carries body text on --surface at 4.62:1,
       which is only just AA. */
    --muted:   #726F70;
    --line:    #E4E8EC;
    --surface: #F4F7FA;
    --paper:   #FFFFFF;

    /* Warm signal colours so warnings do not read as another brand tone.
       Contrast on their own tints: warn 6.5:1, ok 6.1:1 — both AA. */
    --warn-700: #8A4B22;
    --warn-500: #B96328;   /* fills only, too light for text */
    --warn-100: #F2DFCE;
    --warn-050: #FCF3EC;
    --ok-700:   #1F6B4A;
    --ok-100:   #D7EAE0;
    --ok-050:   #EDF6F1;

    /* Channels for rgb(… / alpha). */
    --brand-rgb:      34 115 159;
    --brand-700-rgb:   0  90 129;
    --ink-rgb:        51  48  49;
    --warn-500-rgb:  185  99  40;

    --shadow-sm: 0 1px 2px rgb(var(--ink-rgb) / .05), 0 1px 3px rgb(var(--ink-rgb) / .04);
    --shadow-md: 0 2px 6px rgb(var(--ink-rgb) / .04), 0 12px 28px rgb(var(--ink-rgb) / .07);
    --shadow-lg: 0 8px 20px rgb(var(--brand-rgb) / .10), 0 24px 56px rgb(var(--ink-rgb) / .10);

    --space:       clamp(1.25rem, 4vw, 2rem);
    --radius:      14px;
    --radius-lg:   22px;
    --radius-pill: 999px;
    --wrap:        72rem;

    --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ---- Reset ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    font-family: var(--sans);
    color: var(--slate);
    background: var(--paper);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 {
    color: var(--ink);
    line-height: 1.12;
    letter-spacing: -0.025em;
    font-weight: 680;
    text-wrap: balance;
}
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

/* ---- Skip link ------------------------------------------------------- */
/* fixed, not absolute: stays visible once the page is scrolled. */
.skiplink {
    position: fixed;
    top: .55rem;
    left: var(--space);
    z-index: 30;
    transform: translateY(-250%);
    font-family: var(--mono);
    font-size: .74rem;
    letter-spacing: .06em;
    text-decoration: none;
    color: var(--brand-700);
    background: var(--paper);
    border: 1px solid var(--brand-100);
    border-radius: var(--radius-pill);
    padding: .45rem 1rem;
    box-shadow: var(--shadow-md);
}
.skiplink:focus { transform: translateY(0); }

/* ---- Header ---------------------------------------------------------- */
.site-head {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, .78);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
}
/* 1fr auto 1fr keeps the nav centred whatever the flanking widths. */
.site-head__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    max-width: var(--wrap);
    margin-inline: auto;
    width: 100%;
    padding: .9rem var(--space);
}
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; justify-self: start; }
/* Height drives the size; width:auto keeps the aspect ratio. */
.brand__logo { height: 1.7rem; width: auto; }
.brand__sub {
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .1em;
    color: var(--brand-700);
    background: var(--brand-050);
    border: 1px solid var(--brand-100);
    border-radius: var(--radius-pill);
    padding: .1rem .5rem;
}
.head-right { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; justify-self: end; }
.nav { display: flex; gap: .35rem; }
.nav__link {
    text-decoration: none;
    font-size: .9rem;
    font-weight: 520;
    color: var(--slate);
    padding: .35rem .7rem;
    border-radius: var(--radius-pill);
    transition: color .18s ease, background-color .18s ease;
}
.nav__link:hover { color: var(--ink); background: var(--surface); }
.nav__link.is-active { color: var(--brand-700); background: var(--brand-050); }

/* ---- Section nav ----------------------------------------------------- */
.pillnav { display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem; }
.pillnav__link {
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: var(--brand-700);
    background: var(--brand-050);
    border: 1px solid var(--brand-100);
    border-radius: var(--radius-pill);
    padding: .22rem .6rem;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.pillnav__link:hover { background: var(--brand-100); border-color: var(--brand); }

/* Keep anchor targets clear of the sticky header. */
.page > section[id] { scroll-margin-top: 4.5rem; }

/* ---- Back link ------------------------------------------------------- */
.backlink {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    text-decoration: none;
    font-size: .82rem;
    font-weight: 520;
    color: var(--slate);
    white-space: nowrap;
    transition: color .18s ease;
}
.backlink:hover { color: var(--brand-700); }
.backlink__arrow { font-size: .9em; }

/* ---- Language switch ------------------------------------------------- */
.langswitch {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .74rem;
    font-weight: 620;
    letter-spacing: .06em;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    padding: .2rem .3rem;
}
.langswitch__opt {
    text-decoration: none;
    color: var(--muted);
    padding: .18rem .5rem;
    border-radius: var(--radius-pill);
    transition: color .18s ease, background-color .18s ease;
}
.langswitch__opt:hover { color: var(--ink); }
.langswitch__opt.is-active { color: #fff; background: var(--brand); }
.langswitch__sep { display: none; }

/* ---- Layout ---------------------------------------------------------- */
/* Three columns so .band can break out full width. */
.page {
    --gap: clamp(3rem, 6.5vw, 5rem);
    flex: 1;
    display: grid;
    grid-template-columns: 1fr min(var(--wrap), 100% - 2 * var(--space)) 1fr;
    align-content: start;
    row-gap: var(--gap);
    padding-bottom: clamp(4rem, 9vw, 7rem);
}
.page > * { grid-column: 2; }
.page > .band { grid-column: 1 / -1; }
.band__inner {
    max-width: var(--wrap);
    margin-inline: auto;
    width: 100%;
    padding-inline: var(--space);
}
.band--surface {
    background: var(--surface);
    border-block: 1px solid var(--line);
    padding-block: clamp(3rem, 6vw, 4.5rem);
}
.band--cta {
    background: linear-gradient(180deg, var(--brand-050), var(--paper));
    border-block: 1px solid var(--brand-100);
    padding-block: clamp(3rem, 6vw, 4.5rem);
}

/* ---- Eyebrow --------------------------------------------------------- */
.eyebrow {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .76rem;
    font-weight: 620;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand-700);
    background: var(--brand-050);
    border: 1px solid var(--brand-100);
    border-radius: var(--radius-pill);
    padding: .35rem .85rem;
}
.eyebrow::before {
    content: "";
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 3px rgb(var(--brand-rgb) / .18);
}
.eyebrow--warn { color: var(--warn-700); background: var(--warn-050); border-color: var(--warn-100); }
.eyebrow--warn::before { background: var(--warn-500); box-shadow: 0 0 0 3px rgb(var(--warn-500-rgb) / .18); }

/* One size down inside the callout. */
.callout .eyebrow {
    gap: .4rem;
    font-size: .68rem;
    padding: .24rem .7rem;
}
.callout .eyebrow::before {
    width: .34rem;
    height: .34rem;
    box-shadow: 0 0 0 2.5px rgb(var(--brand-rgb) / .18);
}

/* ---- Hero ------------------------------------------------------------ */
.band--hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(3.5rem, 9vw, 7rem) clamp(.5rem, 2vw, 1rem);
}
.band--hero::before {
    content: "";
    position: absolute;
    inset: -55% -20% auto -20%;
    height: 150%;
    z-index: -2;
    background:
        radial-gradient(42% 46% at 22% 42%, rgb(var(--brand-rgb) / .20), transparent 70%),
        radial-gradient(38% 42% at 82% 24%, rgb(var(--brand-rgb) / .12), transparent 70%);
}
.band--hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(to right, rgb(var(--brand-rgb) / .07) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(var(--brand-rgb) / .07) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(70% 65% at 50% 30%, #000, transparent 100%);
            mask-image: radial-gradient(70% 65% at 50% 30%, #000, transparent 100%);
}

.hero { display: grid; gap: 1.35rem; max-width: 52rem; }
.hero h1 {
    font-size: clamp(2.35rem, 6.4vw, 4.05rem);
    font-weight: 720;
    letter-spacing: -0.035em;
}
.hero--slim h1 { font-size: clamp(2rem, 5vw, 3rem); }
.hero__sub {
    font-size: clamp(1.15rem, 2.6vw, 1.5rem);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--brand-700);
}
.hero__teaser { display: grid; gap: .8rem; max-width: 44rem; }
.lead { font-size: clamp(1.05rem, 2.1vw, 1.19rem); color: var(--slate); max-width: 44rem; }

@media (prefers-reduced-motion: no-preference) {
    .hero > * { animation: rise .7s cubic-bezier(.22, .8, .3, 1) backwards; }
    .hero > :nth-child(2) { animation-delay: .06s; }
    .hero > :nth-child(3) { animation-delay: .12s; }
    .hero > :nth-child(4) { animation-delay: .18s; }
}
@keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* ---- Button ---------------------------------------------------------- */
.btn {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: linear-gradient(180deg, var(--brand), var(--brand-600));
    color: #fff;
    text-decoration: none;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 600;
    padding: .78rem 1.5rem;
    border: 0;
    border-radius: var(--radius-pill);
    cursor: pointer;
    box-shadow: 0 1px 2px rgb(var(--brand-700-rgb) / .28), 0 8px 20px rgb(var(--brand-rgb) / .26);
    transition: box-shadow .2s ease, transform .12s ease, filter .2s ease;
}
.btn:hover { filter: saturate(1.08) brightness(1.04); box-shadow: 0 2px 4px rgb(var(--brand-700-rgb) / .3), 0 12px 28px rgb(var(--brand-rgb) / .34); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--ghost {
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}
.btn--ghost:hover { filter: none; border-color: var(--brand-100); box-shadow: var(--shadow-md); }

/* ---- Section head ---------------------------------------------------- */
.section-head { display: grid; gap: 1rem; max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 2.75rem); }

/* Centred sections; prose pages stay left aligned. */
.section-head--center,
.prose--center {
    margin-inline: auto;
    justify-items: center;
    text-align: center;
}
.prose--center .lead { margin-inline: auto; }

/* ---- Card grid ------------------------------------------------------- */
.grid {
    display: grid;
    gap: clamp(1rem, 2vw, 1.4rem);
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
@media (min-width: 60rem) { .grid { grid-template-columns: repeat(2, 1fr); } }

.card {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 3vw, 2.1rem);
    display: grid;
    gap: .7rem;
    align-content: start;
    box-shadow: var(--shadow-sm);
}
/* No hover: not clickable, and a hover state would claim otherwise. */
.card__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    font-family: var(--mono);
    font-size: .85rem;
    font-weight: 600;
    color: var(--brand-700);
    background: var(--brand-050);
    border: 1px solid var(--brand-100);
    margin-bottom: .35rem;
}
.card h3 { font-size: 1.24rem; letter-spacing: -0.02em; }
.card p { color: var(--slate); font-size: .98rem; }

/* ---- Prose ----------------------------------------------------------- */
.prose { max-width: 46rem; display: grid; gap: 1.15rem; }
.prose p { color: var(--slate); font-size: 1.06rem; }
.prose__title { font-size: clamp(1.6rem, 3.4vw, 2.35rem); }

/* ---- Use case list --------------------------------------------------- */
.arealist {
    list-style: none;
    padding: 0;
    display: grid;
    gap: .7rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    max-width: 58rem;
    margin-inline: auto;
}
/* Four items must fall as 2x2, not 3+1. */
@media (min-width: 52rem) { .arealist { grid-template-columns: repeat(2, 1fr); } }
/* Tick aligns to the first line, not the block centre. */
.arealist li {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .85rem 1rem;
    box-shadow: var(--shadow-sm);
}
/* No hover — see .card. */
.arealist li::before {
    content: "";
    flex: none;
    margin-top: .12rem;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--brand-050) center / .8rem .8rem no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232E81C4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8'/%3E%3C/svg%3E");
}
.arealist__text { display: grid; gap: .2rem; }
.arealist__h { font-size: .99rem; font-weight: 600; color: var(--ink); line-height: 1.35; }
.arealist__p { font-size: .84rem; line-height: 1.45; color: var(--muted); hyphens: auto; }

/* ---- Process steps --------------------------------------------------- */
.steps {
    --step-gap: clamp(1.25rem, 2.5vw, 2rem);
    --step-size: 2.5rem;
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--step-gap);
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    counter-reset: step;
}
.steps__item {
    position: relative;
    display: grid;
    gap: .45rem;
    align-content: start;
    padding-top: calc(var(--step-size) + .9rem);
}
.steps__item::before {
    counter-increment: step;
    content: counter(step, decimal-leading-zero);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: var(--step-size);
    height: var(--step-size);
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-family: var(--mono);
    font-size: .85rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(180deg, var(--brand), var(--brand-600));
    box-shadow: 0 0 0 5px var(--surface), 0 6px 14px rgb(var(--brand-rgb) / .28);
}
.steps__item h3 { font-size: 1.1rem; letter-spacing: -0.015em; }
.steps__item p { color: var(--slate); font-size: .98rem; }

/* Connector only once all four steps sit in one row. */
@media (min-width: 68rem) {
    .steps { grid-template-columns: repeat(4, 1fr); }
    .steps__item:not(:last-child)::after {
        content: "";
        position: absolute;
        top: calc(var(--step-size) / 2);
        left: calc(var(--step-size) + .5rem);
        right: calc(-1 * var(--step-gap));
        height: 2px;
        border-radius: 1px;
        background: linear-gradient(to right, var(--brand-100), var(--line));
    }
}

/* ---- Callout --------------------------------------------------------- */
.callout {
    max-width: 52rem;
    margin-top: clamp(2.25rem, 5vw, 3.25rem);
    margin-inline: auto;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 3vw, 2.1rem);
    display: grid;
    gap: .7rem;
    box-shadow: var(--shadow-sm);
}
/* Standalone section: the box owns its spacing. */
.callout--solo { margin-top: 0; }
.callout h2,
.callout h3 { font-size: 1.24rem; letter-spacing: -0.02em; }
/* Runs to two lines, so tighter than the default. */
.callout h2 { font-size: 1.38rem; text-wrap: balance; }
.callout p { color: var(--slate); font-size: 1.02rem; }

/* Myth and answer on one line; the quoted part is the objection. */
.myths {
    list-style: none;
    padding: 0;
    display: grid;
    gap: .6rem;
    margin-block: .15rem;
}
.myths li {
    color: var(--slate);
    font-size: 1.02rem;
    padding-left: .9rem;
    border-left: 2px solid var(--brand-100);
}
.myths strong { color: var(--ink); font-weight: 620; }

/* Follow-up link at the foot of the box. */
.callout .callout__more { font-size: .95rem; }
.callout__more a {
    color: var(--brand-700);
    font-weight: 560;
    text-decoration-color: var(--brand-100);
    text-underline-offset: 2px;
}
.callout__more a::after { content: " →"; }
.callout__more a:hover { text-decoration-color: currentColor; }

/* ---- Solution tiles -------------------------------------------------- */
/*
 * Per-product colour and icon, carried by .solution--<slug> on both the tile
 * and its dialog so the association survives opening.
 *
 *   --accent      fills, edge, bullets, icon
 *   --accent-ink  text on white (darker, for contrast)
 *   --accent-100  border of tinted areas
 *   --accent-050  fill of tinted areas
 */
.solutions {
    display: grid;
    gap: clamp(1rem, 2vw, 1.4rem);
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
@media (min-width: 60rem) { .solutions { grid-template-columns: repeat(2, 1fr); } }

/*
 * Odd product count: the last tile would sit alone in the left column with a
 * hole beside it. Let it span both columns instead.
 *
 * :nth-child(odd):last-child rather than :nth-child(5) or the product modifier
 * — it states the rule ("the last tile is an orphan") instead of a position. It
 * stops applying by itself when a sixth product is added and starts applying
 * again at seven, and it provably cannot touch the grid while there are four.
 * Only above 60rem: below it the auto-fit track is already single-column and
 * the span would be a no-op.
 */
@media (min-width: 60rem) {
    .solutions > .solution:nth-child(odd):last-child { grid-column: 1 / -1; }

    /* The band is then ~66rem wide with the same column flow, which would leave
       one line of prose and three stacked bullets floating in it. Cap the prose
       and run the bullets in a row: the same parts, laid out for the shape.
       A horizontal run of short items is already the pattern here — see
       .soldlg__facts. */
    .solutions > .solution:nth-child(odd):last-child .solution__desc {
        max-width: 54ch;
    }
    .solutions > .solution:nth-child(odd):last-child .solution__points {
        display: flex;
        flex-wrap: wrap;
        gap: .3rem 1.9rem;
    }
}

/* Fallbacks. Must precede the modifiers: same specificity, later wins. */
.solution,
.soldlg {
    --accent:     var(--brand);
    --accent-ink: var(--brand-700);
    --accent-100: var(--brand-100);
    --accent-050: var(--brand-050);
}

/* The whole tile opens the dialog — see .solution__cta::after. */
/* Flex so .solution__actions can be pushed to the foot with margin-top:auto,
   which lines up all tile footers. */
.solution {
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: 3px solid var(--accent);
    border-radius: var(--radius-lg);
    padding: clamp(1.35rem, 2.6vw, 1.8rem);
    box-shadow: var(--shadow-sm);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
/* :focus-within so keyboard focus lifts the whole tile. */
.solution:hover,
.solution:focus-within {
    transform: translateY(-3px);
    border-color: var(--accent-100);
    border-top-color: var(--accent);
    box-shadow: var(--shadow-lg);
}

/* Per-product colour and icon */
.solution--c-talker {
    --accent: #22739F; --accent-ink: #005A81; --accent-100: #D8E8F3; --accent-050: #F1F7FB;
    /* speech bubble */
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 11.8a7.7 7.7 0 0 1-7.7 7.7H8.6L4 22.4v-4.7a7.7 7.7 0 0 1-.5-5.9A7.7 7.7 0 0 1 11.2 4h1.6a7.7 7.7 0 0 1 7.7 7.8Z'/%3E%3Cpath d='M8.3 11.8h.01M12 11.8h.01M15.7 11.8h.01'/%3E%3C/svg%3E");
}
.solution--knowledge-base {
    --accent: #1F7A6B; --accent-ink: #155C50; --accent-100: #D5EAE5; --accent-050: #F0F8F6;
    /* open book */
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.5C12 5.1 10.9 4 9.5 4H3v13h6.5c1.4 0 2.5 1.1 2.5 2.5'/%3E%3Cpath d='M12 6.5C12 5.1 13.1 4 14.5 4H21v13h-6.5c-1.4 0-2.5 1.1-2.5 2.5'/%3E%3Cpath d='M12 6.5v13'/%3E%3C/svg%3E");
}
.solution--etl-pipeline {
    --accent: #A66A21; --accent-ink: #8A4B22; --accent-100: #F2DFCE; --accent-050: #FCF3EC;
    /* document with outgoing arrow */
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3H6.5A1.5 1.5 0 0 0 5 4.5v15A1.5 1.5 0 0 0 6.5 21H11'/%3E%3Cpath d='M13 3l5 5v3'/%3E%3Cpath d='M13 3v5h5'/%3E%3Cpath d='M14 17h7'/%3E%3Cpath d='M18 14l3 3-3 3'/%3E%3C/svg%3E");
}
.solution--enodai {
    --accent: #55589E; --accent-ink: #3F4180; --accent-100: #DEDFF0; --accent-050: #F3F3FA;
    /* shield with tick */
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8l7.5 3.1v5.4c0 4.8-3.2 8.8-7.5 10.7-4.3-1.9-7.5-5.9-7.5-10.7V5.9L12 2.8Z'/%3E%3Cpath d='M8.8 12.2l2.4 2.4 4.4-4.6'/%3E%3C/svg%3E");
}
/* Plum: the only free arc left between indigo and amber. Deliberately not
   burgundy — that sits ~30° from --warn-500 and would read as an error state
   on a product about audit findings. */
.solution--revisions-cockpit {
    --accent: #8A4A72; --accent-ink: #7A3D63; --accent-100: #F0DDE9; --accent-050: #FAF3F8;
    /* magnifier with a tick — checked, not merely searched. No document behind
       it: the ETL icon already owns that silhouette at 24px. */
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.4 10.4a7 7 0 1 1-14 0 7 7 0 1 1 14 0'/%3E%3Cpath d='M7.4 10.5l2.2 2.2 4-4.2'/%3E%3Cpath d='m15.4 15.4 5.4 5.4'/%3E%3C/svg%3E");
}

/* Glyph tinted via mask; geometry shared with .card__num. */
.solution__icon {
    display: inline-flex;
    width: 2.85rem;
    height: 2.85rem;
    border-radius: 13px;
    background: var(--accent-050);
    border: 1px solid var(--accent-100);
    margin-bottom: .5rem;
}
.solution__icon::before {
    content: "";
    margin: auto;
    width: 1.5rem;
    height: 1.5rem;
    background: var(--accent);
    -webkit-mask: var(--icon) center / contain no-repeat;
            mask: var(--icon) center / contain no-repeat;
}

/* Topic is the heading, product name the line below — the topic is what
   reads on first sight. */
.solution__topic,
.soldlg__topic {
    display: grid;
    gap: .35rem;
    color: var(--accent-ink);
    letter-spacing: -0.025em;
    line-height: 1.15;
    text-wrap: balance;
}
.solution__topic { font-size: clamp(1.3rem, 2.7vw, 1.5rem); }
.soldlg__topic  { font-size: clamp(1.5rem, 3.2vw, 1.95rem); }

/* Monospace marks it as a product name. */
.solution__name {
    font-family: var(--mono);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--slate);
}

.soldlg__media > :first-child {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
}
/* Show in full inside the dialog: the screenshots carry information. */
.solution__shot { display: block; width: 100%; height: auto; }
.soldlg__media > .shot-ph { aspect-ratio: 16 / 10; }
.solution__caption { font-size: .74rem; color: var(--muted); }

/* Placeholder until a screenshot exists */
.shot-ph {
    position: relative;
    display: grid;
    align-content: start;
    gap: .5rem;
    padding: 1rem 1rem 2rem;
    background: var(--surface);
}
.shot-ph__bar { height: .5rem; border-radius: 3px; background: var(--line); }
.shot-ph__bar:nth-of-type(1) { width: 60%; }
.shot-ph__bar:nth-of-type(2) { width: 88%; }
.shot-ph__bar:nth-of-type(3) { width: 72%; }
.shot-ph__label {
    position: absolute;
    inset-inline: 0;
    bottom: .7rem;
    text-align: center;
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}

.solution__desc { color: var(--slate); font-size: .96rem; margin-top: .35rem; }
.solution__points {
    list-style: none;
    padding: .8rem 0 0;
    margin-top: .35rem;
    border-top: 1px solid var(--line);
    display: grid;
    gap: .3rem;
}
.solution__points li {
    position: relative;
    padding-left: 1rem;
    font-size: .95rem;
    color: var(--slate);
    line-height: 1.5;
}
.solution__points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .58em;
    width: .34rem;
    height: .34rem;
    border-radius: 50%;
    background: var(--accent, var(--brand));
    opacity: .75;
}
/* Tile footer: details left, demo request right. */
.solution__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem 1.15rem;
    margin-top: auto;    /* push to the foot of the tile */
    padding-top: .55rem;
}
/*
 * Smaller than the dialog button: five full .btn would be too loud in the
 * overview. Brand colour rather than the product colour — the enquiry goes to
 * Syngeon, not to the product.
 *
 * z-index lifts it above .solution__cta's overlay, which would swallow the click.
 */
.solution__demo {
    position: relative;
    z-index: 1;
    font-size: .9rem;
    padding: .58rem 1.15rem;
    box-shadow: 0 1px 2px rgb(var(--brand-700-rgb) / .24), 0 5px 14px rgb(var(--brand-rgb) / .2);
}
.solution__demo:hover { box-shadow: 0 2px 4px rgb(var(--brand-700-rgb) / .28), 0 8px 20px rgb(var(--brand-rgb) / .28); }

/* A <button> styled as a text link: the target is a dialog, not a document. */
.solution__cta {
    font-family: inherit;
    font-size: .9rem;
    font-weight: 620;
    color: var(--accent-ink);
    text-decoration: none;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--accent-100);
    border-radius: 0;
    padding: 0 0 .1rem;
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease;
}
.solution__cta::after { content: " →"; }
/*
 * Makes the whole tile clickable without a second control: an invisible
 * overlay of the button covers the tile. Focus, keyboard handling and the
 * accessible name stay on the button.
 *
 * Cost: text inside the tile can no longer be selected.
 */
.solution__cta::before {
    content: "";
    position: absolute;
    inset: 0;
}
/* Signals the target while hovering anywhere on the tile. */
.solution__cta:hover { color: var(--accent); border-color: var(--accent); }

/* ---- Solution dialog ------------------------------------------------- */
.soldlg {
    width: min(46rem, 100% - 2rem);
    max-height: min(86vh, 54rem);
    margin: auto;
    padding: 0;
    border: 0;
    border-top: 4px solid var(--accent);
    border-radius: var(--radius-lg);
    background: var(--paper);
    color: var(--ink);
    box-shadow: var(--shadow-lg);
    overflow: auto;
}
.soldlg::backdrop { background: rgb(var(--ink-rgb) / .55); }
.soldlg__inner {
    position: relative;
    display: grid;
    gap: 1.1rem;
    align-content: start;
    padding: clamp(1.4rem, 3vw, 2.2rem);
}

.soldlg__close {
    position: absolute;
    top: .8rem;
    right: .8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    font: inherit;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--slate);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.soldlg__close:hover { color: var(--ink); border-color: var(--brand-100); box-shadow: var(--shadow-md); }

.soldlg__head { display: grid; gap: .5rem; padding-right: 2.6rem; }
.soldlg__claim { color: var(--slate); font-size: 1.06rem; margin-top: .15rem; }

/* No max-width: screenshots use the full dialog width, so they ship at 2x. */
.soldlg__media { display: grid; gap: .45rem; }

/* Tighter than the gap of .soldlg__inner: lead, points and facts read as one
   block, set off from the media above and the footer below. */
.soldlg__body { display: grid; gap: .9rem; align-content: start; }
.soldlg__lead { color: var(--slate); font-size: 1.02rem; }

.soldlg__points { list-style: none; padding: 0; display: grid; gap: .7rem; }
.soldlg__points li { position: relative; padding-left: 1.05rem; display: grid; gap: .1rem; }
.soldlg__points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: .34rem;
    height: .34rem;
    border-radius: 50%;
    background: var(--accent);
    opacity: .75;
}
.soldlg__points strong { font-size: .97rem; font-weight: 620; color: var(--ink); }
.soldlg__points span { font-size: .95rem; color: var(--slate); line-height: 1.55; }

.soldlg__facts { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.soldlg__facts li {
    font-family: var(--mono);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--accent-ink);
    background: var(--accent-050);
    border: 1px solid var(--accent-100);
    border-radius: var(--radius-pill);
    padding: .2rem .6rem;
}

/* Spacing above comes from the grid gap of .soldlg__inner. */
.soldlg__foot {
    display: flex;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
}

/* Near full screen on narrow viewports */
@media (max-width: 40rem) {
    .soldlg { width: calc(100% - 1.2rem); max-height: 92vh; border-radius: var(--radius); }
}

@media (prefers-reduced-motion: no-preference) {
    .soldlg[open] { animation: dlg-in .22s ease both; }
    @keyframes dlg-in {
        from { opacity: 0; transform: translateY(10px); }
        to   { opacity: 1; transform: none; }
    }
}

/* ---- Trust ----------------------------------------------------------- */
/* Platform vendor's wordmark under the intro. Sized by height, not width: it
   is nearly four times as wide as it is tall and would read as a second
   headline at any width that fills the column. */
.trust__logo {
    width: auto;
    height: clamp(1.9rem, 3.5vw, 2.4rem);
    max-width: 100%;
    margin-top: .2rem;
}

/* ---- Facts ----------------------------------------------------------- */
.facts {
    list-style: none;
    padding: 0;
    display: grid;
    gap: .7rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
/* Six facts must fall as 2x3, not 5+1. */
@media (min-width: 52rem) { .facts { grid-template-columns: repeat(3, 1fr); } }

.fact {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .85rem 1rem;
    box-shadow: var(--shadow-sm);
}
/* No hover — see .card. */
.fact::before {
    content: "";
    flex: none;
    margin-top: .12rem;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--brand-050) center / .8rem .8rem no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232E81C4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8'/%3E%3C/svg%3E");
}
.fact__text { display: grid; gap: .2rem; }
.fact__h { font-size: .99rem; font-weight: 600; color: var(--ink); line-height: 1.35; }
/* Full sentences, so body type rather than monospace. */
.fact__p { font-size: .84rem; line-height: 1.45; color: var(--muted); hyphens: auto; }

/* ---- FAQ ------------------------------------------------------------- */
.faq { max-width: 52rem; margin-inline: auto; display: grid; gap: .7rem; }
.faq__item {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.faq__item:hover { border-color: var(--brand-100); }
.faq__item[open] { border-color: var(--brand-100); box-shadow: var(--shadow-md); }

.faq__q {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: .95rem 1.1rem;
    cursor: pointer;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
    list-style: none;              /* hide the default marker */
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
    content: "";
    flex: none;
    margin-top: .18rem;
    width: 1.15rem;
    height: 1.15rem;
    background: center / .85rem .85rem no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232E81C4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E");
    transition: transform .2s ease;
}
.faq__item[open] .faq__q::after { transform: rotate(180deg); }
.faq__a { padding: 0 1.1rem 1.1rem; color: var(--slate); font-size: 1rem; max-width: 44rem; }

/* ---- Contact section ------------------------------------------------- */
.cta-box {
    display: grid;
    gap: 1rem;
    justify-items: center;
    text-align: center;
    max-width: 46rem;
    margin-inline: auto;
}
.cta-box__claim {
    font-size: clamp(1.15rem, 2.4vw, 1.4rem);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--brand-700);
}
.cta-box .btn { justify-self: center; margin-top: .4rem; }
/* Visible address under the form. */
.cta-box__mail { color: var(--muted); font-size: .9rem; }
.cta-box__mail a { color: var(--brand-700); text-underline-offset: 2px; }
.cta-box__mail a:hover { text-decoration-color: currentColor; }

/* ---- Contact form ---------------------------------------------------- */
/* .band--cta fades to pure white, where a white input would have no edge —
   hence the card. The reset is needed because .cta-box is a centred grid that
   would otherwise centre the labels and shrink the card to content width. */
.contactform,
.cta-box > .formmsg {
    justify-self: stretch;
    width: 100%;
    text-align: left;
}
.contactform {
    display: grid;
    gap: 1.1rem;
    margin-top: .6rem;
    padding: clamp(1.3rem, 3vw, 2rem);
    background: var(--paper);
    border: 1px solid var(--brand-100);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
/* Pair the fields once there is room. */
.contactform__grid { display: grid; gap: 1.1rem; }
@media (min-width: 40rem) {
    .contactform__grid { grid-template-columns: 1fr 1fr; }
}

.field { display: grid; gap: .35rem; }
.field > label { font-size: .9rem; font-weight: 600; color: var(--ink); }
.field__opt  { color: var(--muted); font-weight: 400; }
.field__hint { color: var(--muted); font-size: .85rem; }
.field__err  { color: var(--warn-700); font-size: .85rem; font-weight: 500; }

/* font: inherit is required — form controls do not inherit it. */
.contactform input,
.contactform select,
.contactform textarea {
    font: inherit;
    width: 100%;
    padding: .7rem .9rem;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.contactform input:hover,
.contactform select:hover,
.contactform textarea:hover { border-color: var(--brand-100); }
/* The focus ring comes from the global :focus-visible; this is just the edge. */
.contactform input:focus,
.contactform select:focus,
.contactform textarea:focus { border-color: var(--brand); outline-offset: 1px; }
.contactform ::placeholder { color: var(--muted); }
.contactform textarea { min-height: 9rem; resize: vertical; }
.contactform [aria-invalid="true"] { border-color: var(--warn-700); }

/* Custom chevron; same data: URI technique used elsewhere in this file. */
.contactform select {
    appearance: none;
    padding-right: 2.4rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23646263' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    background-size: 1rem;
}

.contactform__privacy { color: var(--muted); font-size: .85rem; }
.contactform__privacy a { color: var(--brand-700); text-underline-offset: 2px; }
.contactform__submit { justify-self: start; margin-top: .2rem; }

.formmsg {
    display: grid;
    gap: .35rem;
    padding: 1rem 1.15rem;
    border: 1px solid;
    border-radius: var(--radius);
    font-size: .95rem;
}
.formmsg__title { font-weight: 640; }
.formmsg--ok  { color: var(--ok-700);   background: var(--ok-050);   border-color: var(--ok-100); }
.formmsg--err { color: var(--warn-700); background: var(--warn-050); border-color: var(--warn-100); }
.formmsg ul { display: grid; gap: .25rem; margin: 0; padding-left: 1.1rem; }
.formmsg a  { color: inherit; text-underline-offset: 2px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Note ------------------------------------------------------------ */
.note { color: var(--muted); font-size: .9rem; max-width: 44rem; }
.note--center { margin-inline: auto; margin-top: clamp(1.25rem, 3vw, 1.75rem); text-align: center; }
.note a { color: var(--brand-700); text-decoration-color: var(--brand-100); text-underline-offset: 2px; }
.note a:hover { text-decoration-color: currentColor; }
code {
    font-family: var(--mono);
    font-size: .88em;
    color: var(--brand-700);
    background: var(--brand-050);
    border: 1px solid var(--brand-100);
    padding: .12em .4em;
    border-radius: 5px;
}

/* ---- Footer ---------------------------------------------------------- */
.site-foot {
    background: var(--ink);
    color: rgba(255, 255, 255, .62);
}
.site-foot__inner {
    max-width: var(--wrap);
    margin-inline: auto;
    width: 100%;
    padding: 1.75rem var(--space);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
}
.site-foot__logo { height: 1.6rem; width: auto; }
.site-foot a { color: #fff; text-decoration: none; font-weight: 520; }
.site-foot a:hover { color: var(--brand-100); }
.site-foot__legal { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.1rem; }
.site-foot__legal a { color: inherit; font-weight: 400; }
.site-foot__legal a:hover { color: #fff; }

/* ---- Responsive & motion --------------------------------------------- */
/* Narrow header: nav moves to its own row and wraps over as many lines as it needs. */
@media (max-width: 62rem) {
    .site-head__inner { grid-template-columns: 1fr auto; row-gap: .9rem; }
    .brand      { grid-area: 1 / 1; }
    .head-right { grid-area: 1 / 2; }
    .pillnav {
        grid-area: 2 / 1 / 3 / -1;
        justify-content: flex-start;
        row-gap: .3rem;
    }
    .page > section[id] { scroll-margin-top: 6.5rem; }
}
@media (max-width: 40rem) {
    .brand__logo { height: 1.45rem; }
    .backlink { display: none; }
    .site-foot__inner { flex-direction: column; align-items: flex-start; gap: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}