/* ==========================================================================
   COWE — warm enterprise design system
   --------------------------------------------------------------------------
   Paper tones, a serif display face, soft natural shadows and one muted
   accent. The look is meant to read as established and trustworthy rather
   than futuristic, so there is no glass blur, no neon glow and no ambient
   animation: motion here is tied to intent (entrances, interactions) and
   every loop yields to prefers-reduced-motion.

   Two complete themes ship. `:root` is the warm dark ("evening") theme and
   `body.light-theme` is the warm paper theme; main.js picks the starting one
   from the saved preference, falling back to the operating system. Every
   component is designed in both — a token is never assumed to be dark.
   ========================================================================== */

:root {
    /* ---- Surfaces: warm dark, closer to roasted wood than to black -------- */
    --bg-color:      #17130f;
    --bg-secondary:  #201b16;   /* raised: cards, nav, modals */
    --bg-tertiary:   #2a231d;   /* sunken: inputs, inset panels, bands */
    --bg-sink:       #120f0c;   /* deepest: footer, console */

    /* Ink for anything drawn ON --bg-sink. That surface stays dark in the light theme, so its
       foreground cannot come from --text-color / --primary-color, which both flip to near-black
       there and leave dark text on a dark pill. Defined once and not overridden below. */
    --sink-ink:      #f6f1e9;
    --sink-ink-dim:  rgba(246, 241, 233, 0.72);
    --sink-accent:   #7fb79a;

    /* ---- Text ------------------------------------------------------------ */
    --text-color:    #f6f1e9;
    --text-muted:    #c3b9ac;
    --text-dim:      #9a9086;
    --text-secondary: var(--text-muted);   /* legacy alias used by .subsection-copy */

    /* ---- Accents: muted forest, with terracotta as the warm counterweight - */
    --primary-color: #7fb79a;              /* forest, lightened for dark ground */
    --primary-ink:   #16241d;              /* text that sits ON primary */
    --primary-soft:  rgba(127, 183, 154, 0.14);
    --primary-line:  rgba(127, 183, 154, 0.34);
    --primary-glow:  rgba(127, 183, 154, 0.22);   /* legacy alias */

    --accent-color:  #e0917a;              /* terracotta */
    --accent-soft:   rgba(224, 145, 122, 0.14);
    --accent-line:   rgba(224, 145, 122, 0.34);
    --accent-glow:   rgba(224, 145, 122, 0.22);   /* legacy alias */

    --cyan-color:    #a9825c;              /* legacy name, now warm bronze */
    --cyan-glow:     rgba(169, 130, 92, 0.25);

    --success-color: #7fb79a;
    --warning-color: #e0ac5e;              /* ochre */
    --danger-color:  #e08a7e;              /* clay */
    --info-color:    #8fb4d6;              /* denim, the one cool note */

    /* ---- Lines & elevation ----------------------------------------------- */
    --border:        rgba(246, 241, 233, 0.11);
    --border-strong: rgba(246, 241, 233, 0.20);

    /* Full-bleed tint for alternating sections — a step up from the page, a step
       down from a raised card, so bands separate without looking like panels. */
    --band-tint:     #1c1712;
    --glass-bg:      var(--bg-secondary);          /* legacy alias */
    --glass-border:  var(--border);                /* legacy alias */

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.28);
    --shadow-2: 0 4px 10px rgba(0, 0, 0, 0.26), 0 12px 28px rgba(0, 0, 0, 0.28);
    --shadow-3: 0 8px 20px rgba(0, 0, 0, 0.30), 0 28px 64px rgba(0, 0, 0, 0.34);
    --glass-shadow: var(--shadow-2);               /* legacy alias */
    --ring: 0 0 0 3px var(--primary-soft);

    /* Ink that stays readable on a solid semantic fill. The semantic tokens are
       light on this theme and dark on the paper theme, so the ink flips with them. */
    --badge-ink: #17130f;

    /* ---- Shape ------------------------------------------------------------ */
    --radius-sm:  12px;
    --radius-md:  18px;
    --radius-lg:  26px;
    --radius-xl:  32px;
    --radius-pill: 9999px;

    /* ---- Type ------------------------------------------------------------- */
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
    --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* ---- Motion ----------------------------------------------------------- */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --transition: all 0.24s cubic-bezier(0.22, 1, 0.36, 1);   /* legacy alias */
}

/* --- Warm paper theme ----------------------------------------------------- */
.light-theme {
    --bg-color:      #faf7f2;
    --bg-secondary:  #ffffff;
    --bg-tertiary:   #f2ece2;
    --bg-sink:       #241e18;   /* footer/console stay dark in both themes */

    --text-color:    #1c1917;
    --text-muted:    #57534e;
    --text-dim:      #67625c;

    --primary-color: #2f6b4f;
    --primary-ink:   #ffffff;
    --primary-soft:  rgba(47, 107, 79, 0.10);
    --primary-line:  rgba(47, 107, 79, 0.28);
    --primary-glow:  rgba(47, 107, 79, 0.18);

    --accent-color:  #b4553a;
    --accent-soft:   rgba(180, 85, 58, 0.10);
    --accent-line:   rgba(180, 85, 58, 0.28);
    --accent-glow:   rgba(180, 85, 58, 0.18);

    --cyan-color:    #8a6540;
    --cyan-glow:     rgba(138, 101, 64, 0.20);

    --success-color: #2f6b4f;
    --warning-color: #a9741c;
    --danger-color:  #a8443a;
    --info-color:    #40617f;

    --border:        rgba(28, 25, 23, 0.10);
    --border-strong: rgba(28, 25, 23, 0.20);

    --band-tint:     #f4efe5;

    /* Warm-tinted rather than neutral grey: a shadow on paper is never pure black. */
    --shadow-1: 0 1px 2px rgba(60, 45, 32, 0.06);
    --shadow-2: 0 2px 6px rgba(60, 45, 32, 0.06), 0 10px 24px rgba(60, 45, 32, 0.08);
    --shadow-3: 0 6px 16px rgba(60, 45, 32, 0.08), 0 24px 56px rgba(60, 45, 32, 0.12);

    --badge-ink: #ffffff;
}

/* ==========================================================================
   Base
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    /* clip, not hidden: `overflow-x: hidden` forces overflow-y to compute as `auto`, which makes body
       a scroll container and stops position:sticky working anywhere inside it — the app catalogue
       toolbar being the case that surfaced it. `clip` suppresses the same sideways overflow without
       establishing a scroll container. */
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-optical-sizing: auto;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.18;
    color: var(--text-color);
}

::selection {
    background: var(--primary-soft);
    color: var(--text-color);
}

/* --- Section bands --------------------------------------------------------
   Alternating sections sit on a slightly warmer surface, so the page reads as
   a sequence of separate ideas rather than one long scroll. The tint is
   full-bleed via a pseudo-element that reaches past the section's max-width to
   the viewport edge — the section itself keeps its normal centred layout box. */
.band-alt { position: relative; }

.band-alt::before {
    content: '';
    position: absolute;
    inset: 0 calc(50% - 50vw);
    z-index: -1;
    background: var(--band-tint);
    pointer-events: none;
}

/* --- Accessibility --------------------------------------------------------- */
.skip-link {
    position: fixed;
    top: -120px;
    left: 1.5rem;
    z-index: 10000;
    padding: 0.75rem 1.35rem;
    background: var(--primary-color);
    color: var(--primary-ink);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-3);
    border: 2px solid var(--border-strong);
    transition: top 0.2s var(--ease);
}
.skip-link:focus,
.skip-link:focus-visible {
    top: 1.25rem;
    outline: 3px solid var(--text-color);
    outline-offset: 3px;
}

/* Label text for icon-only controls: read by assistive tech, absent from the visual design. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.connector-card:focus-visible,
.scenario-tab:focus-visible,
.app-filter-pill:focus-visible,
.human-mock-btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 3px;
    border-radius: 6px;
}
:focus:not(:focus-visible) { outline: none; }

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

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.container {
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: clamp(1.15rem, 4vw, 2rem);
}

.section {
    padding: clamp(4.5rem, 9vw, 7.5rem) clamp(1.15rem, 4vw, 2rem);
    max-width: 1240px;
    margin: 0 auto;
}

.section-header {
    text-align: center;
    max-width: 46rem;
    margin: 0 auto clamp(3rem, 6vw, 4.5rem);
}

.section-title {
    font-size: clamp(2rem, 3vw + 1rem, 3.1rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

.section-subtitle {
    color: var(--text-muted);
    font-size: clamp(1.02rem, 0.5vw + 0.9rem, 1.15rem);
    line-height: 1.7;
}

.section-header .pill-badge { margin-left: auto; margin-right: auto; }

.page-header {
    padding: clamp(7rem, 10vw, 9rem) clamp(1.15rem, 4vw, 2rem) clamp(2.5rem, 5vw, 4rem);
    text-align: center;
    max-width: 52rem;
    margin: 0 auto;
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.glass-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 76px;
    z-index: 1000;
    background: color-mix(in srgb, var(--bg-color) 92%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid transparent;
    transition: height 0.25s var(--ease), border-color 0.25s ease, box-shadow 0.25s ease;
}

.glass-nav.scrolled {
    height: 66px;
    border-bottom-color: var(--border);
    box-shadow: var(--shadow-1);
}

.nav-container {
    max-width: 1240px;
    height: 100%;
    margin: 0 auto;
    padding: 0 clamp(1.15rem, 4vw, 2rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.logo {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.6rem;
    letter-spacing: -0.02em;
    color: var(--text-color);
    text-decoration: none;
    display: inline-flex;
    align-items: baseline;
}

.accent-dot { color: var(--accent-color); }

.nav-links {
    display: flex;
    gap: 2rem;
}

.nav-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    padding-bottom: 3px;
    border-bottom: 1.5px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
    /* A label is one phrase. Without this the flex row solves an overflow by breaking inside the
       items, so "How it works" stacks into three lines and the bar grows to three rows deep. */
    white-space: nowrap;
}


.nav-links a:hover,
.nav-links a[aria-current="page"] {
    color: var(--text-color);
    border-bottom-color: var(--accent-color);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.nav-actions .btn-primary,
.nav-actions .btn-secondary {
    padding: 0.52rem 1.15rem;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    text-decoration: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease,
                color 0.2s ease, box-shadow 0.2s ease, transform 0.2s var(--ease);
}

.btn-primary {
    background: var(--primary-color);
    color: var(--primary-ink);
    border: 1px solid transparent;
    padding: 0.78rem 1.7rem;
    box-shadow: var(--shadow-1);
}

.btn-primary:hover {
    background: color-mix(in srgb, var(--primary-color) 86%, var(--text-color));
    box-shadow: var(--shadow-2);
    transform: translateY(-1px);
}

.btn-secondary {
    background: transparent;
    color: var(--text-color);
    border: 1px solid var(--border-strong);
    padding: 0.78rem 1.55rem;
}

.btn-secondary:hover {
    background: var(--primary-soft);
    border-color: var(--primary-line);
    transform: translateY(-1px);
}

.btn-primary:active,
.btn-secondary:active { transform: translateY(0); }

/* Used on solutions.html for the inline simulate controls. */
.btn-sm {
    padding: 0.6rem 1.15rem;
    font-size: 0.9rem;
}

.icon-btn {
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
    width: 42px;
    height: 42px;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.icon-btn:hover {
    color: var(--text-color);
    background: var(--primary-soft);
    border-color: var(--primary-line);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
    min-height: auto;
    padding: calc(76px + clamp(1rem, 2.5vw, 2rem)) 0 clamp(3.5rem, 7vw, 5.5rem);
    display: flex;
    align-items: center;
}

.hero-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 clamp(1.15rem, 4vw, 2rem);
    display: grid;
    grid-template-columns: 1.08fr 1fr;
    gap: clamp(1.75rem, 3vw, 2.5rem) clamp(2rem, 3.5vw, 3.5rem);
    align-items: start;
}

.pill-badge,
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: var(--radius-pill);
    color: var(--accent-color);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-bottom: 1.25rem;
}

.pill-badge .material-symbols-outlined,
.hero-badge .material-symbols-outlined { font-size: 1.05rem !important; }

.hero-title {
    font-size: clamp(2.3rem, 3.3vw + 0.3rem, 3.5rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.025em;
    margin-bottom: 1.25rem;
    text-wrap: pretty;
}

/* Was a clipped blue-violet gradient. A single warm accent in the same serif
   does the same job of marking the phrase without introducing a second
   typographic texture. */
.gradient-text {
    color: var(--accent-color);
    font-style: italic;
}

.hero-subtitle {
    font-size: clamp(1.05rem, 0.55vw + 0.95rem, 1.18rem);
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: 2rem;
    max-width: 38rem;
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0;
}

/* ==========================================================================
   Business Owner Peace of Mind Monitor (Hero Left Column)
   ========================================================================== */

.hero-peace-card {
    /* .hero-container flips to text-align:center below 1100px. .scenario-playground
       carries its own text-align:left; this card and .companion-card did not, so their
       feed rows, pillars and bylines all centred on tablet/mobile. Pin them left. */
    text-align: left;
    margin-top: 1.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
    padding: 1.15rem 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    position: relative;
    overflow: hidden;
    max-width: 38rem;
    backdrop-filter: blur(10px);
}

.hero-peace-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-color), var(--accent-color), transparent);
    opacity: 0.7;
}

.peace-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.peace-status-indicator {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.peace-beacon {
    position: relative;
    width: 10px;
    height: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.peace-beacon-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 0 8px var(--primary-color);
}

.peace-beacon-ping {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary-color);
    opacity: 0.4;
    animation: beaconPing 2.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes beaconPing {
    0% { transform: scale(0.6); opacity: 0.8; }
    70% { transform: scale(2); opacity: 0; }
    100% { transform: scale(2); opacity: 0; }
}

.peace-status-title {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-color);
    text-transform: uppercase;
}

.peace-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.peace-feed-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    padding: 0;
    flex-shrink: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--text-dim);
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease;
}

.peace-feed-toggle:hover {
    color: var(--text-color);
    border-color: var(--border-strong);
}

.peace-feed-toggle .material-symbols-outlined {
    font-size: 0.95rem !important;
}

.peace-pill-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.73rem;
    font-weight: 600;
    color: var(--accent-color);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-pill);
}

.peace-pill-tag .material-symbols-outlined {
    font-size: 0.85rem !important;
}

/* Ambient Heartbeat Wave Area */
.peace-pulse-canvas-wrap {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.85rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    position: relative;
    overflow: hidden;
}

.peace-wave-svg {
    width: 100%;
    height: 44px;
    overflow: visible;
}

.peace-wave-stroke {
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
    animation: waveBreath 6s ease-in-out infinite alternate;
}

@keyframes waveBreath {
    0% { stroke-opacity: 0.7; filter: drop-shadow(0 0 2px var(--primary-color)); }
    100% { stroke-opacity: 1; filter: drop-shadow(0 0 6px var(--primary-color)); }
}

.peace-flow-token {
    offset-path: path("M 0 32 Q 65 14 130 32 T 260 32 T 390 32 T 520 32");
    animation: tokenGlide 6s linear infinite;
}

.peace-flow-token.token-accent {
    animation-delay: 3s;
}

@keyframes tokenGlide {
    0% { offset-distance: 0%; opacity: 0; transform: scale(0.6); }
    10% { opacity: 1; transform: scale(1); }
    90% { opacity: 1; transform: scale(1); }
    100% { offset-distance: 100%; opacity: 0; transform: scale(0.6); }
}

.peace-pulse-telemetry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--text-dim);
    flex-wrap: wrap;
    gap: 0.4rem;
    border-top: 1px dashed var(--border);
    padding-top: 0.35rem;
}

.telemetry-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.telemetry-label strong {
    color: var(--primary-color);
}

.telemetry-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primary-color);
}

.telemetry-metric {
    font-weight: 500;
    color: var(--text-muted);
}

/* Feed Container & Live Sliding Ticker */
.peace-feed-container {
    /* Fixed, not min-, height: the track swaps entries every 4s and any height change
       would shift the whole hero. 46px clears a 32px icon box and the two text lines. */
    height: 46px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.peace-feed-track {
    width: 100%;
}

.peace-feed-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}

.peace-feed-item.slide-out {
    opacity: 0;
    transform: translateY(-8px);
}

.peace-feed-item.slide-in {
    opacity: 0;
    transform: translateY(8px);
}

.peace-feed-icon-box {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--primary-soft);
    color: var(--primary-color);
    border: 1px solid var(--primary-line);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.peace-feed-icon-box .material-symbols-outlined {
    font-size: 1.15rem !important;
}

.peace-feed-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}

.peace-feed-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* No wrapping: a badge dropping to a second line would grow the card mid-rotation.
       The title ellipses instead - overflow:hidden already lets it shrink past its text. */
    flex-wrap: nowrap;
}

.peace-feed-title {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.peace-feed-badge {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary-color);
    background: var(--primary-soft);
    padding: 0.1rem 0.45rem;
    border-radius: var(--radius-pill);
    /* Head row is nowrap now, so the badge must hold its width and let the title ellipse. */
    flex-shrink: 0;
    white-space: nowrap;
}

.peace-feed-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.peace-feed-time {
    font-size: 0.7rem;
    color: var(--text-dim);
    margin-left: auto;
    flex-shrink: 0;
}

/* Three Assurance Pillars */
.peace-pillars-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.peace-pillar-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
}

.peace-pillar-item .material-symbols-outlined {
    font-size: 0.88rem !important;
    color: var(--primary-color);
}

.trust-bar {
    grid-column: 1 / -1;
    border-top: 1px solid var(--border);
    padding-top: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.trust-bar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

.trust-text {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-dim);
    margin-bottom: 0;
    font-weight: 600;
}

.trust-subtext {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.trust-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    align-items: center;
}

/* The sector labels used to be four saturated brand colours set inline. Held to
   one muted ink, they read as a list of markets instead of a paint chart. */
.trust-logos > span {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.trust-badges {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.9rem;
    width: 100%;
}

.trust-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text-color);
    box-shadow: var(--shadow-1);
    transition: border-color 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
    text-align: center;
}

.trust-badge:hover {
    border-color: var(--primary-line);
    transform: translateY(-1px);
}

.trust-badge .material-symbols-outlined {
    font-size: 1.05rem;
    color: var(--primary-color);
}

/* ==========================================================================
   Hero setup panel
   --------------------------------------------------------------------------
   Replaces the live engine simulator that used to sit here (window chrome,
   scenario tabs, an executing BPMN canvas and a scrolling console). That
   visual sold an engine you operate; this one shows a setup you finished —
   three fields filled in, and the result. Static by design.
   ========================================================================== */

.setup-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
    overflow: hidden;
    text-align: left;
}

.setup-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
}

.setup-panel-eyebrow {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 0.2rem;
}

.setup-panel-title {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-color);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.32rem 0.85rem;
    border-radius: var(--radius-pill);
    background: var(--primary-soft);
    border: 1px solid var(--primary-line);
    color: var(--primary-color);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.setup-steps {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
}

.setup-step {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 0.9rem;
    padding: 1rem 1.5rem;
}

.setup-step + .setup-step { border-top: 1px solid var(--border); }

.setup-step-num {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--primary-soft);
    border: 1px solid var(--primary-line);
    color: var(--primary-color);
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.setup-step-body { min-width: 0; }

.setup-step-label {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-color);
}

.setup-step-value {
    display: block;
    font-size: 0.87rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

.setup-step-check {
    font-size: 1.2rem !important;
    color: var(--primary-color);
}

.setup-keys {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.setup-key {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.setup-key img,
.setup-key .logo-monogram {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    object-fit: contain;
    background: #fff;
    flex-shrink: 0;
}

.setup-key .logo-monogram { font-size: 0.62rem; }

.setup-key code {
    margin-left: auto;
    font-size: 0.74rem;
    padding: 0.1rem 0.4rem;
    color: var(--text-dim);
    white-space: nowrap;
}

.setup-panel-foot {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border);
}

.setup-stat strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-color);
}

.setup-stat span {
    display: block;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

/* ==========================================================================
   Process blueprints (sub-page diagrams)
   ========================================================================== */

.bpmn-node {
    background: var(--bg-color);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.15rem 0.9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.7rem;
    cursor: pointer;
    position: relative;
    box-shadow: var(--shadow-1);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s var(--ease);
}

.bpmn-node:hover {
    transform: translateY(-3px);
    border-color: var(--primary-line);
    box-shadow: var(--shadow-2);
}

/* Execution feedback is a ring and a colour, not a strobe: one slow breath so
   the running step is findable, and nothing at all under reduced motion. */
@keyframes node-breathe {
    0%, 100% { box-shadow: 0 0 0 1px var(--primary-line), var(--shadow-1); }
    50%      { box-shadow: 0 0 0 3px var(--primary-soft), var(--shadow-2); }
}

.bpmn-node.active-executing {
    border-color: var(--primary-color);
    background: var(--primary-soft);
    animation: node-breathe 2.2s ease-in-out infinite;
    z-index: 10;
}

.bpmn-node.active-executing .node-icon-box {
    background: var(--primary-soft) !important;
    color: var(--primary-color) !important;
}

.bpmn-node.node-completed {
    border-color: var(--primary-line);
    background: var(--bg-secondary);
}

.bpmn-node.node-completed .node-icon-box {
    background: var(--primary-soft) !important;
    color: var(--success-color) !important;
}

.node-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 1.4rem;
    flex-shrink: 0;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.node-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.3;
    color: var(--text-color);
}

.node-sub {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    line-height: 1.45;
    color: var(--text-dim);
}

.node-badge {
    position: absolute;
    top: -9px;
    right: 10px;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    border: 1px solid var(--border-strong);
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 600;
    padding: 0.12rem 0.5rem;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.bpmn-node.active-executing .node-badge {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--primary-ink);
}

.bpmn-node.node-completed .node-badge {
    background: var(--primary-soft);
    border-color: var(--primary-line);
    color: var(--success-color);
}

/* ==========================================================================
   Surfaces: feature cards, use cases, generic panels
   ========================================================================== */

.feature-card,
.pricing-card,
.scenario-box,
.surface-card,
.glass-card,
.use-case-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-1);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
    gap: 1.75rem;
    justify-content: center;
    container-type: inline-size;
    container-name: features-grid;
}

.features-grid .feature-card { max-width: 30rem; }

.feature-card {
    border-radius: var(--radius-lg);
    padding: clamp(1.75rem, 3.5vw, 2.4rem);
    position: relative;
    overflow: hidden;
    transition: transform 0.28s var(--ease), border-color 0.28s ease, box-shadow 0.28s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary-line);
    box-shadow: var(--shadow-2);
}

.feature-card > *:not(.card-watermark) { position: relative; z-index: 1; }

.feature-icon-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    background: var(--primary-soft);
    border: 1px solid var(--primary-line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    margin-bottom: 1.4rem;
}

.feature-icon-wrapper .material-symbols-outlined {
    font-size: 1.85rem !important;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.feature-title {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -0.012em;
    margin-bottom: 0.6rem;
    color: var(--text-color);
}

.feature-desc {
    color: var(--text-muted);
    font-size: 0.96rem;
    line-height: 1.68;
}

/* Injected by main.js. Kept, but as a whisper rather than a graphic. */
.card-watermark {
    position: absolute;
    right: -1rem;
    bottom: -1.75rem;
    font-size: 8rem !important;
    line-height: 1;
    color: var(--primary-color);
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
}

@container features-grid (max-width: 400px) {
    .feature-icon-wrapper { width: 52px; height: 52px; border-radius: 15px; margin-bottom: 1.1rem; }
    .feature-icon-wrapper .material-symbols-outlined { font-size: 1.6rem !important; }
    .feature-title { font-size: 1.18rem; }
}

/* --- Generic panels used by the sub-pages -------------------------------- */
.surface-card,
.glass-card {
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 4vw, 2.75rem);
    position: relative;
    overflow: hidden;
}

.subsection-title {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2vw + 0.85rem, 1.85rem);
    font-weight: 600;
    letter-spacing: -0.018em;
    color: var(--text-color);
    margin: 0;
}

.subsection-copy {
    color: var(--text-muted);
    font-size: clamp(0.98rem, 0.4vw + 0.9rem, 1.05rem);
    line-height: 1.72;
    margin-top: 0.75rem;
    max-width: 44rem;
}

/* Consecutive paragraphs inside a panel: one rhythm, set here rather than by an
   inline margin on every one of them. */
.subsection-copy + .subsection-copy { margin-top: 1.15rem; }
.subsection-copy li { margin-bottom: 0.6rem; }

.surface-card strong,
.glass-card strong,
.subsection-copy strong { color: var(--text-color); font-weight: 600; }

code {
    font-family: var(--font-mono);
    font-size: 0.88em;
    padding: 0.12em 0.42em;
    border-radius: 5px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-color);
    word-break: break-word;
}

/* .glass-card carries a heading, an optional BPMN sketch and a line of copy.
   Twenty of them on features.html each repeated the same inline styles; set once. */
.glass-card h4 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.012em;
    margin: 1rem 0 0.5rem;
    color: var(--text-color);
}

.glass-card > p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.68;
}

/* Small secondary line under a connector or plan label. */
.c-hint {
    font-size: 0.86rem;
    color: var(--text-muted);
}

/* Utility colours used as classes on icons in features.html. */
.accent-color  { color: var(--accent-color) !important; }
.success-color { color: var(--success-color) !important; }

/* ==========================================================================
   How it works — the three setup steps
   ========================================================================== */

.step-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
    counter-reset: none;
}

.step-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
    position: relative;
}

/* A rule between the steps rather than boxes around them: on a tinted band the
   steps already read as a group, and three cards inside a card is one frame too
   many. Dropped at the wrap point, where the rule would sit above a step
   instead of beside it. */
@media (min-width: 62rem) {
    .step-card + .step-card { padding-left: clamp(1.5rem, 3vw, 2.5rem); }
    .step-card + .step-card::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0.35rem;
        bottom: 0.35rem;
        width: 1px;
        background: var(--border);
    }
}

.step-num {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 1px solid var(--primary-line);
    color: var(--primary-color);
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.step-title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--text-color);
}

.step-desc {
    color: var(--text-muted);
    font-size: 0.98rem;
    line-height: 1.7;
    margin: 0;
}

/* ==========================================================================
   Use cases
   ========================================================================== */

.use-case-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 1.5rem;
}

.use-case-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
    padding: clamp(1.5rem, 3.5vw, 2.1rem);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s var(--ease), border-color 0.25s ease, box-shadow 0.25s ease;
}

.use-case-card:hover {
    transform: translateY(-4px);
    border-color: var(--primary-line);
    box-shadow: var(--shadow-2);
}

.use-case-icon {
    font-size: 1.55rem !important;
    color: var(--accent-color);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: 15px;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
}

.use-case-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.012em;
    color: var(--text-color);
}

.use-case-desc {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.65;
    margin: 0;
}

.use-case-link {
    margin-top: auto;
    padding-top: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--primary-color);
}

.use-case-link .material-symbols-outlined {
    font-size: 1.05rem !important;
    transition: transform 0.25s var(--ease);
}

.use-case-card:hover .use-case-link .material-symbols-outlined { transform: translateX(3px); }

/* ==========================================================================
   Stats band & connector marquee
   ========================================================================== */

.stats-band {
    background: var(--band-tint);
    padding: clamp(3rem, 6vw, 4.25rem) clamp(1.15rem, 4vw, 2rem);
}

.stats-grid {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    text-align: center;
}

.counter-num {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 3.5vw, 3.1rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-color);
    margin-bottom: 0.35rem;
}

.counter-label {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.95rem;
}

.logo-marquee {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 1rem 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.marquee-track {
    display: flex;
    width: max-content;
    gap: 1rem;
    animation: marquee-scroll 72s linear infinite;
}

.logo-marquee:hover .marquee-track { animation-play-state: paused; }

@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.marquee-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 1.15rem;
    border-radius: var(--radius-pill);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-1);
    white-space: nowrap;
    flex-shrink: 0;
}

.marquee-chip img {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    object-fit: contain;
    background: #fff;
    padding: 3px;
}

.marquee-chip span {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.92rem;
    color: var(--text-muted);
}

.logo-monogram {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.connector-icon .logo-monogram { width: 100%; height: 100%; border-radius: 50%; font-size: 2.4rem; }
.marquee-chip .logo-monogram { width: 26px; height: 26px; border-radius: 7px; font-size: 0.9rem; }

@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none !important; flex-wrap: wrap; justify-content: center; }
}

/* ==========================================================================
   Pricing
   ========================================================================== */

.billing-toggle {
    display: flex;
    gap: 0.3rem;
    width: fit-content;
    margin: 0 auto clamp(2rem, 4vw, 2.75rem);
    padding: 0.3rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--bg-tertiary);
}

.billing-toggle-option {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.3rem;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 0.93rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.billing-toggle-option:hover { color: var(--text-color); }

.billing-toggle-option.active {
    background: var(--bg-secondary);
    color: var(--text-color);
    box-shadow: var(--shadow-1);
}

.billing-save {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.12rem 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent-color);
    white-space: nowrap;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
    align-items: stretch;
    container-type: inline-size;
    container-name: pricing-grid;
}

.pricing-card {
    border-radius: var(--radius-lg);
    padding: clamp(2rem, 4vw, 2.75rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s var(--ease);
}

.pricing-card:hover { box-shadow: var(--shadow-2); }

.pricing-card.popular {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-2);
}

.popular-badge {
    align-self: flex-start;
    background: var(--primary-color);
    color: var(--primary-ink);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.28rem 0.8rem;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 1.4rem;
}

.plan-name {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: var(--text-color);
}

.plan-price {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: -0.03em;
    margin-bottom: 1.6rem;
    color: var(--text-color);
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.plan-price,
.plan-price .plan-price-amount { font-size: clamp(2.4rem, 3.5vw + 0.8rem, 3.4rem); line-height: 1.1; }

.plan-price .plan-price-period,
.plan-price span:not(.plan-price-amount) {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-dim);
    letter-spacing: 0;
}

.plan-features {
    list-style: none;
    margin-bottom: 2.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    color: var(--text-muted);
    font-size: 0.94rem;
    line-height: 1.55;
}

.plan-features li .material-symbols-outlined {
    color: var(--primary-color);
    font-size: 1.2rem !important;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

@container pricing-grid (max-width: 400px) {
    .plan-price, .plan-price .plan-price-amount { font-size: 2.2rem; }
}

/* ==========================================================================
   CTA banner & footer
   ========================================================================== */

.cta-banner {
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: var(--radius-xl);
    padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 3rem);
    text-align: center;
    margin: clamp(4rem, 8vw, 7rem) auto;
    max-width: 1240px;
}

.cta-banner .section-subtitle { max-width: 40rem; margin-inline: auto; }

footer {
    background: var(--bg-sink);
    color: rgba(246, 241, 233, 0.72);
    padding: clamp(3.5rem, 7vw, 5rem) clamp(1.15rem, 4vw, 2rem) 2.25rem;
}

.footer-container {
    max-width: 1240px;
    margin: 0 auto 3rem;
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
}

footer .logo { color: #f6f1e9; }

.footer-desc {
    color: rgba(246, 241, 233, 0.6);
    margin-top: 1rem;
    max-width: 22rem;
    font-size: 0.93rem;
    line-height: 1.7;
}

.footer-col h4 {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    color: #f6f1e9;
}

.footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-col a {
    color: rgba(246, 241, 233, 0.62);
    text-decoration: none;
    font-size: 0.93rem;
    transition: color 0.2s ease;
}

.footer-col a:hover { color: #e0917a; }

.footer-bottom {
    max-width: 1240px;
    margin: 0 auto;
    border-top: 1px solid rgba(246, 241, 233, 0.12);
    padding-top: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    color: rgba(246, 241, 233, 0.55);
    font-size: 0.86rem;
}

.footer-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    background: rgba(46, 204, 113, 0.08);
    border: 1px solid rgba(46, 204, 113, 0.28);
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 500;
    color: #2ecc71;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.footer-status:hover {
    background: rgba(46, 204, 113, 0.16);
    border-color: rgba(46, 204, 113, 0.48);
    transform: translateY(-1px);
    color: #2ecc71;
}

.footer-status.degraded {
    background: rgba(243, 156, 18, 0.1);
    border-color: rgba(243, 156, 18, 0.35);
    color: #f39c12;
}

.footer-status.degraded:hover {
    background: rgba(243, 156, 18, 0.18);
    border-color: rgba(243, 156, 18, 0.5);
    color: #f39c12;
}

.footer-status.degraded .status-indicator {
    background: #f39c12;
    box-shadow: 0 0 8px rgba(243, 156, 18, 0.8);
}

.footer-status.outage {
    background: rgba(231, 76, 60, 0.1);
    border-color: rgba(231, 76, 60, 0.35);
    color: #e74c3c;
}

.footer-status.outage:hover {
    background: rgba(231, 76, 60, 0.18);
    border-color: rgba(231, 76, 60, 0.5);
    color: #e74c3c;
}

.footer-status.outage .status-indicator {
    background: #e74c3c;
    box-shadow: 0 0 8px rgba(231, 76, 60, 0.8);
}

.status-indicator {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2ecc71;
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.8);
    display: inline-block;
    animation: status-pulse 2.5s infinite ease-in-out;
}

@keyframes status-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.85); }
}

@media (prefers-reduced-motion: reduce) {
    .status-indicator {
        animation: none !important;
    }
}

/* ==========================================================================
   Scenario boxes & BPMN sketches (sub-pages)
   ========================================================================== */

.scenario-box {
    border-radius: var(--radius-lg);
    padding: clamp(1.75rem, 4vw, 2.5rem);
    position: relative;
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s var(--ease);
}

.scenario-box:hover {
    border-color: var(--primary-line);
    box-shadow: var(--shadow-2);
    transform: translateY(-3px);
}

.gateway-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    border: 1px solid var(--border-strong);
    padding: 0.3rem 0.85rem;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 1.15rem;
}

.gateway-badge .material-symbols-outlined { font-size: 1.05rem !important; }

.gateway-badge.parallel {
    background: var(--primary-soft);
    color: var(--primary-color);
    border-color: var(--primary-line);
}

.sketch-svg { width: 100%; max-height: 120px; overflow: visible; }

.sketch-path {
    fill: none;
    stroke: var(--primary-line);
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-dasharray: 4 5;
}

.sketch-node {
    fill: var(--primary-soft);
    stroke: var(--primary-color);
    stroke-width: 1.75px;
}

/* The delay-* hooks exist throughout the sub-page sketches but were never
   defined, so every stroke rendered identically. Given as a light stagger of
   opacity, they now read as a drawing built up in order. */
.delay-1 { opacity: 0.85; }
.delay-2 { opacity: 0.7; }
.delay-3 { opacity: 0.55; }

/* ==========================================================================
   Checkout dialog
   ========================================================================== */

.checkout-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(23, 19, 15, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.checkout-overlay[hidden] { display: none; }

.checkout-modal {
    position: relative;
    width: 100%;
    max-width: 27rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
    padding: 2.25rem 2rem 2rem;
}

.checkout-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.checkout-close:hover { color: var(--text-color); border-color: var(--border-strong); }

.checkout-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--text-color);
}

.checkout-title span { color: var(--accent-color); }

.checkout-subtitle {
    color: var(--text-muted);
    font-size: 0.93rem;
    line-height: 1.6;
    margin: 0 0 1.5rem;
}

.checkout-label {
    display: block;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--text-muted);
    margin: 0 0 0.5rem;
}

.checkout-input {
    width: 100%;
    padding: 0.8rem 1rem;
    margin-bottom: 1.5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-color);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.checkout-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--ring);
}

.checkout-providers { display: grid; gap: 0.55rem; margin: 0.5rem 0 1.25rem; }
.provider-option { display: block; cursor: pointer; }

/* A class-level `display` beats the UA stylesheet's [hidden] rule, so an
   unconfigured payment rail would stay on screen while the script believes it
   is hidden. Restated for the group, its options and its label. */
.checkout-providers[hidden],
.provider-option[hidden],
.checkout-label[hidden] { display: none; }

.provider-option input { position: absolute; opacity: 0; pointer-events: none; }

.provider-card {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.provider-option input:checked + .provider-card {
    border-color: var(--primary-color);
    box-shadow: var(--ring);
}

.provider-option input:focus-visible + .provider-card { border-color: var(--primary-color); }

.provider-name { font-weight: 600; color: var(--text-color); }
.provider-hint { font-size: 0.8rem; color: var(--text-dim); }

.checkout-error {
    color: var(--danger-color);
    font-size: 0.89rem;
    margin: 0 0 1rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
}

.checkout-error[hidden] { display: none; }
.checkout-submit[disabled] { opacity: 0.6; cursor: not-allowed; }

/* ==========================================================================
   Entrance motion
   --------------------------------------------------------------------------
   One gentle rise. No scale, no blur, no scroll-linked parallax — a calm page
   should settle as you reach it, not perform.
   ========================================================================== */

.reveal,
.feature-card,
.pricing-card,
.connector-card,
.scenario-box {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.reveal.active,
.feature-card.active,
.pricing-card.active,
.connector-card.active,
.scenario-box.active {
    opacity: 1;
    transform: translateY(0);
}

@supports (animation-timeline: view()) and (animation-range: entry) {
    .reveal,
    .feature-card,
    .pricing-card,
    .connector-card,
    .scenario-box {
        opacity: 1;
        transform: none;
        transition: none;
        animation: reveal-rise linear both;
        animation-timeline: view();
        animation-range: entry 12% cover 26%;
    }
}

@keyframes reveal-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .feature-card,
    .pricing-card,
    .connector-card,
    .scenario-box {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}

@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }

    ::view-transition-old(root) { animation: 0.28s ease both vt-out; }
    ::view-transition-new(root) { animation: 0.28s ease both vt-in; }

    @keyframes vt-out { to   { opacity: 0; } }
    @keyframes vt-in  { from { opacity: 0; } }
}

/* ==========================================================================
   Interactive Scenario Playground & Tabs (Hero Component)
   ========================================================================== */

.hero-showcase {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.scenario-playground {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3);
    overflow: hidden;
    text-align: left;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.scenario-tabs {
    display: flex;
    overflow-x: auto;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

.scenario-tabs::-webkit-scrollbar { display: none; }

.scenario-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.75rem clamp(0.35rem, 0.6vw, 0.6rem);
    font-size: clamp(0.74rem, 0.8vw, 0.8rem);
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}

.scenario-tab .material-symbols-outlined {
    font-size: 1rem !important;
    flex-shrink: 0;
}

.scenario-tab:hover {
    color: var(--text-color);
    background: color-mix(in srgb, var(--primary-soft) 40%, transparent);
}

.scenario-tab.active {
    color: var(--text-color);
    background: var(--bg-secondary);
    border-bottom-color: var(--accent-color);
}

/* Companion Customer Proof Card (Fills space under scenario playground) */
.scenario-companion {
    width: 100%;
}

.companion-card {
    text-align: left;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.4rem;
    box-shadow: var(--shadow-1);
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    transition: border-color 0.25s ease, transform 0.2s ease;
}

.companion-card:hover {
    border-color: var(--primary-line);
}

.companion-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-color);
}

.companion-badge .material-symbols-outlined {
    font-size: 0.95rem !important;
}

.companion-quote {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-color);
    font-style: italic;
    margin: 0;
}

.companion-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
    font-size: 0.78rem;
}

.companion-author-wrap {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.companion-avatar {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-pill);
    background: var(--primary-soft);
    color: var(--primary-color);
    font-size: 0.68rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* The icon font ships at weight 400 only, so the avatar's bold would be synthesised. */
.companion-avatar.material-symbols-outlined {
    font-size: 0.9rem;
    font-weight: 400;
}

.companion-author {
    color: var(--text-muted);
    font-weight: 500;
}

.companion-metric {
    font-weight: 600;
    color: var(--primary-color);
    background: var(--primary-soft);
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-pill);
    font-size: 0.74rem;
}

.scenario-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.5rem;
    border-bottom: 1px solid var(--border);
}

.scenario-eyebrow {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 0.2rem;
}

.scenario-title {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-color);
}

.scenario-steps-container {
    padding: 0.5rem 0;
    list-style: none;
    margin: 0;
    min-height: 250px;
    transition: opacity 0.2s ease;
}

.scenario-step-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 0.9rem;
    padding: 0.9rem 1.5rem;
    position: relative;
}

.scenario-step-item + .scenario-step-item { border-top: 1px solid var(--border); }

.step-badge-num {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--primary-soft);
    border: 1px solid var(--primary-line);
    color: var(--primary-color);
    font-size: 0.8rem;
    font-weight: 700;
}

.step-human-badge {
    background: var(--accent-soft);
    border-color: var(--accent-line);
    color: var(--accent-color);
}

.scenario-step-body { min-width: 0; }

.scenario-step-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text-color);
}

.scenario-step-desc {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
    line-height: 1.45;
}

.scenario-human-callout {
    margin-top: 0.55rem;
    padding: 0.75rem 0.95rem;
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-strong);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.human-channel-selector {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    margin-bottom: 0.25rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.channel-selector-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    margin-right: 0.25rem;
}

.channel-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 0.2rem 0.55rem;
    font-size: 0.73rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.18s ease;
}

.channel-pill .material-symbols-outlined {
    font-size: 0.85rem !important;
}

.channel-pill:hover {
    color: var(--text-color);
    border-color: var(--border-strong);
}

.channel-pill.active {
    background: var(--accent-soft);
    color: var(--accent-color);
    border-color: var(--accent-line);
    font-weight: 600;
}

.human-callout-main {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    flex: 1 1 12rem;
}

.human-channel-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-color);
}

.human-channel-badge .material-symbols-outlined {
    font-size: 0.85rem !important;
}

.human-callout-text {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.scenario-safety-callout {
    margin-top: 0.55rem;
    padding: 0.5rem 0.8rem;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--primary-soft) 70%, transparent);
    border: 1px solid var(--primary-line);
    font-size: 0.78rem;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 0.45rem;
    line-height: 1.35;
}

.scenario-safety-callout .material-symbols-outlined { font-size: 1rem !important; flex-shrink: 0; }

.scenario-apps-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.45rem;
}

.scenario-app-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-pill);
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--text-color);
}

.scenario-app-tag img,
.scenario-app-tag .logo-monogram {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    object-fit: contain;
}

.scenario-step-status {
    font-size: 1.15rem !important;
    color: var(--primary-color);
}

.scenario-panel-foot {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    padding: 1.1rem 1.5rem;
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border);
}

.scenario-sample-note {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: right;
}

/* ==========================================================================
   Before vs. With COWE Comparison Section
   ========================================================================== */

.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    margin-top: 2.5rem;
}

.comparison-card {
    padding: clamp(1.75rem, 3vw, 2.5rem);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-2);
    display: flex;
    flex-direction: column;
}

.comparison-card.card-before {
    background: var(--bg-secondary);
    border-top: 3px solid var(--danger-color);
}

.comparison-card.card-after {
    background: var(--bg-secondary);
    border-top: 3px solid var(--primary-color);
    box-shadow: var(--shadow-3);
    position: relative;
}

.comparison-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}

.comparison-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.3rem 0.8rem;
    border-radius: var(--radius-pill);
}

.card-before .comparison-badge {
    background: color-mix(in srgb, var(--danger-color) 12%, transparent);
    color: var(--danger-color);
    border: 1px solid color-mix(in srgb, var(--danger-color) 30%, transparent);
}

.card-after .comparison-badge {
    background: var(--primary-soft);
    color: var(--primary-color);
    border: 1px solid var(--primary-line);
}

.comparison-card-title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 600;
}

.comparison-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.comparison-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem;
    align-items: start;
    font-size: 0.94rem;
    line-height: 1.55;
}

.card-before .comparison-item-icon {
    color: var(--danger-color);
    font-size: 1.25rem !important;
    margin-top: 0.1rem;
}

.card-after .comparison-item-icon {
    color: var(--primary-color);
    font-size: 1.25rem !important;
    margin-top: 0.1rem;
}

.comparison-item strong {
    display: block;
    color: var(--text-color);
    margin-bottom: 0.15rem;
}

.comparison-item span {
    color: var(--text-muted);
}

/* ==========================================================================
   Interactive "Time & Sanity Saved" Calculator
   ========================================================================== */

.calc-wrapper {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-3);
    padding: clamp(2rem, 4vw, 3.5rem);
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
}

.calc-inputs {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.calc-slider-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.calc-slider-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.calc-slider-label {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-color);
}

.calc-slider-val {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--accent-color);
}

.calc-slider {
    width: 100%;
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--bg-tertiary);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    border: 1px solid var(--border);
}

.calc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary-color);
    border: 2px solid var(--bg-secondary);
    box-shadow: var(--shadow-2);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.calc-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.calc-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary-color);
    border: 2px solid var(--bg-secondary);
    box-shadow: var(--shadow-2);
    cursor: pointer;
}

.calc-helper {
    font-size: 0.8rem;
    color: var(--text-dim);
}

.calc-results-box {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    padding: clamp(1.75rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
}

.calc-result-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.calc-big-num {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 4vw, 3.6rem);
    font-weight: 700;
    line-height: 1;
    color: var(--primary-color);
    letter-spacing: -0.03em;
}

.calc-big-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color);
}

.calc-sub-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.calc-sub-stat strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--accent-color);
}

.calc-sub-stat span {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

.calc-warm-note {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.5;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

/* ==========================================================================
   Relatable Business Stories & Testimonials
   ========================================================================== */

.stories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 2.5vw, 2rem);
    margin-top: 2rem;
}

.story-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
    transition: transform 0.25s var(--ease), border-color 0.25s ease;
}

.story-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary-line);
}

.story-quote {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text-color);
    position: relative;
}

.story-author {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.story-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary-soft);
    border: 1px solid var(--primary-line);
    color: var(--primary-color);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.story-avatar.material-symbols-outlined {
    font-size: 1.35rem;
    font-weight: 400;
}

.story-meta strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-color);
}

.story-meta span {
    display: block;
    font-size: 0.8rem;
    color: var(--text-dim);
}

/* ==========================================================================
   Welcoming FAQ Accordion
   ========================================================================== */

.faq-container {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-1);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq-item:hover {
    border-color: var(--primary-line);
}

.faq-item[open] {
    border-color: var(--primary-line);
    box-shadow: var(--shadow-2);
}

.faq-question {
    padding: 1.25rem 1.5rem;
    font-family: var(--font-heading);
    font-size: 1.12rem;
    font-weight: 600;
    color: var(--text-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    list-style: none;
    user-select: none;
}

.faq-question::-webkit-details-marker { display: none; }

.faq-icon {
    font-size: 1.4rem !important;
    color: var(--accent-color);
    transition: transform 0.25s var(--ease);
    flex-shrink: 0;
}

.faq-item[open] .faq-icon {
    transform: rotate(45deg);
}

.faq-answer {
    padding: 0 1.5rem 1.5rem 1.5rem;
    font-size: 0.95rem;
    line-height: 1.68;
    color: var(--text-muted);
}

.faq-answer p + p { margin-top: 0.75rem; }

@media (max-width: 900px) {
    .comparison-grid { grid-template-columns: 1fr; }
    .calc-wrapper { grid-template-columns: 1fr; }
    .stories-grid { grid-template-columns: 1fr; }
    .scenario-panel-foot { grid-template-columns: 1fr; text-align: center; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
    .hero-container { grid-template-columns: 1fr; text-align: center; }
    .hero-subtitle { margin-inline: auto; }
    /* 38rem-capped, so it would hug the left edge of the now-centred column. */
    .hero-peace-card { margin-inline: auto; }
    .hero-cta { justify-content: center; }
    .trust-logos { justify-content: center; }
    .trust-badges { grid-template-columns: repeat(2, 1fr); }
    .trust-bar-header { justify-content: center; text-align: center; }
    .canvas-nodes-container { grid-template-columns: repeat(2, 1fr); }
    .pricing-grid { grid-template-columns: 1fr; max-width: 32rem; margin-inline: auto; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-container { grid-template-columns: 1fr 1fr; }
    .footer-bottom { justify-content: center; text-align: center; }
}

.nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text-color);
    width: 42px;
    height: 42px;
    border-radius: 12px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.nav-toggle .material-symbols-outlined { font-size: 1.5rem; }

@media (max-width: 900px) {
    .nav-toggle { display: inline-flex; order: 3; }
    .nav-actions { gap: 0.5rem; }

    .nav-links {
        display: flex;
        /* Absolute against .glass-nav (the nearest positioned ancestor) rather than
           fixed at a hardcoded offset: the bar is 76px at rest and 66px once
           scrolled, so a literal top left a strip of the page showing through the
           seam at whichever of the two heights it did not match. */
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
        padding: 1.75rem clamp(1.15rem, 4vw, 2rem) 2rem;
        /* Opaque, deliberately: a drop-down menu on a phone has to be readable
           before it is atmospheric, and backdrop-filter is not guaranteed. */
        background: var(--bg-color);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-2);
        transform: translateY(-140%);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.34s var(--ease), opacity 0.22s ease, visibility 0.22s;
    }

    .glass-nav.nav-open .nav-links {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .nav-links a { font-size: 1.05rem; border-bottom: none; }

    /* main.js moves .nav-actions into the panel at this breakpoint so the bar
       holds only the logo and the toggle. */
    .nav-links .nav-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 0.7rem;
        margin-top: 0.25rem;
        padding-top: 1.25rem;
        border-top: 1px solid var(--border);
    }

    .nav-links .nav-actions .btn-primary,
    .nav-links .nav-actions .btn-secondary {
        flex: 1 1 10rem;
        padding: 0.72rem 1.2rem;
        font-size: 0.94rem;
    }
}

@media (max-width: 768px) {
    .canvas-nodes-container { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr; }
    .footer-container { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .logo { font-size: 1.4rem; }
    .card-watermark { font-size: 5rem !important; right: -0.5rem; bottom: -1rem; }
    .connector-icon .logo-monogram { font-size: 1.8rem; }
    .simulator-canvas-area { padding: 1.5rem 1rem; }
    .trust-badges { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Interactive Hero Scenario Playground (Approvals & Feedback)
   ========================================================================== */

.human-mock-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--bg-secondary);
    border: 1px solid var(--accent-line);
    color: var(--accent-color);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all 0.22s var(--ease);
    box-shadow: var(--shadow-1);
    user-select: none;
}

.human-mock-btn:hover {
    background: var(--accent-soft);
    border-color: var(--accent-color);
    transform: translateY(-1px);
    box-shadow: var(--shadow-2);
}

.human-mock-btn:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.human-mock-btn.approved {
    background: var(--primary-soft);
    border-color: var(--primary-color);
    color: var(--primary-color);
    pointer-events: none;
    transform: none;
    animation: approvedPulse 0.4s var(--ease);
}

@keyframes approvedPulse {
    0% { transform: scale(0.96); }
    50% { transform: scale(1.04); }
    100% { transform: scale(1); }
}

.step-executing {
    animation: executingHighlight 1.5s infinite alternate var(--ease);
    border-color: var(--primary-color) !important;
}

@keyframes executingHighlight {
    0% { box-shadow: 0 0 0 0 rgba(127, 183, 154, 0.2); }
    100% { box-shadow: 0 0 0 8px rgba(127, 183, 154, 0); }
}

.btn-replay-scenario {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    margin-top: 0.35rem;
    border-radius: 4px;
    transition: color 0.2s ease;
}

.btn-replay-scenario:hover {
    color: var(--text-color);
}

/* ==========================================================================
   Interactive Workflow Canvas Showcase
   ========================================================================== */

.canvas-showcase-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-3);
    overflow: hidden;
    margin-top: 1.5rem;
    position: relative;
}

.canvas-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.4rem;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.canvas-toolbar-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.canvas-workflow-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 0 8px var(--primary-color);
}

.canvas-workflow-name {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text-color);
}

.canvas-status-badge {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-pill);
    background: var(--primary-soft);
    color: var(--primary-color);
    border: 1px solid var(--primary-line);
    transition: all 0.25s ease;
}

.canvas-scenario-pills {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.canvas-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 500;
    padding: 0.35rem 0.8rem;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all 0.2s var(--ease);
}

.canvas-pill:hover {
    color: var(--text-color);
    border-color: var(--primary-line);
}

.canvas-pill.active {
    background: var(--primary-soft);
    border-color: var(--primary-color);
    color: var(--primary-color);
    font-weight: 600;
}

.canvas-pill .material-symbols-outlined {
    font-size: 1rem;
}

.canvas-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Canvas Body & Stage */
.canvas-body {
    display: flex;
    min-height: 480px;
    position: relative;
    overflow: hidden;
}

.canvas-stage {
    flex: 1;
    position: relative;
    padding: 2.5rem 1.5rem;
    background-color: var(--bg-color);
    background-image: 
        radial-gradient(circle, var(--border-strong) 1px, transparent 1px);
    background-size: 24px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: auto;
    min-width: 0;
}

.canvas-connections-svg {
    position: absolute;
    inset: 0;
    /* drawCanvasEdges sizes this to the stage's scroll extent. The minimums keep it covering the
       stage before that runs; without them a 100% width would clip every edge drawn past the
       visible box, since SVG overflow is hidden. */
    min-width: 100%;
    min-height: 100%;
    pointer-events: none;
    z-index: 1;
}

.canvas-nodes-wrap {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 2.5rem;
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 960px;
    padding: 1rem 0;
}

/* A stage of the flow. One node in most columns; several where the process fans out, which is what
   lets a gateway show two exclusive branches or a parallel split show its concurrent work. */
.canvas-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.1rem;
    flex: 0 0 auto;
}

/* Edge labels carry the branch condition, which is the reason the arrow exists. */
.canvas-edge-label {
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    fill: var(--text-muted);
}
.canvas-edge-label-branch { fill: var(--primary-color); }
.canvas-edge-label-recovery { fill: var(--accent-color); }

/* Cowe Canvas Nodes */
.cowe-demo-node {
    width: 210px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem 1.1rem;
    box-shadow: var(--shadow-2);
    cursor: pointer;
    position: relative;
    transition: transform 0.24s var(--ease), border-color 0.24s ease, box-shadow 0.24s ease;
    user-select: none;
}

.cowe-demo-node:hover {
    transform: translateY(-3px);
    border-color: var(--primary-line);
    box-shadow: var(--shadow-3);
}

.cowe-demo-node.selected {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-color), var(--shadow-3);
}

.cowe-demo-node.active-executing {
    border-color: var(--primary-color);
    animation: nodePulseGlow 1s infinite alternate var(--ease);
}

@keyframes nodePulseGlow {
    0% { box-shadow: 0 0 8px rgba(127, 183, 154, 0.3); }
    100% { box-shadow: 0 0 24px rgba(127, 183, 154, 0.65); }
}

.cowe-demo-node.completed-step {
    border-color: var(--primary-color);
}

.cowe-demo-node.completed-step .node-status-icon {
    color: var(--primary-color);
    opacity: 1;
}

/* Node Internal Anatomy */
.node-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
}

.node-type-pill {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.node-type-pill.trigger { color: var(--primary-color); }
.node-type-pill.gateway { color: var(--warning-color); }
.node-type-pill.human   { color: var(--accent-color); }
.node-type-pill.action  { color: var(--info-color); }
/* A compensating step is not a normal action — it runs to undo one. */
.node-type-pill.recovery { color: var(--accent-color); }

.node-status-icon {
    font-size: 1.1rem;
    color: var(--text-dim);
    opacity: 0.35;
    transition: all 0.2s ease;
}

.node-main-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.node-icon-box {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.node-icon-box .material-symbols-outlined {
    font-size: 1.2rem;
    color: var(--text-color);
}

.node-title-box {
    overflow: hidden;
}

.node-title-box strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.node-title-box span {
    font-size: 0.76rem;
    color: var(--text-muted);
}

.node-desc-preview {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--border);
}

/* Connection Handle Dots */
.node-port {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 2px solid var(--primary-color);
    top: 50%;
    transform: translateY(-50%);
}

.node-port.port-in { left: -5px; }
.node-port.port-out { right: -5px; }

/* Side Property Inspector Panel */
.canvas-inspector {
    width: 340px;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-2);
    z-index: 10;
    transition: transform 0.3s var(--ease), width 0.3s var(--ease);
}

.canvas-inspector[hidden] {
    display: none !important;
}

.inspector-header {
    padding: 1.15rem 1.4rem;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.inspector-type {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--primary-color);
    text-transform: uppercase;
}

.inspector-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
    margin-top: 0.15rem;
}

.inspector-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.2rem;
    border-radius: 6px;
    transition: color 0.2s ease;
}

.inspector-close:hover { color: var(--text-color); }

.inspector-content {
    padding: 1.4rem;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.inspector-desc {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.inspector-section {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.inspector-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-dim);
}

.inspector-pill-val {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.75rem;
    font-size: 0.85rem;
    color: var(--text-color);
}

.inspector-pill-val .material-symbols-outlined {
    font-size: 1.1rem;
    color: var(--primary-color);
}

.inspector-specs-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.inspector-specs-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.inspector-specs-list li .material-symbols-outlined {
    font-size: 1.05rem;
    color: var(--text-dim);
    margin-top: 0.1rem;
}

.inspector-specs-list code {
    background: var(--bg-tertiary);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--accent-color);
}

.inspector-comp-note {
    background: var(--primary-soft);
    border-left: 3px solid var(--primary-color);
    padding: 0.6rem 0.8rem;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 0.82rem;
    color: var(--text-color);
    line-height: 1.5;
}

.inspector-foot {
    padding: 1rem 1.4rem;
    border-top: 1px solid var(--border);
    background: var(--bg-tertiary);
}

/* Simulation Toast / Toast Bar */
.canvas-exec-toast {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-sink);
    border: 1px solid var(--primary-line);
    color: var(--sink-ink);
    padding: 0.65rem 1.25rem;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-3);
    font-size: 0.85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    z-index: 20;
    animation: toastSlideUp 0.3s var(--ease);
}

/* A class-level `display` beats the UA stylesheet's [hidden] rule, so the attribute needs an
   explicit counterpart or the toast is painted before anything has run. */
.canvas-exec-toast[hidden] { display: none; }

@keyframes toastSlideUp {
    from { transform: translate(-50%, 15px); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}

.canvas-exec-toast .material-symbols-outlined {
    color: var(--sink-accent);
    font-size: 1.2rem;
}

/* Canvas Footer Bar */
.canvas-footer-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.15rem 1.75rem;
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.canvas-prompt-box {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.canvas-prompt-box .material-symbols-outlined {
    color: var(--primary-color);
    font-size: 1.25rem;
}

.canvas-prompt-box em {
    color: var(--text-color);
    font-style: normal;
    background: var(--bg-secondary);
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--border);
}

/* ==========================================================================
   App Catalog Search & Filtering (features.html)
   ========================================================================== */

/* The toolbar sticks within this wrapper, so it travels the length of the connector sections and
   then releases rather than following the reader into the pricing matrix below. */
.app-catalogue {
    position: relative;
}

.app-search-toolbar {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
    padding: 1.5rem;
    margin: 2.5rem 0 3.5rem;
    position: sticky;
    top: 90px;
    z-index: 100;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.app-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 1rem;
}

.app-search-input-wrap .search-icon {
    position: absolute;
    left: 1rem;
    color: var(--text-dim);
    font-size: 1.35rem;
    pointer-events: none;
}

.app-search-input {
    width: 100%;
    height: 48px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0 2.8rem 0 2.8rem;
    font-family: var(--font-body);
    font-size: 0.98rem;
    color: var(--text-color);
    transition: all 0.2s var(--ease);
}

.app-search-input:focus {
    background: var(--bg-secondary);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

.app-search-clear {
    position: absolute;
    right: 0.85rem;
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 0.3rem;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
}

.app-search-clear.visible { display: flex; }
.app-search-clear:hover { color: var(--text-color); }

.app-filter-pills {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.app-filter-pill {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.84rem;
    font-weight: 500;
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all 0.2s ease;
}

.app-filter-pill:hover {
    color: var(--text-color);
    border-color: var(--primary-line);
}

.app-filter-pill.active {
    background: var(--primary-soft);
    border-color: var(--primary-color);
    color: var(--primary-color);
    font-weight: 600;
}

.app-search-status {
    margin-top: 0.75rem;
    font-size: 0.82rem;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.connector-card.hidden {
    display: none !important;
}

.category-section.all-hidden {
    display: none !important;
}

.apps-empty-state {
    text-align: center;
    padding: 4rem 1.5rem;
    background: var(--bg-secondary);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    margin: 2rem 0;
}

.apps-empty-state .material-symbols-outlined {
    font-size: 3rem;
    color: var(--accent-color);
    margin-bottom: 1rem;
}

.apps-empty-state h3 {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
}

.apps-empty-state p {
    color: var(--text-muted);
    max-width: 32rem;
    margin: 0 auto 1.5rem;
    font-size: 0.95rem;
}

/* ==========================================================================
   Blueprint Deployment Bar (solutions.html)
   ========================================================================== */

.solution-deploy-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    margin-top: 1.5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    flex-wrap: wrap;
}

.solution-deploy-bar span {
    font-size: 0.92rem;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.solution-deploy-bar span .material-symbols-outlined {
    color: var(--primary-color);
}

/* Responsive adjustments for new components */
@media (max-width: 900px) {
    .canvas-body { flex-direction: column; }
    .canvas-inspector { width: 100%; border-left: none; border-top: 1px solid var(--border); }
    .canvas-nodes-wrap { flex-direction: column; gap: 1.5rem; align-items: center; }
    .cowe-demo-node { width: 100%; max-width: 280px; }
    .app-search-toolbar { position: static; margin-top: 1.5rem; }
    .canvas-footer-cta { flex-direction: column; align-items: stretch; text-align: center; }
    .canvas-footer-cta .btn-primary { width: 100%; }
}


/* Inline links inside body copy. Without this an unclassed anchor in prose inherits the UA default
   (blue, underlined), which is what the privacy page's "security page" link was rendering as. */
.text-link {
    color: var(--accent-color);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--accent-line);
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.text-link:hover {
    color: var(--primary-color);
    text-decoration-color: currentColor;
}