/*
  Stitch Landing page - Desktop clone styles.
  Utility layer translating the embedded Tailwind config of
  src/Template/landing_page_desktop/code.html into plain CSS.
  Scoped (prefixed) so it cannot restyle other CAF-Info pages.
*/

.stitch {
    /* ===== tokens (from the Stitch tailwind.config) ===== */
    --st-primary: #000000;
    --st-primary-container: #0e1c2f;
    --st-on-primary: #ffffff;
    --st-on-primary-fixed: #0e1c2f;
    --st-secondary: #515f74;
    --st-tertiary: #000000;
    --st-tertiary-container: #410007;
    --st-on-tertiary: #ffffff;
    --st-on-tertiary-fixed-variant: #92001c;
    --st-on-secondary-fixed: #0d1c2f;
    --st-surface: #FFFFFF;
    --st-background: #f7f9fb;
    --st-surface-container-lowest: #ffffff;
    --st-surface-container-low: #f2f4f6;
    --st-surface-container: #eceef0;
    --st-surface-container-high: #e6e8ea;
    --st-on-surface: #191c1e;
    --st-on-surface-variant: #44474c;
    --st-border-subtle: #E2E8F0;
    --st-border-strong: #CBD5E1;
    --st-text-muted: #64748B;
    --st-accent-hover: #A60D26;
    /* CAF-Info brand lockup accent red (src/Template/canadian_defence_discovery_interface/DESIGN.md).
       Single brand-red token; used by the search-control hover/active states only. */
    --st-brand-accent: #E01A22;
    --st-accent-subtle: #FDF2F4;
    --st-outline-variant: #c5c6cd;

    background-color: var(--st-background);
    color: var(--st-on-surface);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.625rem;
    -webkit-font-smoothing: antialiased;
    text-align: left;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.stitch *, .stitch *::before, .stitch *::after {
    box-sizing: border-box;
    border: 0 solid;
}

.stitch p, .stitch h1, .stitch h2, .stitch h3, .stitch h4, .stitch ul, .stitch li, .stitch figure {
    margin: 0;
    padding: 0;
}

.stitch a { text-decoration: none; }
.stitch ul { list-style: none; }
.stitch img { display: block; max-width: 100%; }
.stitch button { background: none; font: inherit; color: inherit; cursor: pointer; border: 0; }
.stitch input { font: inherit; color: inherit; }
.stitch input:focus { outline: none; }

.stitch .material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ===== layout ===== */
.st-w-full { width: 100%; }
.st-max-w-1280 { max-width: 1280px; margin-left: auto; margin-right: auto; }
/* horizontal page padding: 16px base, 40px >= md, 80px >= lg (set via media queries) */
.st-px { padding-left: 16px; padding-right: 16px; }
.st-hidden { display: none; }
.st-flex { display: flex; }
.st-inline-flex { display: inline-flex; }
.st-grid { display: grid; }
.st-flex-col { flex-direction: column; }
.st-flex-row { flex-direction: row; }
.st-flex-wrap { flex-wrap: wrap; }
.st-flex-1 { flex: 1 1 0%; }
.st-items-center { align-items: center; }
.st-items-start { align-items: flex-start; }
.st-items-end { align-items: flex-end; }
.st-items-stretch { align-items: stretch; }
.st-justify-between { justify-content: space-between; }
.st-justify-center { justify-content: center; }
.st-self-start { align-self: flex-start; }
.st-min-w-0 { min-width: 0; }
.st-shrink-0 { flex-shrink: 0; }
.st-relative { position: relative; }
.st-fixed { position: fixed; }
.st-top-0 { top: 0; }
.st-z-50 { z-index: 1030; }
.st-h-full { height: 100%; }
.st-w-auto { width: auto; }
.st-min-h-screen { min-height: 100vh; }
.st-mx-auto { margin-left: auto; margin-right: auto; }
.st-overflow-hidden { overflow: hidden; }
.st-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-text-balance { text-wrap: balance; }

/* gaps: spacing tokens */
.st-gap-xs { gap: 0.25rem; }
.st-gap-sm { gap: 0.5rem; }
.st-gap-md { gap: 1rem; }
.st-gap-lg { gap: 1.5rem; }
.st-gap-xl { gap: 2.5rem; }
.st-gap-1 { gap: 0.25rem; }
.st-gap-2 { gap: 0.5rem; }

/* ===== colors / surfaces ===== */
.st-bg-background { background-color: var(--st-background); }
.st-bg-surface { background-color: var(--st-surface); }
.st-bg-surface-lowest { background-color: var(--st-surface-container-lowest); }
.st-bg-surface-low { background-color: var(--st-surface-container-low); }
.st-bg-surface-container { background-color: var(--st-surface-container); }
.st-bg-surface-high { background-color: var(--st-surface-container-high); }
.st-bg-accent { background-color: var(--st-accent-hover); }
.st-bg-primary { background-color: var(--st-primary); }
.st-bg-transparent { background-color: transparent; }
.st-text-on-surface { color: var(--st-on-surface); }
.st-text-on-surface-variant { color: var(--st-on-surface-variant); }
.st-text-secondary { color: var(--st-secondary); }
.st-text-muted { color: var(--st-text-muted); }
.st-text-accent { color: var(--st-accent-hover); }
.st-text-on-primary { color: var(--st-on-primary); }
.st-text-on-primary-fixed { color: var(--st-on-primary-fixed); }
.st-text-primary { color: var(--st-primary); }
.st-hover-border-strong:hover { border-color: var(--st-border-strong); }
.st-hover-text-accent:hover { color: var(--st-accent-hover); }
.st-hover-text-on-surface:hover { color: var(--st-on-surface); }
.st-hover-text-primary:hover { color: var(--st-primary); }
.st-hover-text-on-tertiary:hover { color: var(--st-on-tertiary-fixed-variant); }
.st-hover-bg-container:hover { background-color: var(--st-surface-container); }
.st-hover-bg-container-low:hover { background-color: var(--st-surface-container-low); }

/* ===== borders, radii, shadows ===== */
.st-border { border-width: 1px; border-color: var(--st-border-subtle); }
.st-border-subtle { border-color: var(--st-border-subtle); }
.st-border-strong-c { border-color: var(--st-border-strong); }
.st-border-t { border-top-width: 1px; border-top-color: var(--st-border-subtle); }
.st-border-y { border-top-width: 1px; border-bottom-width: 1px; border-color: var(--st-border-subtle); }
.st-border-b { border-bottom-width: 1px; border-bottom-color: var(--st-border-subtle); }
.st-rounded { border-radius: 0.125rem; }
.st-rounded-full { border-radius: 9999px; }
.st-rounded-lg { border-radius: 0.25rem; }
.st-shadow-none { box-shadow: none; }
.st-shadow-sm { box-shadow: 0 1px 3px 0 rgba(11,25,44,0.04), 0 1px 2px -1px rgba(11,25,44,0.04); }
.st-shadow-header { box-shadow: 0 1px 8px rgba(0,0,0,0.04); }
.st-hover-shadow-md:hover { box-shadow: 0 4px 6px -1px rgba(11,25,44,0.08), 0 2px 4px -2px rgba(11,25,44,0.06); }
.st-border-default { border-color: var(--st-border-subtle); }
.st-border-hover { border-color: var(--st-border-strong); }

/* ===== typography ===== */
.stitch h1, .stitch h2, .stitch h3, .stitch h4 { letter-spacing: normal; }
.st-headline-h1 { font-size: 2.5rem; line-height: 3rem; font-weight: 700; letter-spacing: -0.025em; }
.st-headline-h2 { font-size: 1.75rem; line-height: 2.25rem; font-weight: 600; letter-spacing: -0.015em; }
.st-headline-h3 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; letter-spacing: -0.005em; }
.st-body-default { font-size: 1rem; line-height: 1.625rem; font-weight: 400; }
.st-body-lg { font-size: 1.125rem; line-height: 1.75rem; font-weight: 400; }
.st-metadata { font-size: 0.875rem; line-height: 1.375rem; font-weight: 500; }
.st-label-badge { font-size: 0.75rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.03em; }
.st-tracking-tight { letter-spacing: -0.025em; }
.st-tracking-wide { letter-spacing: 0.025em; }
.st-tracking-wider { letter-spacing: 0.05em; }
.st-uppercase { text-transform: uppercase; }
.st-font-bold { font-weight: 700; }
.st-font-semibold { font-weight: 600; }
.st-leading-relaxed { line-height: 1.625; }
.st-leading-tight { line-height: 1.25; }
.st-leading-snug { line-height: 1.375; }
.st-text-xs { font-size: 0.75rem; line-height: 1rem; }
.st-icon-16 { font-size: 16px; }
.st-icon-18 { font-size: 18px; }
.st-icon-20 { font-size: 20px; }
.st-icon-22 { font-size: 22px; }
.st-icon-24 { font-size: 24px; }
.st-line-clamp-2, .st-line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.st-line-clamp-2 { -webkit-line-clamp: 2; }
.st-line-clamp-3 { -webkit-line-clamp: 3; }
.st-placeholder-muted::placeholder { color: var(--st-text-muted); }

/* ===== transitions ===== */
.st-transition-colors { transition-property: color, background-color, border-color, box-shadow; transition-duration: 150ms; transition-timing-function: ease; }
.st-transition-all { transition-property: color, background-color, border-color, box-shadow, transform; transition-duration: 150ms; transition-timing-function: ease; }
.st-transition-transform { transition-property: transform; transition-duration: 150ms; transition-timing-function: ease; }
.st-group:hover .st-group-hover-translate { transform: translateX(2px); }
.st-group:hover .st-group-hover-text-accent { color: var(--st-accent-hover); }
.st-group:hover .st-group-hover-text-primary { color: var(--st-primary); }
.st-group:hover .st-group-hover-bg-accent-subtle { background-color: var(--st-accent-subtle); }
.st-group:hover .st-group-hover-text-accent-subtle { color: var(--st-accent-hover); }
.st-group:hover .st-group-hover-bg-primary { background-color: var(--st-primary); }
.st-group:hover .st-group-hover-text-on-primary { color: var(--st-on-primary); }

/* ===== header ===== */
.st-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1030;
    background-color: rgba(255,255,255,0.95);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 8px rgba(0,0,0,0.04);
}
.st-header-inner { display: flex; align-items: center; justify-content: space-between; column-gap: 1rem; height: 80px; }
.st-header-logo { height: 64px; width: auto; object-fit: contain; }
.st-main-pad { padding-top: 80px; }

/* Mobile bottom tab bar — part of the approved Stitch mobile App Shell
   (present in landing_page_mobile and search_results_page_mobile). */
.st-tabbar {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1030;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background-color: rgba(255,255,255,0.95);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.05);
}
.st-tabbar-inner { display: flex; align-items: center; justify-content: space-around; height: 64px; padding: 0 4px; }
.st-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 56px; min-height: 44px;
    color: var(--st-secondary);
    transition: color 150ms ease;
}
.st-tab.active { color: var(--st-tertiary-container); font-weight: 600; }
.st-tab .material-symbols-outlined { font-size: 22px; }
.st-tab-label { font-size: 0.75rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.03em; margin-top: 4px; }
.st-tab:hover { color: var(--st-on-surface); }
.st-beta-pill {
    display: inline-flex; align-items: center;
    padding: 2px 4px; border-radius: 0.25rem;
    background-color: var(--st-surface-container-high);
    color: var(--st-on-surface-variant);
    font-size: 0.75rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.03em;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.st-nav-links { display: flex; align-items: center; gap: 0.25rem; }
.st-nav-desktop { display: none; }
.st-nav-link {
    padding: 6px 8px; border-radius: 0.25rem;
    font-size: 0.875rem; line-height: 1.375rem; font-weight: 500;
    color: var(--st-on-surface-variant);
    transition: color 150ms ease, background-color 150ms ease;
}
.st-nav-link:hover { color: var(--st-on-surface); background-color: var(--st-surface-container-low); }
.st-ctrlk {
    display: flex;
    align-items: center; gap: 0.25rem;
    padding: 4px 8px; border-radius: 0.25rem;
    background-color: var(--st-surface-container);
    color: var(--st-on-surface-variant);
    font-size: 0.875rem; line-height: 1.375rem; font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color 150ms ease, color 150ms ease;
}
/* Search shortcut chip - shared by the header control and the hero control.
   Hover uses the brand red with white icon/label so it stays legible. */
.st-ctrlk:hover { background-color: var(--st-brand-accent); color: #FFFFFF; }
.st-ctrlk:hover .material-symbols-outlined,
.st-ctrlk:hover .st-text-muted { color: #FFFFFF; }
.st-ctrlk-desktop { display: none; }
.st-lang-switch { display: flex; align-items: center; border-radius: 0.25rem; background-color: var(--st-surface-container-low); padding: 2px; }
.st-lang-btn { padding: 4px 8px; border-radius: 0.25rem; font-size: 0.75rem; line-height: 1rem; font-weight: 600; color: var(--st-on-surface-variant); transition: color 150ms ease; }
.st-lang-btn:hover { color: var(--st-on-surface); }
.st-lang-btn.active { background-color: var(--st-surface); color: var(--st-on-surface); font-weight: 600; box-shadow: 0 1px 3px rgba(11,25,44,0.04); }
/* Separator only exists in the mobile "EN / FR" toggle form. */
.st-lang-sep { display: none; }
.st-account-icon {
    width: 32px; height: 32px; border-radius: 9999px;
    background-color: var(--st-primary);
    display: flex; align-items: center; justify-content: center;
}

/* ===== beta banner ===== */
.st-banner { width: 100%; background-color: var(--st-surface-container-low); border-bottom: 1px solid var(--st-border-subtle); padding-top: 10px; padding-bottom: 10px; }
.st-banner-inner { display: flex; align-items: center; justify-content: space-between; column-gap: 1rem; }
.st-banner-left { display: flex; align-items: center; gap: 0.5rem; min-width: 0; color: var(--st-on-surface-variant); }
.st-banner-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 8px; border-radius: 0.25rem;
    background-color: var(--st-surface);
    color: var(--st-on-surface);
    font-size: 0.75rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.03em; font-weight: 700;
    letter-spacing: 0.025em;
    border: 1px solid var(--st-border-subtle);
    box-shadow: 0 1px 2px 0 rgba(11,25,44,0.05);
    flex-shrink: 0;
}
.st-banner-dot { width: 8px; height: 8px; border-radius: 9999px; background-color: var(--st-accent-hover); }
.st-banner-right { display: none; align-items: center; gap: 1rem; color: var(--st-text-muted); flex-shrink: 0; font-size: 0.75rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.st-beta-header-pill { display: none; }

/* ===== sections ===== */
.st-section-pad { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.st-section-pad-lg { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.st-section-inner { display: flex; flex-direction: column; row-gap: 1.5rem; }

/* ===== hero ===== */
/* Hero content spans the full width of the .st-max-w-1280 / .st-px container
   so the headline and subtitle are not artificially clipped; page gutters and
   the 1280px cap still come from that wrapper. */
.st-hero-inner { display: flex; flex-direction: column; row-gap: 1rem; }
.st-hero-tag { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--st-text-muted); }
.st-hero-tag .material-symbols-outlined { color: var(--st-accent-hover); }
.st-search-form {
    width: 100%;
    background-color: var(--st-surface);
    border-radius: 0.25rem;
    box-shadow: 0 1px 2px 0 rgba(11,25,44,0.05);
    border: 1px solid var(--st-border-subtle);
    padding: 6px;
    display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
/* Hovering the search FIELD is a focus affordance only: the field, its icon, the
   input text and the Ctrl K chip all keep their normal appearance. The red hover
   treatment belongs to the Search button alone (see .st-search-submit:hover). */
.st-search-form:hover { border-color: var(--st-border-strong); }
.st-search-field-row { display: flex; align-items: center; gap: 0.5rem; padding-left: 8px; padding-right: 8px; height: 48px; flex: 1 1 0%; }
.st-search-icon { color: var(--st-secondary); }
.st-search-input { width: 100%; background: transparent; border: 0; }
.st-search-input::placeholder { color: var(--st-text-muted); }
.st-search-input:focus { outline: none; }
.st-ctrlk-chip {
    display: inline-flex; align-items: center;
    padding: 4px 8px; border-radius: 0.25rem;
    background-color: var(--st-surface-container);
    color: var(--st-text-muted);
    font-size: 0.75rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.03em;
}
.st-search-submit {
    height: 48px; padding-left: 1.5rem; padding-right: 1.5rem;
    border-radius: 0.25rem;
    background-color: var(--st-brand-accent);
    color: var(--st-on-primary);
    font-size: 0.875rem; line-height: 1.375rem; font-weight: 600;
    display: flex; align-items: center; justify-content: center; gap: 0.25rem;
    flex-shrink: 0; cursor: pointer;
    transition: background-color 150ms ease, transform 100ms ease;
}
/* Hover keeps the same brand red rather than introducing a second red; the
   inset white ring preserves the existing hover affordance. */
.st-search-submit:hover { background-color: var(--st-brand-accent); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6); }
/* The global `.stitch button { background: none; color: inherit }` reset is
   (0,1,1) — one class plus one element — which outranks a single-class rule
   (0,1,0). So the background and colour declared in the base `.st-search-submit`
   block above never applied: the button rendered transparent with inherited text,
   and only became visible on hover, where the (0,2,0) `:hover` rule could win.
   Restating them behind a `.stitch` prefix raises this to (0,2,0) and wins.
   No new colours: --st-brand-accent is the existing brand token. */
.stitch .st-search-submit { background-color: var(--st-brand-accent); color: #FFFFFF; }
.stitch .st-search-submit .material-symbols-outlined { color: #FFFFFF; }
/* The Stitch export carried no focus-visible rule for this button, leaving the
   landing page's primary action with only the UA default ring. */
.stitch .st-search-submit:focus-visible {
    outline: 2px solid var(--st-primary);
    outline-offset: 2px;
}
.st-search-submit:active { transform: scale(0.99); }
.st-suggestions { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 6px; padding-top: 4px; }
.st-suggestions-label { font-size: 0.75rem; line-height: 1rem; font-weight: 700; color: var(--st-on-surface); text-transform: uppercase; letter-spacing: 0.05em; }
.st-suggestion-chip {
    padding: 2px 8px; border-radius: 0.25rem;
    background-color: var(--st-surface-container-low);
    color: var(--st-on-surface);
    font-size: 0.875rem; line-height: 1.375rem; font-weight: 500;
    transition: background-color 150ms ease, color 150ms ease;
}
.st-suggestion-chip:hover { background-color: var(--st-surface-container); color: var(--st-primary); }
.st-suggestion-dot { color: var(--st-text-muted); }

/* ===== fact cards ===== */
.st-facts-section { width: 100%; background-color: var(--st-background); border-top: 1px solid var(--st-border-subtle); border-bottom: 1px solid var(--st-border-subtle); padding-top: 1.5rem; padding-bottom: 1.5rem; }
.st-facts-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.st-fact-card { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; border-radius: 0.25rem; background-color: var(--st-surface); border: 1px solid var(--st-border-subtle); box-shadow: 0 1px 2px 0 rgba(11,25,44,0.05); }
.st-fact-icon {
    width: 40px; height: 40px; border-radius: 0.25rem;
    background-color: var(--st-surface-container);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    color: var(--st-on-primary-fixed);
}
.st-fact-title { font-size: 0.875rem; line-height: 1.375rem; font-weight: 700; color: var(--st-on-surface); margin-bottom: 4px; }
.st-fact-text { font-size: 0.875rem; line-height: 1.375rem; color: var(--st-secondary); }

/* ===== section headers ===== */
.st-section-header { display: flex; flex-direction: column; row-gap: 4px; border-bottom: 1px solid var(--st-border-subtle); padding-bottom: 8px; }
.st-section-eyebrow { font-size: 0.75rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--st-text-muted); margin-bottom: 4px; }
.st-section-desc { font-size: 1rem; line-height: 1.625rem; font-weight: 400; color: var(--st-secondary); margin-top: 4px; max-width: 42rem; }
.st-view-all { display: inline-flex; align-items: center; gap: 4px; font-size: 0.875rem; line-height: 1.375rem; font-weight: 600; color: var(--st-accent-hover); flex-shrink: 0; transition: color 150ms ease; }
.st-view-all:hover { color: var(--st-on-tertiary-fixed-variant); }

/* ===== category cards ===== */
.st-cards-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.st-category-card {
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 1rem; border-radius: 0.25rem;
    background-color: var(--st-surface);
    border: 1px solid var(--st-border-subtle);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.st-category-card:hover { border-color: var(--st-border-strong); box-shadow: 0 4px 6px -1px rgba(11,25,44,0.08), 0 2px 4px -2px rgba(11,25,44,0.06); }
.st-category-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.st-category-icon {
    display: inline-flex; padding: 8px; border-radius: 0.25rem;
    background-color: var(--st-surface-container);
    color: var(--st-on-surface-variant);
    transition: background-color 150ms ease, color 150ms ease;
}
.st-category-card:hover .st-category-icon { background-color: var(--st-accent-subtle); color: var(--st-accent-hover); }
.st-count-pill { font-size: 0.75rem; line-height: 1rem; font-weight: 600; color: var(--st-text-muted); background-color: var(--st-surface-container-low); padding: 2px 8px; border-radius: 0.25rem; }
/* A category pill is now a link to the category-filtered search route. It keeps the static
   pill's appearance exactly — only the affordance is added — so enabling it does not change
   the taxonomy section's spacing, ordering or wrapping. */
.st-card-pill-link { text-decoration: none; cursor: pointer; transition: background-color 150ms ease, color 150ms ease; }
.st-card-pill-link:hover { background-color: var(--st-surface-container); color: var(--st-primary); }
.st-card-pill-link:focus-visible { outline: 2px solid var(--st-primary); outline-offset: 2px; }
.st-category-title { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; letter-spacing: -0.005em; color: var(--st-on-surface); transition: color 150ms ease; }
.st-category-card:hover .st-category-title { color: var(--st-primary); }
.st-category-desc { font-size: 0.875rem; line-height: 1.375rem; color: var(--st-secondary); margin-top: 0.25rem; }
.st-category-cta { margin-top: 1rem; padding-top: 4px; display: flex; align-items: center; gap: 4px; font-size: 0.875rem; line-height: 1.375rem; font-weight: 600; color: var(--st-text-muted); transition: color 150ms ease; }
.st-category-card:hover .st-category-cta { color: var(--st-accent-hover); }

/* ===== community cards ===== */
.st-community-card { padding: 1rem; border-radius: 0.25rem; background-color: var(--st-surface); border: 1px solid var(--st-border-subtle); min-width: 0; transition: border-color 150ms ease, box-shadow 150ms ease; }
.st-community-card:hover { border-color: var(--st-border-strong); box-shadow: 0 4px 6px -1px rgba(11,25,44,0.08), 0 2px 4px -2px rgba(11,25,44,0.06); }
.st-community-icon {
    width: 48px; height: 48px; border-radius: 0.25rem;
    background-color: var(--st-surface-container);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    color: var(--st-on-surface);
    transition: background-color 150ms ease, color 150ms ease;
}
.st-community-card:hover .st-community-icon { background-color: var(--st-primary); color: var(--st-on-primary); }
.st-community-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.st-community-title { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; letter-spacing: -0.005em; color: var(--st-on-surface); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; transition: color 150ms ease; }
.st-community-card:hover .st-community-title { color: var(--st-primary); }
.st-community-arrow { color: var(--st-text-muted); transition: color 150ms ease; }
.st-community-card:hover .st-community-arrow { color: var(--st-accent-hover); }
.st-community-desc { font-size: 0.875rem; line-height: 1.375rem; color: var(--st-secondary); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* ===== story cards ===== */
.st-recent-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.st-recent-card {
    background-color: var(--st-surface);
    border-radius: 0.25rem;
    border: 1px solid var(--st-border-subtle);
    display: flex; flex-direction: column; overflow: hidden;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.st-recent-card:hover { border-color: var(--st-border-strong); box-shadow: 0 4px 6px -1px rgba(11,25,44,0.08), 0 2px 4px -2px rgba(11,25,44,0.06); }
.st-story-media {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    background-color: var(--st-surface-container);
    overflow: hidden;
    /* The site logo (ImageHelper.SiteLogoPath) is painted on the media box itself, not on the
       img. A failed image makes the browser draw its broken-image glyph and the alt text on
       top of whatever is behind it, so a background on the img would still show the glyph;
       instead the onerror handler hides the img entirely and this background shows through.
       A publisher image simply covers it. */
    background-image: url('/img/brand/caf-info-unified-brand-lockup.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.st-story-media img { width: 100%; height: 100%; object-fit: cover; }
/* Brand-fallback media: no <img> is rendered, because the logo is painted on the media box
   background above. There is therefore no element filling the box for the link to take its
   size from, so the anchor is stretched across the box itself — which is what makes the
   visible logo clickable, exactly as the <img> makes the publisher image clickable in the
   normal case. The language badge inside stays absolutely positioned against the media box,
   so its placement is unaffected. */
.st-story-media > a.st-story-media-link { position: absolute; inset: 0; display: block; }
/* Brand-lockup fallback (stories with no usable publisher image, and stories whose image
   failed to load and was hidden). No <img> is rendered in this state — the logo comes from
   the media box background above. The lockup is a wide mark, so 'contain' would otherwise
   span the full 16:9 width edge to edge; scaling the background down leaves the same
   breathing room a padding would have, without adding box size to anything. */
.st-story-media--brand { background-size: 76%; background-position: center; }
.st-lang-badge {
    position: absolute; top: 10px; left: 10px;
    padding: 2px 8px; border-radius: 0.25rem;
    background-color: rgba(255,255,255,0.95);
    color: var(--st-on-surface);
    font-size: 0.75rem; line-height: 1rem; font-weight: 700; letter-spacing: 0.03em;
    border: 1px solid var(--st-border-subtle);
    box-shadow: 0 1px 2px 0 rgba(11,25,44,0.05);
}
.st-recent-body { padding: 1rem; flex: 1 1 0%; display: flex; flex-direction: column; justify-content: space-between; }
.st-story-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 20px 10px 20px;
    margin-bottom: 8px;
    color: var(--st-text-muted);
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
}
.st-story-title { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; letter-spacing: -0.005em; color: var(--st-on-surface); margin-bottom: 0.25rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; transition: color 150ms ease; }
.st-story-title:hover { color: var(--st-accent-hover); }
/* Media releases have no description, so the two-line clamp above has nothing to
   balance against and only crops the headline. Lifted for that one case by
   StStoryCard when Story.ArticleType is a media release. Declared here, right
   after the base rule and at the same specificity, so it wins for those cards
   only and every other article type keeps the clamp exactly as it was. */
.st-story-title--full { display: block; -webkit-line-clamp: none; }
.st-story-desc { font-size: 0.875rem; line-height: 1.375rem; color: var(--st-secondary); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
/* Story Card teaser is now a link that navigates like the title and image.
   display: block makes the anchor fill the card body width so the entire teaser
   line box is clickable; color: inherit keeps the secondary text colour exactly
   as before so the card's visual appearance is unchanged. */
.st-story-desc-link { display: block; color: inherit; text-decoration: none; }
.st-story-desc-link:focus-visible { outline: 2px solid var(--st-primary); outline-offset: 2px; }
/* Story Card taxonomy sections. The chips reuse .st-card-keywords / .st-community-chips /
   .st-count-pill / .st-suggestion-chip, which already wrap; only the section label is new. */
.st-story-taxlabel { margin-top: 0.75rem; margin-bottom: 0; font-size: 0.75rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--st-text-muted); }
.st-story-footer { margin-top: 1rem; padding-top: 8px; border-top: 1px solid var(--st-border-subtle); display: flex; align-items: center; justify-content: space-between; }
.st-recent-cta { display: flex; align-items: center; gap: 4px; font-size: 0.875rem; line-height: 1.375rem; font-weight: 600; color: var(--st-accent-hover); transition: color 150ms ease; }
.st-recent-cta:hover { color: var(--st-on-tertiary-fixed-variant); }

/* ===== recent discovery loading / unavailable states =====
   Namespaced st-recent-skel-* / st-recent-status so these can never collide with
   the Story page or Search stylesheets. Geometry mirrors .st-recent-card so the
   layout does not shift when the real cards replace the placeholders. */
.st-recent-skeleton { background-color: var(--st-surface); border-radius: 0.25rem; border: 1px solid var(--st-border-subtle); display: flex; flex-direction: column; overflow: hidden; }
.st-recent-skeleton-media { width: 100%; aspect-ratio: 16 / 9; background-color: var(--st-surface-container); }
.st-recent-skeleton-body { padding: 1rem; flex: 1 1 0%; display: flex; flex-direction: column; }
.st-recent-skeleton-meta { height: 0.75rem; width: 45%; margin-bottom: 12px; border-radius: 2px; background-color: var(--st-surface-container-high); }
.st-recent-skeleton-line { height: 0.75rem; margin-bottom: 8px; border-radius: 2px; background-color: var(--st-surface-container-high); }
.st-recent-skeleton-line-lg { height: 1rem; }
.st-recent-skeleton-line-short { width: 60%; }
.st-recent-skeleton-footer { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--st-border-subtle); }
.st-recent-skeleton-line-cta { width: 70%; margin-bottom: 0; }
.st-recent-status {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 1.5rem 1rem; text-align: center;
    border: 1px solid var(--st-border-subtle); border-radius: 0.25rem;
    background-color: var(--st-surface-container-low);
    color: var(--st-secondary); font-size: 0.875rem; line-height: 1.375rem;
}

/* Browse pages (Categories / Communities) reuse the Home Classification Matrix
   card language wholesale (.st-cards-grid, .st-category-card,
   .st-community-card, .st-suggestion-chip). The rules below add only what a
   browse listing needs that Home's cards do not already provide: a positioning
   context for the stretched link, and the sub-entity link rows. */
.st-browse-card { position: relative; }
/* Browse grids are narrower than Home's, so community names wrap to two lines
   instead of truncating to an ellipsis. */
.st-browse-card .st-community-title { white-space: normal; }
.st-browse-split { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 1024px) { .st-browse-split { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; } }
.st-browse-card--inactive { opacity: 0.65; transition: opacity 150ms ease; }
.st-browse-card--inactive:hover { opacity: 0.85; }
.st-stretched-link::after { content: ""; position: absolute; inset: 0; }
.st-card-parent {
    position: relative; z-index: 2; display: inline-block; margin-bottom: 4px;
    font-size: 0.75rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--st-text-muted);
}
.st-card-parent:hover { color: var(--st-accent-hover); }
.st-card-parent:hover::after { content: none; }
.st-card-keywords { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.75rem; }
.st-community-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.75rem; }
.st-community-chips .st-suggestion-chip { position: relative; z-index: 2; }

/* ===== story card "Also In" =====
   The disclosure that lists the other publishers carrying a story. Built on a native
   <details>/<summary> so the control is keyboard operable and announced correctly with no
   script, and so every entry is a real link (middle-click, "open in new tab" and
   "copy link address" all work).

   Width is bounded on both the control and the menu so a long publisher name truncates
   instead of widening the card: the grid column is fixed, and min-width: 0 on the flex
   child is what actually allows the ellipsis to apply inside a flex context. Without it
   a long name would set the card's intrinsic minimum and push the row into overflow on
   narrow viewports. */
.st-alsoin { position: relative; margin-top: 0.75rem; }
.st-alsoin-summary {
    display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
    padding: 2px 8px; border-radius: 0.25rem;
    background-color: var(--st-surface-container-low); color: var(--st-on-surface);
    font-size: 0.75rem; line-height: 1rem; font-weight: 600;
    cursor: pointer; list-style: none; user-select: none;
    transition: background-color 150ms ease, color 150ms ease;
}
.st-alsoin-summary::-webkit-details-marker { display: none; }
.st-alsoin-summary:hover { background-color: var(--st-surface-container); color: var(--st-primary); }
/* Keyboard focus needs a visible ring; the native one is suppressed by list-style above. */
.st-alsoin-summary:focus-visible { outline: 2px solid var(--st-primary); outline-offset: 2px; }
.st-alsoin-summary > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-alsoin-summary .material-symbols-outlined { transition: transform 150ms ease; }
.st-alsoin[open] .st-alsoin-summary .material-symbols-outlined { transform: rotate(180deg); }

.st-alsoin-menu {
    display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.5rem;
    min-width: 0;
}
.st-alsoin-item {
    display: inline-block; max-width: 100%;
    padding: 2px 8px; border-radius: 0.25rem;
    background-color: var(--st-surface-container-low); color: var(--st-on-surface);
    font-size: 0.875rem; line-height: 1.375rem; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-decoration: none;
    transition: background-color 150ms ease, color 150ms ease;
}
.st-alsoin-item:hover { background-color: var(--st-surface-container); color: var(--st-primary); }
.st-alsoin-item:focus-visible { outline: 2px solid var(--st-primary); outline-offset: 2px; }

/* ===== explore-all CTA ===== */
.st-explore-all {
    width: 100%;
    height: 48px;
    padding-left: 2.5rem; padding-right: 2.5rem;
    border-radius: 0.25rem;
    background-color: var(--st-surface);
    border: 1px solid var(--st-border-strong);
    color: var(--st-on-surface);
    font-size: 0.875rem; line-height: 1.375rem; font-weight: 600;
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(11,25,44,0.05);
    transition: background-color 150ms ease;
}
.st-explore-all:hover { background-color: var(--st-surface-container-low); }
.st-explore-all .material-symbols-outlined { color: var(--st-accent-hover); }

/* ===== tools grid ===== */
.st-tools-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.st-tool-card { display: flex; flex-direction: column; justify-content: space-between; padding: 1rem; border-radius: 0.25rem; background-color: var(--st-surface); border: 1px solid var(--st-border-subtle); transition: border-color 150ms ease, box-shadow 150ms ease; }
.st-tool-card:hover { border-color: var(--st-border-strong); box-shadow: 0 4px 6px -1px rgba(11,25,44,0.08), 0 2px 4px -2px rgba(11,25,44,0.06); }
.st-tool-icon { width: 40px; height: 40px; border-radius: 0.25rem; background-color: var(--st-surface-container); display: flex; align-items: center; justify-content: center; color: var(--st-on-surface); margin-bottom: 8px; transition: background-color 150ms ease, color 150ms ease; }
.st-tool-card:hover .st-tool-icon { background-color: var(--st-primary); color: var(--st-on-primary); }
.st-tool-title { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; letter-spacing: -0.005em; color: var(--st-on-surface); transition: color 150ms ease; }
.st-tool-card:hover .st-tool-title { color: var(--st-primary); }
.st-tool-desc { font-size: 0.875rem; line-height: 1.375rem; color: var(--st-secondary); margin-top: 0.25rem; }
.st-tool-cta { margin-top: 1rem; padding-top: 4px; display: flex; align-items: center; gap: 4px; font-size: 0.875rem; line-height: 1.375rem; font-weight: 600; color: var(--st-accent-hover); transition: color 150ms ease; }
.st-tool-card:hover .st-tool-cta { color: var(--st-on-tertiary-fixed-variant); }

/* ===== bookmarklet / about split ===== */
.st-split-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.st-bookmarklet-card { padding: 1.5rem; border-radius: 0.25rem; background-color: var(--st-surface-container-low); border: 1px solid var(--st-border-subtle); display: flex; flex-direction: column; justify-content: space-between; }
.st-about-card { padding: 1.5rem; border-radius: 0.25rem; background-color: var(--st-surface); border: 1px solid var(--st-border-subtle); display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 1px 2px 0 rgba(11,25,44,0.05); }
.st-split-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.st-split-eyebrow { font-size: 0.75rem; line-height: 1rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--st-text-muted); }
.st-split-title { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; letter-spacing: -0.005em; color: var(--st-on-surface); margin-bottom: 0.25rem; }
.st-split-body { font-size: 1rem; line-height: 1.625rem; color: var(--st-secondary); }
.st-split-body-sm { font-size: 0.875rem; line-height: 1.375rem; color: var(--st-secondary); }
.st-split-footer { margin-top: 1rem; padding-top: 4px; }
.st-split-footer-row { margin-top: 1rem; padding-top: 8px; border-top: 1px solid var(--st-border-subtle); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.st-text-link { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; line-height: 1.375rem; font-weight: 600; color: var(--st-accent-hover); transition: color 150ms ease; }
.st-text-link:hover { color: var(--st-on-tertiary-fixed-variant); }
.st-neutral-link { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; line-height: 1.375rem; font-weight: 600; color: var(--st-on-surface); transition: color 150ms ease; }
.st-neutral-link:hover { color: var(--st-accent-hover); }
.st-nonpartisan { font-size: 0.75rem; line-height: 1rem; font-weight: 600; color: var(--st-text-muted); }

/* ===== footer ===== */
.st-footer { width: 100%; background-color: var(--st-surface-container-lowest); box-shadow: 0 1px 8px rgba(0,0,0,0.04); padding-top: 2.5rem; padding-bottom: 1.5rem; }
.st-footer-m { display: none; width: 100%; background-color: var(--st-surface-container-lowest); border-top: 1px solid var(--st-border-subtle); padding: 16px 16px 24px; }
.st-footer-m-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 0.75rem; line-height: 1rem; font-weight: 500; color: var(--st-text-muted); }
.st-footer-m-links a { color: inherit; }
.st-footer-m-links a:hover { color: var(--st-on-surface); }
.st-footer-m-note { font-size: 11px; line-height: 1.45rem; color: var(--st-text-muted); margin-top: 12px; }
.st-footer-m-copy { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; line-height: 1rem; color: var(--st-text-muted); margin-top: 12px; }
.st-footer-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding-bottom: 2.5rem; }
.st-footer-brand-logo { height: 40px; width: auto; object-fit: contain; }
.st-footer-tagline { font-size: 0.875rem; line-height: 1.375rem; color: var(--st-on-surface-variant); margin-bottom: 1rem; }
.st-footer-notice { padding: 8px; border-radius: 0.25rem; background-color: var(--st-surface-container-low); }
.st-footer-notice p { font-size: 0.75rem; line-height: 1rem; font-weight: 600; color: var(--st-on-surface-variant); }
.st-footer-notice .st-font-bold { color: var(--st-on-surface); }
.st-footer-col-title { font-size: 0.875rem; line-height: 1.375rem; font-weight: 700; color: var(--st-on-surface); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem; }
.st-footer-list { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.875rem; line-height: 1.375rem; }
.st-footer-list a { color: var(--st-on-surface-variant); transition: color 150ms ease; }
.st-footer-list a:hover { color: var(--st-on-surface); }
.st-footer-bottom { padding-top: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.75rem; line-height: 1rem; font-weight: 600; color: var(--st-text-muted); }
.stitch > main { flex: 1 0 auto; }
.st-footer-bilingual { display: inline-flex; align-items: center; gap: 4px; }
.st-footer-dot { width: 8px; height: 8px; border-radius: 9999px; background-color: var(--st-accent-hover); }

/* ===== responsive (Tailwind default breakpoints: sm 640, md 768, lg 1024, xl 1280) ===== */
@media (min-width: 640px) {
    .st-search-form { flex-direction: row; align-items: center; }
    .st-explore-all { width: auto; }
    .st-cards-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .st-footer-bottom { flex-direction: row; }
    .st-beta-header-pill { display: inline-flex; }
}
@media (min-width: 768px) {
    .st-px { padding-left: 40px; padding-right: 40px; }
    .st-facts-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .st-cards-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .st-community-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .st-recent-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .st-tools-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .st-split-grid { grid-template-columns: 1fr 1fr; }
    .st-footer-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
    .st-section-header-split { flex-direction: row; align-items: flex-end; justify-content: space-between; }
    .st-ctrlk-desktop { display: flex; }
}
@media (min-width: 1024px) {
    .st-px { padding-left: 80px; padding-right: 80px; }
    .st-nav-desktop { display: flex; }
    .st-cards-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .st-community-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .st-tools-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
    .st-banner-right { display: flex; }
}
@media (max-width: 1023.98px) {
    .st-nav-desktop { display: none; }
}
@media (max-width: 767.98px) {
    .st-ctrlk-desktop { display: none; }
    /* Mobile App Shell — from the approved Stitch mobile artifacts
       (landing_page_mobile, search_results_page_mobile): compact 64px header,
       52px lockup, no BETA pill, no desktop nav. */
    .st-header { background-color: rgba(255,255,255,0.9); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
    .st-header-inner { height: 64px; padding: 6px 12px; column-gap: 4px; }
    .st-header-logo { height: 52px; max-width: 200px; }
    .st-beta-header-pill { display: none; }
    .st-main-pad { padding-top: 64px; }
    /* Mobile language toggle: plain "EN / FR" text form from the approved
       mobile artifacts, in place of the desktop EN/FR pill group. */
    .st-lang-switch { background-color: transparent; padding: 0; gap: 4px; }
    .st-lang-btn {
        background: none !important;
        box-shadow: none !important;
        padding: 0;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        color: var(--st-text-muted);
    }
    .st-lang-btn.active { color: var(--st-primary-container); font-weight: 600; }
    .st-lang-sep { display: inline; color: var(--st-border-strong); font-weight: 600; }
    /* Mobile App Shell replaces the 4-column desktop footer (approved mobile
       artifacts use a bottom tab bar plus a compact link/disclaimer footer). */
    .st-footer { display: none; }
    .st-footer-m { display: block; }
    .st-tabbar { display: block; }
    .stitch { padding-bottom: 64px; }
}

/* ===== app.css neutralization (scoped to Stitch shell only) ===== */
.stitch .container, .stitch .container-xl,
.stitch .row, .stitch .col, .stitch [class^="col-"], .stitch [class*=" col-"] {
    all: unset;
    display: block;
}
.stitch .container { width: 100%; }
.stitch section[class] { padding-top: 0; padding-bottom: 0; margin: 0; }
.stitch h1, .stitch h2, .stitch h3, .stitch h4, .stitch h5, .stitch h6 { margin: 0; font-family: 'Inter', system-ui, sans-serif; }
.stitch a:hover { text-decoration: none; }
.stitch section.st-section-pad { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.stitch section.st-section-pad-lg { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.stitch .st-footer { padding-top: 2.5rem; padding-bottom: 1.5rem; }

.st-roadmap-teaser .st-section-header {
    display: none !important;
}
.st-roadmap-teaser .st-section-pad {
    padding: 0 !important;
}
.st-roadmap-teaser .st-section-inner {
    padding: 0 !important;
}
.st-roadmap-teaser .st-cards-grid {
    grid-template-columns: 1fr !important;
}

@media (min-width: 768px) {
    .st-split-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
    .st-split-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
}