/* WebPro360 Website Security pages: signature sections + the report-an-issue button and dialog (2026-11-02).
   Loaded by _partials/redesign-tracking.php only on /services/website-security/* and the managed hosting page.
   Sections are static server HTML (React treats them as opaque blocks), so nothing here touches hydration. */
:root {
  --sec-bg: #080e11; --sec-panel: #0d181c; --sec-panel-2: #101f20; --sec-line: #263b40; --sec-line-2: #34504f;
  --sec-text: #eef4f2; --sec-muted: #a8c3c0; --sec-dim: #7f9a99; --sec-teal: #5ce6df; --sec-mint: #b8e9c6;
  --sec-red: #ff8a7a; --sec-amber: #f2b56b; --sec-amber-ink: #f8dcb4;
}

/* ------------------------------------------------------------------ report button (deliberately unlike .pill and .text-link) */
.subpage .sec-report-btn, .sec-report-btn {
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 14px 20px 14px 16px; border-radius: 6px; border: 1px solid var(--sec-amber);
  background: rgba(242, 181, 107, .08); color: var(--sec-amber-ink);
  font: 600 15px/1.2 Space, Arial, sans-serif; letter-spacing: .01em;
  transition: background .2s, border-color .2s, transform .2s;
}
.subpage .sec-report-btn svg, .sec-report-btn svg { flex: none; color: var(--sec-amber); }
.subpage .sec-report-btn:hover, .sec-report-btn:hover { background: rgba(242, 181, 107, .16); transform: translateY(-1px); }
.sec-report-btn:focus-visible { outline: 2px solid var(--sec-amber); outline-offset: 4px; }
.subpage .sec-lead .sec-report-btn { color: #6b3f0c; background: #fbeedd; border-color: #c98a3c; }
.subpage .sec-lead .sec-report-btn svg { color: #b0702a; }

/* ------------------------------------------------------------------ dialog */
.sec-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--sec-line-2);
  border-radius: 14px; background: #0b1518; color: var(--sec-text); font-family: Space, Arial, sans-serif; overflow: auto; }
.sec-dialog::backdrop { background: rgba(3, 8, 10, .72); backdrop-filter: blur(3px); }
.sec-dialog-head { display: flex; justify-content: space-between; align-items: start; gap: 20px; padding: 26px 28px 0; }
.sec-dialog-head p { margin: 0 0 8px; color: var(--sec-amber); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; }
.sec-dialog-head h2 { margin: 0; font-size: 26px; letter-spacing: -.03em; line-height: 1.15; }
.sec-dialog-close { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--sec-line-2); background: none; color: var(--sec-text); cursor: pointer; font-size: 20px; line-height: 1; }
.sec-dialog-close:hover { border-color: var(--sec-teal); }
.sec-dialog form, .sec-dialog .sec-done { padding: 18px 28px 28px; }
.sec-dialog .sec-intro { color: var(--sec-muted); font-size: 15px; line-height: 1.6; margin: 0 0 18px; }
.sec-field { display: grid; gap: 7px; margin-bottom: 14px; }
.sec-field label { font-size: 13px; color: #cfe0dd; }
.sec-field label span { color: var(--sec-dim); }
.sec-field input, .sec-field textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--sec-line-2);
  background: #081013; color: var(--sec-text); font: 15px/1.5 Space, Arial, sans-serif; }
.sec-field textarea { min-height: 96px; resize: vertical; }
.sec-field input:focus, .sec-field textarea:focus { outline: none; border-color: var(--sec-teal); box-shadow: 0 0 0 3px rgba(92, 230, 223, .15); }
.sec-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sec-dialog .sec-note { color: var(--sec-dim); font-size: 13px; line-height: 1.55; margin: 4px 0 18px; }
.sec-submit { display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; border: 0; border-radius: 6px; cursor: pointer;
  background: var(--sec-amber); color: #2a1804; font: 700 15px Space, Arial, sans-serif; }
.sec-submit[disabled] { opacity: .6; cursor: wait; }
.sec-error { color: var(--sec-red); font-size: 14px; margin: 12px 0 0; }
.sec-done h3 { font-size: 22px; margin: 0 0 10px; }
.sec-done p { color: var(--sec-muted); line-height: 1.6; margin: 0; }
@media (max-width: 560px) { .sec-row { grid-template-columns: 1fr; } .sec-dialog-head { padding: 22px 20px 0; } .sec-dialog form, .sec-dialog .sec-done { padding: 16px 20px 22px; } }

/* ------------------------------------------------------------------ shared bits */
.subpage .sec-kicker, .sec-kicker { color: var(--sec-dim); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; margin: 0 0 22px; }
.sec-head { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: end; margin-bottom: 44px; }
.sec-head h2 { margin: 0; }
.sec-head p { margin: 0; color: var(--sec-muted); font-size: 17px; max-width: 56ch; }
@media (max-width: 860px) { .sec-head { grid-template-columns: 1fr; gap: 16px; } }
.sec-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ------------------------------------------------------------------ hub: 360° ring (hero aside) */
.sec-ring-wrap { border-left: 1px solid #42555d; padding: 4px 0 4px 32px; }
.sec-ring-wrap > p { margin: 0 0 6px; color: var(--sec-dim); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; }
.sec-ring { display: block; width: 100%; max-width: 330px; height: auto; margin: 0 auto; overflow: visible; }
.sec-ring .seg { fill: none; stroke: #22504b; stroke-width: 22; transition: stroke .35s; }
.sec-ring .seg.on, .sec-ring a:hover .seg, .sec-ring a:focus .seg { stroke: var(--sec-teal); }
.sec-ring .seg-n { fill: #cfe0dd; font: 600 11px Space, Arial, sans-serif; text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.sec-ring a:hover .seg-n, .sec-ring .seg-n.on { fill: #062020; }
.sec-ring .ticks { stroke: #2b4646; stroke-width: 1; fill: none; transform-origin: 160px 160px; animation: sec-spin 90s linear infinite; }
.sec-ring .core-big { fill: var(--sec-text); font: 500 46px Space, Arial, sans-serif; text-anchor: middle; letter-spacing: -2px; }
.sec-ring .core-small { fill: var(--sec-dim); font: 600 9px Space, Arial, sans-serif; text-anchor: middle; letter-spacing: 2px; }
.sec-ring-legend { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 14px; }
.sec-ring-legend a { display: flex; gap: 8px; align-items: baseline; padding: 7px 0; border-top: 1px solid #22363a; font-size: 14px; color: #cfe0dd; transition: color .2s; }
.sec-ring-legend a span { color: var(--sec-dim); font-size: 11px; min-width: 16px; }
.sec-ring-legend a:hover, .sec-ring-legend a.on { color: var(--sec-teal); }
@keyframes sec-draw { to { stroke-dashoffset: 0; } }
@keyframes sec-spin { to { transform: rotate(360deg); } }
@media (max-width: 760px) { .sec-ring-wrap { border-left: 0; padding: 30px 0 0; } }

/* ------------------------------------------------------------------ hub: security lead card */
.sec-lead { background: #dce5d9; color: #17302a; display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: center; }
.sec-lead .sec-kicker { color: #567262; }
.sec-lead-photo { position: relative; }
.sec-lead-photo img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 12px; filter: saturate(.9); }
.sec-lead-photo figcaption { position: absolute; left: 14px; bottom: 14px; background: #0b1518; color: #eef4f2; padding: 8px 12px; border-radius: 6px; font-size: 13px; }
.sec-lead-photo figcaption b { display: block; font-weight: 600; }
.sec-lead-photo figcaption span { color: #a8c3c0; font-size: 12px; }
.sec-lead h2 { color: #17302a; margin: 0 0 16px; max-width: 18ch; }
.sec-lead > div > p { color: #34514a; font-size: 17px; max-width: 60ch; margin: 0 0 22px; }
.sec-steps { list-style: none; margin: 0 0 28px; padding: 0; counter-reset: s; max-width: 640px; }
.sec-steps li { counter-increment: s; display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 13px 0; border-top: 1px solid var(--sec-line-2); color: #d5e5e2; font-size: 15px; line-height: 1.55; }
.sec-steps li::before { content: "0" counter(s); color: #74cdbc; font-size: 13px; padding-top: 2px; }
.sec-lead .sec-steps li { border-top-color: #b9c9bc; color: #2c4741; }
.sec-lead .sec-steps li::before { color: #6c8a78; }
.sec-lead-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.sec-lead-actions a { color: #2c4741; border-bottom: 1px solid #8aa596; padding-bottom: 2px; font-size: 15px; }
@media (max-width: 860px) { .sec-lead { grid-template-columns: 1fr; gap: 30px; } .sec-lead-photo { max-width: 320px; } }

/* ------------------------------------------------------------------ custom builds: attack surface */
.sec-surface-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.sec-stack { border: 1px solid var(--sec-line-2); border-radius: 14px; padding: 28px; background: var(--sec-panel); display: flex; flex-direction: column; }
.sec-stack h3 { margin: 0 0 4px; font-size: 22px; }
.sec-stack > p { margin: 0 0 22px; color: var(--sec-muted); font-size: 15px; }
.sec-stack ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; flex: 1; align-content: start; }
.sec-stack li { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 13px 16px; border-radius: 8px; font-size: 15px; background: #13262a; border: 1px solid #22393d; }
.sec-stack li em { font-style: normal; font-size: 12px; letter-spacing: .5px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.sec-stack.wp li em { color: var(--sec-red); }
.sec-stack.wp li em::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sec-red); box-shadow: 0 0 0 0 rgba(255, 138, 122, .6); animation: sec-ping 2.4s infinite; animation-delay: calc(var(--i) * .3s); }
.sec-stack.ours { border-color: #3f7d6f; background: linear-gradient(160deg, #0f2423, #0d181c 60%); }
.sec-stack.ours li { background: #123230; border-color: #2c5a52; }
.sec-stack.ours li em { color: var(--sec-mint); }
.sec-stack-foot { display: flex; align-items: baseline; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--sec-line); }
.sec-stack-foot b { font-size: 44px; font-weight: 500; letter-spacing: -2px; line-height: 1; }
.sec-stack.wp .sec-stack-foot b { color: var(--sec-red); }
.sec-stack.ours .sec-stack-foot b { color: var(--sec-mint); }
.sec-stack-foot span { color: var(--sec-muted); font-size: 14px; }
@keyframes sec-ping { 0% { box-shadow: 0 0 0 0 rgba(255, 138, 122, .55); } 70% { box-shadow: 0 0 0 9px rgba(255, 138, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 138, 122, 0); } }
@media (max-width: 860px) { .sec-surface-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ custom builds: migrations ledger */
.sec-ledger { list-style: none; margin: 0; padding: 0; }
.sec-ledger li { display: grid; grid-template-columns: 1.1fr .8fr 1.6fr; gap: 28px; align-items: baseline; padding: 22px 0; border-top: 1px solid var(--sec-line-2); }
.sec-ledger li:last-child { border-bottom: 1px solid var(--sec-line-2); }
.sec-ledger strong { font-size: 21px; font-weight: 500; letter-spacing: -.02em; }
.sec-ledger li > span { color: var(--sec-dim); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.sec-ledger p { margin: 0; color: var(--sec-muted); font-size: 16px; }
.sec-ledger .from { font-size: 14px; color: var(--sec-red); text-decoration: line-through; text-decoration-color: rgba(255, 138, 122, .6); margin-right: 8px; }
.sec-ledger .to { font-size: 14px; color: var(--sec-mint); }
@media (max-width: 760px) { .sec-ledger li { grid-template-columns: 1fr; gap: 6px; } }

/* ------------------------------------------------------------------ hacked: warning signs */
.sec-signs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.sec-sign { position: relative; padding: 24px 22px 26px; border-radius: 12px; background: var(--sec-panel); border: 1px solid var(--sec-line-2); overflow: hidden; }
.sec-sign::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--sec-red); opacity: .85; }
.sec-sign .glyph { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: rgba(255, 138, 122, .1); color: var(--sec-red); margin-bottom: 18px; }
.sec-sign h3 { margin: 0 0 8px; font-size: 18px; line-height: 1.3; }
.sec-sign p { margin: 0; color: var(--sec-muted); font-size: 15px; line-height: 1.6; }
.sec-now { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px; padding: 20px 24px; border-radius: 12px;
  border: 1px solid rgba(242, 181, 107, .45); background: rgba(242, 181, 107, .07); }
.sec-now p { margin: 0; color: var(--sec-amber-ink); font-size: 16px; }
.sec-now a { color: var(--sec-amber-ink); font-weight: 600; border-bottom: 1px solid rgba(242, 181, 107, .6); padding-bottom: 2px; white-space: nowrap; }
@media (max-width: 1000px) { .sec-signs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sec-signs { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ hacked: recovery rail */
.sec-rail { list-style: none; margin: 0; padding: 0; position: relative; max-width: 760px; }
.sec-rail::before { content: ""; position: absolute; left: 19px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(var(--sec-red), var(--sec-amber) 45%, var(--sec-mint)); }
.sec-rail li { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 22px; padding: 0 0 30px; }
.sec-rail li:last-child { padding-bottom: 0; }
.sec-rail li > b { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sec-bg); border: 1px solid var(--c, var(--sec-line-2)); color: var(--c, var(--sec-muted)); font-size: 13px; font-weight: 600; }
.sec-rail h3 { margin: 6px 0 6px; font-size: 20px; }
.sec-rail p { margin: 0; color: var(--sec-muted); font-size: 16px; }

/* ------------------------------------------------------------------ insurance: scan report */
.sec-scan { border: 1px solid var(--sec-line-2); border-radius: 14px; background: var(--sec-panel); overflow: hidden; }
.sec-scan-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--sec-line); background: #0a1417; }
.sec-scan-top b { font-weight: 500; font-size: 15px; }
.sec-scan-top small { display: block; color: var(--sec-dim); font-size: 12px; margin-top: 2px; }
.sec-toggle { display: inline-flex; border: 1px solid var(--sec-line-2); border-radius: 8px; padding: 3px; gap: 3px; }
.sec-toggle button { border: 0; background: none; color: var(--sec-muted); padding: 8px 14px; border-radius: 6px; cursor: pointer; font: 600 13px Space, Arial, sans-serif; }
.sec-toggle button[aria-pressed="true"] { background: #1c3436; color: var(--sec-text); }
.sec-scan table { width: 100%; border-collapse: collapse; }
.sec-scan th { text-align: left; color: var(--sec-dim); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; padding: 14px 24px; border-bottom: 1px solid var(--sec-line); }
.sec-scan td { padding: 16px 24px; border-bottom: 1px solid #1d3034; font-size: 15px; vertical-align: top; }
.sec-scan tr:last-child td { border-bottom: 0; }
.sec-scan td small { display: block; color: var(--sec-dim); font-size: 13px; margin-top: 3px; }
.sec-sev { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; padding-left: 10px; border-left: 3px solid; }
.sec-sev.high { color: #ffb0a5; border-color: var(--sec-red); }
.sec-sev.med { color: var(--sec-amber-ink); border-color: var(--sec-amber); }
.sec-sev.low { color: #b9cfcc; border-color: #6f8f8b; }
.sec-status { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; white-space: nowrap; }
.sec-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sec-status .after { display: none; }
.sec-scan.is-after .sec-status { color: var(--sec-mint); }
.sec-scan.is-after .sec-status .before { display: none; }
.sec-scan.is-after .sec-status .after { display: inline; }
.sec-scan:not(.is-after) .sec-status { color: #ffb0a5; }
.sec-scan tr { transition: background .4s; }
.sec-scan.is-after tbody tr { background: rgba(184, 233, 198, .03); }
.sec-scan-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--sec-line); color: var(--sec-dim); font-size: 13px; }
.sec-scan-foot b { color: var(--sec-text); font-weight: 500; }
@media (max-width: 700px) { .sec-scan th:nth-child(2), .sec-scan td:nth-child(2) { display: none; } .sec-scan td, .sec-scan th { padding-inline: 16px; } }

/* ------------------------------------------------------------------ email auth: DNS records + DMARC policy */
.sec-dns { display: grid; gap: 14px; }
.sec-record { display: grid; grid-template-columns: 170px 1fr; gap: 26px; align-items: start; padding: 22px 24px; border-radius: 12px; border: 1px solid var(--sec-line-2); background: var(--sec-panel); }
.sec-record h3 { margin: 0 0 6px; font-size: 20px; }
.sec-record > div:first-child span { color: var(--sec-dim); font-size: 13px; }
.sec-record code { display: block; padding: 14px 16px; border-radius: 8px; background: #060c0e; border: 1px solid #1d3236; color: #c7f3e6; font-size: 13.5px; line-height: 1.6; overflow-x: auto; white-space: pre; }
.sec-record code i { font-style: normal; color: var(--sec-dim); }
.sec-record p { margin: 10px 0 0; color: var(--sec-muted); font-size: 15px; }
@media (max-width: 760px) { .sec-record { grid-template-columns: 1fr; gap: 12px; } }
.sec-policy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 8px; position: relative; }
.sec-policy > div { padding: 30px 26px 0 0; position: relative; }
.sec-policy > div::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: #1d3236; }
.sec-policy > div::after { content: ""; position: absolute; top: 0; left: 0; height: 6px; width: 0; background: var(--c); transition: width .9s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i) * .45s); }
.sec-policy.is-in > div::after { width: 100%; }
.sec-policy code { color: var(--c); font-size: 15px; }
.sec-policy h3 { margin: 12px 0 8px; font-size: 21px; }
.sec-policy p { margin: 0; color: var(--sec-muted); font-size: 15px; }
@media (max-width: 760px) { .sec-policy { grid-template-columns: 1fr; gap: 26px; } }

/* ------------------------------------------------------------------ form spam: blocked vs delivered */
.sec-inbox { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.sec-inbox > div { border: 1px solid var(--sec-line-2); border-radius: 14px; background: var(--sec-panel); overflow: hidden; }
.sec-inbox h3 { margin: 0; padding: 18px 22px; font-size: 16px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--sec-line); }
.sec-inbox h3 span { color: var(--sec-dim); font-weight: 400; font-size: 14px; }
.sec-inbox ul { list-style: none; margin: 0; padding: 0; }
.sec-inbox li { padding: 16px 22px; border-bottom: 1px solid #1d3034; display: grid; gap: 4px; }
.sec-inbox li:last-child { border-bottom: 0; }
.sec-inbox li b { font-weight: 500; font-size: 15px; }
.sec-inbox li small { color: var(--sec-dim); font-size: 13px; }
.sec-inbox .blocked li b { color: #7f9694; text-decoration: line-through; text-decoration-color: rgba(255, 138, 122, .55); }
.sec-inbox .blocked li small { color: #d99a90; }
.sec-inbox .delivered { border-color: #3f7d6f; }
.sec-inbox .delivered li b { color: var(--sec-text); }
.sec-inbox .delivered li small { color: var(--sec-mint); }
@media (max-width: 760px) { .sec-inbox { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ backups: restore points */
.sec-restore { border: 1px solid var(--sec-line-2); border-radius: 14px; background: var(--sec-panel); padding: 30px 28px 26px; }
.sec-days { display: grid; grid-template-columns: repeat(14, 1fr); gap: 6px; align-items: end; height: 76px; }
.sec-days i { display: block; border-radius: 6px; background: #1f3a3a; height: var(--h); transform: scaleY(0); transform-origin: bottom; transition: transform .5s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i) * 45ms); position: relative; }
.sec-restore.is-in .sec-days i { transform: scaleY(1); }
.sec-days i.pick { background: var(--sec-teal); }
.sec-days i.pre { background: var(--sec-amber); }
.sec-axis { display: grid; grid-template-columns: repeat(14, 1fr); gap: 6px; margin-top: 10px; color: var(--sec-dim); font-size: 11px; text-align: center; }
.sec-restore-key { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--sec-line); color: var(--sec-muted); font-size: 14px; }
.sec-restore-key span { display: inline-flex; align-items: center; gap: 9px; }
.sec-restore-key span::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--k); }
@media (max-width: 560px) { .sec-days { height: 90px; gap: 3px; } .sec-axis { gap: 3px; font-size: 9px; } }

/* ------------------------------------------------------------------ WordPress care: care log */
.sec-split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.sec-split > div:first-child p { color: var(--sec-muted); font-size: 17px; }
@media (max-width: 900px) { .sec-split { grid-template-columns: 1fr; gap: 30px; } }
.sec-log { border-radius: 14px; border: 1px solid var(--sec-line-2); background: #060c0e; overflow: hidden; }
.sec-log-top { display: flex; gap: 7px; align-items: center; padding: 12px 16px; border-bottom: 1px solid #1d3236; color: var(--sec-dim); font-size: 12px; }
.sec-log-top i { width: 10px; height: 10px; border-radius: 50%; background: #2b4444; }
.sec-log-top span { margin-left: 10px; }
.sec-log ol { list-style: none; margin: 0; padding: 18px 20px 22px; font-size: 14px; line-height: 1.5; }
.sec-log li { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; padding: 6px 0; color: #cfe0dd; opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s; transition-delay: calc(var(--i) * 160ms); }
.sec-log.is-in li { opacity: 1; transform: none; }
.sec-log li b { color: var(--sec-mint); font-weight: 600; }
.sec-log li.warn b { color: var(--sec-amber); }
.sec-log li span { color: var(--sec-dim); }

/* reduced motion: show final states, no animation */
@media (prefers-reduced-motion: reduce) {
    .sec-ring .ticks, .sec-stack.wp li em::before { animation: none; }
  .sec-days i { transform: none; transition: none; }
  .sec-log li { opacity: 1; transform: none; transition: none; }
  .sec-policy > div::after { width: 100%; transition: none; }
}
/* if the script never runs, show everything in its finished state */
html:not(.sec-js) .sec-days i { transform: none; }
html:not(.sec-js) .sec-log li { opacity: 1; transform: none; }
html:not(.sec-js) .sec-policy > div::after { width: 100%; }

/* ------------------------------------------------------------------ 2026-11-02 pass 2: layout + mobile fixes */
.sec-surface h2, .sec-head h2, .sec-split h2, .sec-sign h3, .sec-lead h2 { text-wrap: balance; }
.sec-split h2 { margin: 0 0 18px; }
.sec-stack-gone { margin-top: 18px; padding-top: 16px; border-top: 1px dashed #2c5a52; }
.sec-stack-gone p { margin: 0 0 10px; color: var(--sec-dim); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; }
.sec-stack-gone ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sec-stack-gone li { display: flex; justify-content: space-between; color: #7f9694; font-size: 15px; padding: 2px 0; text-decoration: line-through; text-decoration-color: rgba(184, 233, 198, .45); }
.sec-stack-gone li span { text-decoration: none; color: var(--sec-mint); font-size: 12px; letter-spacing: .5px; }
.sec-rail-section { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: start; }
.sec-rail-section .sec-head { grid-template-columns: 1fr; gap: 18px; margin: 0; position: sticky; top: 110px; }
@media (max-width: 900px) { .sec-rail-section { grid-template-columns: 1fr; gap: 32px; } .sec-rail-section .sec-head { position: static; } }
@media (max-width: 700px) {
  .sec-scan thead { display: none; }
  .sec-scan table, .sec-scan tbody, .sec-scan tr, .sec-scan td { display: block; width: auto; }
  .sec-scan tr { padding: 16px; border-bottom: 1px solid #1d3034; }
  .sec-scan td { padding: 0; border: 0; }
  .sec-scan td:nth-child(2) { display: inline-block !important; margin: 10px 14px 0 0; }
  .sec-scan td:nth-child(3) { display: inline-block; margin-top: 10px; }
  .sec-log li { grid-template-columns: 22px 1fr; }
  .sec-log li span { grid-column: 2; font-size: 12px; margin-top: -4px; }
  .sec-ring-legend { grid-template-columns: 1fr 1fr; }
}
.sec-stack .sec-stack-gone li { background: none; border: 0; border-radius: 0; padding: 2px 0; }
/* the site's reset zeroes dialog margins, which pins a modal to the top-left; re-center it */
.sec-dialog[open] { position: fixed; inset: 0; margin: auto; height: fit-content; }