/*
 * cockpit.css — AI Cockpit pages on ruggi.site
 * Location: /var/www/ruggi.site/public_html/cockpit/cockpit.css
 *
 * Extends the site's existing style.css with Cockpit-specific components.
 * Dark theme by default (Protanopia-safe: blue/yellow/cyan/orange, no red/green).
 * Loaded AFTER style.css in all cockpit/ pages.
 */

/* ── CSS Variables ──────────────────────────────────────────────────────────── */

:root {
    /* Protanopia-safe dark palette */
    --ck-bg:         #0e1320;
    --ck-bg-panel:   #141a2e;
    --ck-bg-card:    #1a2338;
    --ck-bg-dark:    #0a0e1a;
    --ck-border:     #2a3550;
    --ck-border-dim: #1e2840;

    --ck-text:       #d8e8f5;
    --ck-text-dim:   #8898b8;
    --ck-text-muted: #556070;

    /* Accent colours — all safe for Protanopia */
    --ck-blue:   #4a8fd4;    /* primary CTA, links */
    --ck-cyan:   #00b8cc;    /* highlights */
    --ck-amber:  #cc9900;    /* Claude / warnings */
    --ck-orange: #dd7722;    /* Ollama / secondary */
    --ck-purple: #8866bb;    /* Workers */
    --ck-teal:   #448899;    /* Tools */

    /* Supplier colours */
    --ck-claude:  #cc8800;
    --ck-gemini:  #4488cc;
    --ck-ollama:  #cc6600;
    --ck-workers: #8866aa;
    --ck-tools:   #448888;

    /* Tier badges */
    --ck-free:    #448899;
    --ck-pro:     #4a8fd4;
    --ck-premium: #cc9900;
}

/* ── Reset / base ───────────────────────────────────────────────────────────── */

.ck-section,
.ck-hero,
.ck-card,
.ck-btn,
.ck-supplier-preview,
.ck-grid-3,
.ck-grid-2 {
    box-sizing: border-box;
}

/* Any <a> without an explicit color inline was falling back to the browser's
   default unvisited/visited link color (dark blue/purple), nearly invisible
   on this dark background. Bright cyan reads clearly against --ck-bg-card
   and stays inside the Protanopia-safe palette. */
.ck-section a, .ck-update a, .ck-alert a {
    color: #5ec8e0;
}
.ck-section a:hover, .ck-update a:hover, .ck-alert a:hover {
    color: #8adcf0;
}

/* ── Layout containers ──────────────────────────────────────────────────────── */

.ck-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

.ck-section {
    padding: 64px 0;
    background: var(--ck-bg);
    color: var(--ck-text);
}

.ck-section-dark {
    background: var(--ck-bg-dark);
}

.ck-section-cta {
    background: linear-gradient(135deg, #0d1830 0%, #112244 100%);
    border-top: 1px solid var(--ck-border);
    border-bottom: 1px solid var(--ck-border);
}

.ck-section-title {
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--ck-text);
    margin: 0 0 12px 0;
    text-align: center;
}

/* Brand mark before every real section title (page H1 + subsection H2s) —
   excluded on CTA banners (ck-section-cta), which have their own centered
   call-to-action styling and don't read as a "section" in the same sense. */
.ck-section-title::before,
section.ck-section:not(.ck-section-cta) h2::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    background: url("assets/logo.png") center/cover no-repeat;
    border-radius: 3px;
    margin-right: 0.4em;
    vertical-align: -0.15em;
}

.ck-section-sub {
    font-size: 1.05rem;
    color: var(--ck-text-dim);
    text-align: center;
    max-width: 680px;
    margin: 0 auto 40px auto;
    line-height: 1.65;
}

/* ── Hero ───────────────────────────────────────────────────────────────────── */

.ck-hero {
    background: linear-gradient(180deg, #0a0e1a 0%, #0e1320 60%, #141a2e 100%);
    padding: 80px 24px 72px;
    text-align: center;
    border-bottom: 1px solid var(--ck-border);
}

.ck-hero-inner {
    max-width: 720px;
    margin: 0 auto;
}

.ck-hero-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.ck-hero-title {
    font-size: 3rem;
    font-weight: 800;
    color: var(--ck-text);
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
}

.ck-hero-tagline {
    font-size: 1.25rem;
    color: var(--ck-cyan);
    margin: 0 0 20px 0;
    font-style: italic;
}

.ck-hero-sub {
    font-size: 1.05rem;
    color: var(--ck-text-dim);
    line-height: 1.7;
    margin: 0 0 36px 0;
}

.ck-hero-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.ck-hero-counter {
    color: var(--ck-text-muted);
    font-size: 0.85rem;
    margin: 8px 0 0 0;
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */

.ck-btn {
    display: inline-block;
    padding: 11px 26px;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: opacity 0.15s, transform 0.1s;
    white-space: nowrap;
}

.ck-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.ck-btn:active { transform: translateY(0); }

.ck-btn-primary {
    background: var(--ck-blue);
    color: #fff;
    border-color: var(--ck-blue);
}

.ck-btn-secondary {
    background: transparent;
    color: var(--ck-cyan);
    border-color: var(--ck-cyan);
}

.ck-btn-ghost {
    background: transparent;
    color: var(--ck-text-dim);
    border-color: var(--ck-border);
}

.ck-btn-lg {
    padding: 14px 36px;
    font-size: 1.05rem;
    /* A button must never let its label escape the contour. Labels like
       "Download cockpit_manual_install.zip" carry a 26-character filename with
       no break opportunity; with white-space:nowrap the button shrank on a
       narrow box or a zoomed page but the text did not, and poked out the
       right side. Wrap at spaces first, and inside a long token only as a last
       resort. */
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 100%;
    text-align: center;
}

.ck-btn-demo {
    background: linear-gradient(135deg,#7c3aed,#c084fc);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 10px 26px rgba(124,58,237,.35), 0 0 0 1px rgba(192,132,252,.25) inset;
    animation: ckDemoPulse 2.6s ease-in-out infinite;
}
.ck-btn-demo:hover { animation-play-state: paused; box-shadow: 0 12px 30px rgba(124,58,237,.5); }
.ck-btn-relay {
    background: transparent;
    color: #34d399;
    border-color: #34d399;
}
.ck-btn-relay:hover { background: rgba(52,211,153,.1); }
@keyframes ckDemoPulse {
    0%,100% { box-shadow: 0 10px 26px rgba(124,58,237,.35), 0 0 0 1px rgba(192,132,252,.25) inset; }
    50%     { box-shadow: 0 10px 30px rgba(124,58,237,.55), 0 0 0 1px rgba(192,132,252,.4) inset; }
}

/* ── Cards ──────────────────────────────────────────────────────────────────── */

.ck-grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.ck-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 16px;
}

.ck-card {
    background: var(--ck-bg-card);
    border: 1px solid var(--ck-border);
    border-radius: 10px;
    padding: 24px;
    transition: border-color 0.2s;
}

/* Accent card — a left rule in the brand blue, for the one paragraph on a page
   that carries a caveat or a safety rule the reader must not skim past. Added
   with the Cruise / AutoCognition / Ruggi Tools pages, which each have exactly
   one such block. */
.ck-card-accent { border-left: 3px solid var(--ck-blue); }

.ck-card:hover { border-color: var(--ck-blue); }

.ck-card-icon {
    font-size: 0;   /* hide the emoji text node, replaced by the logo below */
    margin-bottom: 12px;
    display: block;
    width: 32px;
    height: 32px;
    background: url("assets/logo.png") center/cover no-repeat;
    border-radius: 6px;
}

.ck-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ck-text);
    margin: 0 0 8px 0;
}

.ck-card p, .ck-card li {
    font-size: 0.92rem;
    color: var(--ck-text-dim);
    line-height: 1.6;
    margin: 0;
}

.ck-card ul {
    padding-left: 18px;
    margin: 8px 0 0 0;
}

.ck-card li { margin-bottom: 4px; }

/* ── Supplier strip preview ─────────────────────────────────────────────────── */

.ck-supplier-preview {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
}

.ck-sup {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ck-bg-card);
    border: 1px solid var(--ck-border);
    border-radius: 8px;
    padding: 12px 18px;
    min-width: 160px;
}

.ck-sup-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ck-sup.claude  .ck-sup-dot { background: var(--ck-claude); }
.ck-sup.gemini  .ck-sup-dot { background: var(--ck-gemini); }
.ck-sup.ollama  .ck-sup-dot { background: var(--ck-ollama); }
.ck-sup.workers .ck-sup-dot { background: var(--ck-workers); }
.ck-sup.tools   .ck-sup-dot { background: var(--ck-tools); }

.ck-sup-name {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ck-text-muted);
    letter-spacing: 0.08em;
}

.ck-sup-model {
    font-size: 0.85rem;
    color: var(--ck-text-dim);
    margin-left: auto;
}

/* ── Provider rows ──────────────────────────────────────────────────────────── */

.ck-provider-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--ck-bg-card);
    border: 1px solid var(--ck-border);
    border-radius: 8px;
    padding: 16px 20px;
    font-size: 0.92rem;
    color: var(--ck-text-dim);
    line-height: 1.5;
}

.ck-provider-row strong { color: var(--ck-text); }

.ck-provider-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    color: #fff;
    flex-shrink: 0;
    margin-top: 2px;
}

.ck-provider-badge.groq       { background: #ff6b35; }
.ck-provider-badge.openrouter { background: var(--ck-blue); }
.ck-provider-badge.together   { background: #7c3aed; }
.ck-provider-badge.zai        { background: var(--ck-teal); }
.ck-provider-badge.hugging    { background: #ff9500; }
.ck-provider-badge.nvidia     { background: #76b900; }

/* ── Tier badges ────────────────────────────────────────────────────────────── */

.ck-tier-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.ck-tier-free    { background: rgba(68,136,153,0.2); color: var(--ck-free);    border: 1px solid var(--ck-free); }
.ck-tier-pro     { background: rgba(74,143,212,0.2); color: var(--ck-pro);     border: 1px solid var(--ck-pro); }
.ck-tier-premium { background: rgba(204,153,0,0.2);  color: var(--ck-premium); border: 1px solid var(--ck-premium); }
.ck-tier-soon    { background: rgba(80,80,100,0.2);  color: #888;              border: 1px solid #444; }

/* ── Pricing cards ──────────────────────────────────────────────────────────── */

.ck-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    align-items: start;
}

.ck-pricing-card {
    background: var(--ck-bg-card);
    border: 1px solid var(--ck-border);
    border-radius: 12px;
    padding: 28px 24px;
    position: relative;
}

.ck-pricing-card.featured {
    border-color: var(--ck-blue);
    box-shadow: 0 0 0 1px var(--ck-blue), 0 8px 32px rgba(74,143,212,0.12);
}

.ck-pricing-card .ck-featured-label {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ck-blue);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 20px;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.ck-pricing-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ck-text);
    margin-bottom: 4px;
}

.ck-pricing-price {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--ck-text);
    margin: 12px 0 4px;
    line-height: 1;
}

.ck-pricing-price sup { font-size: 1rem; vertical-align: super; }
.ck-pricing-price span { font-size: 0.9rem; color: var(--ck-text-dim); font-weight: 400; }

.ck-pricing-desc {
    font-size: 0.88rem;
    color: var(--ck-text-dim);
    margin-bottom: 20px;
    min-height: 40px;
    line-height: 1.5;
}

.ck-pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
}

.ck-pricing-features li {
    font-size: 0.88rem;
    color: var(--ck-text-dim);
    padding: 6px 0;
    border-bottom: 1px solid var(--ck-border-dim);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
}

.ck-pricing-features li:last-child { border-bottom: none; }

.ck-pricing-features li::before {
    content: '✔';
    color: var(--ck-cyan);
    font-size: 0.8rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.ck-pricing-features li.dim::before { color: var(--ck-text-muted); }
.ck-pricing-features li.dim { color: var(--ck-text-muted); }

.ck-pricing-cta {
    display: block;
    text-align: center;
    padding: 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    border: 2px solid var(--ck-border);
    color: var(--ck-text-dim);
    transition: border-color 0.15s, color 0.15s;
}

.ck-pricing-cta:hover { border-color: var(--ck-blue); color: var(--ck-blue); }
.ck-pricing-cta.primary { background: var(--ck-blue); border-color: var(--ck-blue); color: #fff; }
.ck-pricing-cta.primary:hover { opacity: 0.9; }

/* ── Feature table ──────────────────────────────────────────────────────────── */

.ck-feature-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.ck-feature-table th, .ck-feature-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--ck-border);
    text-align: left;
    vertical-align: middle;
}

.ck-feature-table th {
    color: var(--ck-text-dim);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--ck-bg-dark);
}

.ck-feature-table td { color: var(--ck-text-dim); }
.ck-feature-table td:first-child { color: var(--ck-text); font-weight: 500; }

.ck-feature-table tr:last-child td { border-bottom: none; }
.ck-feature-table tr:hover td { background: rgba(74,143,212,0.04); }

.ck-check { color: var(--ck-cyan); font-weight: 700; }
.ck-dash  { color: var(--ck-text-muted); }

/* ── Docs nav ───────────────────────────────────────────────────────────────── */

.ck-docs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.ck-docs-card {
    display: block;
    background: var(--ck-bg-card);
    border: 1px solid var(--ck-border);
    border-radius: 10px;
    padding: 22px 20px;
    text-decoration: none;
    transition: border-color 0.2s;
}

.ck-docs-card:hover { border-color: var(--ck-blue); }

.ck-docs-card-icon {
    font-size: 0;
    margin-bottom: 10px;
    width: 32px;
    height: 32px;
    background: url("assets/logo.png") center/cover no-repeat;
    border-radius: 6px;
}

.ck-docs-card h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ck-text);
    margin: 0 0 6px 0;
}

.ck-docs-card p {
    font-size: 0.85rem;
    color: var(--ck-text-dim);
    line-height: 1.5;
    margin: 0;
}

/* ── CTA section ────────────────────────────────────────────────────────────── */

.ck-cta-inner {
    text-align: center;
}

.ck-cta-inner h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--ck-text);
    margin-bottom: 10px;
}

.ck-cta-inner p {
    font-size: 1rem;
    color: var(--ck-text-dim);
    margin-bottom: 28px;
}

/* ── Page nav (sub-pages) ───────────────────────────────────────────────────── */

.ck-page-nav {
    display: flex;
    gap: 4px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ck-border);
    margin-bottom: 0;
    background: var(--ck-bg-dark);
    overflow-x: auto;
}

.ck-page-nav a {
    display: inline-block;
    padding: 7px 16px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--ck-text-dim);
    text-decoration: none;
    border-radius: 4px;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s;
}

.ck-page-nav a:hover, .ck-page-nav a.active {
    color: var(--ck-blue);
    background: rgba(74,143,212,0.08);
}

/* ── Code blocks ────────────────────────────────────────────────────────────── */

.ck-code {
    background: var(--ck-bg-dark);
    border: 1px solid var(--ck-border);
    border-radius: 6px;
    padding: 16px 18px;
    font-family: 'Fira Code', 'Consolas', 'Courier New', monospace;
    font-size: 0.85rem;
    color: #c8d8f0;
    overflow-x: auto;
    margin: 12px 0;
    line-height: 1.6;
    white-space: pre;
}

/* ── Download section ───────────────────────────────────────────────────────── */

.ck-download-box {
    background: var(--ck-bg-card);
    border: 1px solid var(--ck-border);
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    max-width: 520px;
    margin: 0 auto;
}

.ck-download-version {
    display: inline-block;
    background: rgba(74,143,212,0.15);
    color: var(--ck-blue);
    border: 1px solid var(--ck-blue);
    border-radius: 20px;
    padding: 3px 14px;
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 16px;
}

.ck-download-box h3 {
    font-size: 1.4rem;
    color: var(--ck-text);
    margin: 0 0 8px 0;
}

.ck-download-box p {
    color: var(--ck-text-dim);
    font-size: 0.9rem;
    margin: 0 0 24px 0;
}

.ck-download-meta {
    font-size: 0.8rem;
    color: var(--ck-text-muted);
    margin-top: 12px;
}

/* ── Admin table ────────────────────────────────────────────────────────────── */

.ck-admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    background: var(--ck-bg-card);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--ck-border);
}

.ck-admin-table th {
    background: var(--ck-bg-dark);
    color: var(--ck-text-dim);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--ck-border);
}

.ck-admin-table td {
    padding: 10px 14px;
    color: var(--ck-text-dim);
    border-bottom: 1px solid var(--ck-border-dim);
    vertical-align: middle;
}

.ck-admin-table tr:last-child td { border-bottom: none; }
.ck-admin-table tr:hover td { background: rgba(74,143,212,0.04); }

/* ── Status badges ──────────────────────────────────────────────────────────── */

.ck-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.ck-status-active   { background: rgba(0,184,204,0.15);  color: var(--ck-cyan);   border: 1px solid var(--ck-cyan); }
.ck-status-inactive { background: rgba(80,96,112,0.2);   color: #667788;          border: 1px solid #445; }
.ck-status-pending  { background: rgba(204,153,0,0.15);  color: var(--ck-amber);  border: 1px solid var(--ck-amber); }
.ck-status-expired  { background: rgba(160,100,60,0.15); color: #cc7744;          border: 1px solid #884422; }

/* ── Stat cards ─────────────────────────────────────────────────────────────── */

.ck-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 32px;
}

.ck-stat-card {
    background: var(--ck-bg-card);
    border: 1px solid var(--ck-border);
    border-radius: 8px;
    padding: 18px 20px;
}

.ck-stat-label {
    font-size: 0.75rem;
    color: var(--ck-text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.ck-stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--ck-text);
    line-height: 1;
}

.ck-stat-sub {
    font-size: 0.78rem;
    color: var(--ck-text-muted);
    margin-top: 4px;
}

/* ── Alerts / notices ───────────────────────────────────────────────────────── */

.ck-alert {
    border-radius: 6px;
    padding: 12px 16px;
    font-size: 0.9rem;
    margin-bottom: 16px;
    border-left: 3px solid;
}

.ck-alert-info    { background: rgba(74,143,212,0.1);  border-color: var(--ck-blue);  color: var(--ck-text-dim); }
.ck-alert-warn    { background: rgba(204,153,0,0.1);   border-color: var(--ck-amber); color: var(--ck-text-dim); }

/* ── Responsive ─────────────────────────────────────────────────────────────── */

@media (max-width: 680px) {
    .ck-hero-title    { font-size: 2.1rem; }
    .ck-hero-tagline  { font-size: 1rem; }
    .ck-hero-actions  { flex-direction: column; align-items: center; }
    .ck-grid-3        { grid-template-columns: 1fr; }
    .ck-grid-2        { grid-template-columns: 1fr; }
    .ck-pricing-grid  { grid-template-columns: 1fr; }
    .ck-supplier-preview { flex-direction: column; align-items: stretch; }
    .ck-sup           { min-width: unset; }
    .ck-section-title { font-size: 1.5rem; }
    .ck-stat-grid     { grid-template-columns: repeat(2, 1fr); }
}

/* ── Small phones (≤440px): tighten hero, full-width CTAs ── */
@media (max-width: 440px) {
    .ck-hero-inner   { padding-left: 16px; padding-right: 16px; }
    .ck-hero-title   { font-size: 1.7rem; }
    .ck-btn          { width: 100%; justify-content: center; text-align: center; }
    .ck-hero-actions { width: 100%; }
}


/* The price-change promise on pricing.php. It is the single most reassuring
   sentence on that page and it was set in the same muted grey as the paragraph
   above it, so it read as small print. Given its own panel with a green rule:
   green because this is a commitment, not a warning. */
.ck-price-promise {
    margin: 18px 0 0;
    padding: 16px 20px;
    background: rgba(34, 197, 94, 0.07);
    border: 1px solid rgba(34, 197, 94, 0.35);
    border-left: 3px solid #22c55e;
    border-radius: 8px;
    color: var(--ck-text);
    font-size: 1rem;
    line-height: 1.75;
}
.ck-price-promise strong { color: #22c55e; }

/* Monochrome inline icons (Material Symbols) — emoji retired 2026-09-13 */
.material-symbols-rounded{font-family:"Material Symbols Rounded";font-weight:normal;font-style:normal;font-size:1.1em;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;vertical-align:-0.2em;-webkit-font-smoothing:antialiased;font-variation-settings:"FILL" 0,"wght" 300,"GRAD" 0,"opsz" 20}.ico-fill{font-variation-settings:"FILL" 1,"wght" 300,"GRAD" 0,"opsz" 20}

/* Long-form legal / prose blocks (license.php) */
.ck-prose h1 { font-size: 1.5rem; margin: 0 0 6px; }
.ck-prose h2 { font-size: 1.1rem; margin: 22px 0 8px; }
.ck-prose p, .ck-prose li { line-height: 1.6; }
.ck-prose p { margin: 8px 0; }