/* Utoryn Design System (English / LTR) */
:root {
    /* Color */
    --bg-main: #0b0f17;
    --bg-card: #141a26;
    --bg-alt: #10151f;
    --bg-elevated: #1a2130;
    --border-color: #232d3f;
    --border-color-strong: #2e3a52;
    --accent-indigo: #6366f1;
    --accent-hover: #4f46e5;
    --accent-soft: rgba(99, 102, 241, 0.12);
    --accent-soft-border: rgba(99, 102, 241, 0.28);
    --text-primary: #f8fafc;
    --text-secondary: #97a3b8;
    --text-muted: #6b7789;
    --danger: #f87171;
    --danger-soft: rgba(248, 113, 113, 0.1);
    --focus-ring: #818cf8;

    /* Radius & shadow */
    --radius-lg: 14px;
    --radius-md: 10px;
    --radius-sm: 8px;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -12px rgba(0, 0, 0, 0.5);
    --shadow-card-hover: 0 4px 10px rgba(0, 0, 0, 0.35), 0 16px 32px -14px rgba(99, 102, 241, 0.25);

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
}

/* Reset / base */
html { -webkit-text-size-adjust: 100%; }

body.ste-body-bg {
    margin: 0;
    padding: 0;
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    direction: ltr;
    text-align: left;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

.ste-app-wrapper * { box-sizing: border-box; }
.ste-app-wrapper h1, .ste-app-wrapper h2, .ste-app-wrapper h3, .ste-app-wrapper h4 { line-height: 1.25; }
.ste-app-wrapper p { line-height: 1.65; }
.ste-app-wrapper img { max-width: 100%; }

/*
 * Defensive link reset: the active WordPress theme's own stylesheet is
 * still enqueued via wp_head()/wp_footer() alongside our markup and may
 * define its own generic `a` styling (e.g. underline by default). Force
 * our own default link treatment inside the app so it doesn't depend on
 * what the active theme ships. This intentionally does NOT touch :hover —
 * specific components (nav, footer, breadcrumbs, CTAs) opt back into an
 * underline on hover below, as their own intentional link affordance.
 */
.ste-app-wrapper a,
.ste-app-wrapper a:visited {
    text-decoration: none;
    color: inherit;
}

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

.ste-skip-link {
    position: absolute;
    top: -48px;
    left: 12px;
    z-index: 1000;
    background: var(--accent-indigo);
    color: #fff;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: top 0.15s ease;
}
.ste-skip-link:focus { top: 12px; }

/* Focus visibility (accessibility) */
.ste-app-wrapper a:focus-visible,
.ste-app-wrapper button:focus-visible,
.ste-app-wrapper input:focus-visible,
.ste-app-wrapper select:focus-visible,
.ste-mobile-drawer a:focus-visible,
.ste-mobile-drawer button:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Header */
.ste-site-header {
    background-color: rgba(11, 15, 23, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
}
.ste-header-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.ste-brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    text-decoration: none;
    letter-spacing: -0.01em;
}
.ste-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--accent-indigo), #8b5cf6);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0;
}
.ste-logo-accent { color: var(--accent-indigo); }

.ste-nav-desktop { display: none; gap: 4px; align-items: center; }
.ste-nav-desktop a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.925rem;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
}
.ste-nav-desktop a:hover { color: var(--text-primary); background: var(--bg-elevated); }
.ste-nav-desktop a.is-active { color: var(--text-primary); }

.ste-nav-dropdown { position: relative; }
.ste-dropdown-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.925rem;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-family: inherit;
}
.ste-dropdown-btn:hover { color: var(--text-primary); background: var(--bg-elevated); }
.ste-dropdown-caret { transition: transform 0.15s ease; }
.ste-nav-dropdown.is-open .ste-dropdown-caret { transform: rotate(180deg); }

.ste-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    min-width: 200px;
    padding: 6px;
    box-shadow: var(--shadow-card);
}
.ste-nav-dropdown:hover .ste-dropdown-menu,
.ste-nav-dropdown.is-open .ste-dropdown-menu { display: block; }
.ste-dropdown-menu a {
    display: block;
    padding: 9px 12px;
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-sm);
}
.ste-dropdown-menu a:hover,
.ste-dropdown-menu a.is-active { background: var(--accent-soft); color: var(--text-primary); }

.ste-menu-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-sm);
    display: inline-flex;
}

/* Mobile Drawer */
.ste-mobile-drawer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: min(300px, 84vw);
    height: 100vh;
    background: var(--bg-card);
    z-index: 210;
    padding: 20px;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
    overflow-y: auto;
}
.ste-drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(4, 6, 10, 0.6);
    z-index: 205;
}
.ste-drawer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.ste-close-btn { background: none; border: none; color: var(--text-primary); font-size: 1.8rem; cursor: pointer; line-height: 1; padding: 4px 8px; border-radius: var(--radius-sm); }
.ste-close-btn:hover { background: var(--bg-elevated); }
.ste-drawer-nav a {
    display: block;
    padding: 12px 4px;
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 0.95rem;
}
.ste-drawer-section-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-top: 18px; padding: 0 4px; }
.ste-drawer-sub { padding: 10px 4px 10px 14px !important; font-size: 0.9rem; font-weight: 500 !important; color: var(--text-secondary) !important; }

/* Hero Section */
.ste-hero-section {
    padding: 72px 20px 56px;
    text-align: center;
    background: radial-gradient(circle at top, rgba(99, 102, 241, 0.16) 0%, transparent 65%);
}
.ste-hero-container { max-width: 720px; margin: 0 auto; }
.ste-hero-eyebrow {
    display: inline-block;
    background: var(--accent-soft);
    border: 1px solid var(--accent-soft-border);
    color: #a5b4fc;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 20px;
}
.ste-hero-title { font-size: 2rem; font-weight: 800; margin: 0 0 16px; color: #fff; letter-spacing: -0.02em; }
.ste-hero-subtitle { max-width: 620px; margin: 0 auto 28px; color: var(--text-secondary); line-height: 1.65; font-size: 1.02rem; }

.ste-hero-search { max-width: 520px; margin: 0 auto 20px; position: relative; }
.ste-search-wrapper { position: relative; max-width: 560px; margin: 0 auto var(--space-6); }
.ste-search-icon {
    position: absolute;
    top: 50%;
    left: 18px;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}
.ste-hero-input {
    width: 100%;
    padding: 15px 20px 15px 46px;
    border-radius: 999px;
    font-size: 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: #fff;
}
.ste-search-wrapper .ste-input { padding-left: 46px; }

.ste-hero-cta { margin-bottom: 28px; }

.ste-trust-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 22px;
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
}
.ste-trust-strip li { display: inline-flex; align-items: center; gap: 7px; }
.ste-trust-icon { font-size: 0.95rem; }

/* Inputs */
.ste-input {
    width: 100%;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.15s ease;
}
.ste-input:hover { border-color: var(--border-color-strong); }
.ste-input:focus { outline: none; border-color: var(--accent-indigo); box-shadow: 0 0 0 3px var(--accent-soft); }
.ste-input::placeholder { color: var(--text-muted); }

/*
 * Custom file picker: the browser's native file-input chrome ("Browse" /
 * "No file chosen") renders in the visitor's OS/browser locale, which we
 * cannot restyle or translate via CSS — it's outside document content
 * entirely. The real <input type="file"> stays in the DOM and fully
 * functional (same id, same change events tests rely on); it's only
 * visually hidden via .ste-sr-only (off-screen, not display:none, so it
 * stays focusable and triggerable). A real <label for="..."> gives mouse
 * and keyboard users a working, English, themed "Choose File" control
 * with no JS required for the click-to-open behavior itself.
 */
.ste-file-picker { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ste-file-picker-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color-strong);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.ste-file-picker-btn:hover { background: var(--bg-card); border-color: var(--accent-soft-border); }
.ste-sr-only:focus + .ste-file-picker-btn,
.ste-sr-only:focus-visible + .ste-file-picker-btn {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}
.ste-file-picker-name {
    color: var(--text-secondary);
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px;
}

/* Layout */
.ste-container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.ste-section { padding: 48px 0; }
.ste-bg-alt { background-color: var(--bg-alt); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.ste-section-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.ste-section-title { font-size: 1.4rem; font-weight: 700; margin: 0; text-align: center; letter-spacing: -0.01em; }
.ste-section-heading-row .ste-section-title { text-align: left; }
.ste-link-more { color: var(--accent-indigo); text-decoration: none; font-weight: 600; font-size: 0.9rem; white-space: nowrap; }
.ste-link-more:hover { color: var(--accent-hover); text-decoration: underline; }

.ste-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.ste-grid-related { gap: 16px; }

/* Reusable two-panel layout for tools that compare two inputs side by side
   (Text Diff Checker, JSON Diff Checker): one column on mobile so each
   panel keeps a usable width, two columns from tablet width up. Mirrors
   .ste-grid's same mobile-first breakpoint. */
.ste-two-panel { display: grid; grid-template-columns: 1fr; gap: 12px; }

/* Regex Tester's slash-delimited pattern field ("/ pattern /"). */
.ste-regex-pattern-row { display: flex; gap: 8px; align-items: center; }

.ste-categories-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
/* Scoped under .ste-app-wrapper for extra specificity margin against the
   active theme's own generic selectors, same rationale as the card-link
   hardening below: this layout must not depend on cascade/load-order luck. */
.ste-app-wrapper .ste-cat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 18px 20px;
    border-radius: var(--radius-md);
    text-decoration: none;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    min-height: 92px;
    box-sizing: border-box;
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.ste-app-wrapper .ste-cat-card:hover { border-color: var(--accent-soft-border); transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
/* Title + arrow share one row so the arrow reserves its own space and can
   never overlap a title that wraps onto a second line; count sits on its
   own row below, always clearly separated from the title text. */
.ste-app-wrapper .ste-cat-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.ste-app-wrapper .ste-cat-title { font-size: 1rem; font-weight: 700; text-decoration: none; min-width: 0; overflow-wrap: break-word; }
.ste-app-wrapper .ste-cat-meta { display: block; font-size: 0.8rem; color: var(--text-secondary); text-decoration: none; }
.ste-app-wrapper .ste-cat-arrow { flex-shrink: 0; color: var(--text-muted); line-height: 1.4; }
.ste-app-wrapper .ste-cat-card:hover .ste-cat-arrow { color: var(--accent-indigo); }

/* Zero-tool categories stay visible (so the full category list is always
   discoverable) but read as subdued/"coming soon" rather than a normal,
   fully-interactive card. */
.ste-app-wrapper .ste-cat-card-empty { opacity: 0.55; }
.ste-app-wrapper .ste-cat-card-empty:hover { opacity: 0.8; transform: none; box-shadow: none; border-color: var(--border-color); }
.ste-app-wrapper .ste-cat-card-empty .ste-cat-meta { font-style: italic; }

/* Tool / card items */
.ste-card-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-card);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.ste-card-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); border-color: var(--accent-soft-border); }
.ste-card-top { display: flex; flex-direction: column; gap: 10px; }
/* Tool card icon: fixed size/style for every card so the set reads as one
   consistent system regardless of which tool it represents. `color` is set
   directly here (not left to inherit from the surrounding `.ste-card-item`
   link) so the icon's `stroke="currentColor"` always resolves to this
   accent color, never to whatever color a theme `a` rule might otherwise
   force on the ancestor link. */
.ste-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--accent-soft);
    color: var(--accent-indigo);
}
.ste-card-icon svg { display: block; }
/* Title and description sit inside a link (the whole card is clickable),
   but only the CTA below should ever look like a link. text-decoration is
   set explicitly here (not just inherited from .ste-card-item) since a
   theme-level `a` style can otherwise still paint an underline through
   this text in both the normal and hover state. */
.ste-card-title { font-size: 1.1rem; font-weight: 700; margin: 0; color: #fff; text-decoration: none; }
.ste-card-desc { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.55; margin: 0; text-decoration: none; }
.ste-card-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent-indigo);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
}
/* The CTA is the one intentional link affordance on the card. */
.ste-card-item:hover .ste-card-action { color: var(--accent-hover); text-decoration: underline; }

/*
 * Hardened underline fix: the non-!important reset above and the plain
 * text-decoration:none on .ste-card-title/.ste-card-desc were still being
 * outweighed by the active theme's own `a` styling in production (likely
 * theme CSS loading after ours, or matching with equal specificity that
 * source order then resolves in the theme's favor). Force the point with
 * !important across every relevant pseudo-class, scoped narrowly to the
 * exact elements that must never look like underlined links — titles,
 * descriptions, and category meta/count text, on both tool cards and
 * Related Tools cards (same .ste-card-item/.ste-card-title/.ste-card-desc
 * classes are reused there). The CTA keeps its own intentional underline
 * on hover/focus, also forced with !important so a theme `a:hover` rule
 * can't cancel it out either.
 */
.ste-app-wrapper .ste-card-item,
.ste-app-wrapper .ste-card-item:link,
.ste-app-wrapper .ste-card-item:visited,
.ste-app-wrapper .ste-card-item:hover,
.ste-app-wrapper .ste-card-item:focus,
.ste-app-wrapper .ste-card-item:active,
.ste-app-wrapper .ste-card-title,
.ste-app-wrapper .ste-card-title:link,
.ste-app-wrapper .ste-card-title:visited,
.ste-app-wrapper .ste-card-title:hover,
.ste-app-wrapper .ste-card-title:focus,
.ste-app-wrapper .ste-card-title:active,
.ste-app-wrapper .ste-card-desc,
.ste-app-wrapper .ste-card-desc:link,
.ste-app-wrapper .ste-card-desc:visited,
.ste-app-wrapper .ste-card-desc:hover,
.ste-app-wrapper .ste-card-desc:focus,
.ste-app-wrapper .ste-card-desc:active,
.ste-app-wrapper .ste-card-action,
.ste-app-wrapper .ste-card-action:link,
.ste-app-wrapper .ste-card-action:visited,
.ste-app-wrapper .ste-cat-card,
.ste-app-wrapper .ste-cat-card:link,
.ste-app-wrapper .ste-cat-card:visited,
.ste-app-wrapper .ste-cat-card:hover,
.ste-app-wrapper .ste-cat-card:focus,
.ste-app-wrapper .ste-cat-card:active,
.ste-app-wrapper .ste-cat-title,
.ste-app-wrapper .ste-cat-title:link,
.ste-app-wrapper .ste-cat-title:visited,
.ste-app-wrapper .ste-cat-title:hover,
.ste-app-wrapper .ste-cat-title:focus,
.ste-app-wrapper .ste-cat-title:active,
.ste-app-wrapper .ste-cat-meta,
.ste-app-wrapper .ste-cat-meta:link,
.ste-app-wrapper .ste-cat-meta:visited,
.ste-app-wrapper .ste-cat-meta:hover,
.ste-app-wrapper .ste-cat-meta:focus,
.ste-app-wrapper .ste-cat-meta:active {
    text-decoration: none !important;
}
.ste-app-wrapper .ste-card-item:hover .ste-card-action,
.ste-app-wrapper .ste-card-item:focus .ste-card-action,
.ste-app-wrapper .ste-card-item:focus-within .ste-card-action,
.ste-app-wrapper .ste-card-action:hover,
.ste-app-wrapper .ste-card-action:focus {
    text-decoration: underline !important;
}

.ste-empty-state { text-align: center; color: var(--text-secondary); padding: 32px 12px; font-size: 0.95rem; }

/* Buttons & badges */
.ste-btn {
    display: inline-block;
    padding: 11px 20px;
    background: var(--accent-indigo);
    color: #fff;
    border-radius: var(--radius-sm);
    text-decoration: none;
    text-align: center;
    font-weight: 700;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}
.ste-btn:hover { background: var(--accent-hover); }
.ste-btn:active { transform: translateY(1px); }
.ste-btn-large { padding: 15px 30px; font-size: 1rem; border-radius: 999px; }

.ste-badge {
    display: inline-block;
    background: var(--accent-soft);
    color: #a5b4fc;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: 0.02em;
}

/* Tool Page Specifics */
.ste-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 28px; margin: 28px auto; box-shadow: var(--shadow-card); }
.ste-breadcrumbs { font-size: 0.83rem; color: var(--text-muted); margin-bottom: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ste-breadcrumbs a { color: var(--text-secondary); text-decoration: none; }
.ste-breadcrumbs a:hover { color: var(--accent-indigo); text-decoration: underline; }
.ste-breadcrumb-sep { color: var(--text-muted); }
.ste-breadcrumbs [aria-current="page"] { color: var(--text-secondary); }

.ste-header { margin-bottom: 8px; }
/* Small icon next to the category badge on a single tool page. Sized down
   from the 40px card icon (28px) and kept in its own row so it never
   competes with the h1 title for width, even on narrow mobile screens. */
.ste-header-icon-row { display: flex; align-items: center; gap: 10px; }
.ste-header-icon-row .ste-card-icon { width: 28px; height: 28px; }
.ste-header-icon-row .ste-card-icon svg { width: 16px; height: 16px; }
.ste-title { font-size: 1.6rem; font-weight: 800; margin: 12px 0 10px; letter-spacing: -0.01em; }
.ste-desc { color: var(--text-secondary); font-size: 0.98rem; line-height: 1.6; margin: 0 0 8px; }
.ste-text-center { text-align: center; }
.ste-text-center .ste-desc { max-width: 640px; margin-left: auto; margin-right: auto; }

.ste-module-container { margin-top: 24px; }

.ste-tool-info-block { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border-color); }
.ste-tool-info-block h2 { font-size: 1.15rem; font-weight: 700; margin: 0 0 14px; }
.ste-info-list { padding-left: 20px; padding-right: 0; color: var(--text-secondary); line-height: 1.75; margin: 0; }
.ste-info-list li { margin-bottom: 6px; }
.ste-faq-list { display: flex; flex-direction: column; gap: 12px; }
.ste-faq-item { background: var(--bg-alt); border: 1px solid var(--border-color); padding: 16px 18px; border-radius: var(--radius-md); }
.ste-faq-q { font-size: 0.98rem; margin: 0 0 8px; color: #fff; font-weight: 700; }
.ste-faq-a { font-size: 0.9rem; color: var(--text-secondary); margin: 0; line-height: 1.6; }

.ste-cta-banner { text-align: center; padding: 40px 20px; background: var(--bg-alt); border-radius: var(--radius-lg); margin: 40px 0; }

/* Loading / alerts */
.ste-loading { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 48px 12px; color: var(--text-secondary); }
.ste-spinner {
    width: 32px; height: 32px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-indigo);
    border-radius: 50%;
    animation: ste-spin 0.8s linear infinite;
}
@keyframes ste-spin { to { transform: rotate(360deg); } }

.ste-alert { padding: 14px 16px; border-radius: var(--radius-sm); font-size: 0.9rem; line-height: 1.55; }
.ste-alert-error { background: var(--danger-soft); border: 1px solid rgba(248, 113, 113, 0.35); color: #fca5a5; }

/* STE Privacy Notice Block */
.ste-privacy-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-soft-border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin: 24px 0 12px 0;
}
.ste-privacy-icon { font-size: 1.15rem; line-height: 1.4; }
.ste-privacy-notice p { margin: 0; font-size: 0.85rem; color: #a5b4fc; line-height: 1.55; }

/* Informational / legal content pages */
.ste-content-page .ste-content-body { margin-top: 24px; }
.ste-content-section { padding: 22px 0; border-top: 1px solid var(--border-color); }
.ste-content-section:first-child { border-top: none; padding-top: 0; }
.ste-content-section h2 { font-size: 1.1rem; font-weight: 700; margin: 0 0 12px; }
.ste-content-section p { color: var(--text-secondary); margin: 0 0 12px; }
.ste-content-section p:last-child { margin-bottom: 0; }
.ste-content-section .ste-info-list { margin-top: 8px; }
.ste-updated-date { color: var(--text-muted); font-size: 0.82rem; margin: 4px 0 0; }

.ste-owner-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--bg-alt);
    border: 1px dashed var(--border-color-strong);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin: 10px 0;
}
.ste-owner-note-icon { font-size: 1rem; }
.ste-owner-note p { margin: 0; color: var(--text-secondary); font-size: 0.88rem; line-height: 1.55; }

.ste-contact-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-alt);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin: 10px 0;
}
.ste-contact-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.ste-contact-value { color: var(--accent-indigo); font-weight: 600; text-decoration: none; font-size: 0.95rem; }
.ste-contact-value:hover { color: var(--accent-hover); text-decoration: underline; }

/* Footer */
.ste-site-footer { background: #070a10; border-top: 1px solid var(--border-color); padding: 48px 20px 20px; margin-top: 64px; }
.ste-footer-inner { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 32px; }
.ste-footer-brand { max-width: 340px; }
.ste-footer-desc { color: var(--text-secondary); font-size: 0.875rem; line-height: 1.6; margin: 12px 0 0; }
.ste-footer-heading { font-size: 0.9rem; font-weight: 700; margin: 0 0 16px; color: #fff; text-transform: uppercase; letter-spacing: 0.04em; }
.ste-footer-links { list-style: none; padding: 0; margin: 0; }
.ste-footer-links li { margin-bottom: 10px; }
.ste-footer-links a { color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; }
.ste-footer-links a:hover { color: var(--text-primary); text-decoration: underline; }
.ste-footer-bottom { text-align: center; border-top: 1px solid var(--border-color); margin-top: 36px; padding-top: 20px; color: var(--text-muted); font-size: 0.82rem; }

/* Responsive Media Queries */
@media (min-width: 640px) {
    .ste-hero-title { font-size: 2.4rem; }
}

@media (min-width: 768px) {
    .ste-nav-desktop { display: flex; }
    .ste-menu-btn { display: none; }
    .ste-grid { grid-template-columns: repeat(2, 1fr); }
    .ste-footer-inner { grid-template-columns: 2fr 1fr 1fr 1fr; }
    .ste-hero-title { font-size: 2.9rem; }
    .ste-card { padding: 36px; }
    .ste-two-panel { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
    .ste-grid { grid-template-columns: repeat(3, 1fr); }
    .ste-grid-related { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 767px) {
    .ste-section-heading-row { flex-direction: column; align-items: flex-start; gap: 10px; }
}