/**
 * TMS Design System v3
 * Look: deep navy + cool paper + cobalt accent. Clean, flat, professional.
 * Class names from v2 (.ojasys-*, .plan-*, .btn-ojasys-*, .pr-*, .ct-*, .pf-*) are kept,
 * so existing HTML works without changes.
 *
 * Table of contents
 *  1. Tokens (light + dark)
 *  2. Base and typography
 *  3. Page sections
 *  4. Promo bar, header and navigation
 *  5. Buttons
 *  6. Hero and gate widget
 *  7. Timeline
 *  8. Role tabs
 *  9. Comparison rows
 * 10. Price band
 * 11. FAQ and accordion
 * 12. CTA and footer
 * 13. Cards, plan cards, comparison table
 * 14. Marquee, phone frame, callout
 * 15. Mobile menu (offcanvas)
 * 16. Toasts
 * 17. Contact page (.ct-*)
 * 18. Pricing page (.pr-*)
 * 19. Feature page helpers (.pf-*)
 * 20. RTL
 * 21. Accessibility and motion
 */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root,
:root[data-theme="light"] {
    /* Section backgrounds */
    --dark: #0F1B2D;
    --dark-2: #0A1424;
    --dark-3: #17263D;
    --cream: #F4F6F9;
    --sand: #E9EEF5;
    --white: #FFFFFF;

    /* Semantic surfaces */
    --ground: var(--cream);
    --ground-2: var(--sand);
    --surface: var(--white);
    --surface-2: #F8FAFC;
    --surface-3: var(--sand);
    --surface-card: var(--white);

    /* Lines */
    --line: #D6DEEA;
    --line-soft: #E4EAF2;
    --line-dark: rgba(255, 255, 255, 0.10);
    --line-accent: rgba(36, 87, 245, 0.35);

    /* Text */
    --ink: #0F1B2D;
    --ink-2: #44546A;
    --ink-3: #66758B;
    --ink-on-dark: #F1F5FB;
    --ink-on-dark-2: #A5B3C8;

    /* Accent (cobalt) */
    --accent: #2457F5;
    --accent-hot: #4A74FF;
    --accent-ink: #1B46D1;       /* accent used as TEXT on light backgrounds */
    --accent-soft: #7FA2FF;      /* accent used as TEXT on dark backgrounds */
    --accent-wash: #E8EEFF;
    --accent-glow: rgba(36, 87, 245, 0.30);
    --on-accent: #FFFFFF;        /* text placed on the accent colour */

    /* Status */
    --safe: #12805C;
    --safe-wash: #DDF3EA;
    --warn: #A15C07;
    --warn-wash: #FDEFD3;
    --crit: #C62839;
    --crit-wash: #FBE1E4;

    /* Elevation */
    --shadow-sm: 0 1px 2px rgba(15, 27, 45, 0.06);
    --shadow-md: 0 6px 18px rgba(15, 27, 45, 0.08);
    --shadow-lg: 0 16px 36px rgba(15, 27, 45, 0.14);
    --shadow-accent: 0 10px 26px rgba(36, 87, 245, 0.28);

    /* Navbar */
    --nav-bg: rgba(15, 27, 45, 0.92);
    --nav-border: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] {
    --cream: #0E1727;
    --sand: #0A1220;
    --white: #142238;

    --ground: var(--cream);
    --ground-2: var(--sand);
    --surface: #142238;
    --surface-2: #19293F;
    --surface-3: #203249;
    --surface-card: #142238;

    --line: rgba(255, 255, 255, 0.14);
    --line-soft: rgba(255, 255, 255, 0.08);
    --line-accent: rgba(127, 162, 255, 0.45);

    --ink: #F1F5FB;
    --ink-2: #B3C0D3;
    --ink-3: #8795AA;

    --accent-ink: #7FA2FF;
    --accent-wash: rgba(74, 116, 255, 0.16);

    --safe: #6BD0A5;
    --safe-wash: rgba(107, 208, 165, 0.16);
    --warn: #F2C45A;
    --warn-wash: rgba(242, 196, 90, 0.14);
    --crit: #FF8F9B;
    --crit-wash: rgba(255, 143, 155, 0.16);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.55);
}

:root {
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-display: "Manrope", var(--font-sans);
    --font-body: "Inter", var(--font-sans);
    --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;

    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-pill: 999px;
    --transition: 0.18s ease;

    --container: 1100px;
    --section-y: clamp(3.5rem, 7vw, 6rem);
}

/* ==========================================================================
   2. Base and typography
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink);
    background-color: var(--ground);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin: 0 0 0.75rem;
}

h1, .h1 {
    font-size: clamp(2rem, 4.6vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.08;
}

h2, .h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3, .h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); letter-spacing: -0.015em; }
h4, .h4 { font-size: 1.1rem; letter-spacing: -0.01em; }

p {
    color: var(--ink-2);
    margin: 0 0 1rem;
    max-width: 66ch;
}

.lead {
    font-size: 1.12rem;
    line-height: 1.65;
    color: var(--ink-2);
}

a { color: inherit; }

.container-tms {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Small section label (sentence case, no tracking) */
.sec-index,
.ojasys-eyebrow {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--accent-ink);
    margin-bottom: 0.75rem;
    background: none;
    border: 0;
    padding: 0;
}

/* ==========================================================================
   3. Page sections
   ========================================================================== */

.sec {
    padding: var(--section-y) 0;
    position: relative;
}

.sec-dark { background: var(--dark); color: var(--ink-on-dark); }
.sec-cream { background: var(--cream); }
.sec-sand { background: var(--sand); }
.sec-amber { background: var(--accent); color: var(--on-accent); } /* name kept; now the accent band */

.sec-dark h1, .sec-dark h2, .sec-dark h3, .sec-dark h4,
.sec-amber h1, .sec-amber h2, .sec-amber h3, .sec-amber h4 {
    color: inherit;
}

.sec-dark p, .sec-dark .lead { color: var(--ink-on-dark-2); }
.sec-amber p { color: rgba(255, 255, 255, 0.88); }
.sec-dark .sec-index { color: var(--accent-soft); }
.sec-amber .sec-index { color: var(--on-accent); opacity: 0.85; }

/* ==========================================================================
   4. Promo bar, header and navigation
   ========================================================================== */

.tms-promo {
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.84rem;
    font-weight: 500;
    text-align: center;
    padding: 0.5rem 1rem;
    line-height: 1.35;
}

.tms-promo i { margin-right: 0.35rem; }

.tms-promo a {
    color: var(--on-accent);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-left: 0.5rem;
    white-space: nowrap;
}

.ojasys-navbar,
header.ojasys-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--nav-bg);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--nav-border);
    padding: 0.7rem 0;
}

/* Thin accent glow under the header */
header.ojasys-navbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(74, 116, 255, 0.7), transparent);
    pointer-events: none;
}

/* Brand */
.brand-logo-container,
.tms-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    text-decoration: none;
    color: var(--ink-on-dark);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
}

.brand-logo-container.on-white {
    background: #FFFFFF;
    border-radius: var(--radius-sm);
    padding: 4px 10px;
}

.brand-logo-img {
    height: 32px;
    width: auto;
    max-width: 100%;
    display: block;
    object-fit: contain;
}

.tms-brand-mark {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: var(--accent);
    color: var(--on-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    box-shadow: 0 6px 16px var(--accent-glow);
    flex-shrink: 0;
}

.tms-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.tms-brand-name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: -0.02em;
    color: var(--ink-on-dark);
}

/* Desktop links: plain text with an accent underline on hover / active */
.ojasys-navbar .tms-navlinks { gap: 0.35rem; }

.ojasys-navbar .nav-link,
.ojasys-navbar .tms-navlinks .nav-link {
    position: relative;
    background: transparent !important;
    border-radius: 0;
    padding: 0.55rem 0.95rem !important;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 0.93rem;
    color: var(--ink-on-dark-2);
    transition: color var(--transition);
}

.ojasys-navbar .nav-link::after {
    content: "";
    position: absolute;
    left: 0.95rem;
    right: 0.95rem;
    bottom: 0.1rem;
    height: 2px;
    border-radius: 2px;
    background: var(--accent-hot);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.22s ease;
}

.ojasys-navbar .nav-link:hover { color: var(--ink-on-dark); }
.ojasys-navbar .nav-link:hover::after,
.ojasys-navbar .nav-link.active::after { transform: scaleX(1); }
.ojasys-navbar .nav-link.active { color: var(--ink-on-dark); font-weight: 600; }

.ojasys-navbar .navbar-toggler {
    border: 1px solid var(--line-dark) !important;
    border-radius: var(--radius-sm);
}

.ojasys-navbar .navbar-toggler:focus { box-shadow: none; }

/* Right-side controls */
.theme-toggle-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--line-dark);
    background: transparent;
    color: var(--ink-on-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: border-color var(--transition), color var(--transition);
}

.theme-toggle-btn:hover {
    border-color: var(--accent-hot);
    color: var(--accent-soft);
}

.lang-dropdown-btn {
    height: 38px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line-dark);
    background: transparent;
    color: var(--ink-on-dark);
    font-size: 0.86rem;
    font-weight: 500;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: border-color var(--transition);
}

.lang-dropdown-btn:hover { border-color: var(--accent-hot); }

.lang-dropdown-menu {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 10px;
    min-width: 290px;
    max-height: 420px;
    overflow-y: auto;
}

.lang-dropdown-menu .region-heading {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-3);
    padding: 6px 10px 2px;
}

.lang-dropdown-menu .dropdown-item {
    color: var(--ink);
    font-size: 0.88rem;
    padding: 7px 12px;
    border-radius: var(--radius-xs);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lang-dropdown-menu .dropdown-item:hover,
.lang-dropdown-menu .dropdown-item.active {
    background: var(--accent-wash);
    color: var(--ink);
}

.header-persistent-actions { flex-shrink: 0; }

.ojasys-navbar .header-persistent-actions .btn-ojasys-primary {
    box-shadow: 0 6px 18px var(--accent-glow);
}

@media (max-width: 575.98px) {
    .header-persistent-actions .lang-dropdown-btn {
        padding: 0 8px;
        height: 34px;
        font-size: 0.8rem;
        gap: 4px;
    }

    .header-persistent-actions .btn-sm {
        padding: 4px 10px !important;
        font-size: 0.82rem !important;
    }

    .brand-logo-img { height: 28px; }
}

/* Geo banner */
.ojasys-geo-banner {
    background: var(--accent-wash);
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: 0.88rem;
    padding: 8px 16px;
    display: none;
    position: relative;
    z-index: 1040;
}

.ojasys-geo-banner .banner-container {
    max-width: 1320px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.chip-btn,
.ojasys-geo-banner .chip-btn {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    padding: 6px 16px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
}

.chip-btn:hover,
.chip-btn.active,
.ojasys-geo-banner .chip-btn:hover {
    background: var(--dark);
    color: var(--ink-on-dark);
    border-color: var(--dark);
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.btn-ojasys-primary,
.btn-ojasys-outline,
.btn-ojasys-dark,
.btn-ojasys-green {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.92rem;
    padding: 10px 22px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}

.btn-ojasys-primary {
    background: var(--accent);
    color: var(--on-accent) !important;
    border: 1px solid var(--accent);
}

.btn-ojasys-primary:hover {
    background: var(--accent-hot);
    border-color: var(--accent-hot);
    color: var(--on-accent) !important;
}

.btn-ojasys-outline {
    background: transparent;
    color: var(--ink) !important;
    border: 1px solid var(--ink);
}

.btn-ojasys-outline:hover {
    background: var(--ink);
    color: var(--cream) !important;
}

/* Outline button on dark surfaces */
.sec-dark .btn-ojasys-outline,
.ojasys-navbar .btn-ojasys-outline {
    color: var(--ink-on-dark) !important;
    border-color: rgba(241, 245, 251, 0.3);
}

.sec-dark .btn-ojasys-outline:hover,
.ojasys-navbar .btn-ojasys-outline:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent-hot);
    color: var(--ink-on-dark) !important;
}

.btn-ojasys-dark {
    background: var(--dark);
    color: var(--ink-on-dark) !important;
    border: 1px solid var(--dark);
}

.btn-ojasys-dark:hover {
    background: var(--dark-3);
    border-color: var(--dark-3);
}

.btn-ojasys-green {
    background: var(--safe);
    color: #FFFFFF !important;
    border: 1px solid var(--safe);
}

.btn-ojasys-green:hover { opacity: 0.92; }

/* Underlined text link */
.link-underline {
    display: inline-block;
    color: var(--ink-on-dark);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--accent-hot);
    transition: color var(--transition);
}

.link-underline:hover { color: var(--accent-soft); }

/* ==========================================================================
   6. Hero and gate widget
   ========================================================================== */

.hero { padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem); }

.hero h1 { color: var(--ink-on-dark); max-width: 14ch; }

.hero .lead {
    max-width: 52ch;
    color: var(--ink-on-dark-2);
}

.gate {
    background: var(--cream);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1.1fr;
    gap: 1.25rem;
    color: var(--ink);
}

.gate-col-title,
.verdict-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink-3);
    margin-bottom: 0.65rem;
}

.gate-option {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--white);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-md);
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.6rem;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--ink-2);
    transition: border-color var(--transition), background var(--transition);
}

.gate-option strong {
    display: block;
    color: var(--ink);
    font-size: 0.88rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.gate-option:hover { border-color: var(--accent); }

.gate-option.selected {
    background: var(--dark);
    border-color: var(--accent-hot);
    color: var(--ink-on-dark-2);
}

.gate-option.selected strong { color: var(--ink-on-dark); }

.verdict {
    background: var(--white);
    border-radius: var(--radius-md);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.verdict-badge {
    align-self: flex-start;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    padding: 0.45rem 0.9rem;
    border-radius: var(--radius-md);
    background: var(--safe-wash);
    color: var(--safe);
}

.verdict-badge.is-warn { background: var(--warn-wash); color: var(--warn); }
.verdict-badge.is-block { background: var(--crit-wash); color: var(--crit); }

.verdict-note {
    font-size: 0.82rem;
    color: var(--ink-2);
    display: grid;
    grid-template-columns: 2.2rem 1fr;
    gap: 0.5rem;
}

.verdict-note .tag {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--safe);
}

.verdict-foot {
    margin-top: auto;
    font-size: 0.74rem;
    color: var(--ink-3);
}

.sample-note {
    font-size: 0.76rem;
    color: var(--ink-on-dark-2);
    margin: 0.6rem 0 0;
}

/* Stats row */
.stat-row { display: flex; gap: 2rem; flex-wrap: wrap; }

.stat .stat-num {
    font-family: var(--font-mono);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--accent-soft);
    display: block;
}

.stat .stat-label {
    font-size: 0.8rem;
    color: var(--ink-on-dark-2);
}

/* ==========================================================================
   7. Timeline
   ========================================================================== */

.timeline {
    background: var(--dark);
    color: var(--ink-on-dark);
    border-radius: var(--radius-lg);
    padding: 0.5rem 1.5rem;
}

.timeline-row {
    display: grid;
    grid-template-columns: 90px 1.1fr 1.3fr;
    gap: 1.25rem;
    align-items: start;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--line-dark);
}

.timeline-row:last-child { border-bottom: 0; }

.timeline-time {
    font-family: var(--font-mono);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--accent-soft);
}

.module-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent-soft);
    background: rgba(74, 116, 255, 0.14);
    border-radius: var(--radius-xs);
    padding: 2px 8px;
    margin-bottom: 6px;
}

.timeline-title {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--ink-on-dark);
}

.timeline-desc {
    font-size: 0.86rem;
    color: var(--ink-on-dark-2);
    margin: 0;
}

/* ==========================================================================
   8. Role tabs
   ========================================================================== */

.role-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.role-tab {
    font-family: var(--font-sans);
    font-size: 0.86rem;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--ink);
    cursor: pointer;
    transition: all var(--transition);
}

.role-tab:hover { border-color: var(--ink); }

.role-tab.active {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
}

.role-panel {
    background: var(--white);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 2rem;
}

.role-points { display: grid; gap: 0.6rem; align-content: start; }

.role-point {
    background: var(--cream);
    border-radius: var(--radius-sm);
    padding: 0.8rem 1rem;
    font-size: 0.9rem;
    color: var(--ink);
}

/* ==========================================================================
   9. Comparison rows
   ========================================================================== */

.compare { border-top: 1px solid var(--line); }

.compare-row {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1.2fr;
    border-bottom: 1px solid var(--line);
}

.compare-row > div { padding: 1.1rem 1.25rem; }

.compare-topic {
    font-family: var(--font-display);
    font-weight: 700;
    padding-left: 0 !important;
}

.compare-with { background: var(--accent-wash); }

.compare-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-3);
    margin-bottom: 4px;
}

.compare-with .compare-label { color: var(--accent-ink); }

.compare-row p { font-size: 0.9rem; margin: 0; }
.compare-with p { color: var(--ink); }

/* ==========================================================================
   10. Price band (accent)
   ========================================================================== */

.price-band {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.price-band > * { min-width: 0; }

.price-big {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(3rem, 11vw, 7rem);
    letter-spacing: -0.05em;
    line-height: 0.95;
    color: var(--on-accent);
}

.price-points { list-style: none; margin: 0 0 1.5rem; padding: 0; }

.price-points li {
    font-weight: 600;
    padding: 0.7rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
}

/* ==========================================================================
   11. FAQ and accordion
   ========================================================================== */

.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }

.faq-item summary,
.accordion-button {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ink);
    padding: 1.1rem 0;
    background: transparent;
    border: 0;
    box-shadow: none !important;
}

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

.faq-item summary::after {
    content: "+";
    font-family: var(--font-sans);
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1;
    color: var(--accent-ink);
}

.faq-item[open] summary::after { content: "\2212"; }

.faq-item .faq-body {
    padding: 0 0 1.25rem;
    font-size: 0.95rem;
    color: var(--ink-2);
    max-width: 62ch;
}

/* Bootstrap accordion mapped to the same look */
.accordion-item {
    background: transparent;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    border-radius: 0 !important;
    margin: 0;
}

.accordion-button:not(.collapsed) { background: transparent; color: var(--ink); }

.accordion-body {
    color: var(--ink-2);
    font-size: 0.95rem;
    padding: 0 0 1.25rem;
    background: transparent;
}

/* ==========================================================================
   12. CTA and footer
   ========================================================================== */

.ojasys-cta-section {
    background: var(--dark);
    color: var(--ink-on-dark);
    padding: var(--section-y) 0;
    position: relative;
}

.ojasys-cta-section h2 {
    color: var(--ink-on-dark);
    font-size: clamp(2rem, 4.6vw, 3.2rem);
}

.ojasys-cta-section h2 .hl { color: var(--accent-soft); }
.ojasys-cta-section p { color: var(--ink-on-dark-2); }

.ojasys-footer {
    background: var(--dark-2);
    color: var(--ink-on-dark-2);
    border-top: 1px solid var(--line-dark);
    padding: 2.5rem 0 1.5rem;
    position: relative;
}

.ojasys-footer h6,
.ojasys-footer .footer-col-title {
    color: var(--ink-on-dark);
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0;
    margin-bottom: 1rem;
}

.ojasys-footer ul { list-style: none; padding: 0; margin: 0; }
.ojasys-footer ul li { margin-bottom: 0.4rem; }

.ojasys-footer ul li.footer-contact-item {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--line-dark);
}

.ojasys-footer ul li a {
    color: var(--ink-on-dark-2);
    text-decoration: none;
    font-size: 0.88rem;
    transition: color var(--transition);
}

.ojasys-footer ul li a:hover { color: var(--accent-soft); }

.footer-legal-notice {
    color: var(--ink-on-dark-2);
    opacity: 0.75;
    font-size: 0.78rem;
    line-height: 1.5;
}

.footer-bottom {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line-dark);
    font-size: 0.82rem;
    color: var(--ink-on-dark-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

/* ==========================================================================
   13. Cards, plan cards, comparison table
   ========================================================================== */

.ojasys-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.ojasys-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.ojasys-card.featured { border: 2px solid var(--accent); }

.ojasys-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 1.25rem;
    background: var(--accent-wash);
    color: var(--accent-ink);
}

.feature-list { list-style: none; padding: 0; margin: 1.25rem 0; flex-grow: 1; }

.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.92rem;
    color: var(--ink-2);
    margin-bottom: 0.6rem;
    line-height: 1.45;
}

.feature-list li i {
    color: var(--safe);
    font-size: 1.05rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.pricing-section-container { position: relative; z-index: 1; }

.pricing-controls-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

.currency-select-box {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 6px 16px;
    border-radius: var(--radius-pill);
}

.currency-select-box:focus-within { border-color: var(--accent); }

.currency-select-box label {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink-2);
    display: flex;
    align-items: center;
    gap: 6px;
}

.currency-select-box select {
    background: transparent;
    border: none;
    font-family: var(--font-sans);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    outline: none;
    padding: 4px 8px;
}

.currency-select-box select option { background: var(--surface); color: var(--ink); }

.bill-toggle-wrap {
    display: inline-flex;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 4px;
    border-radius: var(--radius-pill);
}

.bill-toggle-opt {
    padding: 8px 22px;
    border-radius: var(--radius-pill);
    border: none;
    background: transparent;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink-2);
    cursor: pointer;
    transition: all var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.bill-toggle-opt.active { background: var(--accent); color: var(--on-accent); }

.bill-save-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--safe-wash);
    color: var(--safe);
}

.bill-toggle-opt.active .bill-save-badge { background: #FFFFFF; color: var(--accent-ink); }

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    align-items: stretch;
}

.plan-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.85rem 1.35rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.plan-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }

.plan-card.highlighted {
    background: var(--dark);
    border: 2px solid var(--accent-hot);
    color: var(--ink-on-dark);
}

.plan-card.highlighted .plan-name,
.plan-card.highlighted .plan-price { color: var(--ink-on-dark); }

.plan-card.highlighted .plan-desc,
.plan-card.highlighted .plan-billing-note,
.plan-card.highlighted .plan-price .period,
.plan-card.highlighted .feature-list li { color: var(--ink-on-dark-2); }

.plan-card.highlighted .plan-metrics-box { background: var(--dark-3); border-color: var(--line-dark); }
.plan-card.highlighted .metric-item { color: var(--ink-on-dark-2); }
.plan-card.highlighted .metric-item strong { color: var(--ink-on-dark); }

.plan-top-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.74rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.plan-name {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 0.35rem;
}

.plan-desc {
    font-size: 0.88rem;
    color: var(--ink-2);
    min-height: 42px;
    margin-bottom: 1.25rem;
    line-height: 1.45;
}

.plan-price-box { margin-bottom: 1.25rem; }

.plan-price {
    font-family: var(--font-display);
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--ink);
    line-height: 1;
}

.plan-price .currency {
    font-size: 1.3rem;
    vertical-align: super;
    font-weight: 600;
    margin-right: 2px;
}

.plan-price .period {
    font-family: var(--font-sans);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--ink-3);
    letter-spacing: normal;
}

.plan-billing-note { font-size: 0.78rem; color: var(--ink-3); margin-top: 4px; }

.plan-metrics-box {
    background: var(--cream);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-bottom: 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.metric-item {
    font-size: 0.8rem;
    color: var(--ink-2);
    display: flex;
    align-items: center;
    gap: 6px;
}

.metric-item strong { color: var(--ink); font-weight: 600; }

.comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.comparison-table th,
.comparison-table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 0.9rem;
}

.comparison-table th {
    background: var(--cream);
    color: var(--ink);
    font-weight: 600;
    text-align: center;
}

.comparison-table td { color: var(--ink-2); text-align: center; }

.comparison-table td:first-child,
.comparison-table th:first-child { text-align: left; }

.comparison-table tr.category-row th,
.comparison-table tr.category-row td {
    background: var(--dark);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent-soft);
    padding: 10px 18px;
}

/* ==========================================================================
   14. Marquee, phone frame, callout
   ========================================================================== */

.tms-marquee {
    overflow: hidden;
    border-top: 1px solid var(--line-dark);
    border-bottom: 1px solid var(--line-dark);
    padding: 0.9rem 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.tms-marquee-track {
    display: flex;
    gap: 0.9rem;
    width: max-content;
    animation: tmsScroll 45s linear infinite;
}

.tms-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    white-space: nowrap;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ink-on-dark);
    background: var(--dark-3);
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-pill);
    padding: 0.5rem 1rem;
}

.tms-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.tms-dot.g { background: #6BD0A5; }
.tms-dot.y { background: #F2C45A; }
.tms-dot.r { background: #FF8F9B; }

@keyframes tmsScroll { to { transform: translateX(-50%); } }

.tms-phone {
    max-width: 280px;
    margin: 0 auto;
    background: var(--dark-3);
    border: 8px solid #050B14;
    border-radius: 38px;
    padding: 1.1rem 1rem 1.25rem;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}

.tms-phone-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--dark);
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.75rem;
    font-size: 0.8rem;
    color: var(--ink-on-dark);
    margin-bottom: 0.45rem;
}

.tms-callout .mono {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-soft);
    display: block;
    margin-bottom: 0.35rem;
}

.tms-callout h4 { color: var(--ink-on-dark); margin-bottom: 0.4rem; }
.tms-callout p { font-size: 0.9rem; margin-bottom: 0; }

/* ==========================================================================
   15. Mobile menu (offcanvas)
   ========================================================================== */

.offcanvas { background: var(--dark); color: var(--ink-on-dark); }
.offcanvas .offcanvas-header { border-bottom: 1px solid var(--line-dark); }
.offcanvas .btn-close { filter: invert(1) grayscale(1) brightness(2); opacity: .8; }

.offcanvas .nav-link {
    color: var(--ink-on-dark);
    font-weight: 500;
    border-radius: var(--radius-sm);
    padding: .6rem .75rem;
}

.offcanvas .nav-link:hover,
.offcanvas .nav-link.is-active { color: var(--on-accent); background: var(--accent); }

.offcanvas .menu-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--ink-on-dark-2);
}

.offcanvas .chip-btn { background: transparent; color: var(--ink-on-dark); border-color: var(--line-dark); }

.offcanvas .chip-btn:hover,
.offcanvas .chip-btn.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

.offcanvas hr { border-color: var(--line-dark); opacity: 1; }
.offcanvas .menu-foot { border-top: 1px solid var(--line-dark); }

/* ==========================================================================
   16. Toasts
   ========================================================================== */

#toast-container > .toast-success { background-color: var(--safe) !important; background-image: none !important; opacity: 1 !important; }
#toast-container > .toast-info { background-color: var(--accent) !important; background-image: none !important; opacity: 1 !important; }
#toast-container > .toast-error { background-color: var(--crit) !important; background-image: none !important; opacity: 1 !important; }
#toast-container > .toast-warning { background-color: #F2A900 !important; background-image: none !important; opacity: 1 !important; }

#toast-container .toast-title,
#toast-container .toast-message,
#toast-container .toast-close-button { color: #FFFFFF !important; opacity: 1 !important; }

#toast-container > .toast-warning .toast-title,
#toast-container > .toast-warning .toast-message,
#toast-container > .toast-warning .toast-close-button { color: #1A1203 !important; }

#toast-container .toast-progress { background-color: rgba(255, 255, 255, .5) !important; }

/* ==========================================================================
   17. Contact page (.ct-*)
   ========================================================================== */

.ct-hero {
    background: var(--dark);
    color: var(--ink-on-dark);
    position: relative;
    overflow: hidden;
}

.ct-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .5;
    background-image: linear-gradient(var(--line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse at 20% 30%, #000 10%, transparent 70%);
    mask-image: radial-gradient(ellipse at 20% 30%, #000 10%, transparent 70%);
}

.ct-hero .container-tms { position: relative; }

.ct-brand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 2rem;
    text-decoration: none;
}

.ct-brand img { width: 44px; height: 44px; display: block; }

.ct-brand span {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--ink-on-dark);
    letter-spacing: -.02em;
}

.ct-brand span em { font-style: normal; color: var(--accent-soft); }

.ct-hero h1 { color: var(--ink-on-dark); max-width: 14ch; }
.ct-hero h1 .hl { color: var(--accent-soft); }
.ct-hero .lead { color: var(--ink-on-dark-2); max-width: 50ch; }

.ct-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
    padding: clamp(3rem, 6vw, 5rem) 0 clamp(3.5rem, 7vw, 6rem);
}

.ct-stats { display: flex; gap: 2.25rem; flex-wrap: wrap; margin-top: 2rem; }

.ct-stats .num {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--accent-soft);
    display: block;
    line-height: 1.1;
}

.ct-stats .lbl { font-size: .8rem; color: var(--ink-on-dark-2); }

/* Form panel */
.ct-form {
    background: var(--cream);
    color: var(--ink);
    border-radius: var(--radius-lg);
    padding: clamp(1.4rem, 3vw, 2.25rem);
    box-shadow: var(--shadow-lg);
}

.ct-form h2 { font-size: 1.6rem; margin-bottom: .35rem; color: var(--ink); }
.ct-form > p { font-size: .9rem; margin-bottom: 1.5rem; }

.ct-field { margin-bottom: 1rem; }

.ct-field label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-2);
    margin-bottom: .4rem;
}

.ct-field input,
.ct-field select,
.ct-field textarea {
    width: 100%;
    background: var(--surface);
    color: var(--ink);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .7rem .85rem;
    font: inherit;
    font-size: .95rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.ct-field input:focus,
.ct-field select:focus,
.ct-field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.ct-submit { width: 100%; margin-top: .5rem; padding: .95rem 1.25rem; }

.ct-privacy {
    font-size: .76rem;
    color: var(--ink-3);
    margin: .9rem 0 0;
    max-width: none;
    text-align: center;
}

.ct-msg {
    display: none;
    margin-top: 1rem;
    padding: .85rem 1rem;
    border-radius: var(--radius-sm);
    font-size: .9rem;
}

.ct-msg.show { display: block; }
.ct-msg.ok { background: var(--safe-wash); color: var(--safe); }
.ct-msg.err { background: var(--crit-wash); color: var(--crit); }

/* Steps */
.ct-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--line);
}

.ct-step { padding: 1.75rem 1.5rem 1.75rem 0; border-right: 1px solid var(--line); }
.ct-step + .ct-step { padding-left: 1.5rem; }
.ct-step:last-child { border-right: 0; }

.ct-step .n {
    font-family: var(--font-mono);
    font-size: .85rem;
    font-weight: 600;
    color: var(--accent-ink);
    display: block;
    margin-bottom: .75rem;
}

.ct-step h3 { font-size: 1.2rem; margin-bottom: .4rem; }
.ct-step p { font-size: .9rem; margin: 0; }

/* Channels */
.ct-channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }

.ct-chan {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.6rem;
    transition: border-color var(--transition), transform var(--transition);
}

.ct-chan:hover { border-color: var(--accent); transform: translateY(-2px); }

.ct-chan .ico {
    width: 46px;
    height: 46px;
    border-radius: var(--radius-md);
    background: var(--accent-wash);
    color: var(--accent-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.ct-chan h3 { font-size: 1.1rem; margin-bottom: .3rem; }
.ct-chan p { font-size: .88rem; margin-bottom: .9rem; }

.ct-chan a {
    font-size: .88rem;
    font-weight: 600;
    color: var(--accent-ink);
    text-decoration: none;
    border-bottom: 2px solid var(--accent);
    padding-bottom: 2px;
    word-break: break-all;
}

/* Coverage */
.ct-cover { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.ct-cover .tms-chip { background: var(--dark-3); }

/* ==========================================================================
   18. Pricing page (.pr-*)
   ========================================================================== */

.pr-hero,
.pr-plans,
.pr-every,
.pr-matrix { overflow-x: clip; }

/* Hero */
.pr-hero {
    background: var(--dark);
    color: var(--ink-on-dark);
    position: relative;
    overflow: hidden;
    padding: clamp(3rem, 6vw, 5rem) 0 clamp(8rem, 12vw, 10rem);
}

.pr-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .55;
    background-image: linear-gradient(var(--line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse at 15% 20%, #000 5%, transparent 70%);
    mask-image: radial-gradient(ellipse at 15% 20%, #000 5%, transparent 70%);
}

.pr-hero .container-tms { position: relative; max-width: 1240px; }

.pr-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
    gap: 3rem;
    align-items: end;
}

.pr-hero h1 { color: var(--ink-on-dark); font-size: clamp(2.2rem, 5vw, 3.8rem); max-width: 16ch; }
.pr-hero h1 .hl { color: var(--accent-soft); }
.pr-hero .lead { color: var(--ink-on-dark-2); max-width: 52ch; margin: 0; }

.pr-side { display: flex; flex-direction: column; align-items: flex-end; gap: 1.1rem; }

.pr-toggle {
    display: inline-flex;
    padding: 5px;
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-pill);
    background: var(--dark-3);
}

.pr-toggle button {
    border: 0;
    background: transparent;
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    color: var(--ink-on-dark-2);
    padding: .6rem 1.3rem;
    border-radius: var(--radius-pill);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    transition: all var(--transition);
    min-height: 44px;
}

.pr-toggle button.active { background: var(--accent); color: var(--on-accent); }

.pr-save {
    font-size: .7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .12);
    color: var(--ink-on-dark);
}

.pr-toggle button.active .pr-save { background: #FFFFFF; color: var(--accent-ink); }

.pr-facts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .45rem;
    font-size: .88rem;
    color: var(--ink-on-dark-2);
    text-align: right;
}

.pr-facts i { color: var(--accent-soft); margin-left: .4rem; }

/* Plans (overlap the hero) */
.pr-plans { background: var(--cream); padding: 0 0 clamp(3.5rem, 6vw, 5rem); }
.pr-plans .container-tms { max-width: 1240px; }

.pr-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-top: calc(-1 * clamp(5rem, 8vw, 6.5rem));
    position: relative;
    z-index: 2;
    align-items: stretch;
}

.pr-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.4rem 1.5rem;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.pr-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-lg); }

.pr-card.featured {
    background: var(--dark);
    border: 2px solid var(--accent-hot);
    color: var(--ink-on-dark);
    box-shadow: var(--shadow-accent);
}

.pr-card.featured:hover { border-color: var(--accent-hot); }

.pr-card,
.pr-card * { min-width: 0; }

.pr-badge {
    position: absolute;
    top: -13px;
    left: 1.4rem;
    background: var(--accent);
    color: var(--on-accent);
    font-size: .74rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.pr-name { font-size: 1.3rem; margin: 0 0 .35rem; }

.pr-desc {
    font-size: .88rem;
    line-height: 1.5;
    min-height: 3.9em;
    margin: 0 0 1.25rem;
}

.pr-price-box { margin-bottom: 1.1rem; min-height: 4.4rem; }

.pr-price {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2.8rem;
    letter-spacing: -.04em;
    line-height: 1;
    color: var(--ink);
}

.pr-price .currency { font-size: 1.4rem; vertical-align: super; font-weight: 600; margin-right: 2px; }

.pr-price .period {
    font-family: var(--font-sans);
    font-size: .92rem;
    font-weight: 500;
    letter-spacing: normal;
    color: var(--ink-3);
    margin-left: .25rem;
}

.pr-price.custom { font-size: 2.3rem; }

.pr-note { font-size: .78rem; color: var(--ink-3); margin-top: .5rem; }

.pr-name,
.pr-desc,
.pr-note,
.pr-list li { overflow-wrap: anywhere; }

.pr-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    min-height: 44px;
    padding: .8rem 1rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: .92rem;
    text-decoration: none;
    border: 1px solid var(--ink);
    color: var(--ink);
    background: transparent;
    transition: all var(--transition);
    margin-bottom: 1.4rem;
}

.pr-cta:hover { background: var(--ink); color: var(--cream); }

.pr-cta.solid { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pr-cta.solid:hover { background: var(--accent-hot); border-color: var(--accent-hot); color: var(--on-accent); }

.pr-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: 1.4rem; }

.pr-metric {
    display: flex;
    align-items: center;
    gap: .55rem;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    padding: .6rem .7rem;
    font-size: .8rem;
    color: var(--ink-2);
    line-height: 1.2;
}

.pr-metric i { color: var(--accent-ink); font-size: 1.05rem; }

.pr-metric strong {
    display: block;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: .92rem;
}

.pr-incl { font-size: .8rem; font-weight: 600; color: var(--ink-3); margin-bottom: .8rem; }

.pr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }

.pr-list li {
    display: flex;
    gap: .6rem;
    font-size: .88rem;
    line-height: 1.4;
    color: var(--ink-2);
}

.pr-list li i { color: var(--safe); flex-shrink: 0; margin-top: 2px; }

/* Featured card colours */
.pr-card.featured .pr-name,
.pr-card.featured .pr-price { color: var(--ink-on-dark); }

.pr-card.featured .pr-desc,
.pr-card.featured .pr-list li,
.pr-card.featured .pr-metric,
.pr-card.featured .pr-price .period,
.pr-card.featured .pr-note,
.pr-card.featured .pr-incl { color: var(--ink-on-dark-2); }

.pr-card.featured .pr-metric { background: var(--dark-3); border-color: var(--line-dark); }
.pr-card.featured .pr-metric strong { color: var(--ink-on-dark); }
.pr-card.featured .pr-metric i,
.pr-card.featured .pr-list li i { color: var(--accent-soft); }

.pr-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 0;
    font-size: 1.1rem;
    background: var(--surface);
    border-radius: var(--radius-lg);
}

.pr-fine {
    text-align: center;
    font-size: .86rem;
    color: var(--ink-2);
    margin: 1.75rem auto 0;
    max-width: none;
}

/* Included in every plan (dark) */
.pr-every-head { max-width: 1240px; }
.pr-every h2 { max-width: 20ch; }

.pr-every-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 2.5rem;
    border-top: 1px solid var(--line-dark);
}

.pr-every-item { padding: 1.75rem 1.5rem 1.75rem 0; border-bottom: 1px solid var(--line-dark); }

.pr-every-item:not(:nth-child(3n+1)) {
    padding-left: 1.5rem;
    border-left: 1px solid var(--line-dark);
}

.pr-every-item .module-tag { margin-bottom: .75rem; }
.pr-every-item h3 { font-size: 1.2rem; color: var(--ink-on-dark); margin-bottom: .4rem; }
.pr-every-item p { font-size: .9rem; margin: 0; color: var(--ink-on-dark-2); }

/* Feature matrix */
.pr-matrix h2 { max-width: 22ch; }

.pr-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    margin-top: 2rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.pr-table {
    width: 100%;
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0;
}

.pr-table th,
.pr-table td {
    padding: .95rem 1.1rem;
    font-size: .9rem;
    border-bottom: 1px solid var(--line-soft);
    text-align: center;
    color: var(--ink-2);
}

.pr-table thead th {
    background: var(--surface-2);
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--ink);
    padding: 1.2rem 1.1rem;
}

.pr-table th:first-child,
.pr-table td:first-child { text-align: left; }

.pr-table tbody th[scope=row] {
    font-weight: 500;
    color: var(--ink);
    position: sticky;
    left: 0;
    background: var(--surface);
    width: 34%;
    z-index: 1;
}

.pr-table .pro { background: var(--accent-wash); color: var(--ink); font-weight: 600; }
.pr-table thead th.pro { color: var(--accent-ink); }

.pr-table tr.cat th {
    background: var(--dark);
    color: var(--accent-soft);
    font-size: .82rem;
    font-weight: 600;
    text-align: left;
    padding: .7rem 1.1rem;
    position: static;
}

.pr-table tbody tr:last-child th,
.pr-table tbody tr:last-child td { border-bottom: 0; }

.pr-yes { color: var(--safe); font-size: 1.15rem; }
.pr-no { color: var(--ink-3); }

.pr-band-btns { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ==========================================================================
   19. Feature page helpers (.pf-*)
   ========================================================================== */

.pf-jump {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: var(--dark);
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    margin-bottom: 0.65rem;
    text-decoration: none;
    transition: border-color var(--transition), transform var(--transition);
}

.pf-jump:hover { border-color: var(--accent-hot); transform: translateX(4px); }
.pf-jump:last-child { margin-bottom: 0; }
.pf-jump .name { color: var(--ink-on-dark); font-weight: 600; font-size: 0.95rem; line-height: 1.25; }
.pf-jump .sub { color: var(--ink-on-dark-2); font-size: 0.8rem; }
.pf-jump i.arrow { margin-left: auto; color: var(--accent-soft); }

.pf-side a {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: var(--ink-2);
    font-weight: 500;
    transition: color var(--transition), padding-left var(--transition);
}

.pf-side a:hover { color: var(--ink); padding-left: 6px; }
.pf-side a .n { font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent-ink); }

.pf-ability { border-top: 2px solid var(--accent); padding-top: 0.9rem; height: 100%; }
.pf-ability i { color: var(--accent-ink); font-size: 1.3rem; }
.pf-ability h4 { font-size: 1.02rem; margin: 0.5rem 0 0.35rem; letter-spacing: -0.01em; }
.pf-ability p { font-size: 0.9rem; margin: 0; }

.pf-track { height: 8px; background: var(--sand); border-radius: 99px; overflow: hidden; }
.pf-fill { height: 100%; border-radius: 99px; }
.pf-meter { margin-bottom: 1rem; }

.pf-meter .top {
    display: flex;
    justify-content: space-between;
    font-size: 0.86rem;
    margin-bottom: 0.35rem;
    color: var(--ink);
}

.pf-meter .top span:last-child { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-2); }

.pf-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background: var(--cream);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.8rem;
    font-size: 0.84rem;
    color: var(--ink);
}

.pf-fact { border-left: 2px solid var(--accent-hot); padding-left: 1rem; height: 100%; }

.pf-fact .k {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-soft);
    display: block;
    margin-bottom: 0.4rem;
}

.pf-fact h4 { color: var(--ink-on-dark); font-size: 1.05rem; margin-bottom: 0.4rem; }
.pf-fact p { font-size: 0.9rem; margin: 0; }

/* ==========================================================================
   20. RTL
   ========================================================================== */

[dir="rtl"] { text-align: right; }
[dir="rtl"] .feature-list li i { transform: scaleX(-1); }

[dir="rtl"] .gate-option,
[dir="rtl"] .comparison-table td:first-child,
[dir="rtl"] .comparison-table th:first-child { text-align: right; }

/* ==========================================================================
   21. Responsive, accessibility and motion
   ========================================================================== */

@media (max-width: 1199.98px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 820px;
        margin: 0 auto;
    }

    .pr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
    .gate { grid-template-columns: 1fr 1fr; }
    .gate .verdict { grid-column: 1 / -1; }
    .role-panel { grid-template-columns: 1fr; }
    .price-band { grid-template-columns: 1fr; gap: 2rem; }
    .ct-grid { grid-template-columns: 1fr; }
    .ct-channels { grid-template-columns: 1fr; }

    .pr-hero-grid { grid-template-columns: minmax(0, 1fr); }
    .pr-side { align-items: flex-start; }
    .pr-facts { text-align: left; }
    .pr-facts i { margin: 0 .4rem 0 0; }
    .pr-every-grid { grid-template-columns: 1fr 1fr; }
    .pr-every-item:nth-child(n) { padding: 1.5rem 1rem 1.5rem 0; border-left: 0; }
}

@media (max-width: 767.98px) {
    .pricing-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
    .gate { grid-template-columns: 1fr; padding: 1rem; }
    .timeline { padding: 0.25rem 1.1rem; }
    .timeline-row { grid-template-columns: 1fr; gap: 0.4rem; }
    .compare-row { grid-template-columns: 1fr; }
    .compare-row > div { padding: 0.8rem 0; }

    .compare-with {
        padding: 0.8rem 1rem !important;
        border-radius: var(--radius-sm);
        margin-bottom: 0.8rem;
    }

    .ct-steps { grid-template-columns: 1fr; }

    .ct-step,
    .ct-step + .ct-step { padding: 1.25rem 0; border-right: 0; border-bottom: 1px solid var(--line); }

    .ct-row { grid-template-columns: 1fr; }

    .pr-grid { margin-top: -4.5rem; }
    .pr-hero { padding-bottom: 7rem; }
    .pr-table { min-width: 680px; }
    .pr-table th, .pr-table td { padding: .8rem; font-size: .84rem; }
    .pr-table tbody th[scope=row] { min-width: 190px; }
}

@media (max-width: 639.98px) {
    .pr-grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
    .pr-every-grid { grid-template-columns: minmax(0, 1fr); }
    .pr-hero { padding-top: 2.25rem; padding-bottom: 6.5rem; }
    .pr-hero h1 { font-size: clamp(1.9rem, 9vw, 2.6rem); max-width: none; }
    .pr-hero .lead { font-size: 1rem; }
    .pr-side, .pr-toggle { width: 100%; }
    .pr-toggle button { flex: 1; justify-content: center; padding: .6rem .5rem; font-size: .85rem; }
    .pr-card { padding: 1.5rem 1.15rem 1.25rem; }
    .pr-desc { min-height: 0; }
    .pr-price { font-size: 2.5rem; }
    .pr-every-item:nth-child(n) { padding: 1.25rem 0; }
    .pr-band-btns { flex-direction: column; }
    .pr-band-btns > a { width: 100%; }
    .pr-fine { font-size: .8rem; }
}

@media (max-width: 380px) {
    .pr-metrics { grid-template-columns: minmax(0, 1fr); }
}

/* Visible keyboard focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.gate-option:focus-visible,
.role-tab:focus-visible {
    outline: 2px solid var(--accent-hot) !important;
    outline-offset: 3px !important;
}

/* Minimum 44px tap targets */
.btn-ojasys-primary,
.btn-ojasys-outline,
.btn-ojasys-dark,
.bill-toggle-opt,
.role-tab,
.accordion-button,
.faq-item summary,
.ojasys-footer ul li a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.faq-item summary { display: flex; }

@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;
    }
}