/* ============================================================================
   Cybersecurity service pages
   ----------------------------------------------------------------------------
   Scoped to the .cyb- prefix and linked only from the pages under the
   Cybersecurity nav, so nothing here can leak into the other 90-odd pages.
   Colours, type and radii come from the Sera token set in sera-theme.css;
   every var() carries a literal fallback so the file still renders if the
   theme layer is ever removed.
   ============================================================================ */

/* ── 1. Local scale ─────────────────────────────────────────────────────── */
.cyb {
    --cyb-gap: 24px;
    --cyb-radius: 4px;
    --cyb-section-y: 80px;
    --cyb-max: 1180px;
}

.cyb section { scroll-margin-top: 90px; }

/* The old "Next" template sets text-transform: capitalize on every heading, so
   sentence-case copy renders as "A Safe Rehearsal Of The Attack". The Sera skin
   that the site was reskinned to does not do this. Scoped off here only, since
   the rest of the site was written to expect the capitalising behaviour.
   Delete this rule to inherit the sitewide treatment again. */
.cyb h1, .cyb h2, .cyb h3, .cyb h4, .cyb h5, .cyb h6,
.cyb .accordion-button { text-transform: none; }

.cyb-section { padding: var(--cyb-section-y) 0; }
.cyb-section--tint { background: var(--sera-surface-2, #f4f4f5); }
.cyb-section--tight { padding-top: 0; }

.cyb-inner { max-width: var(--cyb-max); margin: 0 auto; padding: 0 20px; }
.cyb-measure { max-width: 760px; }

/* ── 2. Section headings ────────────────────────────────────────────────── */
.cyb-eyebrow {
    display: inline-block;
    font-family: var(--sera-font-mono, ui-monospace, monospace);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sera-fg-subtle, #71717a);
    margin-bottom: 14px;
}

.cyb-h2 {
    font-size: 30px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    color: var(--sera-fg, #18181b);
    margin: 0 0 14px;
    letter-spacing: -0.022em;
}

.cyb-h3 {
    font-size: 18px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    color: var(--sera-fg, #18181b);
    margin: 0 0 8px;
}

.cyb-lead {
    font-size: 17px;
    line-height: 1.7;
    color: var(--sera-fg-muted, #52525b);
    margin: 0 0 18px;
}

.cyb-p {
    font-size: 16px;
    line-height: 1.75;
    color: var(--sera-fg-muted, #52525b);
    margin: 0 0 16px;
}

.cyb-p:last-child { margin-bottom: 0; }

.cyb a.cyb-link {
    color: var(--sera-fg, #18181b);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--sera-fg-faint, #a1a1aa);
}
.cyb a.cyb-link:hover { text-decoration-color: var(--sera-fg, #18181b); }

/* ── 4. Hero ────────────────────────────────────────────────────────────── */
.cyb-hero {
    background: var(--sera-bg, #fff);
    border-bottom: 1px solid var(--sera-border, #e4e4e7);
    padding: 64px 0 72px;
}
.cyb-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}
.cyb-hero h1 {
    font-size: 42px !important;
    line-height: 1.14 !important;
    font-weight: 600 !important;
    letter-spacing: -0.03em;
    color: var(--sera-fg, #18181b);
    margin: 0 0 18px;
}
.cyb-hero__vp {
    font-size: 18px;
    line-height: 1.65;
    color: var(--sera-fg-muted, #52525b);
    margin: 0 0 28px;
    max-width: 56ch;
}

/* Trust strip under the hero copy */
.cyb-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--sera-border, #e4e4e7);
}
.cyb-hero__meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--sera-fg-subtle, #71717a);
}
.cyb-hero__meta svg { flex-shrink: 0; color: var(--sera-fg, #18181b); }

/* Illustration frame */
.cyb-art {
    border: 1px solid var(--sera-border, #e4e4e7);
    border-radius: var(--cyb-radius);
    background: var(--sera-surface-2, #f4f4f5);
    padding: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cyb-art > * { width: 100%; max-width: 440px; }

/* ── 5. Buttons ─────────────────────────────────────────────────────────── */
.cyb-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cyb-actions .theme-btn { padding: 17px 30px; font-size: 15px; border-radius: var(--cyb-radius); }

.cyb-btn-ghost {
    display: inline-block;
    padding: 17px 30px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    border-radius: var(--cyb-radius);
    border: 1px solid var(--sera-border, #e4e4e7);
    background: var(--sera-surface, #fff);
    color: var(--sera-fg, #18181b);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.cyb-btn-ghost:hover {
    border-color: var(--sera-fg-faint, #a1a1aa);
    background: var(--sera-surface-2, #f4f4f5);
    color: var(--sera-fg, #18181b);
}

/* ── 6. Card grids ──────────────────────────────────────────────────────── */
.cyb-grid { display: grid; gap: var(--cyb-gap); }
.cyb-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cyb-grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.cyb-card {
    background: var(--sera-surface, #fff);
    border: 1px solid var(--sera-border, #e4e4e7);
    border-radius: var(--cyb-radius);
    padding: 26px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cyb-card:hover {
    border-color: var(--sera-fg-faint, #a1a1aa);
    box-shadow: var(--sera-shadow-md, 0 4px 12px -2px rgba(9, 9, 11, 0.08));
}
.cyb-card p { font-size: 15px; line-height: 1.7; color: var(--sera-fg-muted, #52525b); margin: 0; }

.cyb-ico {
    width: 40px;
    height: 40px;
    border-radius: var(--cyb-radius);
    background: var(--sera-dark, #09090b);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}
.cyb-ico svg { width: 20px; height: 20px; }

/* ── 7. Benefits ────────────────────────────────────────────────────────── */
.cyb-benefit {
    display: flex;
    gap: 16px;
    padding: 22px 0;
    border-top: 1px solid var(--sera-border, #e4e4e7);
}
.cyb-benefit:last-child { border-bottom: 1px solid var(--sera-border, #e4e4e7); }
.cyb-benefit__mark {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--sera-surface-2, #f4f4f5);
    border: 1px solid var(--sera-border, #e4e4e7);
    color: var(--sera-fg, #18181b);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}
.cyb-benefit__mark svg { width: 13px; height: 13px; }
.cyb-benefit p { font-size: 15px; line-height: 1.7; margin: 0; color: var(--sera-fg-muted, #52525b); }

/* ── 8. Process ─────────────────────────────────────────────────────────── */
.cyb-steps { counter-reset: cybstep; display: grid; gap: 0; }
.cyb-step {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 22px;
    padding: 0 0 34px 0;
}
.cyb-step:last-child { padding-bottom: 0; }
.cyb-step__n {
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    border-radius: var(--cyb-radius);
    border: 1px solid var(--sera-border, #e4e4e7);
    background: var(--sera-surface, #fff);
    color: var(--sera-fg, #18181b);
    font-family: var(--sera-font-mono, ui-monospace, monospace);
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Connector rail between the step markers */
.cyb-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 44px;
    bottom: 8px;
    width: 1px;
    background: var(--sera-border, #e4e4e7);
}
.cyb-step__body { padding-top: 6px; }
.cyb-step__body p { font-size: 15px; line-height: 1.7; margin: 0; color: var(--sera-fg-muted, #52525b); }

/* ── 9. Deliverables ────────────────────────────────────────────────────── */
.cyb-deliv {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--sera-surface, #fff);
    border: 1px solid var(--sera-border, #e4e4e7);
    border-radius: var(--cyb-radius);
    padding: 20px 22px;
}
.cyb-deliv svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; color: var(--sera-fg, #18181b); }
.cyb-deliv h3 { font-size: 15px !important; font-weight: 600 !important; margin: 0 0 5px; color: var(--sera-fg, #18181b); }
.cyb-deliv p { font-size: 14px; line-height: 1.65; margin: 0; color: var(--sera-fg-muted, #52525b); }

/* ── 10. Suitable for ───────────────────────────────────────────────────── */
.cyb-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.cyb-tag {
    display: inline-block;
    font-size: 13px;
    line-height: 1.4;
    color: var(--sera-fg-muted, #52525b);
    background: var(--sera-surface-2, #f4f4f5);
    border: 1px solid var(--sera-border, #e4e4e7);
    border-radius: var(--cyb-radius);
    padding: 6px 12px;
}
.cyb-section--tint .cyb-tag { background: var(--sera-surface, #fff); }

/* ── 11. Why Orbix ──────────────────────────────────────────────────────── */
.cyb-why { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--sera-border, #e4e4e7); border: 1px solid var(--sera-border, #e4e4e7); border-radius: var(--cyb-radius); overflow: hidden; }
.cyb-why__item { background: var(--sera-surface, #fff); padding: 26px; }
.cyb-why__item h3 { font-size: 16px !important; font-weight: 600 !important; margin: 0 0 8px; color: var(--sera-fg, #18181b); }
.cyb-why__item p { font-size: 14px; line-height: 1.7; margin: 0; color: var(--sera-fg-muted, #52525b); }

/* ── 12. Related services ───────────────────────────────────────────────── */
.cyb-rel {
    display: block;
    background: var(--sera-surface, #fff);
    border: 1px solid var(--sera-border, #e4e4e7);
    border-radius: var(--cyb-radius);
    padding: 22px;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cyb-rel:hover { border-color: var(--sera-fg-faint, #a1a1aa); box-shadow: var(--sera-shadow-md, 0 4px 12px -2px rgba(9, 9, 11, 0.08)); }
.cyb-rel h3 { font-size: 16px !important; font-weight: 600 !important; margin: 0 0 6px; color: var(--sera-fg, #18181b); }
.cyb-rel p { font-size: 14px; line-height: 1.65; margin: 0; color: var(--sera-fg-muted, #52525b); }
.cyb-rel__go { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 500; color: var(--sera-fg, #18181b); }

/* ── 13. FAQ ────────────────────────────────────────────────────────────── */
.cyb-faq .accordion-item {
    border: 1px solid var(--sera-border, #e4e4e7);
    border-radius: var(--cyb-radius);
    background: var(--sera-surface, #fff);
    margin-bottom: 12px;
    overflow: hidden;
}
.cyb-faq .accordion-button {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--sera-fg, #18181b);
    background: var(--sera-surface, #fff);
    padding: 20px 22px;
    box-shadow: none;
}
.cyb-faq .accordion-button:not(.collapsed) {
    color: var(--sera-fg, #18181b);
    background: var(--sera-surface, #fff);
    box-shadow: none;
}
.cyb-faq .accordion-button:focus { box-shadow: 0 0 0 3px var(--sera-ring, rgba(24, 24, 27, 0.12)); }
.cyb-faq .accordion-button::after {
    width: 14px;
    height: 14px;
    background-size: 14px;
    /* Neutral chevron; the template default is sage green. */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2352525b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
.cyb-faq .accordion-body {
    padding: 0 22px 22px;
    font-size: 15px;
    line-height: 1.75;
    color: var(--sera-fg-muted, #52525b);
    border-top: 0;
}
.cyb-faq .accordion-body a { color: var(--sera-fg, #18181b); text-decoration: underline; text-underline-offset: 3px; }

/* ── 14. Closing CTA ────────────────────────────────────────────────────── */
.cyb-cta {
    background: var(--sera-dark, #09090b);
    color: #fff;
    padding: 72px 0;
}
.cyb-cta h2 {
    font-size: 32px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    color: #fff !important;
    letter-spacing: -0.025em;
    margin: 0 0 14px;
}
.cyb-cta p { color: rgba(255, 255, 255, 0.72); font-size: 16px; line-height: 1.7; margin: 0 0 28px; max-width: 60ch; }
.cyb-cta .cyb-btn-ghost { background: transparent; border-color: rgba(255, 255, 255, 0.28); color: #fff; }
.cyb-cta .cyb-btn-ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.cyb-cta .theme-btn { background: #fff; border-color: #fff; color: var(--sera-dark, #09090b); }
.cyb-cta .theme-btn:hover { background: rgba(255, 255, 255, 0.86); border-color: rgba(255, 255, 255, 0.86); color: var(--sera-dark, #09090b); }

.cyb-form { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
/* sera-theme.css section 10 sets colour, border and radius on every text input
   with !important, which rendered near-black text on this dark panel. These
   have to match that weight to win. */
.cyb-form input,
.cyb-form input[type="text"],
.cyb-form input[type="email"] {
    height: 54px;
    padding: 0 18px;
    font-size: 15px;
    font-family: inherit;
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    caret-color: #fff;
    background-color: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: var(--cyb-radius) !important;
    outline: none;
}
.cyb-form input::placeholder { color: rgba(255, 255, 255, 0.5) !important; opacity: 1; }
.cyb-form input:focus {
    border-color: rgba(255, 255, 255, 0.6) !important;
    background-color: rgba(255, 255, 255, 0.13) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12) !important;
}
/* Chrome autofill repaints the field white-on-white otherwise. */
.cyb-form input:-webkit-autofill,
.cyb-form input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px #1c1c1f inset;
    caret-color: #fff;
}
.cyb-form .f-name { flex: 0 0 190px; }
.cyb-form .f-email { flex: 0 0 230px; }
.cyb-form .f-msg { flex: 1 1 240px; min-width: 0; }
.cyb-form button { height: 54px; padding: 0 32px; white-space: nowrap; flex: 0 0 auto; }

/* ── 15. Hub page index ─────────────────────────────────────────────────── */
.cyb-hub-hero { background: var(--sera-dark, #09090b); color: #fff; padding: 76px 0; }
.cyb-hub-hero h1 { font-size: 44px !important; line-height: 1.12 !important; font-weight: 600 !important; color: #fff !important; letter-spacing: -0.03em; margin: 0 0 20px; }
.cyb-hub-hero p { color: rgba(255, 255, 255, 0.75); font-size: 18px; line-height: 1.7; max-width: 68ch; margin: 0 0 30px; }
.cyb-hub-hero .cyb-eyebrow { color: rgba(255, 255, 255, 0.55); }
.cyb-hub-hero .cyb-crumbs-inline a { color: rgba(255, 255, 255, 0.6); }

.cyb-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--cyb-radius); overflow: hidden; margin-top: 44px; }
.cyb-stat { background: var(--sera-dark, #09090b); padding: 22px 24px; }
.cyb-stat strong { display: block; font-size: 26px; font-weight: 600; color: #fff; letter-spacing: -0.02em; margin-bottom: 4px; }
.cyb-stat span { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.6); }

/* ── 16. Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .cyb { --cyb-section-y: 60px; }
    .cyb-hero { padding: 44px 0 52px; }
    .cyb-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 38px; }
    .cyb-hero h1 { font-size: 34px !important; }
    .cyb-hero__vp { font-size: 17px; }
    .cyb-hub-hero { padding: 56px 0; }
    .cyb-hub-hero h1 { font-size: 34px !important; }
    .cyb-h2 { font-size: 26px !important; }
    .cyb-cta h2 { font-size: 27px !important; }
}

@media (max-width: 575px) {
    .cyb { --cyb-section-y: 48px; --cyb-gap: 16px; }
    .cyb-inner { padding: 0 16px; }
    .cyb-crumbs ol { padding: 12px 16px; font-size: 12px; }
    .cyb-hero h1 { font-size: 28px !important; }
    .cyb-hub-hero h1 { font-size: 28px !important; }
    .cyb-h2 { font-size: 23px !important; }
    .cyb-cta { padding: 52px 0; }
    .cyb-cta h2 { font-size: 23px !important; }
    .cyb-art { padding: 18px; }
    .cyb-card, .cyb-why__item { padding: 20px; }
    .cyb-step { grid-template-columns: 36px minmax(0, 1fr); gap: 16px; }
    .cyb-step__n { width: 32px; height: 32px; font-size: 12px; }
    .cyb-step:not(:last-child)::before { left: 16px; top: 36px; }
    /* Stack the CTA form so nothing overflows the viewport */
    .cyb-form > * { flex: 1 1 100% !important; width: 100%; }
    .cyb-actions { flex-direction: column; align-items: stretch; }
    .cyb-actions .theme-btn, .cyb-actions .cyb-btn-ghost { width: 100%; }
}

/* ── 17. Motion preferences ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .cyb *, .cyb *::before, .cyb *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ============================================================================
   18. Hero mockups
   ----------------------------------------------------------------------------
   Styling and motion for the HTML mockups in _cyb_art.py.

   These are deliberately real interfaces with real copy rather than abstract
   SVG wireframes, matching the email mockup on the awareness page. Grey
   placeholder bars read as an unfinished wireframe; a believable sender
   address and a real RM amount read as a product.

   Everything loops. An earlier pass used one-shot reveals with fill-mode both;
   they finished during page load and then froze, which looked static.
   ============================================================================ */

.cyb-mock {
    --mock-loop: 5.5s;
    width: 100%;
    max-width: 430px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--sera-fg-muted, #52525b);
    text-align: left;
}

.mock-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--sera-border, #e4e4e7);
    border-radius: 6px;
    padding: 16px 18px;
    box-shadow: 0 4px 16px -6px rgba(9, 9, 11, 0.14);
}

.mock-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.mock-tag {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sera-fg-subtle, #71717a);
}
.mock-chip, .mock-count {
    font-size: 10px;
    font-weight: 500;
    color: var(--sera-fg-subtle, #71717a);
    background: var(--sera-surface-2, #f4f4f5);
    border-radius: 3px;
    padding: 3px 7px;
    white-space: nowrap;
}
.mock-live {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: #dc2626;
}
.mock-live i {
    width: 6px; height: 6px; border-radius: 50%; background: #dc2626;
    animation: mock-blink 1.4s ease-in-out infinite;
}

@keyframes mock-blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@keyframes mock-soft  { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* Shared bar primitive. Width comes from an inline --w so the markup carries
   the data and the stylesheet only carries the behaviour. */
.mock-track {
    height: 6px; border-radius: 3px;
    background: var(--sera-surface-2, #f4f4f5);
    overflow: hidden; margin: 0 0 12px;
}
.mock-track--lg { height: 8px; border-radius: 4px; margin-bottom: 10px; }
.mock-fill {
    display: block; height: 100%; width: var(--w, 50%);
    border-radius: inherit; background: var(--sera-fg, #18181b);
    transform-origin: left center;
    animation: mock-grow 1.3s cubic-bezier(.22,1,.36,1) .25s both;
}
.mock-fill--bad { background: #dc2626; }
@keyframes mock-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── The email mockup, shared by phishing and BEC ────────────────────────── */
.mock-mail { padding: 18px 20px 22px; }
.mail-from {
    background: #fef2f2; border-radius: 4px; padding: 7px 11px;
    margin-bottom: 12px; font-size: 11.5px; font-weight: 600; color: #dc2626;
    word-break: break-word;
}
.mail-from--spoof { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.spoof-flag {
    font-size: 9px; font-weight: 700; letter-spacing: .07em;
    background: #dc2626; color: #fff; border-radius: 2px; padding: 2px 5px;
    animation: mock-blink 2s ease-in-out infinite;
}
.mail-subject {
    font-size: 13.5px; font-weight: 700; line-height: 1.4;
    color: var(--sera-fg, #18181b); margin-bottom: 10px;
}
.mail-body p { font-size: 12.5px; line-height: 1.6; margin: 0 0 8px; color: var(--sera-fg-muted, #52525b); }
.mail-body p:last-child { margin-bottom: 0; }
.mail-btn {
    display: inline-block; margin-top: 14px;
    background: #2563eb; color: #fff; border-radius: 4px;
    padding: 9px 16px; font-size: 12.5px; font-weight: 600; cursor: default;
    animation: mock-btn-pulse var(--mock-loop) ease-in-out infinite;
}
.mail-btn--pay { background: #18181b; }
@keyframes mock-btn-pulse {
    0%, 36%, 100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(37,99,235,.28); }
    46%           { transform: scale(.96); box-shadow: 0 0 0 8px rgba(37,99,235,0); }
    56%           { transform: scale(1); }
}

/* Cursor drifts in, presses the button, and resets. */
.mock-cursor {
    position: absolute; width: 15px; height: auto; bottom: 26px; left: 0;
    pointer-events: none;
    animation: mock-cursor-run var(--mock-loop) ease-in-out infinite;
}
@keyframes mock-cursor-run {
    0%       { transform: translate(230px, 34px); opacity: 0; }
    10%      { opacity: 1; }
    38%      { transform: translate(112px, 4px); opacity: 1; }
    46%      { transform: translate(110px, 6px) scale(.86); }
    54%, 86% { transform: translate(112px, 4px); opacity: 1; }
    100%     { transform: translate(230px, 34px); opacity: 0; }
}
.mock-ripple {
    position: absolute; bottom: 18px; left: 88px;
    width: 40px; height: 40px; border-radius: 50%;
    border: 2px solid rgba(220,38,38,.6); pointer-events: none;
    animation: mock-ripple var(--mock-loop) ease-out infinite;
}
@keyframes mock-ripple {
    0%, 42%  { transform: scale(.2); opacity: 0; }
    48%      { transform: scale(.45); opacity: 1; }
    72%,100% { transform: scale(2.2); opacity: 0; }
}

/* ── 1. Phishing results panel ───────────────────────────────────────────── */
.mock-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.mock-stat__label { font-size: 12px; color: var(--sera-fg-muted, #52525b); }
.mock-stat__val { font-size: 13px; font-weight: 700; color: var(--sera-fg, #18181b); font-variant-numeric: tabular-nums; }
.mock-stat__val--bad { color: #dc2626; }
.mock-result .mock-track:last-child { margin-bottom: 0; }

/* ── 2. Human Risk Assessment ────────────────────────────────────────────── */
.score-wrap { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.score-num { font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--sera-fg, #18181b); font-variant-numeric: tabular-nums; }
.score-num small { font-size: 15px; font-weight: 500; color: var(--sera-fg-faint, #a1a1aa); }
.score-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.score-band { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #dc2626; background: #fef2f2; border-radius: 3px; padding: 3px 7px; }
.score-note { font-size: 10.5px; color: var(--sera-fg-faint, #a1a1aa); }
.score-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 10.5px; color: var(--sera-fg-subtle, #71717a); }

.dept { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.dept:last-child { margin-bottom: 0; }
.dept-name { flex: 0 0 96px; font-size: 11.5px; color: var(--sera-fg-muted, #52525b); }
.dept-bar { flex: 1 1 auto; height: 6px; border-radius: 3px; background: var(--sera-surface-2, #f4f4f5); overflow: hidden; }
.dept-bar i { display: block; height: 100%; width: var(--w, 50%); border-radius: inherit; background: var(--sera-fg, #18181b); transform-origin: left center; animation: mock-grow 1.3s cubic-bezier(.22,1,.36,1) both; }
.dept-val { flex: 0 0 22px; text-align: right; font-size: 11.5px; font-weight: 700; color: var(--sera-fg, #18181b); font-variant-numeric: tabular-nums; }
.dept-val--bad { color: #dc2626; }
.dept-val--ok  { color: var(--sera-fg-faint, #a1a1aa); }
.cyb-mock--hra .dept:nth-child(2) .dept-bar i { animation-delay: .1s; }
.cyb-mock--hra .dept:nth-child(3) .dept-bar i { animation-delay: .25s; }
.cyb-mock--hra .dept:nth-child(4) .dept-bar i { animation-delay: .4s; }
.cyb-mock--hra .dept:nth-child(5) .dept-bar i { animation-delay: .55s; }
.cyb-mock--hra .dept:nth-child(4) .dept-bar i,
.cyb-mock--hra .dept:nth-child(5) .dept-bar i { background: var(--sera-fg-faint, #a1a1aa); }
.cyb-mock--hra .dept:nth-child(2) .dept-bar i,
.cyb-mock--hra .dept:nth-child(3) .dept-bar i { background: #dc2626; }

/* ── 3. Dark Web Exposure ────────────────────────────────────────────────── */
.mock-search { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.mock-lens {
    flex: 0 0 auto; width: 13px; height: 13px; border-radius: 50%;
    border: 2px solid var(--sera-fg, #18181b); position: relative;
    animation: mock-lens 2.2s ease-in-out infinite;
}
.mock-lens::after { content: ""; position: absolute; right: -5px; bottom: -4px; width: 7px; height: 2px; background: var(--sera-fg, #18181b); transform: rotate(45deg); border-radius: 1px; }
@keyframes mock-lens { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
.mock-domain { flex: 1 1 auto; font-family: var(--sera-font-mono, monospace); font-size: 12px; color: var(--sera-fg, #18181b); }
.mock-scanning { font-size: 10.5px; color: var(--sera-fg-faint, #a1a1aa); }
.mock-scanning b { animation: mock-blink 1.2s ease-in-out infinite; font-weight: 400; }
.mock-scanning b:nth-of-type(2) { animation-delay: .2s; }
.mock-scanning b:nth-of-type(3) { animation-delay: .4s; }

.find { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--sera-border-soft, #f4f4f5); animation: mock-reveal .5s ease-out both; }
.find-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.find-mail { font-family: var(--sera-font-mono, monospace); font-size: 11.5px; color: var(--sera-fg, #18181b); word-break: break-all; }
.find-src { font-size: 10.5px; color: var(--sera-fg-faint, #a1a1aa); }
.find-sev { flex: 0 0 auto; font-size: 9px; font-weight: 700; letter-spacing: .06em; border-radius: 3px; padding: 3px 6px; background: var(--sera-surface-2, #f4f4f5); color: var(--sera-fg-subtle, #71717a); }
.find-sev--crit { background: #dc2626; color: #fff; }
.find-sev--high { background: #fef2f2; color: #dc2626; }
.find-foot { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--sera-border-soft, #f4f4f5); font-size: 10.5px; color: #dc2626; font-weight: 500; }
@keyframes mock-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.find--1 { animation-delay: .1s; }
.find--2 { animation-delay: .4s; }
.find--3 { animation-delay: .7s; }

/* ── 4. BEC invoice block ────────────────────────────────────────────────── */
.bec-invoice { margin-top: 12px; border: 1px solid var(--sera-border, #e4e4e7); border-radius: 4px; overflow: hidden; }
.bec-row { display: flex; align-items: center; gap: 8px; padding: 7px 11px; font-size: 11.5px; border-bottom: 1px solid var(--sera-border-soft, #f4f4f5); }
.bec-row:last-child { border-bottom: 0; }
.bec-row span { flex: 0 0 78px; color: var(--sera-fg-faint, #a1a1aa); }
.bec-row b { font-weight: 600; color: var(--sera-fg, #18181b); font-family: var(--sera-font-mono, monospace); font-size: 11px; }
.bec-row--changed { background: #fef2f2; }
.bec-row--changed b { color: #dc2626; }
.bec-row--changed em { margin-left: auto; font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: #dc2626; border-radius: 2px; padding: 2px 5px; animation: mock-blink 1.6s ease-in-out infinite; }
.bec-row--total { background: var(--sera-surface-2, #f4f4f5); }
.bec-amount { font-size: 13px !important; font-family: var(--sera-font, Inter, sans-serif) !important; animation: bec-amount var(--mock-loop) ease-in-out infinite; }
@keyframes bec-amount { 0%, 48% { color: #18181b; } 60%, 88% { color: #dc2626; } 100% { color: #18181b; } }

/* ── 5. Incident Response console ────────────────────────────────────────── */
.mock-console { padding: 0; overflow: hidden; }
.con-head { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: var(--sera-dark, #09090b); }
.con-id { font-family: var(--sera-font-mono, monospace); font-size: 11px; color: #fff; }
.con-sev { font-size: 9px; font-weight: 700; letter-spacing: .06em; background: #dc2626; color: #fff; border-radius: 2px; padding: 2px 6px; animation: mock-blink 1.6s ease-in-out infinite; }
.con-clock { margin-left: auto; font-family: var(--sera-font-mono, monospace); font-size: 11px; color: rgba(255,255,255,.65); }
.con-body { padding: 12px 16px; }
.con-line { display: flex; gap: 10px; padding: 5px 0; animation: mock-reveal .5s ease-out both; }
.con-time { flex: 0 0 34px; font-family: var(--sera-font-mono, monospace); font-size: 10.5px; color: var(--sera-fg-faint, #a1a1aa); padding-top: 1px; }
.con-txt { font-size: 11.5px; line-height: 1.5; color: var(--sera-fg-muted, #52525b); }
.con-txt b { color: var(--sera-fg, #18181b); font-weight: 600; }
.con-txt--wait { color: #dc2626; font-weight: 500; }
.con-caret { display: inline-block; width: 6px; height: 12px; margin-left: 3px; background: #dc2626; vertical-align: -2px; animation: mock-blink 1s steps(1) infinite; }
.con-line--1 { animation-delay: .0s; }
.con-line--2 { animation-delay: .25s; }
.con-line--3 { animation-delay: .5s; }
.con-line--4 { animation-delay: .75s; }
.con-line--live { animation-delay: 1s; }
.con-foot { display: flex; flex-wrap: wrap; gap: 6px; padding: 11px 16px; border-top: 1px solid var(--sera-border-soft, #f4f4f5); background: #fafafa; }
.con-role { font-size: 10px; font-weight: 500; border-radius: 3px; padding: 3px 8px; background: var(--sera-surface-2, #f4f4f5); color: var(--sera-fg-faint, #a1a1aa); }
.con-role--on { background: var(--sera-fg, #18181b); color: #fff; }

/* ── 6. Ransomware tabletop inject ───────────────────────────────────────── */
.mock-inject { border-top: 3px solid #dc2626; }
.inj-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.inj-no { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: #dc2626; }
.inj-timer { font-family: var(--sera-font-mono, monospace); font-size: 10.5px; color: var(--sera-fg-subtle, #71717a); animation: mock-blink 1.8s ease-in-out infinite; }
.inj-text { font-size: 12px; line-height: 1.6; color: var(--sera-fg-muted, #52525b); margin: 0 0 12px; }
.inj-text b { color: var(--sera-fg, #18181b); font-weight: 700; }
.inj-q { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sera-fg-subtle, #71717a); margin-bottom: 8px; }
.inj-opts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.inj-opt { font-size: 11.5px; border: 1px solid var(--sera-border, #e4e4e7); border-radius: 4px; padding: 8px 11px; color: var(--sera-fg-muted, #52525b); animation: inj-consider var(--mock-loop) ease-in-out infinite; }
@keyframes inj-consider {
    0%, 100% { border-color: var(--sera-border, #e4e4e7); background: #fff; color: var(--sera-fg-muted, #52525b); }
    16%      { border-color: var(--sera-fg, #18181b); background: var(--sera-surface-2, #f4f4f5); color: var(--sera-fg, #18181b); }
    34%      { border-color: var(--sera-border, #e4e4e7); background: #fff; color: var(--sera-fg-muted, #52525b); }
}
.inj-opt--a { animation-delay: .0s; }
.inj-opt--b { animation-delay: .55s; }
.inj-opt--c { animation-delay: 1.1s; }
.inj-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding-top: 11px; border-top: 1px solid var(--sera-border-soft, #f4f4f5); }
.inj-who { font-size: 9.5px; font-weight: 600; border-radius: 3px; padding: 3px 7px; background: var(--sera-surface-2, #f4f4f5); color: var(--sera-fg-subtle, #71717a); }
.inj-note { margin-left: auto; font-size: 10px; color: var(--sera-fg-faint, #a1a1aa); }

/* ── 7. Policy gap analysis ──────────────────────────────────────────────── */
.pol { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-top: 1px solid var(--sera-border-soft, #f4f4f5); animation: mock-reveal .5s ease-out both; }
.pol-mark { flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%; position: relative; }
.pol-mark::after { content: ""; position: absolute; inset: 0; display: block; background-repeat: no-repeat; background-position: center; background-size: 9px; }
.pol--ok   .pol-mark { background: var(--sera-fg, #18181b); }
.pol--ok   .pol-mark::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 6.5l2.6 2.6L10 3.4'/%3e%3c/svg%3e"); }
.pol--warn .pol-mark { background: #f59e0b; }
.pol--warn .pol-mark::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3e%3cpath d='M6 3v3.4'/%3e%3ccircle cx='6' cy='9' r='.6' fill='%23fff' stroke='none'/%3e%3c/svg%3e"); }
.pol--bad  .pol-mark { background: #dc2626; animation: mock-soft 2s ease-in-out infinite; }
.pol--bad  .pol-mark::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3e%3cpath d='M3.6 3.6l4.8 4.8M8.4 3.6l-4.8 4.8'/%3e%3c/svg%3e"); }
.pol-name { flex: 1 1 auto; font-size: 11.5px; color: var(--sera-fg, #18181b); }
.pol-state { flex: 0 0 auto; font-size: 10px; color: var(--sera-fg-faint, #a1a1aa); text-align: right; }
.pol--bad  .pol-state { color: #dc2626; font-weight: 600; }
.pol--warn .pol-state { color: #b45309; }
.pol--1 { animation-delay: .0s; }  .pol--2 { animation-delay: .15s; }
.pol--3 { animation-delay: .3s; }  .pol--4 { animation-delay: .45s; }
.pol--5 { animation-delay: .6s; }  .pol--6 { animation-delay: .75s; }
.pol-foot { display: flex; align-items: center; gap: 7px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--sera-border-soft, #f4f4f5); font-size: 10.5px; font-weight: 500; color: #dc2626; }
.pol-dot { width: 6px; height: 6px; border-radius: 50%; background: #dc2626; animation: mock-blink 1.4s ease-in-out infinite; }

/* ── 8. Human risk dashboard ─────────────────────────────────────────────── */
.dash-kpis { display: flex; gap: 8px; margin-bottom: 14px; }
.kpi { flex: 1 1 0; min-width: 0; border: 1px solid var(--sera-border, #e4e4e7); border-radius: 4px; padding: 9px 10px; }
.kpi b { display: block; font-size: 19px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--sera-fg, #18181b); font-variant-numeric: tabular-nums; }
.kpi span { display: block; font-size: 9.5px; color: var(--sera-fg-faint, #a1a1aa); margin-top: 1px; }
.kpi em { display: inline-block; margin-top: 4px; font-style: normal; font-size: 9.5px; font-weight: 700; }
.kpi-down { color: #16a34a; }
.kpi-up   { color: #16a34a; }

.dash-chart { position: relative; height: 92px; margin-bottom: 10px; }
.dash-chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.dash-grid { stroke: var(--sera-border-soft, #f4f4f5); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.dash-line {
    fill: none; stroke: var(--sera-fg, #18181b); stroke-width: 2.4;
    stroke-linecap: round; vector-effect: non-scaling-stroke;
    stroke-dasharray: 100;
    animation: dash-draw 1.8s ease-in-out .2s both;
}
@keyframes dash-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.dash-axis { position: absolute; left: 2px; font-size: 9px; color: var(--sera-fg-faint, #a1a1aa); }
.dash-axis--hi { top: 16px; }
.dash-axis--lo { bottom: 4px; }
.dash-pt { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--sera-fg, #18181b); transform: translate(-50%, -50%); animation: dash-pt .5s cubic-bezier(.22,1.4,.5,1) both; }
@keyframes dash-pt {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
    60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.dash-pt--1 { left: 26.0%; top: 42.2%; animation-delay: .9s; }
.dash-pt--2 { left: 48.7%; top: 55.6%; animation-delay: 1.2s; }
.dash-pt--3 { left: 69.3%; top: 84.4%; animation-delay: 1.5s; }
.dash-pt--4 { left: 97.3%; top: 86.7%; animation-delay: 1.8s; }

.dash-quarters { display: flex; gap: 6px; }
.dq { flex: 1 1 0; font-size: 9.5px; text-align: center; border: 1px solid var(--sera-border, #e4e4e7); border-radius: 3px; padding: 5px 4px; color: var(--sera-fg-faint, #a1a1aa); }
.dq--on { background: var(--sera-fg, #18181b); border-color: var(--sera-fg, #18181b); color: #fff; }

/* ── 9. Hub programme tracker ────────────────────────────────────────────── */
.prg { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-top: 1px solid var(--sera-border-soft, #f4f4f5); animation: mock-reveal .5s ease-out both; }
.prg-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--sera-border, #e4e4e7); }
.prg-name { flex: 1 1 auto; font-size: 11.5px; color: var(--sera-fg, #18181b); }
.prg-state { flex: 0 0 auto; font-size: 9.5px; color: var(--sera-fg-faint, #a1a1aa); }
.prg-state--done { color: var(--sera-fg-subtle, #71717a); }
.prg-state--run { color: #dc2626; font-weight: 600; }
.prg--1 .prg-dot, .prg--2 .prg-dot { background: var(--sera-fg, #18181b); }
.prg--3 .prg-dot { background: #dc2626; animation: mock-soft 1.3s ease-in-out infinite; }
.prg--1 { animation-delay: .0s; }  .prg--2 { animation-delay: .15s; }
.prg--3 { animation-delay: .3s; }  .prg--4 { animation-delay: .45s; }
.prg--5 { animation-delay: .6s; }  .prg--6 { animation-delay: .75s; }
.prg-foot { display: flex; align-items: center; gap: 10px; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--sera-border-soft, #f4f4f5); }
.prg-bar { flex: 1 1 auto; height: 6px; border-radius: 3px; background: var(--sera-surface-2, #f4f4f5); overflow: hidden; }
.prg-bar i { display: block; height: 100%; width: 48%; border-radius: inherit; background: var(--sera-fg, #18181b); transform-origin: left center; animation: mock-grow 1.3s cubic-bezier(.22,1,.36,1) .3s both; }
.prg-pct { flex: 0 0 auto; font-size: 9.5px; color: var(--sera-fg-faint, #a1a1aa); }

/* Data-only cards have no cursor or badge to carry motion, so a slow sheen
   passes across them. Subtle on purpose: it should register peripherally, not
   compete with the copy beside it. */
.mock-score::after, .mock-dash::after, .mock-programme::after {
    content: "";
    position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(100deg, transparent 38%, rgba(24,24,27,.06) 50%, transparent 62%);
    background-size: 260% 100%;
    animation: mock-sheen 4.5s ease-in-out infinite;
}
@keyframes mock-sheen {
    0%       { background-position: 150% 0; }
    65%,100% { background-position: -50% 0; }
}

/* ── Narrow viewports ────────────────────────────────────────────────────── */
@media (max-width: 575px) {
    .cyb-mock { font-size: 12px; gap: 12px; }
    .mock-card { padding: 14px 15px; }
    .mail-subject { font-size: 12.5px; }
    .score-num { font-size: 34px; }
    .dept-name { flex-basis: 78px; }
    .kpi b { font-size: 17px; }
    .mock-cursor, .mock-ripple { display: none; }
}

/* Reduced motion: land on the finished frame, never a blank or faded one. */
@media (prefers-reduced-motion: reduce) {
    .cyb-mock *, .cyb-mock *::before, .cyb-mock *::after {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .mock-cursor, .mock-ripple { display: none; }
    .dash-line { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
}

/* Hub hero runs the same two-column grid as the service pages, so the art
   panel sits top-right there too. The light frame reads as a plate on the
   dark hero rather than fighting it. */
.cyb-hub-hero .cyb-hero__grid { align-items: center; }
.cyb-hub-hero .cyb-art { background: rgba(255, 255, 255, 0.94); border-color: rgba(255, 255, 255, 0.18); }
.cyb-hub-hero p { margin-bottom: 28px; }

/* ── 10. Awareness programme mockup ──────────────────────────────────────── */
.lms-mod { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; animation: mock-reveal .5s ease-out both; }
.lms-mod--1 { animation-delay: .05s; } .lms-mod--2 { animation-delay: .2s; }
.lms-mod--3 { animation-delay: .35s; } .lms-mod--4 { animation-delay: .5s; }
.lms-name { flex: 1 1 auto; font-size: 11.5px; color: var(--sera-fg, #18181b); }
.lms-bar { flex: 0 0 68px; height: 6px; border-radius: 3px; background: var(--sera-surface-2, #f4f4f5); overflow: hidden; }
.lms-bar i { display: block; height: 100%; width: var(--w, 50%); border-radius: inherit; background: var(--sera-fg, #18181b); transform-origin: left center; animation: mock-grow 1.3s cubic-bezier(.22,1,.36,1) .3s both; }
.lms-pct { flex: 0 0 30px; text-align: right; font-size: 11px; font-weight: 700; color: var(--sera-fg, #18181b); font-variant-numeric: tabular-nums; }
.lms-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--sera-border-soft, #f4f4f5); }
.lms-next { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 500; color: var(--sera-fg, #18181b); }
.lms-next i { width: 6px; height: 6px; border-radius: 50%; background: #dc2626; animation: mock-soft 1.5s ease-in-out infinite; }
.lms-cert { font-size: 9.5px; color: var(--sera-fg-faint, #a1a1aa); }

.mock-record { padding: 12px 18px; }
.rec-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 11.5px; }
.rec-row + .rec-row { border-top: 1px solid var(--sera-border-soft, #f4f4f5); }
.rec-k { color: var(--sera-fg-muted, #52525b); }
.rec-v { font-weight: 700; color: var(--sera-fg, #18181b); font-variant-numeric: tabular-nums; }
.rec-v--ok { font-size: 10px; font-weight: 600; letter-spacing: .04em; }