/* Self-hosted: the public CSP deliberately blocks Google Fonts (Security:AllowGoogleFonts=false).
   Both files are variable, so one request per family covers every weight. */
@font-face {
    font-family: "Inter";
    src: url("/fonts/inter-latin-var.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Space Grotesk";
    src: url("/fonts/space-grotesk-latin-var.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

/* Design tokens — Version A (hybrid): #16352d is the primary brand anchor and lime/mint are accents
   reserved for CTAs and highlights. Legacy aliases below keep existing components working while they
   are migrated onto the scale. */
:root {
    /* Primary green scale */
    --green-950: #0c1f19;
    --green-900: #10281f;
    --green-800: #133025;
    --green: #16352d;
    --green-700: #1f4f40;
    --green-600: #296b56;
    --green-500: #3d8b71;
    --green-300: #8fc3b0;
    --green-100: #d7e8e0;
    --green-50: #eef5f2;

    /* Accents */
    --lime: #d9ff71;
    --lime-deep: #c2ef4e;
    --mint: #7ee6c8;
    --aqua: #5fd3bd;

    /* Neutrals */
    --white: #ffffff;
    --paper: #fbfbf6;
    --cream: #f6f6ef;
    --ink: #0e1f19;
    --muted: #5c7268;
    --line: #e3e5db;

    /* Geometry and elevation */
    --r: 16px;
    --r-lg: 24px;
    --maxw: 1180px;
    --shadow: 0 1px 2px rgba(12, 31, 25, .06), 0 12px 34px -18px rgba(12, 31, 25, .28);
    --shadow-soft: 0 1px 2px rgba(12, 31, 25, .05), 0 8px 24px -16px rgba(12, 31, 25, .22);

    /* Homepage rest-point rhythm and alternating section backgrounds. Scoped to .home-section (below)
       rather than the sitewide .section rule, so this redesign doesn't shift spacing on every other
       page. --mint-tint reuses --green-50, which is already a mint-leaning off-white on the same scale
       as the primary green - not a new hue. */
    --section-rhythm: clamp(2.25rem, 4vw, 3.75rem);
    --mint-tint: var(--green-50);

    /* Legacy aliases — remapped onto the hybrid palette so untouched components re-skin with it.
       Prefer the tokens above in new work. */
    --ink-2: var(--green);
    --soft: var(--cream);
    --card: var(--white);
    --line-strong: #cfd6c9;
    --forest: var(--green);
    --orange: var(--lime-deep);
    --blue: var(--green-600);
    --violet: var(--green-700);
    --rose: var(--lime-deep);

    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    background: var(--paper);
    line-height: 1.55;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Space Grotesk's weight axis stops at 700. Asking for more makes the browser fake it by redrawing
       each glyph at an offset, which reads as a ghosted double of the text. Clamp to what the font
       actually carries. Inter reaches 900, so its heavier labels are unaffected. */
    font-synthesis-weight: none;
}

h1,
h2,
h3,
.display {
    font-family: "Space Grotesk", Inter, "Segoe UI", sans-serif;
    letter-spacing: -.02em;
    line-height: 1.05;
    /* Headings are Space Grotesk, so 700 is the real ceiling. */
    font-weight: 700;
}

/* Keyboard focus must stay visible everywhere (WCAG 2.2 AA). */
:focus-visible {
    outline: 3px solid var(--aqua);
    outline-offset: 2px;
}

/* Parked above the viewport rather than at left:-9999px, which would widen the scrollable area. */
.skip-link {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    padding: 12px 18px;
    border-radius: 0 0 var(--r) 0;
    background: var(--green);
    color: var(--lime);
    font-weight: 600;
    transform: translateY(-130%);
    transition: transform .15s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

a {
    color: inherit;
    text-decoration: none;
}

.searchable-select-native,
select[data-searchable-select-id] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.searchable-select {
    position: relative;
}

.searchable-select-trigger {
    width: 100%;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .8rem 1rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .82);
    color: var(--ink);
    text-align: left;
}

.searchable-select.open .searchable-select-trigger,
.searchable-select-trigger:focus-visible {
    border-color: rgba(13, 63, 48, .22);
    box-shadow: 0 0 0 3px rgba(126, 230, 200, .18);
    outline: none;
}

.searchable-select-label {
    min-width: 0;
    flex: 1;
}

.searchable-select-icon {
    color: var(--muted);
    font-size: .8rem;
}

.searchable-select-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 40;
    display: none;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--paper);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.searchable-select.open .searchable-select-panel {
    display: block;
}

.searchable-select-search {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: .78rem .95rem;
    background: rgba(255, 255, 255, .92);
    color: var(--ink);
    outline: none;
}

.searchable-select-options {
    max-height: 280px;
    overflow: auto;
}

.searchable-select-option,
.searchable-select-empty {
    width: 100%;
    display: block;
    padding: .78rem .95rem;
}

.searchable-select-option[hidden],
.searchable-select-empty[hidden] {
    display: none !important;
}

.searchable-select-option {
    border: 0;
    background: transparent;
    color: var(--ink);
    text-align: left;
}

.searchable-select-option:hover,
.searchable-select-option.active {
    background: rgba(126, 230, 200, .20);
}

.searchable-select-option.disabled {
    color: var(--muted);
}

.searchable-select-empty {
    color: var(--muted);
}

main {
    position: relative;
    z-index: 1;
}

.site-header {
    position: sticky;
    top: 0;
    /* Must outrank .nav-scrim (60): sticky + z-index makes this a stacking context, so the mega-menu
       inside it is painted at the header's level relative to the page, not at its own z-index. */
    z-index: 70;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.2rem;
    padding: .8rem clamp(1rem, 3vw, 3rem);
    min-height: 76px;
    background: rgba(251, 252, 247, .78);
    backdrop-filter: blur(22px) saturate(1.4);
    border-bottom: 1px solid var(--line);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .72rem;
    min-width: max-content;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 2.85rem;
    height: 2.85rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, var(--green-950), var(--green-700));
    color: var(--lime);
    font-weight: 950;
    letter-spacing: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 12px 32px rgba(9, 28, 22, .14);
}

.brand-mark-image {
    display: block;
    width: 3.1rem;
    height: 3.1rem;
    max-width: 3.1rem;
    max-height: 3.1rem;
    aspect-ratio: 1;
    border-radius: .75rem;
    object-fit: contain;
    flex-shrink: 0;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 12px 24px rgba(9, 28, 22, .12);
    padding: .18rem;
}

.footer-brand .brand-mark-image {
    width: 3rem;
    height: 3rem;
    max-width: 3rem;
    max-height: 3rem;
}

.brand span:last-child {
    display: grid;
    line-height: 1.08;
}

.brand strong {
    font-size: 1.02rem;
    letter-spacing: 0;
}

.brand small {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 600;
}

.nav-links {
    justify-self: center;
    display: flex;
    gap: .28rem;
    align-items: center;
    padding: .32rem;
    color: rgba(7, 19, 15, .68);
    font-weight: 800;
    font-size: .9rem;
    background: rgba(255, 255, 255, .48);
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 999px;
}

.nav-links a,
.nav-group-trigger {
    padding: .55rem .78rem;
    border-radius: 999px;
    transition: .2s ease;
}

.nav-links a:hover,
.nav-group-trigger:hover,
.nav-links .active > .nav-group-trigger,
.nav-links a.active {
    color: var(--ink);
    background: rgba(126, 230, 200, .24);
}

.nav-group {
    position: relative;
}

.nav-group-trigger {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-weight: inherit;
}

.nav-group-trigger i {
    font-size: .78rem;
    color: var(--muted);
    transform: translateY(.04rem);
}

/* Every dropdown - mega or compact - centers on the viewport (position: fixed; left: 50%), the same
   approach the mega panels always used. Anchoring to each trigger's own left/right edge (the previous
   approach) needed a per-group hand-tuned exception - Company ran off the right edge of the viewport,
   Resources couldn't be right-anchored either without going off the left - and any new nav item risks
   the same overflow again. Centering removes the whole class of bug instead of hand-tuning another one. */
.nav-dropdown {
    position: fixed;
    top: 5.45rem;
    left: 50%;
    z-index: 80;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
    width: min(720px, calc(100vw - 2rem));
    padding: .65rem;
    border: 1px solid var(--line);
    border-radius: 1.15rem;
    /* Fully opaque: at 96% the hero art and headline bled through the open panel. */
    background: var(--white);
    box-shadow: 0 2px 6px rgba(12, 31, 25, .08), 0 28px 60px -20px rgba(12, 31, 25, .45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

/* Footer column headings are h2, not h4: pages whose last content heading is an h2 would otherwise
   skip a level straight to h4, which is the heading-order failure Lighthouse reports on every page.
   h2 is always one step below the single page h1, so the order stays sequential everywhere. These
   pin the size back down — the global h2 rule would otherwise scale them to 3rem. */
.site-footer .footer-heading {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--white);
    margin: 0 0 .55rem;
}

/* Dims the page behind an open mega-menu so the panel reads as a layer above the content. */
.nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(12, 31, 25, .38);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .16s ease, visibility .16s ease;
}

.nav-scrim.show {
    opacity: 1;
    visibility: visible;
}

.nav-group-mega .nav-dropdown {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: min(1120px, calc(100vw - 2rem));
    max-height: min(72vh, 620px);
    overflow-y: auto;
}

/* Every dropdown is now fixed/centered (same reasoning as above), so every trigger needs this invisible
   hover-bridge - not just the mega ones - to cover the gap between the trigger and where its panel
   starts, or moving the mouse straight down loses :hover partway and the panel never opens. */
.nav-group::after {
    content: "";
    position: fixed;
    top: 3.7rem;
    left: 0;
    z-index: 79;
    display: none;
    width: 100vw;
    height: 3rem;
}

.nav-group:hover::after,
.nav-group.show::after {
    display: block;
}

.nav-dropdown-section {
    display: grid;
    align-content: start;
    gap: .32rem;
    min-width: 0;
}

.nav-dropdown-heading {
    display: block;
    padding: .35rem .45rem .15rem;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.nav-group:hover .nav-dropdown,
.nav-group.show .nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

/* site-nav.js adds nav-suppress-hover to <body> the instant a dropdown link is clicked (and on every
   Blazor route change, as a second line of defense): :hover alone can't be dismissed by a click (the
   mouse hasn't moved), so without this the panel stayed open, covering the newly-loaded page, until the
   visitor moved their mouse away - live-tested bug. This lives on <body>, never on .nav-group itself,
   because .nav-group's class attribute is owned by PlatformLayout's render output - Blazor re-renders it
   on every navigation (LocationChanged -> StateHasChanged) and overwrites whatever classes JS had added,
   which is exactly why an earlier version of this fix (a class on .nav-group) still failed live: the
   class was gone before it had a chance to matter. <body> is server-rendered once in App.razor and is
   never touched by the interactive component tree, so nothing can race it away. !important because it
   must outrank :hover regardless of source order or the extra .nav-group-mega specificity. */
body.nav-suppress-hover .nav-dropdown {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    display: none !important;
}

.nav-dropdown a {
    display: flex;
    align-items: center;
    gap: .9rem;
    min-height: 3.85rem;
    border-radius: 1rem;
    padding: .8rem .9rem;
}

.nav-group-mega .nav-dropdown a {
    gap: .62rem;
    min-height: 3.15rem;
    padding: .56rem .62rem;
}

.nav-group-mega .nav-dropdown a i {
    flex-basis: 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .75rem;
    font-size: .96rem;
}

.nav-group-mega .nav-dropdown a small {
    display: none;
}

.nav-dropdown a i {
    display: grid;
    place-items: center;
    flex: 0 0 2.65rem;
    width: 2.65rem;
    height: 2.65rem;
    border-radius: .9rem;
    background:
        linear-gradient(145deg, rgba(126, 230, 200, .28), rgba(255, 255, 255, .78));
    color: var(--forest);
    font-size: 1.08rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .76), 0 10px 22px rgba(14, 38, 30, .06);
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.nav-dropdown a:hover i,
.nav-dropdown a.active i {
    background: linear-gradient(145deg, var(--green-700), #0a3327);
    color: var(--lime);
    transform: translateY(-1px);
}

.nav-dropdown a span {
    display: grid;
    gap: .2rem;
    min-width: 0;
}

.nav-dropdown a strong {
    line-height: 1.15;
}

.nav-dropdown a small {
    color: var(--muted);
    font-weight: 600;
    line-height: 1.35;
}

.nav-direct {
    display: inline-flex;
    align-items: center;
}

@media (max-width: 1180px) and (min-width: 981px) {
    .nav-group-mega .nav-dropdown {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: min(760px, calc(100vw - 2rem));
        max-height: min(74vh, 640px);
    }
}

.header-actions,
.hero-actions {
    display: flex;
    gap: .65rem;
    align-items: center;
    flex-wrap: wrap;
}

.mobile-nav-actions {
    display: none;
}

.header-actions {
    gap: .45rem;
}

.header-actions .btn {
    gap: .42rem;
    min-height: 2.48rem;
    padding: .54rem .78rem;
    border-color: transparent !important;
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 820;
    box-shadow: none;
}

.header-actions .btn i {
    font-size: .86rem;
}

.header-actions .btn.ghost {
    background: transparent;
    color: var(--forest);
}

.header-actions .btn:hover,
.header-actions .btn:focus-visible {
    background: rgba(126, 230, 200, .26);
    border-color: transparent !important;
    box-shadow: none;
    outline: none;
}

.header-actions .nav-direct,
.mobile-nav-actions .nav-direct {
    padding-inline: .5rem;
    color: var(--muted);
    font-weight: 800;
    font-size: .88rem;
    text-decoration: none;
    border-radius: 999px;
    transition: .2s ease;
}

.header-actions .nav-direct:hover,
.header-actions .nav-direct:focus-visible {
    color: var(--ink);
    background: rgba(126, 230, 200, .26);
    outline: none;
}

.lang-toggle {
    display: inline-flex;
    align-items: center;
    padding: .2rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, .6);
}

.lang-toggle-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: .55rem;
    padding-block: .28rem;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .02em;
    border-radius: 999px;
    color: var(--muted);
    cursor: default;
}

.lang-toggle-option.active {
    color: var(--white);
    background: var(--green);
}

.lang-toggle-option[aria-disabled="true"] {
    opacity: .5;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    cursor: pointer;
    border-radius: 999px;
    padding: .75rem 1.25rem;
    font-size: .94rem;
    font-weight: 600;
    border: 1.5px solid transparent;
    letter-spacing: 0;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
    white-space: nowrap;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:disabled,
button:disabled {
    cursor: not-allowed;
}

/* Flat fills, per the design system — the mockup has no gradient buttons. `primary` stays the dark
   pill rather than the mockup's lime one: the mockup's hero is dark green, where lime pops, but this
   site's hero sits on --paper, where a lime fill would wash out against the page. */
.btn.primary {
    background: var(--green);
    color: #eafff0;
    border-color: var(--green);
}

.btn.primary:hover {
    background: var(--green-900);
    border-color: var(--green-900);
}

.btn.ghost {
    background: transparent;
    color: var(--green);
    border-color: var(--line);
}

.btn.ghost:hover {
    background: var(--white);
    border-color: var(--green);
}

/* The lime accent CTA — reserved for dark bands where it carries the eye. */
.btn.light {
    background: var(--lime);
    color: var(--green-950);
    border-color: var(--lime);
}

.btn.light:hover {
    background: var(--lime-deep);
    border-color: var(--lime-deep);
}

.btn.big {
    padding: .92rem 1.35rem;
    font-size: .98rem;
}

.hero,
.page-hero,
.section,
.split-section,
.cta-band,
.release-list,
.blog-grid,
.contact-layout,
.pricing-grid,
.faq-list,
.article-shell,
.section-tight,
.product-showcase {
    width: min(1180px, calc(100% - 2rem));
    margin-inline: auto;
}

.hero {
    min-height: calc(100vh - 76px);
    display: grid;
    grid-template-columns: minmax(390px, .9fr) minmax(520px, 1.1fr);
    gap: clamp(1rem, 3.5vw, 3rem);
    align-items: center;
    width: min(1340px, calc(100% - 2rem));
    padding: clamp(1.2rem, 3vw, 2.6rem) 0 clamp(2rem, 5vw, 4.8rem);
}

.hero-copy,
.page-hero {
    position: relative;
    isolation: isolate;
}

.hero-copy::before,
.page-hero::before {
    content: "";
    position: absolute;
    width: 13rem;
    height: 13rem;
    left: -3rem;
    top: -3rem;
    z-index: -1;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(217, 255, 113, .36), transparent 68%);
    filter: blur(4px);
}

.eyebrow {
    color: var(--green);
    background: linear-gradient(135deg, rgba(126, 230, 200, .45), rgba(217, 255, 113, .42));
    display: inline-flex;
    width: fit-content;
    border-radius: 999px;
    padding: .38rem .72rem;
    /* Never wider than the card holding it: at 390px these pills were bursting out of a 109px column
       and dragging the page's scroll width with them. */
    max-width: 100%;
    /* 950 sat outside Inter's 900 axis; the design calls for 600 with wider tracking. */
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    border: 1px solid rgba(13, 63, 48, .08);
    margin-bottom: 10px;
}

h1,
h2,
h3,
h4,
p {
    overflow-wrap: anywhere;
}

h1 {
    max-width: 980px;
    font-size: clamp(2.7rem, 5.8vw, 5.1rem);
    line-height: .98;
    letter-spacing: 0;
    margin: 1rem 0;
    font-weight: 700;
}

.marketing-hero .hero-copy h1 {
    max-width: 720px;
    font-size: clamp(2.45rem, 4.15vw, 4.15rem);
    line-height: 1.04;
    font-weight: 700;
    letter-spacing: 0;
}

.marketing-hero .hero-copy p {
    max-width: 700px;
}

.page-hero h1 {
    font-size: clamp(2.55rem, 5.5vw, 4.9rem);
    max-width: 980px;
}

.hero-copy h1 {
    max-width: 920px;
    position: relative;
    z-index: 1;
    border: 0;
    outline: 0;
    box-shadow: none;
}

.hero-copy h1:focus,
.hero-copy h1:focus-visible,
.page-hero h1:focus,
.page-hero h1:focus-visible {
    border: 0;
    outline: 0;
    box-shadow: none;
}

h2 {
    font-size: clamp(1.75rem, 3.3vw, 3rem);
    line-height: 1.08;
    letter-spacing: 0;
    margin: .55rem 0 1rem;
    font-weight: 700;
}

h3 {
    font-size: 1.18rem;
    line-height: 1.25;
    margin: 0 0 .65rem;
    letter-spacing: 0;
}

p {
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.68;
    margin: 0 0 1rem;
}

.hero-copy p,
.page-hero p {
    font-size: clamp(1.05rem, 1.6vw, 1.28rem);
    max-width: 740px;
}

.hero-panel {
    position: relative;
    background: linear-gradient(145deg, rgba(7, 19, 15, .98), rgba(13, 54, 42, .94));
    color: white;
    border-radius: 2rem;
    padding: clamp(1rem, 2vw, 1.4rem);
    box-shadow: 0 34px 95px rgba(9, 28, 22, .24);
    border: 1px solid rgba(255, 255, 255, .09);
    overflow: hidden;
}

.hero-panel::before {
    content: "";
    position: absolute;
    inset: -35% -20% auto auto;
    width: 18rem;
    height: 18rem;
    background: radial-gradient(circle, rgba(126, 230, 200, .42), transparent 68%);
    filter: blur(18px);
}

.metric-card,
.metric-grid > div {
    position: relative;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 1.25rem;
    padding: 1rem;
}

.metric-card.standout {
    background: linear-gradient(135deg, var(--lime), var(--mint));
    color: var(--ink);
    min-height: 10rem;
    display: grid;
    align-content: center;
}

.metric-card span,
.metric-grid span {
    display: block;
    color: inherit;
    opacity: .78;
    font-weight: 700;
}

.metric-card strong {
    display: block;
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    line-height: 1;
    letter-spacing: 0;
    margin: .6rem 0 .4rem;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .8rem;
    margin-top: .8rem;
}

.metric-grid strong {
    display: block;
    font-size: 1.55rem;
    line-height: 1.1;
    letter-spacing: 0;
}

.section,
.section-tight {
    padding: clamp(0rem, 7vw, 0.6rem) 0;
}

.section-heading {
    /*max-width: 760px;*/
    margin-bottom: 1.8rem;
}

.feature-grid,
.service-grid,
.blog-grid,
.pricing-grid,
.value-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.feature-card,
.service-card,
.blog-card,
.pricing-grid article,
.value-grid article,
.release-card,
.product-card,
.contact-form,
.contact-card,
.faq-list article,
.ai-card {
    background: var(--card);
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 1.5rem;
    padding: 1.3rem;
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px);
}

.feature-card {
    min-height: 14.5rem;
    transition: .18s ease;
}

.feature-card:hover,
.service-card:hover,
.blog-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.feature-card span,
.service-card span,
.chip-row span {
    display: inline-flex;
    margin: .25rem .25rem 0 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .34rem .62rem;
    color: var(--forest);
    background: rgba(255, 255, 255, .55);
    font-weight: 850;
    font-size: .78rem;
}

.service-card {
    display: grid;
    align-content: start;
    gap: .65rem;
    min-height: 100%;
}

.service-card > i {
    display: inline-grid;
    width: 2.55rem;
    height: 2.55rem;
    place-items: center;
    border-radius: .95rem;
    background: var(--green);
    color: var(--lime);
}

.service-card h2 {
    margin-bottom: .1rem;
}

.value-grid article:has(> i),
.feature-card:has(> .module-icon),
.service-card:has(> i),
.module-category-card:has(> .module-icon) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: .9rem;
    row-gap: .75rem;
}

.value-grid article:has(> i) > i,
.feature-card:has(> .module-icon) > .module-icon,
.service-card:has(> i) > i,
.module-category-card:has(> .module-icon) > .module-icon {
    grid-column: 1;
    grid-row: 1;
}

.value-grid article:has(> i) > h2,
.value-grid article:has(> i) > h3,
.feature-card:has(> .module-icon) > h2,
.feature-card:has(> .module-icon) > h3,
.service-card:has(> i) > h2,
.service-card:has(> i) > h3,
.module-category-card:has(> .module-icon) > h3 {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin: 0;
}

/* .value-grid article h3 has no dedicated type-size rule elsewhere - it inherits the base h3 (1.18rem).
   Integrations.razor uses h3 directly after the page's own h1 with nothing between (a heading-hierarchy
   skip, h1 straight to h3), fixed by promoting it to h2 there - this override keeps the visual size
   identical to what h3 rendered, since .feature-card/.service-card already get their own h2 type rule
   (see the shared block a few hundred lines down) but .value-grid article never had one to extend. */
.value-grid article:has(> i) > h2 {
    font-size: 1.18rem;
    line-height: 1.25;
}

.value-grid article:has(> i) > p,
.feature-card:has(> .module-icon) > p,
.feature-card:has(> .module-icon) > .module-capabilities,
.service-card:has(> i) > p,
.service-card:has(> i) > ul,
.module-category-card:has(> .module-icon) > .eyebrow,
.module-category-card:has(> .module-icon) > p,
.module-category-card:has(> .module-icon) > .module-capabilities,
.module-category-card:has(> .module-icon) > .learn-more {
    grid-column: 1 / -1;
}

.feature-card.amber { background: linear-gradient(180deg, rgba(245, 180, 95, .20), rgba(255, 255, 255, .76)); }
.feature-card.green { background: linear-gradient(180deg, rgba(126, 230, 200, .28), rgba(255, 255, 255, .76)); }
.feature-card.blue { background: linear-gradient(180deg, rgba(132, 168, 255, .22), rgba(255, 255, 255, .76)); }
.feature-card.rose { background: linear-gradient(180deg, rgba(255, 158, 163, .22), rgba(255, 255, 255, .76)); }
.feature-card.violet { background: linear-gradient(180deg, rgba(185, 167, 255, .24), rgba(255, 255, 255, .76)); }
.feature-card.cyan { background: linear-gradient(180deg, rgba(148, 232, 255, .24), rgba(255, 255, 255, .76)); }

/* align-items was start, so two side-by-side .glass-cards with different content lengths (e.g. a
   4-bullet "Benefits" list next to a 3-bullet "Use cases" list) left the shorter card ending well above
   its sibling, exposing bare page background beneath it instead of the card's own surface - reported
   live by the user on /apps/real-estate's "What improves after rollout." / "Where real estate fits."
   pair. stretch is safe here specifically because .glass-card is a plain padded block (no internal
   icon + 1fr-text grid the way .value-grid article has - see the justify-self fix a few hundred lines
   up for why THAT pattern can't just be stretched): a taller stretched card just gets more of its own
   background/padding at the bottom, not a disproportionate blank area next to short text. */
.split-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
    gap: clamp(1rem, 4vw, 2.2rem);
    align-items: stretch;
    padding: clamp(2.8rem, 6vw, 2.8rem) 0;
}

.timeline {
    display: grid;
    gap: .8rem;
}

.timeline div {
    display: grid;
    grid-template-columns: 3.4rem 1fr;
    gap: .9rem;
    align-items: center;
    padding: 1rem;
    background: rgba(255, 255, 255, .72);
    border-radius: 1.2rem;
    border: 1px solid rgba(255, 255, 255, .7);
    box-shadow: var(--shadow-soft);
}

.timeline strong {
    color: var(--green-600);
    font-size: 1.45rem;
    letter-spacing: 0;
}

.cta-band {
    margin-block: 3rem;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border-radius: 2rem;
    color: white;
    background:
        radial-gradient(circle at 80% 20%, rgba(217, 255, 113, .35), transparent 20rem),
        linear-gradient(135deg, var(--green-950), #155744);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    box-shadow: 0 30px 90px rgba(8, 41, 31, .20);
}

.cta-band h2 {
    margin-bottom: .35rem;
}

.cta-band p {
    color: rgba(255, 255, 255, .74);
    margin-bottom: 0;
}

.page-hero {
    padding: clamp(3rem, 7vw, 6rem) 0 clamp(1.5rem, 4vw, 3rem);
}

.btn:focus-visible,
.nav-direct:focus-visible,
.nav-group-trigger:focus-visible,
.nav-dropdown a:focus-visible,
.module-category-card:focus-visible,
.faq-topic-card:focus-visible,
.feature-card.clickable-card:focus-visible,
.release-card-link:focus-visible,
.business-grid a:focus-visible,
.module-badge-row a:focus-visible,
.social-grid a:focus-visible,
.contact-method-grid a:focus-visible {
    outline: 3px solid rgba(185, 255, 102, .72);
    outline-offset: 4px;
}

.product-hero {
    max-width: 1180px;
}

.product-card {
    /*margin: 1rem auto 4rem;*/
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(320px, .75fr);
    gap: 1.2rem;
    align-items: center;
    padding: clamp(1.3rem, 3vw, 2rem);
}

.product-showcase {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(320px, .85fr);
    gap: 1rem;
    align-items: stretch;
    margin-bottom: 3rem;
}

.ai-card {
    position: relative;
    overflow: hidden;
    display: grid;
    align-content: stretch;
    gap: 0.1rem;
}

.ai-card::before {
    content: "";
    position: absolute;
    inset: -30% -30% auto auto;
    width: 16rem;
    height: 16rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(126, 230, 200, .42), transparent 68%);
    filter: blur(18px);
}

.ai-card > * {
    position: relative;
}

.ai-orbit {
    display: grid;
    gap: .75rem;
}

.rollout-preview {
    display: grid;
    gap: .65rem;
    margin-top: auto;
    padding: .85rem;
    border: 1px solid rgba(16, 75, 57, .10);
    border-radius: 1.15rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, .68), rgba(241, 250, 235, .62));
}

.rollout-preview > strong {
    color: var(--forest);
    font-size: .82rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.rollout-preview div {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    gap: .65rem;
    align-items: start;
    padding: .65rem;
    border-radius: .85rem;
    background: rgba(255, 255, 255, .74);
}

.rollout-preview span {
    color: var(--green-600);
    font-weight: 950;
}

.rollout-preview p {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
    font-size: .9rem;
}

.ai-orbit div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .35rem 1rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, .55);
    border: 1px solid var(--line);
}

.app-link-grid,
.download-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

.app-link-grid a,
.download-grid a {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--green-950), #164a3a);
    color: white;
    border-radius: 1rem;
    padding: .95rem 1rem;
    font-weight: 900;
    min-height: 3.4rem;
}

.app-link-grid a::after,
.download-grid a::after {
    content: "";
    position: absolute;
    inset: auto -2rem -2rem auto;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: rgba(217, 255, 113, .22);
}

.release-list {
    display: grid;
    gap: 1rem;
    padding: 2rem 0 4rem;
}

.release-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
}

.release-card-link {
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.release-card-link:hover {
    transform: translateY(-2px);
    border-color: rgba(13, 63, 48, .22);
    box-shadow: 0 20px 42px rgba(9, 28, 22, .12);
}

.release-card-meta {
    display: grid;
    justify-items: end;
    gap: .85rem;
}

.release-card-action {
    padding: .65rem .95rem;
}

.contact-layout {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 1rem;
    padding: 2rem 0 5rem;
}

/* Email addresses and phone numbers are single unbreakable tokens — one address held this column at
   341px on a 320px screen. They must be allowed to break rather than push the page sideways. */
.contact-layout a {
    overflow-wrap: anywhere;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.form-grid label {
    display: grid;
    gap: .42rem;
    font-weight: 850;
}

.required-label-text {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: .24rem;
    color: var(--ink);
    font-weight: 850;
    line-height: 1.2;
}

.required-label-text span {
    color: #b91c1c;
    font-weight: 950;
}

.form-grid input,
.form-grid textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 1rem;
    padding: .9rem 1rem;
    background: rgba(255, 255, 255, .82);
}

.form-grid input.invalid,
.form-grid textarea.invalid,
.form-grid select.invalid,
.form-grid .field-error input,
.form-grid .field-error textarea,
.guest-chat-form .field-error input,
.guest-chat-form .field-error textarea {
    border-color: rgba(185, 28, 28, .72);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 0 0 3px rgba(185, 28, 28, .10);
}

.field-error .required-label-text::after {
    content: "\f06a";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #b91c1c;
    font-size: .8rem;
}

.security-check {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, .55fr) auto;
    gap: .8rem;
    align-items: end;
    padding: 1rem;
    border: 1px solid rgba(16, 75, 57, .10);
    border-radius: 1.1rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, .72), rgba(241, 250, 235, .58));
}

.security-check-copy {
    display: grid;
    grid-column: 1 / -1;
    gap: .35rem;
}

.security-check-copy p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.45;
}

.security-question {
    display: inline-flex;
    width: fit-content;
    min-height: 2.25rem;
    align-items: center;
    border-radius: .85rem;
    padding: .48rem .72rem;
    background: rgba(217, 255, 113, .40);
    color: var(--ink);
    font-size: .95rem;
}

.validation-summary-card {
    display: grid;
    gap: .55rem;
    margin: 1rem 0 .25rem;
    padding: .9rem 1rem;
    border: 1px solid rgba(185, 28, 28, .20);
    border-radius: 1rem;
    background: rgba(255, 245, 245, .88);
    color: #7f1d1d;
}

.validation-summary-card strong {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.validation-summary-card ul {
    display: grid;
    gap: .25rem;
    margin: 0;
    padding-left: 1.1rem;
}

.compact-validation-summary {
    margin: .25rem 0;
    padding: .75rem .85rem;
    border-radius: .8rem;
    font-size: .88rem;
}

.faq-results-toolbar,
.pagination-row {
    /* 1120px, not 1180: these sit between .page-hero and .faq-list, which are both 1120, so a wider
       track left the toolbar and pager hanging 30px past the content on each side. */
    width: min(100% - 2rem, 1120px);
    margin: 1rem auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 12px 30px rgba(14, 38, 30, .07);
}

/* Child combinator, not a descendant one: this targets the toolbar's own stacked label group, but as
   `.faq-results-toolbar div` it also matched the .searchable-select wrapper and panel that the select
   enhancer injects at runtime — at (0,1,1) it outranked `.searchable-select-panel { display: none }`
   and forced the category dropdown to render open on page load. */
.faq-results-toolbar > div,
.pagination-row span {
    display: grid;
    gap: .15rem;
}

.faq-results-toolbar span,
.pagination-row span {
    color: var(--muted);
    font-size: .92rem;
}

.faq-results-toolbar label {
    min-width: min(260px, 100%);
    color: var(--muted);
    font-size: .84rem;
    font-weight: 700;
}

.faq-results-toolbar select {
    width: 100%;
    margin-top: .25rem;
    border: 1px solid var(--line);
    border-radius: .75rem;
    padding: .68rem .8rem;
    background: white;
    color: var(--ink);
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.span-2 {
    grid-column: span 2;
}

.form-message {
    margin: 1rem 0;
    padding: .9rem 1rem;
    border-radius: 1rem;
    font-weight: 800;
}

.form-message.success {
    background: rgba(126, 230, 200, .26);
}

.form-message.error {
    background: rgba(255, 158, 163, .24);
}

.article-shell {
    max-width: 860px;
    padding: 4rem 0;
}

.legal-shell {
    max-width: 1180px;
}

.legal-callout {
    display: grid;
    gap: .35rem;
    margin: 1.5rem 0;
    padding: clamp(1rem, 2.5vw, 1.35rem);
    border: 1px solid rgba(14, 38, 30, .09);
    border-radius: 1.35rem;
    background:
        radial-gradient(circle at 12% 0%, rgba(217, 255, 113, .34), transparent 14rem),
        rgba(255, 255, 255, .78);
    box-shadow: var(--shadow-soft);
}

.legal-callout strong {
    color: var(--forest);
    font-size: .82rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.legal-callout p {
    margin: 0;
}

.legal-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.legal-card {
    display: grid;
    align-content: start;
    min-height: 100%;
    padding: clamp(1.1rem, 2.4vw, 1.45rem);
    border: 1px solid rgba(14, 38, 30, .09);
    border-radius: 1.35rem;
    background: rgba(255, 255, 255, .8);
    box-shadow: var(--shadow-soft);
}

.legal-card h2 {
    margin-top: 0;
    font-size: clamp(1.22rem, 2vw, 1.7rem);
}

.legal-card p {
    margin-bottom: 0;
}

.faq-article {
    margin-bottom: 1rem;
}

.article-shell .lead {
    font-size: 1.25rem;
    color: var(--forest);
}

.article-chip-row {
    margin-bottom: 1.25rem;
}

.article-rich-content {
    display: grid;
    gap: 1rem;
}

.article-rich-content p,
.article-rich-content ul,
.article-rich-content ol,
.article-rich-content blockquote,
.article-rich-content h2,
.article-rich-content h3,
.article-rich-content h4 {
    margin: 0;
}

.article-rich-content ul,
.article-rich-content ol {
    padding-left: 1.25rem;
    color: var(--muted);
}

.article-rich-content strong {
    color: var(--ink);
}

.article-rich-content a {
    color: #0d5f47;
    text-decoration: underline;
}

.site-footer {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(260px, 1.6fr) repeat(4, minmax(150px, 1fr));
    gap: 1.4rem;
    padding: 2.5rem clamp(1rem, 3vw, 3rem);
    background: var(--green-950);
    color: white;
}

.site-footer p,
.site-footer small {
    color: rgba(255, 255, 255, .82);
}

.site-footer div {
    display: grid;
    align-content: start;
    gap: .55rem;
}

.site-footer a {
    color: rgba(255, 255, 255, .86);
}

.seo-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: center;
    max-width: var(--max);
    margin: 1rem auto 0;
    padding: 0 1.5rem;
    color: var(--muted);
    font-size: .85rem;
}

.seo-breadcrumb a {
    color: var(--muted);
}

.seo-breadcrumb a:hover {
    color: #0d5f47;
    text-decoration: underline;
}

.seo-breadcrumb strong {
    color: var(--ink);
    font-weight: 700;
}

.solution-list {
    width: min(1180px, calc(100% - 2rem));
    margin: 0 auto;
    display: grid;
    gap: 1rem;
}

.solution-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.1rem;
    padding: clamp(1rem, 2vw, 1.35rem);
    border: 1px solid var(--line);
    border-radius: 1.4rem;
    background: rgba(255, 255, 255, .72);
    box-shadow: var(--shadow-soft);
}

.solution-icon {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(217, 255, 113, .75), rgba(126, 230, 200, .72));
    color: var(--forest);
    font-size: 1.25rem;
}

.solution-card h2 {
    margin: .35rem 0 .45rem;
}

.solution-columns {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
}

.solution-columns div {
    display: grid;
    align-content: start;
    gap: .45rem;
    padding: .85rem;
    border-radius: 1rem;
    background: rgba(246, 248, 239, .8);
    border: 1px solid var(--line);
}

.solution-columns h3 {
    margin: 0;
    font-size: .95rem;
}

.solution-columns span,
.roadmap-timeline b {
    color: var(--ink-2);
}

.article-shell h2 {
    margin-top: 1.4rem;
}

@media (max-width: 1060px) {
    .site-header {
        grid-template-columns: 1fr auto;
    }

    .nav-links {
        grid-column: 1 / -1;
        justify-self: stretch;
        justify-content: center;
        flex-wrap: wrap;
    }

    .hero,
    .product-showcase {
        grid-template-columns: 1fr;
    }

    .hero-panel {
        max-width: 680px;
    }
}

@media (max-width: 900px) {
    /* minmax(0, 1fr), not 1fr: a bare fr track floors at min-content, so the contact form could not
       shrink below its own content and pushed the page 4px wider than a 390px screen. */
    .hero,
    .split-section,
    .product-card,
    .contact-layout,
    .site-footer {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The form's own two-column grid never collapsed, so its inputs held the form at 378px wide
       whatever the screen — the page still scrolled sideways at 320px. One column on a phone. */
    .form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact-form {
        min-width: 0;
    }

    .feature-grid,
    .service-grid,
    .blog-grid,
    .pricing-grid,
    .value-grid,
    .solution-columns {
        grid-template-columns: 1fr;
    }

    .solution-card {
        grid-template-columns: 1fr;
    }

    .cta-band {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .site-header {
        display: flex;
        align-items: stretch;
        flex-direction: column;
        gap: .75rem;
    }

    .header-actions,
    .hero-actions,
    .app-link-grid,
    .download-grid,
    .form-grid,
    .metric-grid {
        grid-template-columns: 1fr;
    }

    .header-actions .btn {
        flex: 1;
    }

    .nav-links {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .span-2 {
        grid-column: span 1;
    }

    h1,
    .page-hero h1 {
        font-size: clamp(2.35rem, 13vw, 3.55rem);
        letter-spacing: 0;
    }
}

/* Public website polish: calmer typography, safer spacing, and cleaner AI-style cards. */
body {
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

h1,
h2,
h3,
h4,
p {
    overflow-wrap: normal;
    word-break: normal;
}

h1 {
    max-width: 920px;
    font-size: clamp(2.7rem, 5vw, 4.65rem);
    line-height: 1.03;
    letter-spacing: 0;
    font-weight: 700;
}

h2 {
    font-size: clamp(1.55rem, 2.6vw, 2.45rem);
    line-height: 1.12;
    letter-spacing: 0;
    font-weight: 700;
}

h3 {
    letter-spacing: 0;
    font-weight: 700;
}

p {
    line-height: 1.72;
}

.brand-mark {
    font-weight: 760;
}

.brand strong {
    font-weight: 760;
}

.brand small {
    font-weight: 500;
}

.nav-links {
    font-weight: 650;
}

/* The duplicate .btn and .eyebrow blocks that sat here were silently overriding the canonical rules
   above — the same shadowing that had body pinned to Segoe UI. Their sizing is folded in there. */

.hero {
    min-height: auto;
    padding: clamp(3rem, 7vw, 5.8rem) 0 clamp(2.5rem, 5vw, 4.75rem);
}

.hero-copy h1 {
    max-width: 760px;
    font-size: clamp(2.8rem, 5.6vw, 4.9rem);
}

.hero-copy p {
    max-width: 680px;
}

.page-hero {
    width: min(1120px, calc(100% - 2rem));
    margin-top: clamp(1.8rem, 4vw, 3.6rem);
    margin-bottom: clamp(1.2rem, 3vw, 2.4rem);
    padding: clamp(1.7rem, 4vw, 3.25rem);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: clamp(1.35rem, 3vw, 2.25rem);
    background:
        radial-gradient(circle at 8% 12%, rgba(217, 255, 113, .34), transparent 20rem),
        radial-gradient(circle at 96% 0%, rgba(126, 230, 200, .26), transparent 22rem),
        linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .46));
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px) saturate(1.2);
}

.page-hero::before {
    opacity: .45;
}

.page-hero h1 {
    max-width: 780px;
    margin-top: 1rem;
    font-size: clamp(2.2rem, 4.1vw, 3.65rem);
    line-height: 1.08;
    letter-spacing: 0;
    font-weight: 700;
}

.page-hero p {
    max-width: 700px;
    font-size: clamp(1rem, 1.25vw, 1.14rem);
}

/* Request Demo (Workstream 2): a shorter hero so the form is reachable within the first
   scroll on mobile, per the brief's "form below the fold line, one scroll gesture" rule. */
.page-hero--compact {
    margin-top: clamp(1rem, 2.5vw, 2rem);
    margin-bottom: clamp(.75rem, 2vw, 1.4rem);
    padding: clamp(1.1rem, 2.5vw, 2rem);
}

.page-hero--compact h1 {
    margin-top: .5rem;
    font-size: clamp(1.7rem, 3vw, 2.6rem);
}

/* Demo focus areas (Workstream 2): scannable collapsible groups, sourced from
   MarketingContentCatalog.Apps so this list can never drift from the real module set. */
.demo-focus-hint {
    margin: 0 0 .9rem;
    color: var(--muted);
    font-size: .92rem;
}

.demo-focus-groups {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.demo-focus-group {
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: .1rem .9rem;
}

.demo-focus-group summary {
    cursor: pointer;
    padding: .7rem 0;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
}

.demo-focus-group summary::-webkit-details-marker {
    display: none;
}

.demo-focus-count {
    font-size: .8rem;
    font-weight: 500;
    color: var(--muted);
}

.demo-focus-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem .9rem;
    padding: 0 0 .9rem;
}

.demo-focus-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .92rem;
}

@media (max-width: 640px) {
    .demo-focus-items {
        grid-template-columns: 1fr;
    }
}

.section,
.split-section,
.cta-band,
.release-list,
.blog-grid,
.contact-layout,
.pricing-grid,
.faq-list,
.article-shell,
.section-tight,
.product-showcase {
    width: min(1120px, calc(100% - 2rem));
}

.section,
.split-section,
.release-list,
.blog-grid,
.contact-layout,
.pricing-grid,
.faq-list {
    padding-top: clamp(1.25rem, 3vw, 1.25rem);
}

.feature-card h2,
.feature-card h3,
.service-card h2,
.product-card h2,
.release-card h2,
.blog-card h2,
.pricing-grid h2,
.article-shell h1 {
    font-size: clamp(1.32rem, 2.15vw, 2rem);
    line-height: 1.14;
    letter-spacing: 0;
    font-weight: 720;
}

.feature-card span,
.app-link-grid a,
.download-grid a,
.form-grid label,
.form-message {
    font-weight: 700;
}

.release-card,
.blog-card,
.feature-card,
.service-card,
.metric-card,
.glass-card,
.product-card,
.product-showcase,
.article-shell {
    border-color: rgba(14, 38, 30, .09);
}

.blog-card {
    display: grid;
    align-content: start;
    gap: .8rem;
    min-height: 100%;
}

.blog-card p {
    margin: 0;
}

.blog-card small {
    margin-top: auto;
}

.release-card {
    align-items: start;
    padding: clamp(1.25rem, 2.4vw, 1.8rem);
}

.release-card small,
.blog-card small {
    color: var(--muted);
    font-weight: 600;
    white-space: nowrap;
}

.chip-row span,
.stats-chip,
.brand-pill {
    font-weight: 650;
}

.site-footer {
    margin-top: clamp(2rem, 5vw, 4rem);
}

@media (max-width: 1060px) {
    .hero-copy h1 {
        max-width: 860px;
    }
}

@media (max-width: 760px) {
    .site-header {
        min-height: auto;
    }

    h1,
    .hero-copy h1,
    .page-hero h1 {
        font-size: clamp(2.05rem, 10vw, 3rem);
        line-height: 1.08;
        letter-spacing: 0;
    }

    h2 {
        font-size: clamp(1.45rem, 7vw, 2.05rem);
    }

    .page-hero {
        padding: 1.35rem;
        border-radius: 1.35rem;
    }

    .release-card {
        grid-template-columns: 1fr;
    }

    .release-card small {
        white-space: normal;
    }
}

.faq-search {
    width: min(680px, 100%);
    min-height: 54px;
    margin-top: 1.25rem;
    padding: 0 1.15rem;
    border: 1px solid rgba(14, 38, 30, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 16px 34px rgba(14, 38, 30, .07);
    color: var(--ink);
    font: inherit;
    font-weight: 650;
    outline: none;
}

.faq-search:focus {
    border-color: rgba(16, 75, 57, .42);
    box-shadow: 0 0 0 4px rgba(185, 255, 102, .22), 0 16px 34px rgba(14, 38, 30, .07);
}

.platform-icon {
    display: inline-grid;
    width: 2.1rem;
    min-width: 2.1rem;
    height: 2.1rem;
    place-items: center;
    border-radius: .85rem;
    background: rgba(185, 255, 102, .18);
    color: #d9ff71;
    font-size: .95rem;
    font-weight: 780;
    letter-spacing: 0;
}

.app-link-grid a,
.download-grid a {
    display: flex;
    align-items: center;
    gap: .72rem;
    min-height: 58px;
}

.nav-links {
    flex-wrap: wrap;
}

.menu-toggle-input,
.menu-toggle-button {
    display: none;
}

.download-page-grid {
    display: grid;
    width: min(1120px, calc(100% - 2rem));
    margin: 0 auto;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
}

.download-card {
    display: grid;
    min-height: 220px;
    align-content: space-between;
    padding: 1.25rem;
    border: 1px solid rgba(14, 38, 30, .09);
    border-radius: 1.5rem;
    background: linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(244, 250, 240, .66));
    box-shadow: 0 18px 45px rgba(14, 38, 30, .08);
    color: var(--ink);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.download-card:hover,
.download-card:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(16, 75, 57, .22);
    box-shadow: 0 28px 68px rgba(14, 38, 30, .13);
}

.download-card strong {
    display: block;
    margin-top: 1rem;
    font-size: 1.15rem;
}

.download-card p {
    margin: .35rem 0 0;
    color: var(--muted);
    line-height: 1.55;
}

.platform-icon.web {
    background: rgba(86, 109, 255, .14);
    color: #566dff;
}

.platform-icon.android {
    background: rgba(61, 220, 132, .16);
    color: #0d8f4f;
}

.platform-icon.ios {
    background: rgba(17, 24, 39, .1);
    color: #111827;
}

.platform-icon.windows {
    background: rgba(0, 120, 212, .14);
    color: #0078d4;
}

.platform-icon.mac {
    background: rgba(120, 120, 130, .16);
    color: #34343a;
}

.product-card {
    display: flex;
    min-height: 100%;
    flex-direction: column;
}

.product-card .app-link-grid,
.product-card .product-app-grid {
    margin-top: auto;
}

.product-app-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
}

.product-app-grid > a:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.contact-form-head {
    margin-bottom: 1rem;
}

.contact-form-head h2,
.support-contact-band h2 {
    margin: 0 0 .35rem;
    font-size: clamp(1.45rem, 2.2vw, 2rem);
}

.contact-form-head p,
.support-contact-band p {
    margin: 0;
    color: var(--muted);
    line-height: 1.58;
}

.contact-method-grid,
.social-grid {
    display: grid;
    gap: .7rem;
    margin-top: 1.2rem;
}

.contact-response-note {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.1rem;
    padding: .7rem .9rem;
    border-radius: var(--r);
    background: var(--green-50);
    color: var(--green-700);
    font-size: .88rem;
}

.contact-map {
    margin-top: 1.1rem;
    border-radius: var(--r);
    overflow: hidden;
    border: 1px solid var(--line);
}

.contact-map iframe {
    width: 100%;
    height: 220px;
    border: 0;
    display: block;
}

.contact-method-grid a,
.contact-method-grid div,
.social-grid a,
.support-contact-actions a,
.support-contact-actions button {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    min-height: 46px;
    padding: .75rem 1rem;
    border: 1px solid rgba(14, 38, 30, .09);
    border-radius: 999px;
    background: rgba(255, 255, 255, .76);
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
}

.social-grid a {
    transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.social-grid a:hover {
    transform: translateY(-2px);
    border-color: rgba(16, 75, 57, .22);
    background: rgba(235, 252, 243, .9);
}

.contact-method-grid a,
.contact-method-grid div {
    justify-content: flex-start;
    border-radius: 1rem;
}

.contact-method-grid i,
.social-grid i {
    display: inline-grid;
    width: 1.5rem;
    place-items: center;
    color: #0f4b39;
    font-size: 1.05rem;
}

.social-grid .fa-linkedin-in { color: #0a66c2; }
.social-grid .fa-facebook-f { color: #1877f2; }
.social-grid .fa-instagram { color: #c13584; }
.social-grid .fa-youtube { color: #ff0000; }
.social-grid .fa-x-twitter { color: #111827; }
.social-grid .fa-tiktok { color: #010101; }
.social-grid .fa-whatsapp { color: #128c7e; }

.social-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.support-contact-band {
    display: grid;
    gap: 1rem;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto;
    width: min(1120px, calc(100% - 2rem));
    margin: 2rem auto 0;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid rgba(14, 38, 30, .08);
    border-radius: 1.75rem;
    background:
        radial-gradient(circle at 12% 0%, rgba(217, 255, 113, .35), transparent 18rem),
        rgba(255, 255, 255, .76);
    box-shadow: var(--shadow-soft);
}

.support-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: flex-end;
}

.faq-category-list {
    display: grid;
    gap: 1rem;
}

.faq-category-card {
    display: grid;
    grid-template-columns: minmax(220px, .42fr) minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 2rem);
    padding: clamp(1.15rem, 3vw, 2rem);
    border: 1px solid rgba(14, 38, 30, .08);
    border-radius: 1.75rem;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 18px 48px rgba(14, 38, 30, .07);
}

.faq-category-heading span {
    display: inline-flex;
    margin-bottom: .85rem;
    padding: .4rem .72rem;
    border-radius: 999px;
    background: rgba(185, 255, 102, .28);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.faq-category-heading h2 {
    margin: 0 0 .5rem;
    font-size: clamp(1.5rem, 2.4vw, 2.3rem);
    letter-spacing: 0;
}

.faq-category-heading p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.faq-accordion-list {
    display: grid;
    gap: .7rem;
}

.faq-accordion {
    border: 1px solid rgba(14, 38, 30, .08);
    border-radius: 1rem;
    background: rgba(248, 251, 244, .72);
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.faq-accordion[open] {
    border-color: rgba(16, 75, 57, .18);
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 14px 30px rgba(14, 38, 30, .06);
}

.faq-accordion summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    padding: .9rem 1rem;
    font-family: "Space Grotesk", Inter, "Segoe UI", sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--green);
    list-style: none;
}

.faq-accordion summary::marker {
    content: "";
}

.faq-accordion summary::after {
    content: "+";
    flex: none;
    color: var(--green-600);
    font-size: 1.4rem;
    line-height: 1;
}

.faq-accordion[open] summary::after {
    content: "–";
}

.faq-accordion p {
    margin: 0;
    padding: 0 1rem .95rem;
    color: var(--muted);
    line-height: 1.65;
}

@media (max-width: 980px) {
    .site-header {
        display: grid;
        grid-template-columns: 1fr auto;
        width: min(100% - 1rem, 1180px);
        padding: .72rem;
        border-radius: 1.25rem;
        z-index: 300;
        box-sizing: border-box;
    }

    .brand {
        min-width: 0;
        max-width: 100%;
    }

    .brand-mark-image {
        width: 2.8rem;
        height: 2.8rem;
        max-width: 2.8rem;
        max-height: 2.8rem;
    }

    .brand span:last-child {
        min-width: 0;
    }

    .brand strong,
    .brand small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .menu-toggle-button {
        display: inline-flex;
        width: 48px;
        height: 48px;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 4px;
        border: 1px solid rgba(13, 79, 60, .18);
        border-radius: 1rem;
        background:
            linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(226, 249, 238, .82));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 12px 28px rgba(14, 38, 30, .1);
        cursor: pointer;
        transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    }

    .menu-toggle-button:hover,
    .menu-toggle-button:focus-visible,
    .menu-toggle-button.active {
        border-color: rgba(16, 75, 57, .32);
        background: linear-gradient(145deg, var(--green-700), #0a3327);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 16px 34px rgba(8, 41, 31, .18);
        outline: none;
    }

    .menu-toggle-button.active span:nth-child(1) {
        width: 21px;
        transform: translateY(6px) rotate(45deg);
    }

    .menu-toggle-button.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle-button.active span:nth-child(3) {
        width: 21px;
        transform: translateY(-6px) rotate(-45deg);
    }

    .menu-toggle-button span {
        display: block;
        width: 20px;
        height: 2px;
        border-radius: 999px;
        background: var(--green-700);
        transition: width .18s ease, transform .18s ease, opacity .18s ease, background .18s ease;
    }

    .menu-toggle-button span:nth-child(2) {
        width: 15px;
        margin-left: 5px;
    }

    .menu-toggle-button span:nth-child(3) {
        width: 20px;
    }

    .menu-toggle-button:hover span,
    .menu-toggle-button:focus-visible span,
    .menu-toggle-button.active span {
        background: var(--lime);
    }

    .nav-links {
        display: none;
        position: fixed;
        top: calc(76px + env(safe-area-inset-top));
        left: max(.75rem, env(safe-area-inset-left));
        right: max(.75rem, env(safe-area-inset-right));
        z-index: 320;
        grid-column: auto;
        justify-content: flex-start;
        align-items: stretch;
        flex-direction: column;
        flex-wrap: nowrap;
        width: auto;
        max-width: calc(100vw - 1.5rem);
        max-height: calc(100dvh - 92px);
        overflow-x: hidden;
        overflow-y: auto;
        box-sizing: border-box;
        padding: .75rem;
        row-gap: .5rem;
        border: 1px solid rgba(14, 38, 30, .1);
        border-radius: 1.15rem;
        /* Was rgba(..., .96) - the same "hero art bleeds through the panel" bug already fixed on
           .nav-dropdown (see the comment above that rule), just never carried over to this, the actual
           full-screen mobile menu surface. Fully opaque so page content behind it can't show through. */
        background: var(--white);
        box-shadow: 0 26px 70px rgba(8, 41, 31, .2);
        backdrop-filter: blur(18px) saturate(1.2);
        overscroll-behavior: contain;
    }

    .nav-group-trigger,
    .nav-direct {
        justify-content: space-between;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        text-align: left;
        white-space: normal;
    }

    .nav-dropdown {
        display: none;
        position: static;
        width: 100%;
        max-height: none;
        overflow: visible;
        grid-template-columns: 1fr;
        box-shadow: none;
        margin-top: .35rem;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        /* Was rgba(..., .58) - same bleed-through bug as .nav-links above, one layer deeper: at 58%
           this panel let page content underneath show through even more than .nav-links did. */
        background: var(--white);
    }

    .nav-group-mega .nav-dropdown {
        position: static;
        top: auto;
        left: auto;
        width: 100%;
        max-height: min(58dvh, 520px);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow-x: hidden;
        overflow-y: auto;
        transform: none;
        padding: .65rem;
        border-radius: 1rem;
    }

    .nav-group-mega:hover .nav-dropdown,
    .nav-group-mega.show .nav-dropdown {
        transform: none;
    }

    /* Resources/Company (the compact, non-mega groups) need the exact same reset as the mega groups
       just above, and for the same reason: the desktop rule ".nav-group.show .nav-dropdown
       { transform: translate(-50%, 0) }" (unscoped, applies at every width) has 3 classes in its
       selector, so the plain ".nav-dropdown { transform: none }" mobile reset a few lines up - only
       1 class - can never outrank it no matter where either rule sits in the file. Mega groups dodge
       this because ".nav-group-mega.show .nav-dropdown" also has 3 classes and wins on source order;
       compact groups had no such override at all, so they kept the desktop translateX(-50%) and hung
       half their own width off the left edge of the viewport - confirmed live, screenshot showed the
       Resources/Company panels clipped hard at x=0 with mid-word text ("...ntation notes"). */
    .nav-group:hover .nav-dropdown,
    .nav-group.show .nav-dropdown {
        transform: none;
    }

    .nav-group::after {
        display: none !important;
    }

    .nav-dropdown a {
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .nav-group-mega .nav-dropdown a {
        min-height: 3rem;
        padding: .5rem;
    }

    .nav-dropdown a span,
    .nav-dropdown a strong,
    .nav-dropdown a small {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .nav-group:hover .nav-dropdown,
    .nav-group.show .nav-dropdown {
        display: grid;
    }

    .header-actions {
        display: none;
    }

    .mobile-nav-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: .55rem;
        padding-top: .35rem;
    }

    .mobile-nav-actions .btn {
        gap: .45rem;
        width: 100%;
    }

    .menu-toggle-input:checked ~ .nav-links {
        display: flex;
    }

    .download-page-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* minmax(0, 1fr) rather than 1fr: a bare fr track floors at min-content, so these single-column
       layouts could still be forced wider than their container — the contact form held a 378px track
       inside a 288px section and scrolled the page sideways at every phone width. */
    .contact-layout,
    .product-showcase,
    .split-section,
    .integration-area-section,
    .module-overview-grid,
    .faq-topic-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .product-card {
        gap: 1.5rem;
    }

    .faq-category-card,
    .compact-faq-card,
    .support-contact-band {
        grid-template-columns: 1fr;
    }

    .support-contact-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 620px) {
    .nav-group-mega .nav-dropdown {
        grid-template-columns: 1fr;
        max-height: min(56dvh, 440px);
    }

    .nav-dropdown-section {
        gap: .18rem;
    }

    .nav-dropdown-heading {
        padding: .45rem .35rem .08rem;
        font-size: .68rem;
    }

    .nav-group-mega .nav-dropdown a {
        gap: .55rem;
        min-height: 2.75rem;
        padding: .42rem .45rem;
    }

    .nav-group-mega .nav-dropdown a i {
        flex-basis: 2rem;
        width: 2rem;
        height: 2rem;
        border-radius: .65rem;
        font-size: .86rem;
    }

    .download-page-grid,
    .product-app-grid,
    .social-grid,
    .app-link-grid {
        grid-template-columns: 1fr;
    }

    .hero,
    .page-hero {
        /* 2rem, not 1rem: every section below the hero uses a 1rem gutter per side, so a half-gutter
           here left the hero 8px wider than the content under it on every page at phone widths. */
        width: min(100% - 2rem, 1120px);
    }

    .page-hero h1 {
        font-size: clamp(2rem, 11vw, 3rem);
    }

    .contact-form,
    .contact-card {
        padding: 1.1rem;
        border-radius: 1.35rem;
    }
}

.marketing-hero {
    grid-template-columns: minmax(0, .54fr) minmax(460px, .46fr);
    min-height: auto;
    align-items: center;
    width: min(1400px, calc(100% - clamp(2rem, 5vw, 4.5rem)));
    padding-bottom: clamp(1.4rem, 3vw, 2.2rem);
}

.home-section,
.hero-workflow-strip,
.proof-strip {
    width: min(1400px, calc(100% - clamp(2rem, 5vw, 4.5rem)));
}

.home-section .section-heading {
    /*max-width: 800px;*/
}

/* Rest-point rhythm between homepage sections, and background alternation so a long page reads in
   distinct beats instead of one continuous off-white field. The background modifiers paint full-bleed
   (inline-size: 100vw via the negative margin trick) while .home-section itself stays content-width. */
.home-section {
    padding-block: var(--section-rhythm);
}

.home-section--white,
.home-section--off-white,
.home-section--mint,
.home-section--dark {
    max-width: none;
    width: 100%;
    margin-inline: 0;
    padding-inline: max(1rem, calc((100% - min(1400px, 100% - clamp(2rem, 5vw, 4.5rem))) / 2));
}

.home-section--white {
    background: var(--white);
}

.home-section--off-white {
    background: var(--cream);
}

.home-section--mint {
    background: var(--mint-tint);
}

.home-section--dark {
    background: var(--green);
    color: var(--white);
}

.home-section--dark .section-heading .eyebrow {
    color: var(--mint);
}

.home-section--dark .section-heading h2,
.home-section--dark .section-heading p {
    color: var(--white);
}

.platform-preview {
    align-self: center;
}

.dense-grid article,
.use-case-card,
.module-card,
.module-category,
.faq-empty {
    border: 1px solid rgba(14, 38, 30, .09);
    background: rgba(255, 255, 255, .82);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px);
}

.dense-grid article {
    display: grid;
    gap: .65rem;
    min-height: 210px;
    border-radius: 1.35rem;
    padding: 1.25rem;
}

.dense-grid i,
.business-grid i,
/* Solid green tile with a lime glyph, per the design system. A 22% mint tint did not register against
   the cream cards, so the icons read as empty squares. */
.module-icon {
    display: inline-grid;
    width: 2.45rem;
    height: 2.45rem;
    place-items: center;
    border-radius: .9rem;
    background: var(--green);
    color: var(--lime);
}

.dense-grid h3,
.use-case-card h3,
.module-card h3 {
    margin-bottom: .2rem;
}

.dense-grid p,
.use-case-card p,
.module-card p {
    margin-bottom: 0;
}

.clickable-card,
.business-grid a,
.module-card,
.module-badge-row a {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.clickable-card:hover,
.business-grid a:hover,
.module-card:hover,
.module-badge-row a:hover {
    transform: translateY(-3px);
    border-color: rgba(16, 75, 57, .22);
    box-shadow: var(--shadow);
}

.business-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
}

@media (min-width: 901px) {
    .feature-grid,
    .service-grid,
    .value-grid,
    .business-grid,
    .module-overview-grid,
    .faq-topic-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .feature-grid > *,
    .service-grid > *,
    .value-grid > *,
    .business-grid > *,
    .module-overview-grid > *,
    .faq-topic-grid > * {
        grid-column: span 2;
    }

    /* grid-column: 1/-1 alone stretches the orphaned card to the full row width via the grid's default
       justify-items: stretch - fine for a card whose internal layout fills space on its own, but
       .value-grid article's internal layout is `grid-template-columns: auto minmax(0, 1fr)` (icon column
       + a 1fr text column), so a short heading/paragraph in a 1fr column that's now 6 tracks wide left a
       large blank rectangle beside the text (confirmed live and screenshotted by the user on the
       homepage's "Report-ready growth" card). justify-self: start stops the card from being stretched to
       fill the spanned tracks - it still claims the full row (so no empty trailing tracks either), but
       renders at content-driven width; max-width caps that at roughly 1.5 normal card widths so a card
       with very little text still reads as a deliberately-sized card, not a sliver. */
    .feature-grid > :last-child:nth-child(3n + 1),
    .service-grid > :last-child:nth-child(3n + 1),
    .value-grid > :last-child:nth-child(3n + 1),
    .business-grid > :last-child:nth-child(3n + 1),
    .module-overview-grid > :last-child:nth-child(3n + 1),
    .faq-topic-grid > :last-child:nth-child(3n + 1),
    .download-page-grid > :last-child:nth-child(5n + 1) {
        grid-column: 1 / -1;
        /* start (later widened to center - see the comment above .industry-card-grid for why a lone
           left-aligned item still reads as broken even once it's no longer stretched or reserving empty
           tracks) left this card hugging the row's left edge with all the leftover space bunched on the
           right. center puts even space on both sides instead, which reads as intentional. */
        justify-self: center;
        max-width: 520px;
    }

    .feature-grid > :nth-last-child(2):nth-child(3n + 1),
    .feature-grid > :nth-last-child(2):nth-child(3n + 1) ~ *,
    .service-grid > :nth-last-child(2):nth-child(3n + 1),
    .service-grid > :nth-last-child(2):nth-child(3n + 1) ~ *,
    .value-grid > :nth-last-child(2):nth-child(3n + 1),
    .value-grid > :nth-last-child(2):nth-child(3n + 1) ~ *,
    .business-grid > :nth-last-child(2):nth-child(3n + 1),
    .business-grid > :nth-last-child(2):nth-child(3n + 1) ~ *,
    .module-overview-grid > :nth-last-child(2):nth-child(3n + 1),
    .module-overview-grid > :nth-last-child(2):nth-child(3n + 1) ~ *,
    .faq-topic-grid > :nth-last-child(2):nth-child(3n + 1),
    .faq-topic-grid > :nth-last-child(2):nth-child(3n + 1) ~ * {
        grid-column: span 3;
        justify-self: center;
        max-width: 520px;
    }
}

.business-grid a {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-height: 76px;
    padding: 1rem;
    border: 1px solid rgba(14, 38, 30, .09);
    border-radius: 1.15rem;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 14px 34px rgba(14, 38, 30, .06);
    font-weight: 740;
}

.cta-stack {
    align-items: center;
}

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .7rem;
}

.ghost-on-dark {
    color: #eafff0;
    border-color: rgba(255, 255, 255, .25);
    background: transparent;
}

.ghost-on-dark:hover {
    color: var(--white);
    border-color: var(--mint);
    background: transparent;
}

.module-section-list {
    display: grid;
    gap: 1.15rem;
    width: min(1120px, calc(100% - 2rem));
    margin: 0 auto;
}

.module-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

.module-badge-row a {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    border: 1px solid rgba(14, 38, 30, .09);
    border-radius: 999px;
    padding: .62rem .92rem;
    background: rgba(255, 255, 255, .78);
    color: var(--forest);
    font-weight: 740;
}

.seo-content-block {
    display: grid;
    gap: 1rem;
}

.seo-content-block h2 {
    /*max-width: 820px;*/
    margin: 0;
}

.seo-content-block p {
    /*max-width: 920px;*/
    margin: 0;
    color: var(--muted);
    line-height: 1.75;
}

.module-category {
    scroll-margin-top: 110px;
    border-radius: 1.75rem;
    padding: clamp(1.2rem, 3vw, 2rem);
}

.module-category.amber {
    background: linear-gradient(180deg, rgba(245, 180, 95, .14), rgba(255, 255, 255, .82));
}

.module-category.green {
    background: linear-gradient(180deg, rgba(126, 230, 200, .18), rgba(255, 255, 255, .82));
}

.module-category.blue {
    background: linear-gradient(180deg, rgba(132, 168, 255, .16), rgba(255, 255, 255, .82));
}

.module-category.rose {
    background: linear-gradient(180deg, rgba(255, 158, 163, .15), rgba(255, 255, 255, .82));
}

.module-category.violet {
    background: linear-gradient(180deg, rgba(185, 167, 255, .17), rgba(255, 255, 255, .82));
}

.module-category.cyan {
    background: linear-gradient(180deg, rgba(148, 232, 255, .17), rgba(255, 255, 255, .82));
}

.module-category-heading {
    max-width: 780px;
    margin-bottom: 1.15rem;
}

.module-card-grid,
.use-case-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.module-overview-grid,
.faq-topic-grid,
.product-area-grid,
.module-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.module-category-card,
.faq-topic-card {
    display: grid;
    min-height: 100%;
    align-content: start;
    gap: .75rem;
    border: 1px solid rgba(14, 38, 30, .09);
    border-radius: 1.35rem;
    padding: 1.2rem;
    background: rgba(255, 255, 255, .84);
    box-shadow: var(--shadow-soft);
    color: var(--ink);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.module-category-card:hover,
.faq-topic-card:hover,
.faq-topic-card.active {
    transform: translateY(-3px);
    border-color: rgba(16, 75, 57, .22);
    box-shadow: var(--shadow);
}

.module-category-card h3,
.faq-topic-card strong {
    margin: 0;
    font-size: clamp(1.18rem, 1.65vw, 1.55rem);
    line-height: 1.16;
}

.module-category-card p,
.faq-topic-card small {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.module-category-card.amber { background: linear-gradient(180deg, rgba(245, 180, 95, .14), rgba(255, 255, 255, .84)); }
.module-category-card.green { background: linear-gradient(180deg, rgba(126, 230, 200, .18), rgba(255, 255, 255, .84)); }
.module-category-card.blue { background: linear-gradient(180deg, rgba(132, 168, 255, .16), rgba(255, 255, 255, .84)); }
.module-category-card.rose { background: linear-gradient(180deg, rgba(255, 158, 163, .15), rgba(255, 255, 255, .84)); }
.module-category-card.violet { background: linear-gradient(180deg, rgba(185, 167, 255, .17), rgba(255, 255, 255, .84)); }
.module-category-card.cyan { background: linear-gradient(180deg, rgba(148, 232, 255, .17), rgba(255, 255, 255, .84)); }

.compact-search {
    margin-top: .25rem;
}

.compact-panel {
    padding-top: clamp(0.5rem, 2vw, 0rem);
    padding-bottom: clamp(1rem, 2vw, 1.5rem);
}

.compact-actions {
    margin-top: .6rem;
}

.tight-grid {
    gap: .9rem;
}

.clean-list {
    display: grid;
    gap: .65rem;
    margin: .75rem 0 0;
    padding-left: 1.1rem;
    color: var(--muted);
    line-height: 1.6;
}

.compact-faq-list,
.single-faq-list {
    gap: 1rem;
}

.compact-faq-card {
    grid-template-columns: 1fr;
    gap: .95rem;
    padding: clamp(1rem, 2.2vw, 1.35rem);
}

.faq-topic-grid {
    position: sticky;
    top: 92px;
    z-index: 10;
    padding: .25rem;
    border-radius: 1.35rem;
    background: rgba(251, 252, 247, .7);
    backdrop-filter: blur(16px);
}

.module-card,
.use-case-card {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    gap: .85rem;
    border-radius: 1.25rem;
    padding: 1.15rem;
    scroll-margin-top: 110px;
}

.module-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.module-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    border-radius: 999px;
    padding: .28rem .62rem;
    background: rgba(217, 255, 113, .34);
    color: var(--green);
    font-size: .74rem;
    font-weight: 800;
}

.module-capabilities {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.module-capabilities span {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .3rem .56rem;
    background: rgba(255, 255, 255, .62);
    color: var(--forest);
    font-size: .76rem;
    font-weight: 740;
}

.module-benefit {
    margin-top: auto;
    padding-top: .8rem;
    border-top: 1px solid rgba(14, 38, 30, .08);
}

.module-benefit strong,
.use-case-card strong {
    color: var(--ink);
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.module-benefit p {
    margin-top: .25rem;
    line-height: 1.55;
}

.learn-more {
    color: var(--green-700);
    font-weight: 800;
}

.use-case-card ul {
    margin: -.35rem 0 0;
    padding-left: 1.1rem;
    color: var(--muted);
    line-height: 1.58;
}

.erp-ui-rules {
    padding-top: clamp(2rem, 4vw, 3rem);
}

.glass-card {
    padding: clamp(1.2rem, 3vw, 1.75rem);
    border: 1px solid rgba(14, 38, 30, .09);
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, .78);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px);
}

.about-stat-grid,
.about-principle-grid,
.integration-doc-grid,
.integration-example-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.about-stat-grid article,
.about-principle-grid article,
.integration-doc-grid article,
.integration-code-card,
.integration-area-list article,
.service-process article {
    border: 1px solid rgba(14, 38, 30, .09);
    border-radius: 1.3rem;
    background: rgba(255, 255, 255, .82);
    box-shadow: var(--shadow-soft);
}

.about-stat-grid article {
    display: grid;
    gap: .45rem;
    padding: 1.15rem;
}

.about-stat-grid strong {
    color: var(--forest);
    font-size: 1.08rem;
}

.about-stat-grid span {
    color: var(--muted);
    line-height: 1.55;
}

.about-principle-grid article,
.integration-doc-grid article {
    display: grid;
    align-content: start;
    gap: .65rem;
    padding: 1.2rem;
}

.about-principle-grid i,
.integration-doc-grid i {
    display: inline-grid;
    width: 2.45rem;
    height: 2.45rem;
    place-items: center;
    border-radius: .9rem;
    background: var(--green);
    color: var(--lime);
}

.service-process,
.integration-area-list {
    display: grid;
    gap: .8rem;
}

.integration-area-section {
    align-items: start;
}

.integration-area-intro {
    display: grid;
    align-content: start;
    gap: 1rem;
}

.integration-surface-panel {
    display: grid;
    gap: .75rem;
    margin-top: .35rem;
}

.integration-surface-panel article,
.integration-note-card {
    border: 1px solid rgba(14, 38, 30, .09);
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, .76);
    box-shadow: var(--shadow-soft);
}

.integration-surface-panel article {
    display: grid;
    grid-template-columns: 2.7rem minmax(0, 1fr);
    gap: .85rem;
    align-items: start;
    padding: 1rem;
}

.integration-surface-panel i {
    display: inline-grid;
    width: 2.45rem;
    height: 2.45rem;
    place-items: center;
    border-radius: .9rem;
    background: var(--green);
    color: var(--lime);
}

.integration-surface-panel strong,
.integration-note-card strong {
    display: block;
    margin-bottom: .24rem;
    color: var(--ink);
}

.integration-surface-panel span {
    display: block;
    color: var(--muted);
    line-height: 1.55;
}

.integration-note-card {
    padding: 1.1rem;
    background:
        radial-gradient(circle at 12% 0%, rgba(217, 255, 113, .32), transparent 12rem),
        rgba(255, 255, 255, .78);
}

.integration-note-card p {
    margin: 0;
}

.service-process article,
.integration-area-list article {
    display: grid;
    grid-template-columns: 2.9rem minmax(0, 1fr);
    gap: .95rem;
    align-items: start;
    padding: 1.05rem;
}

.service-process strong {
    color: var(--green-600);
    font-size: 1.35rem;
    letter-spacing: 0;
}

.service-process span,
.integration-area-list article > i {
    display: inline-grid;
    width: 2.65rem;
    height: 2.65rem;
    place-items: center;
    border-radius: .95rem;
    background: linear-gradient(135deg, rgba(217, 255, 113, .46), rgba(126, 230, 200, .30));
    color: var(--green-700);
    font-size: .95rem;
}

.integration-area-list article > div {
    display: grid;
    min-width: 0;
    gap: .45rem;
}

.integration-area-list strong {
    color: var(--ink);
    font-weight: 900;
    font-size: 1.02rem;
    line-height: 1.2;
}

.integration-area-list span {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    border: 1px solid rgba(14, 38, 30, .09);
    border-radius: 999px;
    padding: .34rem .62rem;
    background: rgba(255, 255, 255, .7);
    color: var(--forest);
    font-size: .78rem;
    font-weight: 760;
    line-height: 1.25;
}

.service-process p,
.integration-area-list p {
    margin: 0;
    line-height: 1.55;
}

.integration-example-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.integration-code-card {
    overflow: hidden;
    padding: 1rem;
}

.integration-code-card h3 {
    margin-bottom: .85rem;
}

.integration-code-card pre {
    overflow: auto;
    margin: 0;
    padding: 1rem;
    border-radius: 1rem;
    background: var(--green-950);
    color: #d9ff71;
    font-size: .82rem;
    line-height: 1.55;
}

.integration-checklist a {
    cursor: default;
}

.integration-readiness-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
}

.integration-readiness-grid article {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    min-height: 124px;
    padding: 1rem;
    border: 1px solid rgba(14, 38, 30, .09);
    border-radius: 1.2rem;
    background: rgba(255, 255, 255, .82);
    box-shadow: var(--shadow-soft);
}

.integration-readiness-grid i {
    display: inline-grid;
    flex: 0 0 2.35rem;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    border-radius: .85rem;
    background: var(--green);
    color: var(--lime);
}

.integration-readiness-grid strong,
.integration-lifecycle strong {
    display: block;
    color: var(--ink);
    margin-bottom: .25rem;
}

.integration-readiness-grid p,
.integration-lifecycle p {
    margin: 0;
    line-height: 1.55;
}

.integration-lifecycle {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .75rem;
}

.integration-lifecycle article {
    display: grid;
    grid-template-columns: 1fr;
    gap: .7rem;
    align-items: start;
    padding: 1rem;
    border: 1px solid rgba(14, 38, 30, .09);
    border-radius: 1.2rem;
    background: rgba(255, 255, 255, .82);
    box-shadow: var(--shadow-soft);
}

.service-hero {
    margin-bottom: clamp(1rem, 3vw, 2rem);
}

.service-category-grid .module-category-card {
    min-height: 250px;
}

.control-workspace-card {
    position: relative;
    isolation: isolate;
    gap: clamp(1.25rem, 3vw, 2rem);
    padding: clamp(1.35rem, 3.5vw, 2.3rem);
    overflow: hidden;
    background:
        radial-gradient(circle at 92% 10%, rgba(126, 230, 200, .24), transparent 18rem),
        linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(249, 252, 246, .78));
    border-color: rgba(16, 75, 57, .10);
    box-shadow: 0 24px 70px rgba(14, 38, 30, .10);
}

.control-workspace-card::before {
    content: "";
    position: absolute;
    inset: 1rem 1rem auto auto;
    width: 8rem;
    height: 8rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(185, 255, 102, .34), rgba(126, 230, 200, .18));
    opacity: .7;
    z-index: -1;
}

.workspace-copy {
    display: grid;
    align-content: center;
    gap: .85rem;
}

.workspace-copy h2 {
    max-width: 620px;
    margin: .35rem 0 0;
    font-size: clamp(2rem, 3.4vw, 3.05rem);
    line-height: 1.08;
}

.workspace-copy p {
    max-width: 660px;
    margin: 0;
    font-size: clamp(1rem, 1.25vw, 1.12rem);
    line-height: 1.75;
}

.workspace-proof-row {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: .35rem;
}

.workspace-proof-row span {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    min-height: 2.35rem;
    padding: .48rem .7rem;
    border: 1px solid rgba(16, 75, 57, .10);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    color: var(--forest);
    font-size: .82rem;
    font-weight: 850;
    box-shadow: 0 10px 24px rgba(14, 38, 30, .05);
}

.workspace-proof-row i {
    color: #0d8f4f;
}

.control-workspace-card .product-app-grid {
    align-self: stretch;
    margin-top: 0;
    width: 100%;
}

.control-workspace-card .product-app-grid a {
    display: flex;
    align-items: center;
    gap: .8rem;
    min-height: 74px;
    padding: .78rem .9rem;
    border: 1px solid rgba(16, 75, 57, .11);
    border-radius: 1.05rem;
    background: rgba(255, 255, 255, .78);
    color: var(--ink);
    box-shadow: 0 12px 28px rgba(14, 38, 30, .07);
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.control-workspace-card .product-app-grid a::after {
    display: none;
}

.control-workspace-card .product-app-grid a:hover,
.control-workspace-card .product-app-grid a:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(16, 75, 57, .22);
    background: #fff;
    box-shadow: 0 20px 44px rgba(14, 38, 30, .11);
}

.control-workspace-card .product-app-grid a span:last-child {
    display: grid;
    gap: .16rem;
}

.control-workspace-card .product-app-grid strong {
    font-size: .98rem;
    line-height: 1.1;
}

.control-workspace-card .product-app-grid small {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.15;
}

.control-workspace-card .platform-icon {
    width: 2.45rem;
    min-width: 2.45rem;
    height: 2.45rem;
    border-radius: .95rem;
    font-size: 1rem;
}

.control-workspace-card .platform-icon.web {
    background: linear-gradient(135deg, rgba(86, 109, 255, .18), rgba(126, 230, 200, .20));
}

.control-workspace-card .platform-icon.android {
    background: linear-gradient(135deg, rgba(61, 220, 132, .18), rgba(185, 255, 102, .22));
}

.control-workspace-card .platform-icon.ios,
.control-workspace-card .platform-icon.mac {
    background: linear-gradient(135deg, rgba(17, 24, 39, .10), rgba(255, 255, 255, .84));
}

.control-workspace-card .platform-icon.windows {
    background: linear-gradient(135deg, rgba(0, 120, 212, .16), rgba(126, 230, 200, .18));
}

.journey-trust-panel {
    display: grid;
    gap: .7rem;
    margin-top: clamp(1rem, 3vw, 1.6rem);
}

.journey-trust-panel article {
    padding: .9rem 1rem;
    border: 1px solid rgba(16, 75, 57, .10);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .70);
    box-shadow: 0 12px 28px rgba(14, 38, 30, .06);
}

.journey-trust-panel span {
    display: block;
    color: var(--green);
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .08em;
    margin-bottom: .32rem;
    text-transform: uppercase;
}

.journey-trust-panel strong {
    color: var(--ink);
    display: block;
    font-size: .98rem;
    line-height: 1.45;
}

.preview-strip,
.solution-kpi-strip,
.product-preview-panel {
    width: min(1120px, calc(100% - 2rem));
    margin: clamp(1rem, 3vw, 1rem) auto;
}

.preview-strip,
.solution-kpi-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
}

.preview-strip article,
.solution-kpi-strip article {
    border: 1px solid rgba(16, 75, 57, .10);
    border-radius: 1.2rem;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 16px 36px rgba(14, 38, 30, .07);
    padding: 1.1rem;
}

.preview-strip span,
.solution-kpi-strip span {
    color: var(--muted);
    display: block;
    font-size: .78rem;
    font-weight: 800;
    margin-bottom: .35rem;
    text-transform: uppercase;
}

.preview-strip strong,
.solution-kpi-strip strong {
    color: var(--ink);
    display: block;
    font-size: 1.05rem;
}

.preview-strip p {
    color: var(--muted);
    margin: .45rem 0 0;
}

.product-preview-panel {
    align-items: center;
    background: linear-gradient(135deg, rgba(11, 68, 50, .96), rgba(24, 82, 63, .86));
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 1.6rem;
    color: #fff;
    display: grid;
    gap: clamp(1rem, 3vw, 2rem);
    grid-template-columns: minmax(240px, .85fr) minmax(0, 1fr);
    overflow: hidden;
    padding: clamp(1.1rem, 3vw, 1.8rem);
    position: relative;
}

.product-preview-panel::before {
    background: radial-gradient(circle at 20% 20%, rgba(185, 255, 102, .24), transparent 38%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.product-preview-panel > * {
    position: relative;
}

.product-preview-panel .eyebrow,
.product-preview-panel p {
    color: rgba(255, 255, 255, .76);
}

.preview-window {
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 1.2rem;
    box-shadow: 0 22px 48px rgba(0, 0, 0, .18);
    color: var(--ink);
    padding: 1rem;
}

.preview-window-bar {
    display: flex;
    gap: .35rem;
    margin-bottom: .9rem;
}

.preview-window-bar span {
    background: rgba(16, 75, 57, .24);
    border-radius: 999px;
    display: block;
    height: .55rem;
    width: .55rem;
}

.preview-metrics {
    background: linear-gradient(135deg, rgba(185, 255, 102, .5), rgba(126, 230, 200, .32));
    border-radius: 1rem;
    display: grid;
    gap: .2rem;
    margin-bottom: .8rem;
    padding: 1rem;
}

.preview-metrics strong {
    font-size: 1.18rem;
}

.preview-list {
    display: grid;
    gap: .45rem;
}

.preview-list span {
    align-items: center;
    background: rgba(16, 75, 57, .07);
    border-radius: .75rem;
    color: var(--muted);
    display: flex;
    font-size: .92rem;
    justify-content: space-between;
    padding: .65rem .75rem;
}

.preview-list span::after {
    background: var(--green);
    border-radius: 999px;
    content: "";
    height: .45rem;
    width: .45rem;
}

.workflow-visual-section {
    align-items: center;
    display: grid;
    gap: 1.2rem;
    grid-template-columns: minmax(0, 1.2fr) minmax(240px, .8fr);
}

.workflow-mini {
    background: rgba(255, 255, 255, .75);
    border: 1px solid rgba(16, 75, 57, .10);
    border-radius: 1.2rem;
    display: grid;
    gap: .65rem;
    padding: 1rem;
}

.workflow-mini span {
    background: linear-gradient(90deg, rgba(126, 230, 200, .26), rgba(255, 255, 255, .72));
    border-radius: .85rem;
    color: var(--green);
    font-weight: 900;
    padding: .75rem .9rem;
}

.module-category-card,
.faq-topic-card,
.feature-card.clickable-card,
.release-card-link {
    will-change: transform;
}

@media (max-width: 760px) {
    .preview-strip,
    .solution-kpi-strip,
    .product-preview-panel,
    .workflow-visual-section {
        grid-template-columns: 1fr;
    }

    .preview-strip,
    .solution-kpi-strip {
        gap: .65rem;
    }

    .control-workspace-card {
        padding: 1.1rem;
    }

    .workspace-proof-row {
        display: grid;
        grid-template-columns: 1fr;
    }

    .control-workspace-card .product-app-grid a {
        min-height: 68px;
    }

    .feature-card,
    .service-card,
    .blog-card,
    .download-card,
    .module-category-card,
    .faq-topic-card,
    .preview-strip article,
    .solution-kpi-strip article {
        box-shadow: 0 10px 24px rgba(14, 38, 30, .06);
    }

    .page-hero::before,
    .hero-copy::before {
        opacity: .22;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

.service-journey {
    align-items: start;
}

.service-process-modern article {
    grid-template-columns: 3.2rem minmax(0, 1fr);
    min-height: auto;
}

.service-launch-notes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
    margin-top: 1.1rem;
}

.service-launch-notes span {
    border: 1px solid rgba(14, 38, 30, .09);
    border-radius: .9rem;
    padding: .7rem .8rem;
    background: rgba(255, 255, 255, .66);
    color: var(--forest);
    font-weight: 850;
    box-shadow: 0 10px 24px rgba(14, 38, 30, .05);
}

.service-readiness-list {
    display: grid;
    gap: .55rem;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid rgba(14, 38, 30, .09);
    border-radius: 1.1rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, .72), rgba(241, 250, 235, .58));
}

.service-readiness-list strong {
    color: var(--ink);
    font-size: 1.02rem;
}

.service-readiness-list p {
    margin: 0;
    line-height: 1.55;
}

.service-readiness-list ul {
    display: grid;
    gap: .35rem;
    margin: 0;
    padding-left: 1.05rem;
    color: var(--muted);
    line-height: 1.45;
}

.solution-help-card-head {
    display: flex;
    align-items: center;
    gap: .9rem;
    min-width: 0;
}

.solution-help-card-head h3 {
    margin: 0;
    min-width: 0;
}

.feature-card .solution-help-card-head + p {
    margin: .85rem 0 0;
    line-height: 1.6;
}

@media (max-width: 761px) {
    .compact-faq-list {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 1rem;
    }
}

    @media (min-width: 761px) {
        .blog-grid,
        .module-overview-grid,
        .faq-topic-grid,
        .product-area-grid,
        .module-category-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1rem;
        }

        .compact-faq-list {
            display: grid;
            grid-template-columns: repeat(1, minmax(0, 1fr));
            gap: 1rem;
        }

            .module-overview-grid > *,
            .faq-topic-grid > *,
            .product-area-grid > *,
            .module-category-grid > *,
            .compact-faq-list > * {
                grid-column: auto;
            }

            .blog-grid > :last-child:nth-child(odd),
            .module-overview-grid > :last-child:nth-child(odd),
            .faq-topic-grid > :last-child:nth-child(odd),
            .product-area-grid > :last-child:nth-child(odd),
            .module-category-grid > :last-child:nth-child(odd),
            .compact-faq-list > :last-child:nth-child(odd) {
                /* Same fix as the shared feature/service/value/business/module-overview/faq-topic block
                   above (search "justify-self: start" in this file for the full explanation): several of
                   these cards (.module-category-card, .faq-topic-card) use an icon + 1fr-text internal
                   layout, so stretching a lone last item to fill both columns left a large blank area
                   beside short text instead of a clean, normally-proportioned card. */
                grid-column: 1 / -1;
                justify-self: center;
                max-width: 520px;
            }
    }

    @media (max-width: 760px) {
        .product-area-grid,
        .module-category-grid,
        .faq-topic-grid,
        .compact-faq-list {
            display: grid;
            grid-template-columns: 1fr;
            gap: .85rem;
        }

            .product-area-grid > *,
            .module-category-grid > *,
            .faq-topic-grid > *,
            .compact-faq-list > * {
                grid-column: 1 / -1;
            }
    }

    .integration-lifecycle article > span {
        display: inline-grid;
        width: 3rem;
        height: 3rem;
        place-items: center;
        border-radius: 1rem;
        background: linear-gradient(135deg, rgba(217, 255, 113, .52), rgba(126, 230, 200, .38));
        color: var(--forest);
        font-weight: 950;
    }

    @media (max-width: 1060px) {
        .marketing-hero,
        .module-card-grid,
        .use-case-grid,
        .about-stat-grid,
        .about-principle-grid,
        .integration-doc-grid,
        .integration-example-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .integration-lifecycle {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .marketing-hero {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 900px) {
        .business-grid,
        .module-card-grid,
        .use-case-grid,
        .legal-card-grid {
            grid-template-columns: 1fr;
        }

        .cta-actions {
            justify-content: flex-start;
        }

        .service-process article {
            grid-template-columns: 1fr;
        }

        .integration-readiness-grid,
        .integration-lifecycle,
        .integration-example-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 620px) {
        .platform-preview .metric-grid {
            grid-template-columns: 1fr;
        }

        .business-grid a,
        .module-card,
        .use-case-card {
            border-radius: 1rem;
        }

        .about-stat-grid,
        .about-principle-grid,
        .integration-doc-grid,
        .integration-example-grid,
        .integration-readiness-grid {
            grid-template-columns: 1fr;
        }

        .integration-surface-panel article,
        .integration-lifecycle article,
        .integration-area-list article {
            grid-template-columns: 1fr;
        }
    }

    .tenant-pull-right {
        float: right;
    }

    .tenant-10by10-y-margin {
        margin: 0.8rem 0rem;
    }

    .tenant-bottom-1rem {
        margin: 1rem 0rem;
    }

    .faqs-btn-collapse-expand {
        min-height: 51px;
        margin-top: 20px;
    }

    .guest-chat-widget {
        position: fixed;
        right: clamp(1rem, 2vw, 1.5rem);
        bottom: clamp(1rem, 2vw, 1.5rem);
        z-index: 80;
        display: grid;
        justify-items: end;
        gap: .8rem;
    }

    .guest-chat-launcher {
        display: inline-flex;
        align-items: center;
        gap: .55rem;
        min-height: 54px;
        border: 0;
        border-radius: 999px;
        padding: .82rem 1rem;
        background: linear-gradient(135deg, var(--green-950), var(--green-700));
        color: #fff;
        box-shadow: 0 18px 44px rgba(8, 41, 31, .28);
        font: inherit;
        font-weight: 800;
        cursor: pointer;
    }

    .guest-chat-panel {
        width: min(380px, calc(100vw - 2rem));
        max-height: min(720px, calc(100dvh - 6.5rem));
        overflow: hidden;
        border: 1px solid rgba(14, 38, 30, .12);
        border-radius: 1.25rem;
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 28px 80px rgba(7, 19, 15, .22);
        backdrop-filter: blur(18px);
    }

    .guest-chat-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .78rem .9rem;
        color: #fff;
        background: linear-gradient(135deg, var(--green-950), var(--green-700));
    }

        .guest-chat-header div {
            display: grid;
        }

        .guest-chat-header span {
            color: rgba(255, 255, 255, .72);
            font-size: .82rem;
        }

    .guest-chat-icon-button {
        display: inline-grid;
        width: 34px;
        height: 34px;
        place-items: center;
        border: 1px solid rgba(255, 255, 255, .2);
        border-radius: 999px;
        background: rgba(255, 255, 255, .12);
        color: #fff;
        cursor: pointer;
    }

    .guest-chat-form,
    .guest-chat-reply {
        display: grid;
        gap: .45rem;
        padding: .75rem .9rem .9rem;
    }

    .guest-chat-form {
        max-height: calc(min(720px, 100dvh - 6.5rem) - 62px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

        .guest-chat-form label {
            display: grid;
            gap: .2rem;
            color: var(--ink);
            font-size: .92rem;
            font-weight: 700;
        }

        .guest-chat-form input,
        .guest-chat-form textarea,
        .guest-chat-reply textarea {
            width: 100%;
            border: 1px solid rgba(14, 38, 30, .13);
            border-radius: .72rem;
            padding: .54rem .68rem;
            background: #fff;
            color: var(--ink);
        }

        .guest-chat-form input,
        .guest-chat-form .searchable-select-trigger {
            min-height: 42px;
        }

        .guest-chat-form textarea {
            min-height: 72px;
            max-height: 92px;
            resize: vertical;
        }

        .guest-chat-form .searchable-select-trigger {
            border-radius: .72rem;
            padding: .54rem .68rem;
        }

        .guest-chat-form .searchable-select-panel {
            border-radius: .72rem;
        }

    .guest-chat-security-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: .45rem;
        align-items: center;
    }

        .guest-chat-security-row .security-question {
            min-height: 36px;
            padding: .34rem .6rem;
            font-size: .86rem;
        }

        .guest-chat-security-row .btn {
            min-height: 36px;
            white-space: nowrap;
            padding: .42rem .68rem;
            font-size: .82rem;
        }

    .guest-chat-form > .btn.primary {
        min-height: 44px;
        margin-top: .1rem;
    }

    /* Workstream 6: compact first impression - name/email/inquiry up front, phone/industry
       tucked behind "More details" so the widget reads shorter without dropping required data. */
    .guest-chat-form--compact label {
        gap: .12rem;
        font-size: .84rem;
    }

    .guest-chat-form--compact input,
    .guest-chat-form--compact .searchable-select-trigger {
        min-height: 36px;
    }

    .guest-chat-form--compact textarea {
        min-height: 44px;
        max-height: 76px;
    }

    .guest-chat-more {
        border: 1px dashed rgba(14, 38, 30, .18);
        border-radius: .72rem;
        padding: .1rem .68rem .5rem;
        display: grid;
        gap: .35rem;
    }

    .guest-chat-more summary {
        cursor: pointer;
        padding: .5rem 0;
        font-size: .82rem;
        font-weight: 700;
        color: var(--muted);
        list-style: none;
    }

    .guest-chat-more summary::-webkit-details-marker {
        display: none;
    }

    .guest-chat-alert {
        margin: .85rem 1rem 0;
        border-radius: .8rem;
        padding: .7rem .8rem;
        font-weight: 700;
        line-height: 1.45;
    }

        .guest-chat-alert.success {
            background: rgba(126, 230, 200, .24);
            color: var(--green);
        }

        .guest-chat-alert.danger {
            background: rgba(255, 158, 163, .22);
            color: #7f1d1d;
        }

    .guest-chat-messages {
        display: grid;
        gap: .65rem;
        max-height: 320px;
        overflow: auto;
        padding: 1rem;
        background: rgba(246, 248, 239, .78);
    }

    .guest-chat-message {
        max-width: 88%;
        border-radius: 1rem;
        padding: .7rem .85rem;
        background: #fff;
        box-shadow: 0 8px 24px rgba(14, 38, 30, .06);
    }

        .guest-chat-message.guest {
            justify-self: end;
            background: rgba(217, 255, 113, .38);
        }

        .guest-chat-message.agent {
            justify-self: start;
        }

        .guest-chat-message span {
            display: block;
            margin-bottom: .2rem;
            color: var(--forest);
            font-size: .74rem;
            font-weight: 800;
        }

        .guest-chat-message p {
            margin: 0;
            color: var(--ink);
            line-height: 1.45;
        }

    @media (max-width: 620px) {
        .guest-chat-widget {
            right: .75rem;
            /* Sits above the mobile tab bar (Workstream 7) instead of overlapping it - the tab
               bar's own Chat item is how the launcher gets opened on this breakpoint anyway. */
            bottom: calc(64px + env(safe-area-inset-bottom) + .6rem);
        }

        /* The tab bar's Chat item replaces the floating bubble on mobile - two ways to open the
           same panel would just be visual clutter and a second z-index to coordinate. */
        .guest-chat-launcher {
            display: none;
        }

        .guest-chat-widget.open .guest-chat-launcher {
            display: none;
        }

        .guest-chat-panel {
            width: min(100vw - 1rem, 380px);
            max-height: calc(100dvh - 5.5rem - 64px);
        }

        .guest-chat-form {
            max-height: calc(100dvh - 10rem - 64px);
        }

        .guest-chat-security-row {
            grid-template-columns: 1fr;
        }

        .guest-chat-security-row .btn {
            width: 100%;
        }
    }

/* Mobile bottom tab bar (Workstream 7). Fixed, safe-area aware, z-index above the guest chat
   widget's 80 so its own tabs are never covered by an open chat panel's backdrop. */
.mobile-tab-bar {
    display: none;
}

@media (max-width: 620px) {
    .mobile-tab-bar {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        align-items: stretch;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        height: calc(60px + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: rgba(255, 255, 255, .96);
        border-top: 1px solid var(--line);
        box-shadow: 0 -8px 24px rgba(14, 31, 25, .08);
        backdrop-filter: blur(12px);
    }

    .mobile-tab-bar-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .18rem;
        border: 0;
        background: none;
        font: inherit;
        font-size: .68rem;
        font-weight: 600;
        color: var(--muted);
        text-decoration: none;
        cursor: pointer;
    }

    .mobile-tab-bar-item i {
        font-size: 1.05rem;
    }

    .mobile-tab-bar-item.active {
        color: var(--green);
    }

    .mobile-tab-bar-item--primary {
        position: relative;
        top: -14px;
        margin: 0 auto;
        width: 52px;
        height: 52px;
        border-radius: 999px;
        background: linear-gradient(135deg, var(--lime-deep), var(--lime));
        color: var(--green-950);
        box-shadow: 0 10px 26px -8px rgba(194, 239, 78, .7);
    }

    .mobile-tab-bar-item--primary i {
        font-size: 1.15rem;
    }

    /* Reserve space so the fixed tab bar never covers the last section of content. */
    .site-footer {
        margin-bottom: calc(60px + env(safe-area-inset-bottom));
    }
}

.trust-indicator-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.1rem;
}

.trust-indicator-row span {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    min-height: 2.25rem;
    padding: .45rem .7rem;
    border: 1px solid rgba(16, 75, 57, .10);
    border-radius: 999px;
    background: rgba(255, 255, 255, .66);
    color: var(--forest);
    font-size: .8rem;
    font-weight: 850;
    box-shadow: 0 10px 24px rgba(14, 38, 30, .05);
}

.trust-indicator-row i {
    color: #0d8f4f;
}

.proof-strip {
    width: min(1180px, calc(100% - 2rem));
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .75rem;
    margin: 1.2rem auto 2rem;
}

.proof-strip-card {
    position: relative;
    display: block;
    min-height: 116px;
    padding: 1rem;
    padding-inline-end: 2.2rem;
    border: 1px solid rgba(16, 75, 57, .10);
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, .76);
    box-shadow: var(--shadow-soft);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.proof-strip-card:hover,
.proof-strip-card:focus-visible {
    transform: translateY(-3px);
    border-color: var(--green-300);
    box-shadow: var(--shadow);
    outline: none;
}

.proof-strip-card i {
    position: absolute;
    inset-block-end: 1rem;
    inset-inline-end: 1rem;
    color: var(--green-500);
    font-size: .85rem;
    opacity: 0;
    transform: translateX(-.35rem);
    transition: opacity .2s ease, transform .2s ease;
}

.proof-strip-card:hover i,
.proof-strip-card:focus-visible i {
    opacity: 1;
    transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
    .proof-strip-card,
    .proof-strip-card i {
        transition: none;
    }
}

.proof-strip-card span {
    display: block;
    color: var(--muted);
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.proof-strip-card strong {
    display: block;
    margin: .35rem 0;
    color: var(--ink);
    line-height: 1.18;
}

.proof-strip-card p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.45;
}

.erp-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .9rem;
}

.erp-preview-card {
    display: grid;
    gap: .85rem;
    min-height: 276px;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 1.35rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, .84), rgba(246, 248, 239, .72));
    box-shadow: var(--shadow-soft);
    transition: transform .18s ease, box-shadow .18s ease;
}

.erp-preview-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.erp-preview-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}

.erp-preview-head div {
    display: grid;
    min-width: 0;
}

.erp-preview-head strong {
    color: var(--ink);
    line-height: 1.15;
}

.erp-preview-head small {
    color: var(--muted);
    font-weight: 750;
}

.erp-preview-screen {
    display: grid;
    align-content: stretch;
    gap: .5rem;
    min-height: 116px;
    padding: .85rem;
    border: 1px solid rgba(16, 75, 57, .10);
    border-radius: 1rem;
    background:
        linear-gradient(135deg, rgba(8, 41, 31, .95), rgba(20, 81, 62, .92));
}

.erp-preview-card p {
    margin: 0;
    font-size: .94rem;
    line-height: 1.55;
}

.mini-kpis,
.approval-tile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    min-height: 2.35rem;
    padding: .55rem .65rem;
    border-radius: .75rem;
    background: linear-gradient(135deg, rgba(217, 255, 113, .95), rgba(126, 230, 200, .88));
    color: var(--ink);
}

.mini-kpis span,
.approval-tile span {
    font-size: .74rem;
    font-weight: 850;
    text-transform: uppercase;
}

.mini-kpis strong,
.approval-tile strong {
    font-size: .9rem;
}

.mini-table,
.status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    min-height: 1.95rem;
    padding: .42rem .55rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: .65rem;
    background: rgba(255, 255, 255, .09);
    color: rgba(255, 255, 255, .82);
    font-size: .78rem;
    font-weight: 780;
}

.status-row strong,
.mini-table span:last-child {
    color: var(--lime);
}

.stock-meter {
    height: 1rem;
    padding: .2rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
}

.stock-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--lime), var(--mint));
}

.mini-calendar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .35rem;
}

.mini-calendar span,
.mini-calendar strong {
    display: grid;
    place-items: center;
    min-height: 1.9rem;
    border-radius: .6rem;
    background: rgba(255, 255, 255, .10);
    color: rgba(255, 255, 255, .8);
    font-size: .72rem;
    font-weight: 800;
}

.mini-calendar strong {
    grid-column: 1 / -1;
    color: var(--ink);
    background: linear-gradient(135deg, rgba(217, 255, 113, .95), rgba(126, 230, 200, .88));
}

.cro-support-grid {
    margin-top: 1rem;
}

.comparison-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .9rem;
}

.comparison-grid article {
    padding: 1.15rem;
    border: 1px solid rgba(16, 75, 57, .10);
    border-radius: 1.2rem;
    background: rgba(255, 255, 255, .78);
    box-shadow: var(--shadow-soft);
}

.comparison-grid span {
    display: inline-flex;
    margin-bottom: .6rem;
    border-radius: 999px;
    padding: .34rem .62rem;
    background: rgba(255, 255, 255, .72);
    color: var(--forest);
    font-size: .76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.faq-jump-nav {
    /* Matches .page-hero / .faq-list at 1120 so the category chips line up with the content. */
    width: min(1120px, calc(100% - 2rem));
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin: 0 auto 1.2rem;
}

.faq-jump-nav button {
    display: inline-flex;
    align-items: center;
    gap: .42rem;
    min-height: 42px;
    border: 1px solid rgba(16, 75, 57, .12);
    border-radius: 999px;
    padding: .58rem .78rem;
    background: rgba(255, 255, 255, .72);
    color: var(--forest);
    font: inherit;
    font-size: .86rem;
    font-weight: 850;
    cursor: pointer;
}

.faq-jump-nav button.active {
    background: linear-gradient(135deg, var(--green-950), var(--green-700));
    color: #fff;
}

.form-grid select {
    width: 100%;
    border: 1px solid rgba(14, 38, 30, .13);
    border-radius: .8rem;
    padding: .7rem .8rem;
    background: #fff;
    color: var(--ink);
    font: inherit;
}

.hero-product-preview {
    position: relative;
    min-width: 0;
    overflow: visible;
}

/* Near full-bleed and soft-edged (no border-radius/hard inset box) so it reads as ambient light behind
   a scattered field of pills, not a bounding container the pills sit "inside" of. */
.hero-product-preview::before {
    content: "";
    position: absolute;
    inset: -6% -8%;
    z-index: -1;
    background:
        radial-gradient(circle at 66% 20%, rgba(217, 255, 113, .3), transparent 22rem),
        radial-gradient(circle at 30% 78%, rgba(126, 230, 200, .36), transparent 24rem),
        radial-gradient(circle at 82% 82%, rgba(126, 230, 200, .22), transparent 20rem);
    filter: blur(6px);
}

/* No screenshot - one pill per module in a wrapped flex flow, not absolute positioning (flex-wrap lays
   every pill out by its real rendered box, so nothing can overlap regardless of title length). Generous
   gap and a light glass finish on the plain pills keep 14 of them from reading as a dense wall; only one
   pill (index 0) gets the solid dark accent as a deliberate highlight, mint/lime sprinkled sparingly
   across the rest (see AccentClasses in Home.razor). Hidden entirely below 760px - there isn't enough
   width for this many pills to read as anything but clutter on a phone. */
.hero-metric-cloud {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: space-evenly;
    justify-content: space-evenly;
    gap: 2.2rem 1.8rem;
    min-height: clamp(420px, 42vw, 560px);
    padding: 1rem;
}

.hero-metric-pill {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .6rem 1.05rem .6rem .6rem;
    background: rgba(255, 255, 255, .78);
    backdrop-filter: blur(14px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 999px;
    box-shadow: var(--shadow-soft);
    font-size: .8rem;
    font-weight: 800;
    color: var(--ink);
    white-space: nowrap;
    transform: translateY(var(--offset, 0px)) rotate(var(--tilt, 0deg));
}

.hero-metric-pill i {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 999px;
    background: var(--green-50);
    color: var(--green-500);
    font-size: .84rem;
}

.hero-metric-pill--mint {
    background: rgba(126, 230, 200, .28);
    border-color: rgba(126, 230, 200, .55);
}

.hero-metric-pill--lime {
    background: rgba(255, 255, 255, .82);
    border-color: var(--lime-deep);
}

.hero-metric-pill--lime i {
    background: var(--lime);
    color: var(--green-950);
}

.hero-metric-pill--dark {
    background: var(--green);
    border-color: var(--green);
    box-shadow: var(--shadow);
    color: var(--white);
}

.hero-metric-pill--dark i {
    background: rgba(255, 255, 255, .16);
    color: var(--mint);
}

@media (prefers-reduced-motion: no-preference) {
    .hero-metric-pill {
        animation: hero-pill-float 4.5s ease-in-out infinite;
        animation-delay: var(--float-delay, 0s);
    }
}

@keyframes hero-pill-float {
    0%, 100% {
        transform: translateY(var(--offset, 0px)) rotate(var(--tilt, 0deg));
    }

    50% {
        transform: translateY(calc(var(--offset, 0px) - .5rem)) rotate(var(--tilt, 0deg));
    }
}

@media (max-width: 760px) {
    .hero-metric-cloud {
        display: none;
    }
}

.hero-workflow-strip {
    width: min(1180px, calc(100% - 2rem));
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .7rem;
    margin: clamp(-.4rem, -1vw, 0rem) auto 1.4rem;
}

.hero-workflow-strip article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .15rem .58rem;
    min-height: 76px;
    padding: .78rem .85rem;
    border: 1px solid rgba(16, 75, 57, .10);
    border-radius: 1.05rem;
    background: rgba(255, 255, 255, .78);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(16px);
}

.hero-workflow-strip i {
    grid-row: 1 / span 2;
    display: grid;
    width: 2.15rem;
    height: 2.15rem;
    place-items: center;
    border-radius: .82rem;
    background: linear-gradient(135deg, rgba(217, 255, 113, .58), rgba(126, 230, 200, .42));
    color: var(--forest);
}

.hero-workflow-strip span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 850;
    line-height: 1.2;
}

.hero-workflow-strip strong {
    color: var(--ink);
    font-size: .98rem;
    line-height: 1.2;
}

.marketing-hero,
.home-section,
.hero-workflow-strip,
.proof-strip {
    width: min(1400px, calc(100% - clamp(2rem, 5vw, 4.5rem)));
}

.pricing-clarity-strip {
    margin-top: 0;
}

.glass-card {
    background: rgba(255, 255, 255, .76);
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 1.35rem;
    padding: 1.3rem;
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px);
}

.clean-list {
    display: grid;
    gap: .65rem;
    margin: 0;
    padding-left: 1.1rem;
    color: var(--muted);
    line-height: 1.55;
}

@media (max-width: 760px) {
    .hero {
        min-height: auto;
        padding-top: 2.2rem;
    }

    .marketing-hero .hero-copy h1 {
        max-width: 100%;
        font-size: clamp(2rem, 8.8vw, 2.8rem);
        line-height: 1.08;
    }

    .marketing-hero .hero-copy p {
        max-width: 100%;
    }

    .hero-actions,
    .cta-actions {
        width: 100%;
        align-items: stretch;
    }

    .hero-actions .btn,
    .cta-actions .btn {
        width: 100%;
        white-space: normal;
        text-align: center;
    }

    .security-check {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .faq-results-toolbar,
    .pagination-row {
        align-items: stretch;
        flex-direction: column;
    }

    .hero-product-preview {
        margin: .5rem 0 0;
    }

    .hero-product-preview::before {
        inset: 18% 2% 8%;
        border-radius: 2rem;
    }

    .proof-strip,
    .erp-preview-grid,
    .comparison-grid,
    .hero-workflow-strip {
        grid-template-columns: 1fr;
    }

    .hero-workflow-strip {
        margin-top: .2rem;
    }

    .proof-strip {
        margin-top: 0;
    }

    .trust-indicator-row {
        display: grid;
        grid-template-columns: 1fr;
    }

    .faq-jump-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .faq-jump-nav button {
        justify-content: center;
        min-width: 0;
    }
}

@media (min-width: 761px) and (max-width: 1060px) {
    .marketing-hero {
        width: min(1400px, calc(100% - 2rem));
    }

    .marketing-hero .hero-copy h1 {
        max-width: 780px;
        font-size: clamp(2.35rem, 5.8vw, 3.45rem);
        line-height: 1.05;
    }

    .hero-product-preview {
        margin: .5rem auto 0;
    }

    .proof-strip,
    .erp-preview-grid,
    .hero-workflow-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .comparison-grid {
        grid-template-columns: 1fr;
    }
}

.compact-home-hero {
    min-height: min(660px, calc(100vh - 76px));
}

.app-detail-hero {
    display: grid;
    gap: 1rem;
    padding-bottom: clamp(1rem, 3vw, 2rem);
}

.app-detail-hero::after {
    content: "";
    display: block;
    width: min(560px, 100%);
    height: 1px;
    margin-top: .4rem;
    background: linear-gradient(90deg, rgba(16, 75, 57, .22), transparent);
}

.app-detail-hero h1 {
    max-width: 920px;
    font-size: clamp(2.25rem, 4.6vw, 4.2rem);
}

.app-detail-hero p {
    max-width: 860px;
}

.home-category-grid,
.industry-card-grid,
.app-directory-grid,
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .9rem;
}

.industry-card-grid,
.testimonial-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* .industry-card-grid holds 25 items (MarketingContentCatalog.Industries) against a fixed 3-column
   grid with no last-row handling - 25 isn't a multiple of 3, so the last row was one card wide with two
   genuinely reserved-but-empty grid tracks beside it, showing bare page background where cards should
   be (confirmed live and screenshotted by the user). display:grid always reserves every explicit track's
   width whether or not a child fills it; display:flex with wrap does not - an underfull last row just
   ends after its last real card, no phantom trailing space. flex-basis approximates the same ~3-per-row
   sizing the grid gave at desktop width and wraps down naturally on its own at narrow widths, so the
   mobile 1-column override a few hundred lines down (grid-template-columns: 1fr) is now a harmless no-op
   under flex rather than something this rule needs to keep in sync with. */
.industry-card-grid {
    display: flex;
    flex-wrap: wrap;
    /* flex-wrap alone stops phantom trailing grid tracks, but a left-aligned lone last-row card still
       reads as "broken" - reported again even after that fix (25 industries / 3 per row = "Professional
       Services" alone, capped at 420px, sitting flush left with the rest of that row's width just page
       background). center can't make that space disappear - nothing can, once a row legitimately has
       fewer items than fit - but it turns one lopsided gap on the right into two even, symmetrical ones,
       which reads as an intentional layout choice instead of a missing card. Full rows are unaffected:
       centering a row that already fills the container does nothing visually. */
    justify-content: center;
}

.industry-card-grid > .industry-card {
    flex: 1 1 340px;
    max-width: 420px;
}

/* Same bug, same fix, on a different grid: .app-directory-grid (the /apps hub, 25 apps against a fixed
   4-column grid) - confirmed live, the last card ("Project & Work") rendered normal-sized with three
   reserved-but-empty trailing tracks beside it. .home-category-grid currently divides evenly (12 items /
   4 columns) so it wasn't observed broken, but shares the exact same fixed-column risk the moment its
   item count changes - fixed proactively rather than waiting for a fifth homepage module category to
   reproduce this same bug report again. */
.app-directory-grid,
.home-category-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.home-category-grid > .home-category-card {
    flex: 1 1 260px;
    max-width: 320px;
}

/* User feedback: 4-per-row read as too dense/cramped on /apps specifically (23 apps, more text per card
   than the homepage's shorter category teasers) - widened to the same ~3-per-row sizing already used for
   .industry-card-grid, so the two "browse everything" hub pages (/apps, /industries) now match each
   other's proportions instead of one being visibly denser than the other. */
.app-directory-grid > .app-directory-card {
    flex: 1 1 340px;
    max-width: 420px;
}

.home-category-card,
.industry-card,
.app-directory-card,
.testimonial-grid article {
    display: grid;
    align-content: start;
    gap: .65rem;
    min-height: 100%;
    padding: 1.05rem;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 1.2rem;
    background: rgba(255, 255, 255, .78);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px);
    transition: transform .18s ease, box-shadow .18s ease;
}

.home-category-card:hover,
.industry-card:hover,
.app-directory-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.app-directory-card.compact-app-card {
    min-height: 0;
    padding: .95rem;
}

.app-directory-card.compact-app-card h3 {
    font-size: 1.08rem;
}

.app-directory-card.compact-app-card p {
    font-size: .9rem;
}

.home-category-card > i,
.industry-card > i,
.app-directory-card > .module-icon {
    display: grid;
    width: 2.65rem;
    height: 2.65rem;
    place-items: center;
    border-radius: .9rem;
    /* Solid tile, not a pale lime/mint wash: the tint did not register against the card. */
    background: var(--green);
    color: var(--lime);
}

.home-category-card h3,
.industry-card h3,
.app-directory-card h3 {
    margin: 0;
}

.home-category-card p,
.industry-card p,
.app-directory-card p,
.testimonial-grid p {
    margin: 0;
    font-size: .94rem;
    line-height: 1.55;
}

.testimonial-grid article strong {
    color: var(--ink);
}

.testimonial-grid article span,
.app-directory-card small {
    color: var(--muted);
    font-size: .8rem;
    font-weight: 850;
    text-transform: uppercase;
}

.testimonial-logo {
    height: 2rem;
    width: auto;
    max-width: 7.5rem;
    object-fit: contain;
    object-position: left center;
}

.testimonial-metric {
    display: inline-block;
    padding: .3rem .6rem;
    border-radius: .6rem;
    background: var(--green);
    color: var(--lime);
    font-size: .8rem;
    font-weight: 850;
    width: fit-content;
}

.category-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 1.2rem;
}

.category-filter-row button {
    min-height: 40px;
    border: 1px solid rgba(16, 75, 57, .12);
    border-radius: 999px;
    padding: .52rem .75rem;
    background: rgba(255, 255, 255, .72);
    color: var(--forest);
    font: inherit;
    font-size: .84rem;
    font-weight: 850;
    cursor: pointer;
}

.category-filter-row button.active {
    background: linear-gradient(135deg, var(--green-950), var(--green-700));
    color: #fff;
}

.screenshot-gallery {
    display: grid;
    gap: .8rem;
}

.screenshot-coming-soon {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .9rem;
    align-items: start;
    padding: 1.35rem;
    border: 1px dashed rgba(16, 75, 57, .22);
    border-radius: 1.2rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .84), rgba(241, 250, 235, .66)),
        linear-gradient(90deg, rgba(217, 255, 113, .18), transparent);
    box-shadow: var(--shadow-soft);
}

.screenshot-coming-soon i {
    display: grid;
    width: 2.8rem;
    height: 2.8rem;
    place-items: center;
    border-radius: .9rem;
    background: linear-gradient(135deg, rgba(217, 255, 113, .52), rgba(126, 230, 200, .38));
    color: var(--forest);
}

.screenshot-coming-soon strong {
    display: block;
    margin-bottom: .32rem;
    color: var(--ink);
    font-size: 1.08rem;
}

.screenshot-coming-soon p {
    margin: 0;
}

.screenshot-stage {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: .8rem;
    align-items: center;
}

.gallery-nav,
.modal-close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(14, 38, 30, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .86);
    color: var(--forest);
    cursor: pointer;
}

.screenshot-preview {
    display: grid;
    gap: .7rem;
    width: 100%;
    border: 1px solid rgba(14, 38, 30, .11);
    border-radius: 1.2rem;
    padding: .85rem;
    background: rgba(255, 255, 255, .82);
    box-shadow: var(--shadow-soft);
    cursor: zoom-in;
}

.screenshot-preview img,
.screenshot-modal img {
    display: block;
    width: 100%;
    max-height: 560px;
    aspect-ratio: 16 / 9;
    object-fit: contain;
}

.screenshot-preview span {
    color: var(--forest);
    font-weight: 850;
}

.screenshot-thumbs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
}

.screenshot-thumbs button {
    border: 2px solid transparent;
    border-radius: .85rem;
    padding: .25rem;
    background: rgba(255, 255, 255, .72);
    cursor: pointer;
}

.screenshot-thumbs button.active {
    border-color: var(--green-700);
}

.screenshot-thumbs img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: .65rem;
}

.screenshot-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    align-content: center;
    gap: .85rem;
    padding: clamp(1rem, 4vw, 3rem);
    background: rgba(7, 19, 15, .86);
}

.screenshot-modal .modal-close {
    justify-self: end;
}

.screenshot-modal img {
    max-height: 76vh;
    border-radius: 1rem;
    background: #fff;
}

.screenshot-modal p {
    color: rgba(255, 255, 255, .84);
    text-align: center;
}

.workflow-diagram {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .9rem;
}

.related-app-grid,
.industry-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .9rem;
}

/* Same bug family as .industry-card-grid/.app-directory-grid (see the comment there) - the 4th and 5th
   instance found by static-auditing every remaining `grid-template-columns: repeat(N,...)` in this file
   for a class bound to a variable-length C# list. .related-app-grid (IndustrySeo.razor's "Recommended
   apps", up to 6 items via .Take(6) but frequently fewer per industry) and .industry-mini-grid
   (AppDetail.razor's "Related industries", length varies per app's relatedIndustrySlugs array) are both
   fixed 3-column grids with no last-row handling, so any industry/app whose count isn't a multiple of 3
   has the identical reserved-but-empty-track problem, just not yet caught by a screenshot. */
.related-app-grid,
.industry-mini-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.related-app-grid > .app-directory-card,
.industry-mini-grid > .industry-mini-card {
    flex: 1 1 260px;
    max-width: 320px;
}

.compact-app-card {
    min-height: 0;
}

.related-link-row {
    margin-top: 1rem;
}

.industry-mini-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .35rem .75rem;
    align-items: center;
    padding: .95rem;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 1.05rem;
    background: rgba(255, 255, 255, .78);
    box-shadow: var(--shadow-soft);
}

.industry-mini-card i {
    grid-row: 1 / span 2;
    display: grid;
    width: 2.45rem;
    height: 2.45rem;
    place-items: center;
    border-radius: .85rem;
    background: linear-gradient(135deg, rgba(217, 255, 113, .52), rgba(126, 230, 200, .38));
    color: var(--forest);
}

.industry-mini-card strong {
    color: var(--ink);
}

.industry-mini-card span {
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.4;
}

.workflow-diagram article {
    display: grid;
    gap: .55rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, .78);
    box-shadow: var(--shadow-soft);
}

.workflow-diagram i {
    display: grid;
    width: 2.65rem;
    height: 2.65rem;
    place-items: center;
    border-radius: .9rem;
    background: linear-gradient(135deg, rgba(217, 255, 113, .52), rgba(126, 230, 200, .38));
    color: var(--forest);
}

@media (max-width: 1060px) {
    /* .home-category-grid, .app-directory-grid, .industry-card-grid, .related-app-grid, and
       .industry-mini-grid used to be listed here too - now dead weight since Batches 24-29 (see the
       comments a few hundred lines up) converted all five to display:flex with flex-wrap, which reflows
       on its own without a breakpoint. Removed rather than left as confusing no-op rules a future edit
       here could mistake for something that still does anything. */
    .testimonial-grid,
    .workflow-diagram {
        grid-template-columns: 1fr;
    }
}

/* .module-overview-grid never collapsed, so it held three ~108px columns at 390px — unreadable, and
   the cards were narrower than the labels inside them. */
@media (max-width: 760px) {
    .module-overview-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    /* .home-category-grid and .app-directory-grid removed - same reason as the 1060px block above. */
    .screenshot-stage {
        grid-template-columns: 1fr;
    }

    .nav-dropdown {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .screenshot-coming-soon {
        grid-template-columns: 1fr;
    }

    .gallery-nav {
        width: 100%;
    }
}

/* Overrides Blazor Server's default injected "Rejoining the server..." modal - see the comment on
   #components-reconnect-modal in App.razor for the full story (mobile Speed Index hit 44.7s because the
   default is a full-screen overlay with no grace period). This version is a small corner toast that
   never covers content, and the transition-delay is the actual fix: a circuit blip under 2s (routine on
   a throttled connection) never becomes visible at all, only a genuinely dropped connection does. */
#components-reconnect-modal {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 400;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1rem;
    border-radius: .8rem;
    background: var(--green);
    color: var(--white);
    font-size: .85rem;
    font-weight: 650;
    box-shadow: 0 12px 30px rgba(12, 31, 25, .25);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
    transition-delay: 0s, 0s;
}

#components-reconnect-modal .reconnect-failed-text,
#components-reconnect-modal.components-reconnect-failed .reconnect-text,
#components-reconnect-modal.components-reconnect-rejected .reconnect-text {
    display: none;
}

#components-reconnect-modal .reconnect-failed-text a {
    color: var(--lime);
    text-decoration: underline;
}

#components-reconnect-modal.components-reconnect-failed .reconnect-failed-text,
#components-reconnect-modal.components-reconnect-rejected .reconnect-failed-text {
    display: inline;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* The 2s delay only applies to *appearing* - a reconnect that succeeds hides this instantly. */
    transition-delay: 2s, 2s;
}

#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    transition-delay: 0s, 0s;
}