/* TWENY Limited public site — design system
 * Brand: navy (#0d1f42) primary, blue (#1a4fd6) secondary, gold (#c8a450) accent; Inter/Sora typography
 * Used by: KiboWeb public marketing pages (home, about, services,
 *          portfolio, contact, legal/*).
 * Published to: public/vendor/kiboweb/css/tweny.css via:
 *     php artisan kiboweb:publish
 *
 * Conventions:
 *  - All public-marketing classes are namespaced with `kw-` (KiboWeb)
 *    so they don't collide with admin/user-area styles.
 *  - Custom properties live on :root so they can be overridden per-page
 *    or per-tenant by a single declaration block.
 *  - Mobile-first: base rules target small screens, then layered up.
 *  - No JS dependencies for layout. Interactive niceties live in
 *    tweny.js (FAQ accordion, smooth-scroll, back-to-top, fade-in).
 */

/* ---------------------------------------------------------------------------
 * 1. Design tokens (CSS custom properties)
 * ------------------------------------------------------------------------ */
:root {
    /* Brand — navy primary, royal blue secondary, warm gold accent */
    --kw-primary:        #0d1f42;   /* Navy */
    --kw-primary-dark:   #0a1220;   /* Dark navy */
    --kw-primary-light:  #153370;   /* Mid-navy */
    --kw-accent:         #c8a450;   /* Gold — CTA / highlight */
    --kw-accent-dark:    #a68538;
    --kw-secondary:      #1a4fd6;   /* Royal blue — links / supporting */
    --kw-gradient:       linear-gradient(135deg, var(--kw-primary-dark) 0%, var(--kw-primary-light) 100%);
    --kw-gradient-dark:  linear-gradient(135deg, #0a1220 0%, #153370 100%);
    --kw-gradient-accent: linear-gradient(135deg, var(--kw-accent) 0%, var(--kw-accent-dark) 100%);

    /* Surfaces */
    --kw-surface:        #ffffff;
    --kw-surface-alt:    #f4f6fb;
    --kw-surface-muted:  #f7fafc;
    --kw-surface-tint:   #e8edf7;   /* navy-tint light */
    --kw-surface-dark:   #0d1f42;   /* navy */

    /* Text */
    --kw-text:           #2d3748;
    --kw-text-muted:     #4a5568;
    --kw-text-soft:      #718096;
    --kw-text-faint:     #a0aec0;
    --kw-text-on-brand:  #ffffff;

    /* Borders / dividers */
    --kw-border:         #e2e8f0;
    --kw-border-strong:  #cbd5e0;

    /* Status */
    --kw-success:        #38a169;
    --kw-success-soft:   #c6f6d5;
    --kw-warning:        #ed8936;
    --kw-warning-soft:   #fffaf0;
    --kw-danger:         #e53e3e;
    --kw-danger-soft:    #fff5f5;
    --kw-info:           #3182ce;
    --kw-info-soft:      #bee3f8;

    /* Typography */
    --kw-font-body:      'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --kw-font-heading:   'Sora', 'Inter', system-ui, sans-serif;

    /* Type scale (responsive via clamp) */
    --kw-fs-h1:          clamp(2rem, 1.4rem + 3vw, 3.5rem);
    --kw-fs-h2:          clamp(1.6rem, 1.2rem + 2vw, 2.6rem);
    --kw-fs-h3:          clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
    --kw-fs-h4:          1.25rem;
    --kw-fs-lead:        clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
    --kw-fs-body:        1rem;
    --kw-fs-small:       0.875rem;

    /* Spacing scale */
    --kw-space-1:        0.25rem;
    --kw-space-2:        0.5rem;
    --kw-space-3:        0.75rem;
    --kw-space-4:        1rem;
    --kw-space-5:        1.5rem;
    --kw-space-6:        2rem;
    --kw-space-7:        3rem;
    --kw-space-8:        4rem;
    --kw-space-9:        6rem;

    /* Radius */
    --kw-radius-sm:      4px;
    --kw-radius:         8px;
    --kw-radius-lg:      12px;
    --kw-radius-xl:      20px;
    --kw-radius-pill:    999px;

    /* Shadows */
    --kw-shadow-sm:      0 2px 6px rgba(0, 0, 0, 0.06);
    --kw-shadow:         0 8px 20px rgba(0, 0, 0, 0.08);
    --kw-shadow-lg:      0 16px 40px rgba(0, 0, 0, 0.12);
    --kw-shadow-brand:   0 8px 20px rgba(13, 31, 66, 0.20);

    /* Layout */
    --kw-container-max:  1200px;
    --kw-container-px:   clamp(1rem, 4vw, 2rem);
    --kw-section-py:     clamp(3rem, 5vw, 5rem);

    /* Motion */
    --kw-ease:           cubic-bezier(0.4, 0, 0.2, 1);
    --kw-dur-fast:       150ms;
    --kw-dur:            300ms;
}

/* ---------------------------------------------------------------------------
 * 2. Resets / base typography (scoped to .kw-* contexts)
 * ------------------------------------------------------------------------ */
html { scroll-behavior: smooth; }

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

body {
    font-family: var(--kw-font-body);
    color: var(--kw-text);
    line-height: 1.6;
}

/* Scope heading font-family to public-marketing surfaces. We do NOT restyle
   global h1-h6 (the admin/user areas keep their own typography).
   IMPORTANT: only set `color` on light-background sections (.kw-section).
   Hero, page header, and dark/brand sections inherit white from their
   container so they don't render as dark-on-dark. */
.kw-section h1, .kw-section h2, .kw-section h3,
.kw-section h4, .kw-section h5, .kw-section h6,
.kw-hero h1, .kw-hero h2,
.kw-page-header h1, .kw-page-header h2 {
    font-family: var(--kw-font-heading);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

/* Light-surface heading color (does NOT cascade into --dark / --brand) */
.kw-section h1, .kw-section h2, .kw-section h3,
.kw-section h4, .kw-section h5, .kw-section h6 {
    color: var(--kw-text);
}

/* Dark/brand surfaces — force white headings */
.kw-section--dark h1, .kw-section--dark h2, .kw-section--dark h3,
.kw-section--brand h1, .kw-section--brand h2, .kw-section--brand h3,
.kw-section--dark .kw-section-head h2,
.kw-section--brand .kw-section-head h2,
.kw-hero h1, .kw-hero h2,
.kw-page-header h1, .kw-page-header h2 {
    color: var(--kw-text-on-brand);
}

/* ---------------------------------------------------------------------------
 * 3. Layout primitives
 * ------------------------------------------------------------------------ */
.kw-section {
    padding: var(--kw-section-py) 0;
    background: var(--kw-surface);
    /* `isolation: isolate` creates a new stacking context so a section's
       inner elements (e.g. .kw-section-head) cannot escape its visual
       boundary regardless of preceding hero/page-header z-index quirks. */
    position: relative;
    z-index: 0;
    isolation: isolate;
}

.kw-section--alt    { background: var(--kw-surface-alt); }
.kw-section--muted  { background: var(--kw-surface-muted); }
.kw-section--tint   { background: var(--kw-surface-tint); }
.kw-section--dark   { background: var(--kw-gradient-dark); color: var(--kw-text-on-brand); }
.kw-section--brand  { background: var(--kw-gradient); color: var(--kw-text-on-brand); }

.kw-container {
    max-width: var(--kw-container-max);
    margin: 0 auto;
    padding-left: var(--kw-container-px);
    padding-right: var(--kw-container-px);
}

.kw-container--narrow { max-width: 820px; }
.kw-container--prose  { max-width: 720px; }

.kw-grid                { display: grid; gap: var(--kw-space-6); }
.kw-grid--2             { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.kw-grid--3             { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.kw-grid--4             { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.kw-grid--split         { grid-template-columns: 1fr 1fr; }

@media (max-width: 992px) {
    .kw-grid--split { grid-template-columns: 1fr; }
}

.kw-stack > * + *       { margin-top: var(--kw-space-4); }
.kw-text-center         { text-align: center; }
.kw-mb-0                { margin-bottom: 0; }
.kw-mt-6                { margin-top: var(--kw-space-6); }

/* Reusable section heading block */
.kw-section-head {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--kw-space-7);
}

.kw-section-head h2 {
    font-size: var(--kw-fs-h2);
    margin-bottom: var(--kw-space-3);
    color: var(--kw-text);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.kw-section-head__lead {
    font-size: var(--kw-fs-lead);
    color: var(--kw-text-soft);
    margin: 0;
    line-height: 1.6;
}

/* Eyebrow / pill label above section headings — refined: subtle gold tint,
   left-aligned dot, refined letter-spacing */
.kw-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(200, 164, 80, 0.12);
    color: var(--kw-accent-dark);
    padding: 0.35rem 0.85rem;
    border-radius: var(--kw-radius-pill);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: var(--kw-space-4);
    border: 1px solid rgba(200, 164, 80, 0.25);
}

.kw-eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--kw-accent);
    flex-shrink: 0;
}

/* Eyebrow on dark sections — flip to white-tinted */
.kw-section--dark .kw-eyebrow,
.kw-section--brand .kw-eyebrow,
.kw-hero .kw-eyebrow,
.kw-page-header .kw-eyebrow {
    background: rgba(255, 255, 255, 0.12);
    color: var(--kw-accent);
    border-color: rgba(255, 255, 255, 0.18);
}

/* ---------------------------------------------------------------------------
 * 4. Hero
 * ------------------------------------------------------------------------ */
.kw-hero {
    background: var(--kw-gradient);
    color: var(--kw-text-on-brand);
    padding: clamp(5rem, 10vw, 8.75rem) 0 clamp(3rem, 6vw, 6.25rem);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Subtle dot grid + ambient gold glow give the hero real depth instead of
   a flat navy block. ::before is the dot grid; ::after is the radial accent. */
.kw-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></svg>');
    opacity: 0.35;
    pointer-events: none;
}

.kw-hero::after {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 620px;
    height: 620px;
    background: radial-gradient(circle, rgba(200, 164, 80, 0.22) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.kw-hero__inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 var(--kw-container-px);
    position: relative;
    z-index: 1;
}

.kw-hero__title {
    font-size: var(--kw-fs-h1);
    margin: 0 0 var(--kw-space-5);
    font-weight: 700;
    line-height: 1.15;
    color: var(--kw-text-on-brand);
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
}

/* Highlight one word in the headline with the brand accent gold. Apply
   <span class="kw-accent-text"> around the key phrase in the H1 markup. */
.kw-accent-text {
    color: var(--kw-accent);
    background: linear-gradient(135deg, var(--kw-accent) 0%, #e6c97a 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

.kw-hero__tagline {
    font-size: var(--kw-fs-lead);
    margin: 0 0 var(--kw-space-3);
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
}

.kw-hero__sub {
    font-size: 1.05rem;
    margin: 0 auto var(--kw-space-7);
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.65;
    max-width: 680px;
}

.kw-hero__note {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin: var(--kw-space-5) 0 0;
    letter-spacing: 0.02em;
}

/* Compact hero variant — used on inner pages (about, faq, legal) */
.kw-page-header {
    background: var(--kw-gradient);
    color: var(--kw-text-on-brand);
    padding: clamp(4rem, 8vw, 7.5rem) 0 clamp(2.5rem, 4vw, 3.75rem);
    text-align: center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    z-index: 0;
}

.kw-page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></svg>');
    opacity: 0.35;
    pointer-events: none;
}

/* Ambient gold glow — same treatment as the hero so inner pages feel
   like part of the same family. */
.kw-page-header::after {
    content: '';
    position: absolute;
    top: -40%;
    right: -15%;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(200, 164, 80, 0.22) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.kw-page-header__inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 var(--kw-container-px);
    position: relative;
    z-index: 1;
}

.kw-page-header__title {
    font-size: var(--kw-fs-h1);
    margin: 0 0 var(--kw-space-3);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.18);
}

.kw-page-header__lead {
    font-size: var(--kw-fs-lead);
    color: rgba(255, 255, 255, 0.88);
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ── Hero stat grid (used on benefits/features inner-page headers) ────── */
.kw-hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--kw-space-4);
    max-width: 920px;
    margin: var(--kw-space-6) auto 0;
}

.kw-hero-stats__item {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--kw-radius-lg);
    padding: var(--kw-space-5) var(--kw-space-4);
    text-align: center;
    transition: transform var(--kw-dur) var(--kw-ease),
                background var(--kw-dur) var(--kw-ease),
                border-color var(--kw-dur) var(--kw-ease);
}

.kw-hero-stats__item:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(200, 164, 80, 0.4);
}

.kw-hero-stats__value {
    font-family: var(--kw-font-heading);
    font-size: clamp(1.8rem, 1rem + 1.8vw, 2.4rem);
    font-weight: 700;
    line-height: 1;
    color: var(--kw-accent);
    letter-spacing: -0.02em;
    margin: 0 0 var(--kw-space-2);
}

.kw-hero-stats__label {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.02em;
    font-weight: 500;
}

/* Quick "feature pill" row — icon + label, used on features hero */
.kw-hero-pills {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--kw-space-3);
    max-width: 820px;
    margin: var(--kw-space-6) auto 0;
}

.kw-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 1.15rem;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--kw-radius-pill);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background var(--kw-dur) var(--kw-ease),
                border-color var(--kw-dur) var(--kw-ease);
}

.kw-hero-pill:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(200, 164, 80, 0.5);
}

.kw-hero-pill > i,
.kw-hero-pill > span:first-child {
    color: var(--kw-accent);
    font-size: 1rem;
}

/* ---------------------------------------------------------------------------
 * 5. Buttons (Bootstrap is loaded; these are namespaced complements)
 * ------------------------------------------------------------------------ */
.kw-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2.25rem;
    border-radius: var(--kw-radius);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.2;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform var(--kw-dur) var(--kw-ease),
                background var(--kw-dur) var(--kw-ease),
                color var(--kw-dur) var(--kw-ease),
                box-shadow var(--kw-dur) var(--kw-ease);
}

.kw-cta--primary {
    background: var(--kw-accent);
    color: var(--kw-primary-dark);
    border-color: var(--kw-accent);
    box-shadow: 0 6px 20px rgba(200, 164, 80, 0.3);
}

.kw-cta--primary:hover {
    transform: translateY(-2px);
    background: var(--kw-accent-dark);
    border-color: var(--kw-accent-dark);
    color: var(--kw-primary-dark);
    box-shadow: 0 10px 28px rgba(200, 164, 80, 0.4);
}

.kw-cta--ghost {
    background: rgba(255, 255, 255, 0.04);
    color: var(--kw-text-on-brand);
    border-color: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(6px);
}

.kw-cta--ghost:hover {
    background: rgba(255, 255, 255, 0.95);
    color: var(--kw-primary);
    border-color: #fff;
    transform: translateY(-2px);
}

.kw-cta--solid {
    background: var(--kw-primary);
    color: var(--kw-text-on-brand);
    border-color: var(--kw-primary);
}

.kw-cta--solid:hover {
    background: var(--kw-primary-dark);
    border-color: var(--kw-primary-dark);
    color: var(--kw-text-on-brand);
    transform: translateY(-2px);
}

.kw-cta--lg {
    padding: 1.15rem 2.75rem;
    font-size: 1.15rem;
}

.kw-cta-row {
    display: flex;
    gap: var(--kw-space-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------
 * 6. Trust / stats bar
 * ------------------------------------------------------------------------ */
.kw-trust-bar {
    background: var(--kw-surface);
    padding: var(--kw-space-7) 0;
    text-align: center;
    border-bottom: 1px solid var(--kw-border);
}

.kw-trust-bar__label {
    color: var(--kw-text-soft);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 var(--kw-space-5);
}

.kw-trust-bar__stats {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: clamp(1rem, 4vw, 3rem);
    flex-wrap: wrap;
}

.kw-trust-bar__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 var(--kw-space-4);
    position: relative;
}

/* Vertical divider between stats — drawn on every stat except the first */
.kw-trust-bar__stat + .kw-trust-bar__stat::before {
    content: '';
    position: absolute;
    left: calc(clamp(1rem, 4vw, 3rem) * -0.5);
    top: 12%;
    height: 76%;
    width: 1px;
    background: var(--kw-border);
}

.kw-trust-bar__stat strong {
    font-size: clamp(2rem, 1.4rem + 1.6vw, 2.75rem);
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(135deg, var(--kw-primary) 0%, var(--kw-secondary) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: var(--kw-space-2);
    font-family: var(--kw-font-heading);
    letter-spacing: -0.02em;
}

.kw-trust-bar__stat span {
    color: var(--kw-text-soft);
    font-size: 0.85rem;
    font-weight: 500;
}

@media (max-width: 575px) {
    .kw-trust-bar__stat + .kw-trust-bar__stat::before { display: none; }
}

/* ---------------------------------------------------------------------------
 * 7. Feature / value cards
 * ------------------------------------------------------------------------ */
.kw-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--kw-space-5);
}

.kw-feature-card {
    text-align: left;
    padding: var(--kw-space-6);
    background: var(--kw-surface);
    border: 1px solid var(--kw-border);
    border-radius: var(--kw-radius-lg);
    transition: transform var(--kw-dur) var(--kw-ease),
                box-shadow var(--kw-dur) var(--kw-ease),
                border-color var(--kw-dur) var(--kw-ease);
    position: relative;
    overflow: hidden;
}

/* Gold corner accent — animates in on hover */
.kw-feature-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--kw-gradient-accent);
    transition: width var(--kw-dur) var(--kw-ease);
}

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

.kw-feature-card:hover::after { width: 100%; }

.kw-feature-card__icon {
    width: 56px;
    height: 56px;
    background: var(--kw-gradient);
    border-radius: var(--kw-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin: 0 0 var(--kw-space-5);
    box-shadow: var(--kw-shadow-brand);
    color: var(--kw-text-on-brand);
    position: relative;
}

/* Subtle gold dot in the corner of each feature icon for brand cohesion */
.kw-feature-card__icon::after {
    content: '';
    position: absolute;
    top: -3px;
    right: -3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--kw-accent);
    border: 2px solid var(--kw-surface);
}

.kw-feature-card h3 {
    font-size: 1.25rem;
    margin: 0 0 var(--kw-space-3);
    color: var(--kw-text);
    font-family: var(--kw-font-heading);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.kw-feature-card p {
    color: var(--kw-text-muted);
    line-height: 1.7;
    font-size: 0.95rem;
    margin: 0;
}

/* Detailed alternating feature row (features page) */
.kw-feature-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--kw-space-8);
    align-items: center;
    margin-bottom: var(--kw-space-9);
    padding-bottom: var(--kw-space-9);
    border-bottom: 2px solid var(--kw-border);
}

.kw-feature-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.kw-feature-row:nth-of-type(even) .kw-feature-row__text   { order: 2; }
.kw-feature-row:nth-of-type(even) .kw-feature-row__visual { order: 1; }

.kw-feature-row__text h3 {
    font-size: 1.8rem;
    margin: 0 0 var(--kw-space-4);
    color: var(--kw-text);
    display: flex;
    align-items: center;
    gap: var(--kw-space-4);
    font-weight: 700;
    font-family: var(--kw-font-heading);
}

.kw-feature-row__icon {
    width: 60px;
    height: 60px;
    background: var(--kw-gradient);
    border-radius: var(--kw-radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
    color: var(--kw-text-on-brand);
}

.kw-feature-row__text p {
    font-size: 1.05rem;
    color: var(--kw-text-muted);
    line-height: 1.75;
    margin: 0 0 var(--kw-space-5);
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

.kw-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.kw-feature-list li {
    padding: 0.65rem 0;
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    color: var(--kw-text-muted);
}

.kw-feature-list li::before {
    content: '';
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--kw-surface-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23008080'%3E%3Cpath d='M13.854 3.646a.5.5 0 010 .708l-7 7a.5.5 0 01-.708 0l-3.5-3.5a.5.5 0 11.708-.708L6.5 10.293l6.646-6.647a.5.5 0 01.708 0z'/%3E%3C/svg%3E") center / 12px no-repeat;
    margin-top: 0.15rem;
}

/* On dark hero-style feature blocks, swap to a translucent badge */
.kw-section--dark .kw-feature-list li {
    color: rgba(255, 255, 255, 0.92);
}

.kw-section--dark .kw-feature-list li::before {
    background: rgba(255, 255, 255, 0.2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M13.854 3.646a.5.5 0 010 .708l-7 7a.5.5 0 01-.708 0l-3.5-3.5a.5.5 0 11.708-.708L6.5 10.293l6.646-6.647a.5.5 0 01.708 0z'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.kw-feature-row__visual {
    background: var(--kw-surface-alt);
    border-radius: var(--kw-radius-lg);
    padding: var(--kw-space-6);
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Decorative gold corner accent for visual interest on otherwise empty
   feature-row visuals. Renders behind the content. */
.kw-feature-row__visual::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -20%;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(200, 164, 80, 0.18) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.kw-feature-row__visual > * { position: relative; z-index: 1; }

/* Centered icon-only fallback visual — large gradient icon chip with a
   gold ring. Used when there's no specific mockup to show. */
.kw-feature-row__visual-icon {
    width: 130px;
    height: 130px;
    border-radius: var(--kw-radius-xl);
    background: var(--kw-gradient);
    color: var(--kw-text-on-brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
    box-shadow: var(--kw-shadow-brand);
    position: relative;
}

.kw-feature-row__visual-icon::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: var(--kw-radius-xl);
    border: 2px dashed rgba(200, 164, 80, 0.45);
    pointer-events: none;
}

/* ── Mini dashboard mockup (used inside .kw-feature-row__visual) ──────── */
.kw-mock {
    background: #fff;
    border-radius: var(--kw-radius-lg);
    border: 1px solid var(--kw-border);
    box-shadow: var(--kw-shadow);
    padding: var(--kw-space-5);
    width: 100%;
    max-width: 460px;
}

.kw-mock__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--kw-space-4);
}

.kw-mock__title {
    font-family: var(--kw-font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--kw-text);
    margin: 0;
}

.kw-mock__dot-row { display: inline-flex; gap: 5px; }
.kw-mock__dot-row span {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--kw-border-strong);
}
.kw-mock__dot-row span:nth-child(1) { background: #fc8181; }
.kw-mock__dot-row span:nth-child(2) { background: #f5d04f; }
.kw-mock__dot-row span:nth-child(3) { background: #48bb78; }

.kw-mock__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--kw-space-3);
    margin-bottom: var(--kw-space-4);
}

.kw-mock__tile {
    background: var(--kw-surface-alt);
    border: 1px solid var(--kw-border);
    border-radius: var(--kw-radius);
    padding: var(--kw-space-3);
}

.kw-mock__tile-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--kw-text-soft);
    margin-bottom: 3px;
    font-weight: 600;
}

.kw-mock__tile-value {
    font-family: var(--kw-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--kw-text);
    line-height: 1;
}

.kw-mock__tile--danger  { border-color: rgba(229, 62, 62, 0.28); background: var(--kw-danger-soft); }
.kw-mock__tile--success { border-color: rgba(56, 161, 105, 0.28); background: #f0fff4; }
.kw-mock__tile--warning { border-color: rgba(237, 137, 54, 0.32); background: var(--kw-warning-soft); }
.kw-mock__tile--info    { border-color: rgba(49, 130, 206, 0.28); background: #ebf8ff; }

.kw-mock__tile--danger  .kw-mock__tile-value { color: var(--kw-danger); }
.kw-mock__tile--success .kw-mock__tile-value { color: var(--kw-success); }
.kw-mock__tile--warning .kw-mock__tile-value { color: var(--kw-warning); }
.kw-mock__tile--info    .kw-mock__tile-value { color: var(--kw-info); }

.kw-mock__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0;
    border-top: 1px solid var(--kw-border);
    font-size: 0.85rem;
    color: var(--kw-text-muted);
}

.kw-mock__row:first-child { border-top: 0; }

.kw-mock__row-name {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.kw-mock__row-name::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--kw-accent);
    flex-shrink: 0;
}

.kw-mock__row--overdue  .kw-mock__row-name::before { background: var(--kw-danger); }
.kw-mock__row--soon     .kw-mock__row-name::before { background: var(--kw-warning); }
.kw-mock__row--ok       .kw-mock__row-name::before { background: var(--kw-success); }

.kw-mock__chip {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: var(--kw-radius-pill);
    background: var(--kw-surface-tint);
    color: var(--kw-primary);
}

.kw-mock__chip--danger  { background: var(--kw-danger-soft);  color: var(--kw-danger); }
.kw-mock__chip--warning { background: var(--kw-warning-soft); color: #b35313; }
.kw-mock__chip--success { background: #f0fff4;                color: var(--kw-success); }

@media (max-width: 992px) {
    .kw-feature-row {
        grid-template-columns: 1fr;
        gap: var(--kw-space-5);
        margin-bottom: var(--kw-space-8);
        padding-bottom: var(--kw-space-8);
    }
    .kw-feature-row:nth-of-type(even) .kw-feature-row__text   { order: 1; }
    .kw-feature-row:nth-of-type(even) .kw-feature-row__visual { order: 2; }
}

/* ---------------------------------------------------------------------------
 * 8. Stat cards (used in benefits/landing)
 * ------------------------------------------------------------------------ */
.kw-stat-card {
    background: var(--kw-surface);
    border-radius: var(--kw-radius-lg);
    padding: var(--kw-space-6);
    border: 2px solid var(--kw-border);
    transition: transform var(--kw-dur) var(--kw-ease),
                border-color var(--kw-dur) var(--kw-ease);
    text-align: center;
}

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

.kw-stat-card__value {
    font-size: clamp(2rem, 1rem + 2.5vw, 2.75rem);
    font-weight: 700;
    color: var(--kw-primary);
    font-family: var(--kw-font-heading);
    line-height: 1;
}

.kw-stat-card__label {
    font-size: 1rem;
    color: var(--kw-text-soft);
    margin-top: 0.5rem;
}

/* ---------------------------------------------------------------------------
 * 9. Pricing cards
 * ------------------------------------------------------------------------ */
.kw-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--kw-space-6);
    align-items: stretch;
}

.kw-pricing-card {
    background: var(--kw-surface);
    border: 2px solid var(--kw-border);
    border-radius: var(--kw-radius-lg);
    padding: var(--kw-space-7) var(--kw-space-6);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform var(--kw-dur) var(--kw-ease),
                box-shadow var(--kw-dur) var(--kw-ease);
}

.kw-pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--kw-shadow);
}

.kw-pricing-card--featured {
    border-color: var(--kw-primary);
    box-shadow: var(--kw-shadow-brand);
    transform: translateY(-8px);
}

.kw-pricing-card--featured:hover {
    transform: translateY(-12px);
}

.kw-pricing-card__badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--kw-gradient);
    color: var(--kw-text-on-brand);
    padding: 0.3rem 1rem;
    border-radius: var(--kw-radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: var(--kw-shadow-brand);
}

.kw-pricing-card__name {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--kw-text);
    margin: 0 0 var(--kw-space-2);
    font-family: var(--kw-font-heading);
}

.kw-pricing-card__desc {
    font-size: 0.95rem;
    color: var(--kw-text-soft);
    margin: 0 0 var(--kw-space-5);
    min-height: 2.5em;
}

.kw-pricing-card__price {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    margin-bottom: var(--kw-space-5);
}

.kw-pricing-card__amount {
    font-size: clamp(2.25rem, 1.5rem + 2vw, 3rem);
    font-weight: 700;
    color: var(--kw-text);
    font-family: var(--kw-font-heading);
    line-height: 1;
}

.kw-pricing-card__period {
    color: var(--kw-text-soft);
    font-size: 1rem;
}

.kw-pricing-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--kw-space-6);
    flex-grow: 1;
}

.kw-pricing-card__features li {
    padding: 0.5rem 0;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    color: var(--kw-text-muted);
    font-size: 0.95rem;
    border-bottom: 1px solid var(--kw-border);
}

.kw-pricing-card__features li:last-child { border-bottom: none; }

.kw-pricing-card__features li::before {
    content: '✓';
    color: var(--kw-success);
    font-weight: 700;
    flex-shrink: 0;
}

.kw-pricing-card__features li.is-disabled {
    color: var(--kw-text-faint);
}

.kw-pricing-card__features li.is-disabled::before {
    content: '✗';
    color: var(--kw-danger);
}

/* ---------------------------------------------------------------------------
 * 10. Testimonial card
 * ------------------------------------------------------------------------ */
.kw-testimonial {
    background: var(--kw-surface);
    padding: var(--kw-space-6);
    border-radius: var(--kw-radius-lg);
    border-left: 4px solid var(--kw-primary);
    box-shadow: var(--kw-shadow-sm);
}

.kw-testimonial__quote {
    font-size: 1.1rem;
    color: var(--kw-text-muted);
    line-height: 1.7;
    font-style: italic;
    margin: 0 0 var(--kw-space-4);
}

.kw-testimonial__author {
    display: flex;
    align-items: center;
    gap: var(--kw-space-3);
}

.kw-testimonial__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--kw-gradient);
    color: var(--kw-text-on-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.kw-testimonial__name { font-weight: 600; color: var(--kw-text); }
.kw-testimonial__role { font-size: 0.85rem; color: var(--kw-text-soft); }

/* ---------------------------------------------------------------------------
 * 11. FAQ accordion (toggled by tweny.js — works without JS via <details>)
 * ------------------------------------------------------------------------ */
.kw-faq {
    max-width: 820px;
    margin: 0 auto;
}

.kw-faq__group {
    margin-bottom: var(--kw-space-7);
}

.kw-faq__group-title {
    font-size: 0.78rem;
    color: var(--kw-text-soft);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 var(--kw-space-4);
    padding-bottom: var(--kw-space-3);
    font-family: var(--kw-font-body);
    display: flex;
    align-items: center;
    gap: var(--kw-space-3);
}

.kw-faq__group-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--kw-border) 0%, transparent 100%);
}

.kw-faq-item {
    background: var(--kw-surface);
    border: 1px solid var(--kw-border);
    border-radius: var(--kw-radius);
    margin-bottom: var(--kw-space-3);
    overflow: hidden;
    transition: border-color var(--kw-dur) var(--kw-ease),
                box-shadow var(--kw-dur) var(--kw-ease),
                background var(--kw-dur) var(--kw-ease);
}

.kw-faq-item:hover {
    border-color: var(--kw-border-strong);
    background: var(--kw-surface-alt);
}

.kw-faq-item[open] {
    border-color: var(--kw-primary);
    box-shadow: var(--kw-shadow-sm);
    background: var(--kw-surface);
}

.kw-faq-item__q {
    list-style: none;
    cursor: pointer;
    padding: var(--kw-space-4) var(--kw-space-5);
    font-weight: 600;
    color: var(--kw-text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--kw-space-3);
    user-select: none;
    font-size: 1rem;
    transition: color var(--kw-dur) var(--kw-ease);
}

.kw-faq-item:hover .kw-faq-item__q,
.kw-faq-item[open] .kw-faq-item__q {
    color: var(--kw-primary-dark);
}

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

.kw-faq-item__q::after {
    content: '';
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--kw-surface-tint)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230d1f42'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 01.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z'/%3E%3C/svg%3E")
        center / 12px no-repeat;
    transition: transform var(--kw-dur) var(--kw-ease),
                background-color var(--kw-dur) var(--kw-ease);
    flex-shrink: 0;
}

.kw-faq-item[open] .kw-faq-item__q::after {
    transform: rotate(180deg);
    background-color: var(--kw-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 01.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z'/%3E%3C/svg%3E");
}

.kw-faq-item__a {
    padding: 0 var(--kw-space-5) var(--kw-space-5);
    color: var(--kw-text-muted);
    line-height: 1.75;
    font-size: 0.95rem;
}

.kw-faq-item__a a {
    color: var(--kw-secondary);
    text-decoration: underline;
}
.kw-faq-item__a a:hover { color: var(--kw-primary); }

/* ---------------------------------------------------------------------------
 * 12. CTA banner (final-section call to action)
 * ------------------------------------------------------------------------ */
.kw-cta-banner {
    background: var(--kw-gradient);
    color: var(--kw-text-on-brand);
    padding: var(--kw-section-py) var(--kw-container-px);
    text-align: center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.kw-cta-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></svg>');
    opacity: 0.35;
    pointer-events: none;
}

/* Twin gold glows for visual depth */
.kw-cta-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 30%, rgba(200, 164, 80, 0.20) 0%, transparent 40%),
        radial-gradient(circle at 85% 70%, rgba(200, 164, 80, 0.15) 0%, transparent 45%);
    pointer-events: none;
    z-index: 0;
}

.kw-cta-banner > * { position: relative; z-index: 1; }

.kw-cta-banner__title {
    font-size: var(--kw-fs-h2);
    margin: 0 auto var(--kw-space-3);
    font-weight: 700;
    color: #fff;
    font-family: var(--kw-font-heading);
    max-width: 720px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.kw-cta-banner__lead {
    font-size: var(--kw-fs-lead);
    margin: 0 auto var(--kw-space-7);
    color: rgba(255, 255, 255, 0.86);
    max-width: 620px;
    line-height: 1.6;
}

.kw-cta-banner__features {
    display: flex;
    justify-content: center;
    gap: clamp(0.8rem, 3vw, 2rem);
    flex-wrap: wrap;
    margin-top: var(--kw-space-6);
}

.kw-cta-banner__features span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 500;
}

.kw-cta-banner__features span::before {
    content: '';
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(200, 164, 80, 0.25)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23c8a450'%3E%3Cpath d='M13.854 3.646a.5.5 0 010 .708l-7 7a.5.5 0 01-.708 0l-3.5-3.5a.5.5 0 11.708-.708L6.5 10.293l6.646-6.647a.5.5 0 01.708 0z'/%3E%3C/svg%3E")
        center / 10px no-repeat;
    flex-shrink: 0;
}

@media (max-width: 576px) {
    .kw-cta-banner__features {
        flex-direction: column;
        align-items: center;
        gap: 0.55rem;
    }
}

/* ---------------------------------------------------------------------------
 * 13. Legal / long-form prose
 * ------------------------------------------------------------------------ */
.kw-prose {
    max-width: 760px;
    margin: 0 auto;
    color: var(--kw-text-muted);
    line-height: 1.75;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

.kw-prose h2 {
    font-size: 1.7rem;
    margin: var(--kw-space-7) 0 var(--kw-space-4);
    color: var(--kw-text);
    scroll-margin-top: 6rem;
    font-family: var(--kw-font-heading);
    text-align: left;
}

.kw-prose h3 {
    font-size: 1.25rem;
    margin: var(--kw-space-5) 0 var(--kw-space-3);
    color: var(--kw-text);
    font-family: var(--kw-font-heading);
    text-align: left;
}

.kw-prose p { margin: 0 0 var(--kw-space-4); }

.kw-prose ul, .kw-prose ol {
    margin: 0 0 var(--kw-space-4);
    padding-left: 1.5rem;
}

.kw-prose li { margin-bottom: 0.5rem; }

.kw-prose a {
    color: var(--kw-primary);
    text-decoration: underline;
}

.kw-prose a:hover { color: var(--kw-primary-dark); }

.kw-toc {
    background: var(--kw-surface-alt);
    border-radius: var(--kw-radius);
    padding: var(--kw-space-5);
    margin-bottom: var(--kw-space-7);
}

.kw-toc__title {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--kw-text-soft);
    margin: 0 0 var(--kw-space-3);
    font-weight: 700;
}

.kw-toc ol {
    margin: 0;
    padding-left: 1.25rem;
    columns: 2;
    column-gap: var(--kw-space-5);
}

.kw-toc li { margin-bottom: 0.4rem; }

@media (max-width: 576px) {
    .kw-toc ol { columns: 1; }
}

.kw-meta {
    color: var(--kw-text-soft);
    font-size: 0.9rem;
    margin-bottom: var(--kw-space-5);
}

/* ---------------------------------------------------------------------------
 * 14. Contact page layout
 * ------------------------------------------------------------------------ */
.kw-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--kw-space-7);
    align-items: start;
}

@media (max-width: 992px) {
    .kw-contact-grid { grid-template-columns: 1fr; }
}

.kw-contact-info {
    background: var(--kw-surface-alt);
    border-radius: var(--kw-radius-lg);
    padding: var(--kw-space-6);
}

.kw-contact-info h3 {
    font-size: 1.2rem;
    color: var(--kw-text);
    margin: 0 0 var(--kw-space-4);
    font-family: var(--kw-font-heading);
}

.kw-contact-info ul {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--kw-space-5);
}

.kw-contact-info li {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.6rem 0;
    color: var(--kw-text-muted);
    font-size: 0.95rem;
}

.kw-contact-info li i { color: var(--kw-primary); font-size: 1.15rem; flex-shrink: 0; }

.kw-contact-info a { color: var(--kw-text-muted); text-decoration: none; }
.kw-contact-info a:hover { color: var(--kw-primary); }

/* ---------------------------------------------------------------------------
 * 15. Values cards (about page)
 * ------------------------------------------------------------------------ */
.kw-value-card {
    padding: var(--kw-space-6);
    background: var(--kw-surface);
    border: 1px solid var(--kw-border);
    border-radius: var(--kw-radius-lg);
    transition: transform var(--kw-dur) var(--kw-ease),
                border-color var(--kw-dur) var(--kw-ease),
                box-shadow var(--kw-dur) var(--kw-ease);
    position: relative;
    overflow: hidden;
}

.kw-value-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--kw-gradient-accent);
    transition: width var(--kw-dur) var(--kw-ease);
}

.kw-value-card:hover {
    transform: translateY(-4px);
    border-color: var(--kw-border-strong);
    box-shadow: var(--kw-shadow);
}

.kw-value-card:hover::after { width: 100%; }

.kw-value-card__icon {
    width: 52px;
    height: 52px;
    background: var(--kw-gradient);
    color: var(--kw-text-on-brand);
    border-radius: var(--kw-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: var(--kw-space-4);
    box-shadow: var(--kw-shadow-brand);
    position: relative;
}

.kw-value-card__icon::after {
    content: '';
    position: absolute;
    top: -3px;
    right: -3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--kw-accent);
    border: 2px solid var(--kw-surface);
}

.kw-value-card h3 {
    font-size: 1.2rem;
    margin: 0 0 var(--kw-space-3);
    color: var(--kw-text);
    font-family: var(--kw-font-heading);
    font-weight: 700;
    letter-spacing: -0.01em;
}

.kw-value-card p {
    margin: 0;
    color: var(--kw-text-muted);
    line-height: 1.7;
    font-size: 0.95rem;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
}

/* ---------------------------------------------------------------------------
 * 16. Comparison table (benefits page)
 * ------------------------------------------------------------------------ */
.kw-compare {
    overflow-x: auto;
    background: var(--kw-surface);
    border: 1px solid var(--kw-border);
    border-radius: var(--kw-radius-lg);
    box-shadow: var(--kw-shadow-sm);
}

.kw-compare table {
    width: 100%;
    border-collapse: collapse;
    min-width: 620px;
}

.kw-compare th,
.kw-compare td {
    padding: var(--kw-space-4) var(--kw-space-5);
    text-align: center;
    border-bottom: 1px solid var(--kw-border);
    font-size: 0.95rem;
}

.kw-compare tbody th[scope="row"] {
    text-align: left;
    color: var(--kw-text);
    font-weight: 600;
    font-size: 0.95rem;
    background: var(--kw-surface-alt);
}

.kw-compare thead th {
    background: var(--kw-surface-alt);
    color: var(--kw-text-soft);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: var(--kw-space-5);
    border-bottom: 2px solid var(--kw-border);
}

.kw-compare thead th:first-child { text-align: left; }

/* Highlight the featured column — drawn via :nth-child(4) since the layout
   is fixed: Capability | Option A | Option B | TWENY. */
.kw-compare thead th:nth-child(4) {
    background: var(--kw-gradient);
    color: var(--kw-text-on-brand);
    border-bottom-color: var(--kw-primary-dark);
    position: relative;
}

.kw-compare thead th:nth-child(4)::after {
    content: '★';
    position: absolute;
    top: 0.4rem;
    right: 0.6rem;
    font-size: 0.8rem;
    color: var(--kw-accent);
}

.kw-compare tbody td:nth-child(4) {
    background: rgba(200, 164, 80, 0.06);
    border-left: 1px solid rgba(200, 164, 80, 0.18);
    border-right: 1px solid rgba(200, 164, 80, 0.18);
}

.kw-compare tbody tr:last-child td:nth-child(4) {
    border-bottom: 1px solid rgba(200, 164, 80, 0.25);
}

.kw-compare tbody tr:hover td:not(:nth-child(4)) {
    background: var(--kw-surface-alt);
}

.kw-compare tbody tr:hover th[scope="row"] {
    background: var(--kw-surface-tint);
    color: var(--kw-primary);
}

/* Replace text glyphs with proper iconography */
.kw-compare td.is-yes,
.kw-compare td.is-no {
    color: transparent;
    position: relative;
    font-size: 0; /* hide raw "✓"/"✗" text */
    font-weight: 700;
}

.kw-compare td.is-yes::before,
.kw-compare td.is-no::before {
    content: '';
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px;
}

.kw-compare td.is-yes::before {
    background-color: rgba(56, 161, 105, 0.16);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2338a169'%3E%3Cpath d='M13.854 3.646a.5.5 0 010 .708l-7 7a.5.5 0 01-.708 0l-3.5-3.5a.5.5 0 11.708-.708L6.5 10.293l6.646-6.647a.5.5 0 01.708 0z'/%3E%3C/svg%3E");
}

.kw-compare td.is-no::before {
    background-color: rgba(229, 62, 62, 0.16);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e53e3e'%3E%3Cpath d='M4.646 4.646a.5.5 0 01.708 0L8 7.293l2.646-2.647a.5.5 0 01.708.708L8.707 8l2.647 2.646a.5.5 0 01-.708.708L8 8.707l-2.646 2.647a.5.5 0 01-.708-.708L7.293 8 4.646 5.354a.5.5 0 010-.708z'/%3E%3C/svg%3E");
}

/* "manual" / "partial" string variants — readable, italicised, no icon. */
.kw-compare td.is-partial {
    color: var(--kw-text-soft);
    font-size: 0.85rem;
    font-style: italic;
    font-weight: 500;
}

/* ---------------------------------------------------------------------------
 * 17. Back-to-top button (template ships #scrollTop)
 * ------------------------------------------------------------------------ */
#scrollTop {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--kw-primary);
    color: var(--kw-text-on-brand);
    box-shadow: var(--kw-shadow);
    cursor: pointer;
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--kw-dur) var(--kw-ease),
                visibility var(--kw-dur) var(--kw-ease),
                transform var(--kw-dur) var(--kw-ease),
                background var(--kw-dur) var(--kw-ease);
}

#scrollTop.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#scrollTop:hover { background: var(--kw-primary-dark); }

/* ---------------------------------------------------------------------------
 * 18. Animation utility
 * ------------------------------------------------------------------------ */
@keyframes kw-fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.kw-fade-in {
    animation: kw-fade-in var(--kw-dur) var(--kw-ease) both;
}

.kw-fade-in--delay-1 { animation-delay: 100ms; }
.kw-fade-in--delay-2 { animation-delay: 200ms; }
.kw-fade-in--delay-3 { animation-delay: 300ms; }

/* Used by tweny.js IntersectionObserver to reveal on scroll.
 * Gated behind `.kw-js` (added by tweny.js on load) so that if the script
 * never runs, content stays fully visible instead of hidden at opacity 0. */
.kw-js .kw-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 600ms var(--kw-ease), transform 600ms var(--kw-ease);
}

.kw-js .kw-reveal.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered children reveal — apply .kw-reveal--stagger to a container and
 * .kw-reveal to it; direct children fade in sequentially once revealed. */
.kw-js .kw-reveal--stagger.is-revealed > * {
    animation: kw-fade-in 600ms var(--kw-ease) both;
}
.kw-js .kw-reveal--stagger.is-revealed > *:nth-child(2) { animation-delay: 80ms; }
.kw-js .kw-reveal--stagger.is-revealed > *:nth-child(3) { animation-delay: 160ms; }
.kw-js .kw-reveal--stagger.is-revealed > *:nth-child(4) { animation-delay: 240ms; }
.kw-js .kw-reveal--stagger.is-revealed > *:nth-child(5) { animation-delay: 320ms; }
.kw-js .kw-reveal--stagger.is-revealed > *:nth-child(6) { animation-delay: 400ms; }

/* ---------------------------------------------------------------------------
 * 19. Accessibility — visible focus rings on keyboard navigation
 * ------------------------------------------------------------------------ */
.kw-cta:focus-visible,
.kw-faq-item__q:focus-visible,
.kw-contact-info a:focus-visible,
.kw-prose a:focus-visible,
#scrollTop:focus-visible {
    outline: 3px solid var(--kw-primary);
    outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * 20. Responsive breakpoints (mobile-first refinements)
 * ------------------------------------------------------------------------ */
@media (min-width: 576px) {
    .kw-hero__sub { font-size: 1.1rem; }
}

@media (min-width: 768px) {
    .kw-feature-grid { gap: var(--kw-space-6); }
}

@media (min-width: 992px) {
    .kw-section { padding: clamp(4rem, 6vw, 6rem) 0; }
}

@media (min-width: 1200px) {
    .kw-container { padding-left: 0; padding-right: 0; }
}

/* Tighten hero on mobile */
@media (max-width: 576px) {
    .kw-hero { padding: 5rem 0 3rem; }
    .kw-cta-row { gap: 0.75rem; }
    .kw-cta { padding: 0.85rem 1.6rem; font-size: 1rem; }
}

/* ============================================================================
 * STITCH COMPONENTS — shared utilities for the Stitch-style marketing pages.
 * These are loaded site-wide via tarehe.css; partial-specific styles still
 * live in @push('styles') blocks per partial.
 * ============================================================================ */

/* Eyebrow pill — small "category" tag above headlines */
.kw-stitch-pill {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    background: var(--kw-surface-tint);
    color: var(--kw-primary);
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 1.25rem;
}

/* Buttons — primary navy, ghost white, white, outline-white */
.kw-stitch-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.85rem 1.75rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease;
    border: 1px solid transparent;
    cursor: pointer;
}
.kw-stitch-btn:hover { transform: translateY(-1px); }
.kw-stitch-btn:active { transform: translateY(0); }

.kw-stitch-btn--primary { background: var(--kw-primary); color: #fff; box-shadow: 0 4px 12px rgba(13, 31, 66, 0.18); }
.kw-stitch-btn--primary:hover { background: var(--kw-primary-light); color: #fff; box-shadow: 0 6px 16px rgba(13, 31, 66, 0.25); }

.kw-stitch-btn--ghost { background: #fff; color: var(--kw-primary); border-color: var(--kw-border); }
.kw-stitch-btn--ghost:hover { background: var(--kw-surface-alt); color: var(--kw-primary); }

.kw-stitch-btn--white { background: #fff; color: var(--kw-primary); }
.kw-stitch-btn--white:hover { background: var(--kw-surface-alt); color: var(--kw-primary); }

.kw-stitch-btn--outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.kw-stitch-btn--outline-white:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* Centered section heading (eyebrow + Sora h2 + lead) */
.kw-stitch-section-head { text-align: center; max-width: 720px; margin: 0 auto; }
.kw-stitch-section-head__title {
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
    font-weight: 700;
    color: var(--kw-primary);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 1rem 0 0.75rem;
}
.kw-stitch-section-head__lead {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--kw-text-muted);
    margin: 0;
}

/* Feature card (used in value-propositions, benefits/statistics, etc.) */
.kw-stitch-feature-card {
    background: #fff;
    border: 1px solid var(--kw-border);
    border-radius: 0.875rem;
    padding: 1.75rem;
    height: 100%;
    box-shadow: 0 1px 3px rgba(13, 31, 66, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.kw-stitch-feature-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px -5px rgba(13, 31, 66, 0.10), 0 4px 10px -5px rgba(13, 31, 66, 0.06);
    border-color: var(--kw-border-strong);
}

.kw-stitch-feature-card__icon {
    width: 48px; height: 48px;
    border-radius: 0.625rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 1.25rem;
    transition: transform 0.2s ease;
}
.kw-stitch-feature-card:hover .kw-stitch-feature-card__icon { transform: scale(1.08); }
.kw-stitch-feature-card__icon--primary   { background: var(--kw-surface-tint); color: var(--kw-primary); }
.kw-stitch-feature-card__icon--secondary { background: #dae2fd;                color: var(--kw-secondary); }
.kw-stitch-feature-card__icon--accent    { background: #f6ecd1;                color: var(--kw-accent-dark); }

.kw-stitch-feature-card__title {
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--kw-primary);
    line-height: 1.3;
    margin: 0 0 0.5rem;
}
.kw-stitch-feature-card__body {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--kw-text-muted);
    margin: 0;
}

/* Page hero (used for features, benefits, about, faq, pricing) — Stitch flat
   surface with subtle radial glow, centered title + lead, optional pills/stats below */
.kw-stitch-page-hero {
    padding: 5rem 0 3rem;
    background: var(--kw-surface);
    position: relative;
    overflow: hidden;
    text-align: center;
}
.kw-stitch-page-hero::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(700px 300px at 50% 0%, rgba(26, 79, 214, 0.06) 0%, transparent 60%),
        radial-gradient(500px 300px at 50% 100%, rgba(200, 164, 80, 0.06) 0%, transparent 60%);
}
.kw-stitch-page-hero > .container { position: relative; z-index: 1; }
.kw-stitch-page-hero__title {
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: clamp(2rem, 1.4rem + 2.5vw, 3rem);
    font-weight: 700;
    color: var(--kw-primary);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
}
.kw-stitch-page-hero__lead {
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
    line-height: 1.6;
    color: var(--kw-text-muted);
    max-width: 640px;
    margin: 0 auto;
}
.kw-stitch-page-hero__accent { color: var(--kw-secondary); }

/* Pills row (used in features hero etc.) */
.kw-stitch-pill-row {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem;
    margin-top: 1.75rem;
}
.kw-stitch-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    background: #fff;
    border: 1px solid var(--kw-border);
    border-radius: 9999px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--kw-text);
}
.kw-stitch-chip i { color: var(--kw-secondary); }

/* Section padding helpers */
.kw-stitch-section      { padding: 5rem 0; background: #fff; }
.kw-stitch-section--alt { padding: 5rem 0; background: var(--kw-surface); }

@media (max-width: 768px) {
    .kw-stitch-page-hero { padding: 3.5rem 0 2.5rem; }
    .kw-stitch-section, .kw-stitch-section--alt { padding: 3.5rem 0; }
}

/* ============================================================================
 * CONSOLIDATED PUBLIC COMPONENTS
 * Shared classes promoted out of per-page @push('styles') blocks so they are
 * defined once (cached, consistent) instead of duplicated across pages.
 * ============================================================================ */

/* Eyebrow — dark-section variant (white-tinted) */
.kw-eyebrow--light {
    background: rgba(255, 255, 255, 0.12);
    color: var(--kw-accent);
    border-color: rgba(255, 255, 255, 0.18);
}

/* Dark page hero — Services, Portfolio, Contact */
.kw-page-hero {
    padding: clamp(3rem, 2rem + 4vw, 5rem) 0 clamp(2.5rem, 2rem + 3vw, 4rem);
    background: var(--kw-primary); color: #fff; position: relative; overflow: hidden; text-align: center;
}
.kw-page-hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(620px 300px at 100% 0%, rgba(26, 79, 214, 0.35) 0%, transparent 60%),
        radial-gradient(520px 260px at 0% 100%, rgba(200, 164, 80, 0.16) 0%, transparent 60%);
}
.kw-page-hero > .container { position: relative; z-index: 1; max-width: 820px; }
.kw-page-hero__title {
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: clamp(2rem, 1.4rem + 2.5vw, 3rem);
    font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: #fff; margin: 0.75rem 0 1rem;
}
.kw-page-hero__lead { font-size: 1.1rem; line-height: 1.65; color: rgba(255,255,255,0.82); margin: 0 auto; max-width: 640px; }

/* Portfolio / work card — Portfolio page + home teaser */
.kw-pf-card {
    display: flex; flex-direction: column; height: 100%;
    background: #fff; border: 1px solid var(--kw-border);
    border-radius: 1rem; overflow: hidden;
    box-shadow: 0 1px 3px rgba(13, 31, 66, 0.05);
    transition: transform .2s var(--kw-ease), box-shadow .2s var(--kw-ease);
}
.kw-pf-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -12px rgba(13, 31, 66, 0.18); }
.kw-pf-card__media {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--kw-primary) 0%, var(--kw-secondary) 100%);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255, 255, 255, 0.92); font-size: 2.5rem; overflow: hidden;
}
.kw-pf-card__body { padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; }
.kw-pf-card__category {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--kw-secondary); margin-bottom: 0.5rem;
}
.kw-pf-card__title { font-family: 'Sora', 'Inter', sans-serif; font-size: 1.2rem; font-weight: 700; color: var(--kw-primary); margin: 0 0 0.5rem; }
.kw-pf-card__summary { font-size: 0.92rem; line-height: 1.6; color: var(--kw-text-muted); margin: 0 0 1rem; flex-grow: 1; }
.kw-pf-card__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.kw-pf-card__tag {
    font-size: 0.72rem; font-weight: 600; color: var(--kw-text-muted);
    background: var(--kw-surface-alt); border: 1px solid var(--kw-border);
    border-radius: 9999px; padding: 0.2rem 0.65rem;
}
.kw-pf-card__link {
    display: inline-flex; align-items: center; gap: 0.35rem;
    margin-top: 1rem; font-size: 0.85rem; font-weight: 600;
    color: var(--kw-secondary); text-decoration: none; align-self: flex-start;
}
.kw-pf-card__link i { transition: transform .15s var(--kw-ease); }
.kw-pf-card__link:hover { color: var(--kw-primary); }
.kw-pf-card__link:hover i { transform: translate(2px, -2px); }