@layer brand {
  :root {
    --bg: var(--surface-background);
    --surf: var(--surface-1);
    --cloud: var(--text-primary);
    --mist: var(--text-tertiary);
    --steel: var(--text-secondary);
    --teal: var(--accent);
    --teal-dim: rgba(12, 201, 168, 0.10);
    --teal-glow: rgba(12, 201, 168, 0.18);
    --teal-40: var(--teal-40);
    --teal-30: var(--teal-30);
    --teal-06: var(--teal-06);
    
    --border: rgba(12, 201, 168, 0.10);
    --border2: var(--teal-20);
    --border-hairline: 0.0625rem;
    --border-bold: 0.125rem;
    --border-thick: 0.25rem;

    --radius-pill: 9999px;

    --space-1: 0.25rem;
    --space-1-5: 0.375rem;
    --space-2: 0.5rem;
    --space-2-5: 0.625rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;

    --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    
    --ease-premium: var(--ease-canonical);
  }
}

/* =========================================================================
   security-page.css — scoped styling for /security (body.f8-security)
   Author: security-redesign 2026-05-16
   Purpose: Stripe/Apple/Google-quality refactor delivering O1-O18.
   Spacing tokens: 8 / 12 / 16 / 24 / 32 / 48 / 64.
   Prose max line-length: 75-90ch.
   All colours use brand tokens (--bg/--surf/--cloud/--mist/--steel/--teal/
   --border/--space-*). No hardcoded hex.
   ========================================================================= */

/* ---- 0. Page scope + vertical rhythm ------------------------------------ */
body.f8-security main {
  padding-bottom: var(--space-16, 64px);
}
body.f8-security .f10-breadcrumbs {
  margin-bottom: 0;
}

/* ---- O4. Hero -----------------------------------------------------------
   Left-aligned, max 75ch prose, eyebrow + trust icon inline, 3rem rhythm. */
.sec-hero {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
  text-align: start;
}
.sec-hero .sec-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size:var(--font-size-sm);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal);
  background: var(--teal-dim);
  border:var(--border-hairline) solid var(--border2);
  border-radius:var(--radius-pill);
  padding:var(--space-1-5) 0.875rem;
  margin: 0 0 1rem;
}
.sec-hero .sec-eyebrow svg {
  width:calc(14*0.0625rem);
  height:calc(14*0.0625rem);
  flex-shrink: 0;
}
body.f8-security .sec-hero h1.page-title {
  margin: 0 0 1rem;
  text-align: start;
  max-width: 22ch;
}
.sec-hero .sec-hero-sub {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.7;
  color: var(--steel);
  max-width: 75ch;
  margin: 0;
}

/* ---- O15. Overview grid (2x3) ------------------------------------------ */
.security-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin:var(--space-8) 0 0;
}
.security-overview-grid > .ov-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding:var(--space-6);
  background: var(--surf);
  border:var(--border-hairline) solid var(--border);
  border-radius:0.875rem;
  transition: border-color .2s ease, transform .2s ease;
}
.security-overview-grid > .ov-cell:hover {
  border-color: var(--border2);
  transform: translateY(-1px);
}
.ov-cell .ov-icon {
  width:calc(24*0.0625rem);
  height:calc(24*0.0625rem);
  color: var(--teal);
  flex-shrink: 0;
}
.ov-cell .ov-label {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size:var(--font-size-base);
  font-weight: 700;
  color: var(--cloud);
  line-height: 1.3;
  margin: 0;
}
.ov-cell .ov-caption {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size:var(--font-size-sm);
  line-height: 1.55;
  color: var(--mist);
  margin: 0;
  max-width: 38ch;
}
@media (max-width:calc(960*0.0625rem)) {
  .security-overview-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:calc(560*0.0625rem)) {
  .security-overview-grid { grid-template-columns: 1fr; }
}

/* ---- O3. Section separators + section rhythm --------------------------- */
.sec-block {
  padding:var(--space-12) 0;
  border-top:calc(1*0.0625rem) solid var(--border);
}
.sec-block:first-of-type { border-top: none; }
.sec-block > .sec-block-inner { max-width: 100%; }

/* ---- O2. Headings + inline-SVG iconography ----------------------------- */
.sec-h2 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--cloud);
  margin: 0 0 1rem;
}
.sec-h2 .sec-h2-icon {
  width:calc(28*0.0625rem);
  height:calc(28*0.0625rem);
  color: var(--teal);
  flex-shrink: 0;
}
.sec-h3 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--cloud);
  margin: 0 0 0.5rem;
}
.sec-h3 .sec-h3-icon {
  width:calc(18*0.0625rem);
  height:calc(18*0.0625rem);
  color: var(--teal);
  flex-shrink: 0;
}
.sec-eyebrow-inline {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size:var(--font-size-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 0.75rem;
}
.sec-prose {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size:var(--font-size-base);
  line-height: 1.75;
  color: var(--steel);
  max-width: 75ch;
  margin: 0 0 0.75rem;
}
.sec-prose:last-child { margin-bottom: 0; }

/* ---- O5. AES-256 panel ------------------------------------------------- */
.sec-aes-card {
  background: var(--surf);
  border:var(--border-hairline) solid var(--border);
  border-radius:1rem;
  padding:var(--space-8);
}
.sec-aes-card .sec-aes-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-4);
}
.sec-aes-row .sec-aes-stat {
  padding:var(--space-4);
  background: rgba(255, 255, 255, .015);
  border:var(--border-hairline) solid var(--border);
  border-radius:0.75rem;
}
.sec-aes-stat .sec-aes-key {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size:var(--font-size-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mist);
  margin: 0 0 0.5rem;
}
.sec-aes-stat .sec-aes-val {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--cloud);
  margin: 0;
}
@media (max-width:calc(640*0.0625rem)) {
  .sec-aes-card .sec-aes-row { grid-template-columns: 1fr; }
}

/* ---- O6. Data residency bullets + chip row ----------------------------- */
.sec-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  max-width: 80ch;
}
.sec-list li {
  position: relative;
  padding:var(--space-2) 0 0.5rem 1.75rem;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size:var(--font-size-base);
  line-height: 1.6;
  color: var(--steel);
}
.sec-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top:calc(14*0.0625rem);
  width:calc(16*0.0625rem);
  height:calc(16*0.0625rem);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230CC9A8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}
.sec-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin:var(--space-3) 0 0;
}
.sec-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size:var(--font-size-sm);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--cloud);
  background: rgba(255, 255, 255, .02);
  border:var(--border-hairline) solid var(--border);
  border-radius:var(--radius-pill);
  padding:var(--space-1-5) 0.75rem;
  line-height: 1;
}
.sec-chip-region {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size:var(--font-size-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--teal);
  margin-inline-start: var(--space-1);
}

/* ---- O7 / O16. Security callout / highlight blocks --------------------- */
.security-callout,
.security-highlight {
  border-inline-start:var(--border-bold) solid var(--teal);
  background: rgba(12, 201, 168, .05);
  padding:var(--space-6);
  border-radius: 0 0.75rem 0.75rem 0;
  margin:var(--space-4) 0;
  max-width: 75ch;
}
.security-callout .sh-label,
.security-highlight .sh-label {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size:var(--font-size-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 0.5rem;
}
.security-callout p,
.security-highlight p {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size:var(--font-size-base);
  line-height: 1.65;
  color: var(--cloud);
  margin: 0;
}
.security-callout p + p,
.security-highlight p + p {
  margin-top: var(--space-2);
}

/* ---- O8. Access controls — 3 sub-sections ------------------------------ */
.sec-access-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin:var(--space-6) 0 0;
}
.sec-access-grid .sec-access-cell {
  padding:var(--space-6);
  background: var(--surf);
  border:var(--border-hairline) solid var(--border);
  border-radius:0.875rem;
}
.sec-access-cell ul {
  list-style: none;
  padding: 0;
  margin:var(--space-3) 0 0;
}
.sec-access-cell ul li {
  position: relative;
  padding:var(--space-1) 0 0.25rem 1.25rem;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size:var(--font-size-base);
  line-height: 1.55;
  color: var(--steel);
}
.sec-access-cell ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top:calc(10*0.0625rem);
  width:calc(6*0.0625rem);
  height:calc(6*0.0625rem);
  border-radius: 50%;
  background: var(--teal);
}
@media (max-width:calc(820*0.0625rem)) {
  .sec-access-grid { grid-template-columns: 1fr; }
}

/* ---- O9. ISO 27001 badge row ------------------------------------------- */
.sec-iso-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-6);
  align-items: start;
}
.sec-iso-badge {
  width:calc(112*0.0625rem);
  height:calc(112*0.0625rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border:var(--border-hairline) solid var(--border2);
  border-radius:1rem;
  background: rgba(12, 201, 168, .04);
  color: var(--teal);
  flex-shrink: 0;
}
.sec-iso-badge svg { width:calc(64*0.0625rem); height:calc(64*0.0625rem); }
@media (max-width:calc(560*0.0625rem)) {
  .sec-iso-row { grid-template-columns: 1fr; }
}

/* ---- O10. AI data handling — 3 bullet groups --------------------------- */
.sec-ai-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin:var(--space-6) 0 0;
}
.sec-ai-grid .sec-ai-cell {
  padding:var(--space-6);
  background: var(--surf);
  border:var(--border-hairline) solid var(--border);
  border-radius:0.875rem;
}
.sec-ai-cell .sec-ai-cell-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size:var(--font-size-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
}
.sec-ai-cell-label.is-pos { color: var(--teal); }
.sec-ai-cell-label.is-neg { color: var(--mist); }
.sec-ai-cell-label.is-info { color: var(--cloud); }
.sec-ai-cell ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.sec-ai-cell ul li {
  position: relative;
  padding:var(--space-1) 0 0.25rem 1.25rem;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size:var(--font-size-base);
  line-height: 1.55;
  color: var(--steel);
}
.sec-ai-cell ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top:calc(10*0.0625rem);
  width:calc(6*0.0625rem);
  height:calc(6*0.0625rem);
  border-radius: 50%;
  background: var(--teal);
}
.sec-ai-cell.is-neg ul li::before { background: var(--mist); }
@media (max-width:calc(820*0.0625rem)) {
  .sec-ai-grid { grid-template-columns: 1fr; }
}

/* ---- O11. Vulnerability disclosure — severity table -------------------- */
.sec-vuln-table-wrap {
  margin:var(--space-4) 0 0;
  border:var(--border-hairline) solid var(--border);
  border-radius:0.75rem;
  overflow: hidden;
  background: var(--surf);
}
.sec-vuln-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body, 'Inter', sans-serif);
}
.sec-vuln-table thead th {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size:var(--font-size-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mist);
  text-align: start;
  padding:0.875rem 1rem;
  background: rgba(255, 255, 255, .015);
  border-bottom:calc(1*0.0625rem) solid var(--border);
}
.sec-vuln-table tbody td {
  padding:0.875rem 1rem;
  font-size:var(--font-size-base);
  color: var(--steel);
  border-top:calc(1*0.0625rem) solid var(--border);
  vertical-align: middle;
}
.sec-vuln-table tbody tr:first-child td { border-top: none; }
.sec-vuln-table .sec-vuln-severity {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700;
  color: var(--cloud);
}
.sec-vuln-severity .dot {
  width:calc(8*0.0625rem);
  height:calc(8*0.0625rem);
  border-radius: 50%;
  flex-shrink: 0;
}
.sec-vuln-severity.is-critical .dot { background: var(--teal); box-shadow: 0 0 0.5rem var(--teal-glow, var(--teal-40)); }
.sec-vuln-severity.is-high     .dot { background: var(--teal); opacity: .8; }
.sec-vuln-severity.is-medium   .dot { background: var(--steel); }
.sec-vuln-severity.is-low      .dot { background: var(--mist); }

/* ---- O12. Uptime big stat ---------------------------------------------- */
.sec-uptime-block {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-8);
  align-items: center;
  padding:var(--space-8);
  background: var(--surf);
  border:var(--border-hairline) solid var(--border);
  border-radius:1rem;
}
.uptime-stat {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--teal);
  margin: 0;
}
.uptime-stat-unit {
  font-size: 0.55em;
  color: var(--mist);
  margin-inline-start: var(--space-1);
}
.sec-uptime-body { display: flex; flex-direction: column; gap: var(--space-3); }
.sec-uptime-body .sec-uptime-lead {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size:var(--font-size-base);
  line-height: 1.6;
  color: var(--steel);
  margin: 0;
  max-width: 60ch;
}
.sec-uptime-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size:var(--font-size-sm);
  font-weight: 700;
  color: var(--bg);
  background: var(--teal);
  border-radius:0.5rem;
  padding:var(--space-2-5) 1.125rem;
  min-height:calc(44*0.0625rem);
  width: max-content;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.sec-uptime-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 0.375rem 1rem var(--teal-30);
}
.sec-uptime-cta svg { width:calc(14*0.0625rem); height:calc(14*0.0625rem); }
@media (max-width:calc(640*0.0625rem)) {
  .sec-uptime-block { grid-template-columns: 1fr; padding:var(--space-6); gap: var(--space-4); }
}

/* ---- O13. Company details grid ----------------------------------------- */
.company-details-grid {
  display: grid;
  grid-template-columns: 11.25rem 1fr;
  row-gap:var(--space-4);
  column-gap:var(--space-6);
  margin:var(--space-4) 0 0;
  padding:var(--space-6);
  background: var(--surf);
  border:var(--border-hairline) solid var(--border);
  border-radius:1rem;
}
.company-details-grid .cd-label {
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size:var(--font-size-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mist);
  align-self: center;
}
.company-details-grid .cd-value {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size:var(--font-size-base);
  font-weight: 500;
  color: var(--cloud);
  align-self: center;
}
@media (max-width:calc(640*0.0625rem)) {
  .company-details-grid {
    grid-template-columns: 1fr;
    row-gap:var(--space-1);
    padding:var(--space-5);
  }
  .company-details-grid .cd-label { margin-top: var(--space-3); }
  .company-details-grid .cd-label:first-child { margin-top: 0; }
}

/* ---- O14. Security badges row ------------------------------------------ */
.security-badges-wrap {
  margin-top: var(--space-4);
  padding-top: var(--space-8);
  border-top:calc(1*0.0625rem) solid var(--border);
}
.security-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  line-height: 1;
}
.security-badges .sec-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size:var(--font-size-sm);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--cloud);
  background: var(--surf);
  border:var(--border-hairline) solid var(--border);
  border-radius:var(--radius-pill);
  padding:var(--space-2) 0.875rem;
  line-height: 1;
}
.security-badges .sec-badge svg {
  width:calc(14*0.0625rem);
  height:calc(14*0.0625rem);
  color: var(--teal);
  flex-shrink: 0;
}

/* ---- O17. Accordions --------------------------------------------------- */
.sec-accordion {
  background: var(--surf);
  border:var(--border-hairline) solid var(--border);
  border-radius:0.75rem;
  margin:var(--space-3) 0;
  overflow: hidden;
}
.sec-accordion summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding:var(--space-4) 1.5rem;
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size:var(--font-size-base);
  font-weight: 700;
  color: var(--cloud);
  min-height:calc(44*0.0625rem);
  user-select: none;
}
.sec-accordion summary::-webkit-details-marker { display: none; }
.sec-accordion summary::after {
  content: "";
  width:calc(14*0.0625rem);
  height:calc(14*0.0625rem);
  flex-shrink: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230CC9A8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform .2s ease;
}
.sec-accordion[open] summary::after { transform: rotate(180deg); }
.sec-accordion summary:hover { color: var(--teal); }
.sec-accordion summary:focus-visible {
  outline:var(--border-thick) solid var(--teal);
  outline-offset: -2px;
}
.sec-accordion-body {
  padding: 0 1.5rem 1.25rem;
  border-top:calc(1*0.0625rem) solid var(--border);
  padding-top: var(--space-4);
}
.sec-accordion-body p,
.sec-accordion-body ul {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size:var(--font-size-base);
  line-height: 1.65;
  color: var(--steel);
  margin: 0 0 0.75rem;
  max-width: 80ch;
}
.sec-accordion-body p:last-child,
.sec-accordion-body ul:last-child { margin-bottom: 0; }
.sec-accordion-body ul {
  list-style: none;
  padding: 0;
}
.sec-accordion-body ul li {
  position: relative;
  padding:var(--space-1) 0 0.25rem 1.25rem;
}
.sec-accordion-body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top:calc(12*0.0625rem);
  width:calc(6*0.0625rem);
  height:calc(6*0.0625rem);
  border-radius: 50%;
  background: var(--teal);
}

/* ---- O18. End-of-page CTA row ------------------------------------------ */
.sec-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin:var(--space-8) 0 0;
}
.sec-cta-row .sec-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
  font-size:var(--font-size-base);
  font-weight: 700;
  color: var(--cloud);
  background: transparent;
  border:var(--border-hairline) solid var(--border2);
  border-radius:0.625rem;
  padding:var(--space-3) 1.25rem;
  min-height:calc(44*0.0625rem);
  transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease;
}
.sec-cta-row .sec-cta:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: var(--teal-dim, var(--teal-06));
  transform: translateY(-1px);
}
.sec-cta-row .sec-cta svg {
  width:calc(14*0.0625rem);
  height:calc(14*0.0625rem);
  flex-shrink: 0;
}

/* ---- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .security-overview-grid > .ov-cell,
  .sec-uptime-cta,
  .sec-cta-row .sec-cta,
  .sec-accordion summary::after {
    transition: none !important;
  }
  .security-overview-grid > .ov-cell:hover,
  .sec-uptime-cta:hover,
  .sec-cta-row .sec-cta:hover {
    transform: none;
  }
}

/* =========================================================
   MIGRATED from security-sf19.css (2026-06-02) — live status callout.
   The credential-grid half of that file (.sf19-cred-*) was dead (0 refs in
   security.html) and was dropped. This block is the only part still in use.
   ========================================================= */
.sf19-status-callout-wrap { margin: var(--space-4) 0 0; display: flex; }
.sf19-status-callout {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2-5) 1rem; border-radius: var(--radius-full);
  background: rgba(0, 212, 170, 0.07);
  border: var(--border-hairline) solid rgba(0, 212, 170, 0.20);
  color: var(--teal); font-size: var(--font-size-sm); font-weight: 500;
  line-height: 1.2; text-decoration: none; min-height: calc(44*0.0625rem);
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.sf19-status-callout:hover, .sf19-status-callout:focus-visible {
  background: rgba(0, 212, 170, 0.11); border-color: rgba(0, 212, 170, 0.32); text-decoration: none;
}
.sf19-status-callout:focus-visible { outline: var(--border-thick) solid var(--teal); outline-offset: var(--outline-offset-3); }
.sf19-status-dot { position: relative; width: calc(8*0.0625rem); height: calc(8*0.0625rem); border-radius: 50%; background: var(--teal); flex-shrink: 0; }
.sf19-status-dot::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: rgba(0, 212, 170, 0.45); animation: sf19-pulse 1.8s ease-out infinite; z-index: var(--z-below); }
@keyframes sf19-pulse { 0% { transform: scale(0.6); opacity: 0.8; } 80% { transform: scale(2.2); opacity: 0; } 100% { transform: scale(2.2); opacity: 0; } }
.sf19-status-text { color: var(--teal); font-weight: 600; }
.sf19-status-sep { width: calc(1*0.0625rem); height: calc(12*0.0625rem); background: rgba(0, 212, 170, 0.30); display: inline-block; }
.sf19-status-host { color: rgba(255, 255, 255, 0.70); font-weight: 500; letter-spacing: 0.01em; }
.sf19-status-ext { width: calc(12*0.0625rem); height: calc(12*0.0625rem); color: rgba(0, 212, 170, 0.70); flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .sf19-status-dot::before { animation: none; opacity: 0.4; transform: scale(1.4); } }