.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-on-solid, var(--primary));
    color: #ffffff;
    font-weight: 600;
    padding: 0.75rem 1.75rem;
    border-radius: 0.375rem;
    box-shadow: 0 4px 14px var(--primary-glow);
    transition: background-color var(--transition-speed) ease, transform var(--transition-speed) ease;
}

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

.btn-primary-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-on-solid, var(--primary));
    color: #ffffff;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    transition: background-color var(--transition-speed) ease;
}

.btn-primary-sm:hover {
    background-color: var(--primary-hover);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-card);
    color: var(--text-primary);
    font-weight: 600;
    padding: 0.75rem 1.75rem;
    border-radius: 0.375rem;
    border: 1px solid var(--border-color);
    transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease;
}

.btn-secondary:hover {
    background-color: var(--border-color);
}

.btn-secondary-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-card);
    color: var(--text-primary);
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    border: 1px solid var(--border-color);
    font-size: 0.875rem;
    transition: background-color var(--transition-speed) ease;
}

.btn-secondary-sm:hover {
    background-color: var(--border-color);
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: var(--text-primary);
    font-weight: 600;
    padding: 0.75rem 1.75rem;
    border-radius: 0.375rem;
    border: 1px solid var(--border-color);
    transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease;
}

.btn-outline:hover {
    background-color: var(--bg-card);
    border-color: var(--primary);
}

.card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 2rem;
    transition: transform var(--transition-speed) ease, border-color var(--transition-speed) ease;
}

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

.card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

/* This selector only matches a literal <h3>. Several pages promote what was
   originally a card h3 to an h2 to fix heading-hierarchy skips (see
   about.html, integrations.html, solutions.html, contact.html) - those
   promoted headings carry this same font-size/weight/margin/color combination
   as an inline style instead, because changing the tag makes them stop
   matching this rule. If this rule's values change, the inline duplicates
   on those promoted headings need updating too. */

.card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

.badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: var(--primary-text-on-dark, var(--primary));
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

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

.hero-section {
    position: relative;
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    padding: 4rem 0;
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 650px;
    margin-left: max(1.5rem, calc((100vw - 1200px) / 2 + 1.5rem));
}

.hero-content h1 {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 1.25rem;
    letter-spacing: -0.02em;
}

.hero-subtitle {
    font-size: 1.15rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.hero-cta-group {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    margin-bottom: 3rem;
}

.hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.metric-value {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.metric-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hero-canvas-container {
    position: absolute;
    top: 0;
    right: 0;
    width: 55vw;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

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

.workflow-step {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 2rem;
    position: relative;
}

.step-number {
    font-size: 2.5rem;
    font-weight: 900;
    color: rgba(99, 102, 241, 0.2);
    margin-bottom: 1rem;
    line-height: 1;
}

.workflow-step h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.workflow-step p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* --- FAQ Accordion Component --- */
.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-accordion-item {
    background: var(--bg-card, #1e222d);
    border: 1px solid var(--border-color, #2a2f3d);
    border-radius: 0.75rem;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.faq-accordion-item:hover {
    border-color: var(--hover-border-tint);
}

.faq-accordion-btn {
    width: 100%;
    background: none;
    border: none;
    padding: 1.25rem 1.5rem;
    text-align: left;
    color: var(--text-primary, #ffffff);
    font-size: 1.15rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.faq-accordion-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

/* Plus/Minus Toggle Icon Animation */
.faq-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    position: relative;
    transition: transform 0.3s ease;
}

.faq-icon::before,
.faq-icon::after {
    content: '';
    position: absolute;
    background-color: var(--text-secondary, #94a3b8);
    transition: transform 0.2s ease;
}

/* Horizontal line */
.faq-icon::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    transform: translateY(-50%);
}

/* Vertical line (rotates to form a minus) */
.faq-icon::after {
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    transform: translateX(-50%);
}

.faq-accordion-item.active .faq-icon::after {
    transform: translateX(-50%) rotate(90deg);
}

.faq-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
    padding: 0 1.5rem;
    color: var(--text-secondary, #94a3b8);
    font-size: 0.95rem;
    line-height: 1.6;
}

.faq-accordion-item.active .faq-accordion-content {
    max-height: 600px; /* Generous height ceiling to allow smooth expansion */
    padding-bottom: 1.5rem;
}

/* --- Theme Toggle (Light / System / Dark) --- */
.material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    line-height: 1;
}

/* Belt-and-suspenders alongside .theme-toggle-btn's own overflow:hidden -
   if the icon font is slow/unavailable, the ligature falls back to literal
   text ("light_mode" etc.); this keeps that fallback text from wrapping or
   forcing the flex item wider before the parent's clip takes effect. */
.theme-toggle-btn .material-symbols-outlined {
    white-space: nowrap;
    overflow: hidden;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 9999px;
}

.theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    /* Flex items default to min-width/min-height:auto, which lets their
       content's intrinsic size grow the box past the explicit 32px above -
       fatal if the Material Symbols font hasn't loaded yet (or fails to
       load) and the icon span's ligature text ("light_mode" etc.) renders
       as literal, wide fallback text. Pinning both flex-basis and the
       min-* override to 32px, plus clipping overflow, keeps the button a
       fixed 32x32 hit target and clips any unligatured fallback text
       instead of letting it grow the button or spill into neighbours. */
    flex: 0 0 32px;
    min-width: 32px;
    min-height: 32px;
    overflow: hidden;
    border-radius: 9999px;
    background-color: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

.theme-toggle-btn:hover {
    background-color: var(--bg-subtle);
}

.theme-toggle-btn[aria-checked="true"] {
    background-color: var(--primary);
    color: #ffffff;
}

.theme-toggle-btn[aria-checked="true"]:hover {
    background-color: var(--primary);
}

/* =======================================
   FORM SUCCESS CONFIRMATION
   =======================================
   Shared by the contact enquiry form (/contact) and the Free Assessment
   form (/#assessment). Both forms hide themselves on a confirmed 2xx and
   reveal one of these in their place, so the two confirmations look and
   behave identically. Built only from existing theme tokens - no new
   colours beyond the one success accent below, which needs a per-theme
   value for the same contrast reason --primary-on-solid does. */
/* `.form-success` is an author rule, so its display would outrank the UA
   stylesheet's `[hidden] { display: none }` and the panel would render even
   while hidden. Restore the attribute's meaning explicitly. */
.form-success[hidden] {
    display: none;
}

.form-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    padding: 2.5rem 1.5rem;
    border: 1px solid var(--success-border, #10b981);
    border-radius: 0.75rem;
    background: var(--success-wash, rgba(16, 185, 129, 0.06));
}

.form-success-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 0.25rem;
    border-radius: 9999px;
    background: var(--success-wash-strong, rgba(16, 185, 129, 0.14));
    color: var(--success-accent, #059669);
}

/* Sized via font-size because Material Symbols renders as a glyph. */
.form-success-icon .material-symbols-outlined {
    font-size: 2rem;
    line-height: 1;
}

.form-success h2,
.form-success h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* The heading takes focus on reveal (tabindex="-1") so a keyboard or
   screen-reader user lands on the confirmation rather than being left
   where the now-hidden submit button used to be. That focus is
   programmatic, so the default outline would be noise here - the panel
   itself is already unmistakable. */
.form-success h2:focus,
.form-success h3:focus {
    outline: none;
}

.form-success h2:focus-visible,
.form-success h3:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 4px;
}

.form-success p {
    margin: 0;
    max-width: 42ch;
    color: var(--text-secondary);
    line-height: 1.6;
}

.form-success-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

@media (max-width: 768px) {
    .form-success {
        padding: 2rem 1rem;
    }

    .form-success h2,
    .form-success h3 {
        font-size: 1.25rem;
    }

    /* Stacked full-width targets are easier to hit than a wrapped row. */
    .form-success-actions {
        flex-direction: column;
        align-self: stretch;
    }

    .form-success-actions > * {
        text-align: center;
    }
}

/* Breadcrumb trail on the use-case and integration pages. */
.breadcrumb {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.breadcrumb a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb a:hover {
    color: var(--primary);
}

.breadcrumb span {
    margin: 0 0.375rem;
}

/* Related-reading list at the foot of a content page. */
.related-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.related-links a {
    color: var(--primary);
    text-decoration: none;
}

.related-links a:hover {
    text-decoration: underline;
}