/* Technology stories and local-only demos for the MaxGuard homepage. */
.home-edge [hidden] { display: none !important; }
.mg-edge-distinction { padding: 18px 20px; border-left: 3px solid #304cb2; background: #eaf0fe; border-radius: 0 8px 8px 0; }
.mg-edge-distinction strong { display: block; margin-bottom: 5px; color: var(--navy); }
.edge-announcement .container { max-width: 1360px; gap: 10px 16px; }
.mg-motion-toggle { border: 1px solid #42567d; border-radius: 5px; color: #d1def4; background: transparent; padding: 5px 8px; font: 10px var(--font-body); cursor: pointer; }
.mg-motion-toggle:hover { border-color: #8ce9ce; color: #8ce9ce; }
.mg-cursor { display: inline-block; margin-left: 7px; color: #7fe6c6; font-size: .8em; animation: mg-blink 1.2s step-end infinite; animation-play-state: paused; }
body.mg-motion-on .mg-cursor { animation-play-state: running; }
@keyframes mg-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.mg-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 58px; }
.mg-section-copy h2 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -.035em; margin: 16px 0 24px; }
.mg-section-copy p, .mg-visibility__head > p { font-size: 16px; line-height: 1.85; color: var(--text-muted); }
.mg-feature-list { display: grid; gap: 16px; margin: 26px 0; }
.mg-feature-list li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.7; color: var(--navy); }
.mg-feature-list li::before { content: "✓"; position: absolute; left: 0; color: #287964; font-weight: 750; }
.mg-inline-link { display: inline-flex; align-items: center; gap: 10px; color: var(--blue); font-size: 14px; font-weight: 700; text-underline-offset: 4px; }
.mg-inline-link:hover { text-decoration: underline; }
.mg-panel { min-width: 0; overflow: hidden; border: 1px solid #2d4469; border-radius: 14px; color: #d8e5fa; background: #0b1831; box-shadow: 0 20px 55px -28px #15295370; }
.mg-panel__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 17px 22px; border-bottom: 1px solid #2c3d5a; background: #10213e; font: 10px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .025em; }
.mg-demo-label { font-size: 9px; white-space: nowrap; color: #b3c7e6; border: 1px solid #435776; border-radius: 4px; padding: 2px 6px; }
.mg-panel__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 22px; border-top: 1px solid #2c3d5a; color: #a6bbd9; font-size: 10px; line-height: 1.7; }
.mg-text-button { color: #8ae7cd; border: 0; background: transparent; padding: 4px 0; font: 600 11px var(--font-body); cursor: pointer; text-underline-offset: 3px; }
.mg-text-button:hover { text-decoration: underline; }
.mg-text-button:disabled, .mg-motion-toggle:disabled { opacity: .65; cursor: default; }
.mg-mono-label { display: block; color: #9eafcb; font: 10px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; }
.mg-fingerprint__visual { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 10px; padding: 26px 20px 18px; background: radial-gradient(ellipse at 20% 70%, #173c5066, transparent 65%); }
.mg-fingerprint__visual svg { display: block; width: 100%; max-width: 230px; }
.mg-fingerprint__ridges { fill: none; stroke: #68d8c0; stroke-width: 2; stroke-linecap: round; }
.mg-fingerprint__scan { stroke: #b3fff0; stroke-width: 2; opacity: 0; animation: mg-scan 2.6s ease-in-out infinite; animation-play-state: paused; }
.is-running .mg-fingerprint__scan { opacity: .7; animation-play-state: running; }
@keyframes mg-scan { 0%, 100% { transform: translateY(0); opacity: 0; } 20%, 80% { opacity: .75; } 90% { transform: translateY(112px); opacity: 0; } }
.mg-fingerprint__visual code { display: block; color: #f1f6ff; margin: 12px 0 8px; font: 600 clamp(13px, 1.5vw, 19px) ui-monospace, monospace; }
.mg-fingerprint__status { color: #ffb2b5; font-size: 11px; line-height: 1.6; display: block; min-height: 36px; }
.mg-evidence-bars { display: grid; gap: 17px; padding: 10px 24px 24px; }
.mg-evidence-bars > div { display: grid; grid-template-columns: 135px minmax(0, 1fr) 60px; align-items: center; gap: 12px; font-size: 11px; }
.mg-evidence-bars small { font-size: 9px; color: #a2b8d8; text-align: right; }
.mg-evidence-track { height: 5px; background: #243650; border-radius: 6px; overflow: hidden; }
.mg-evidence-track i { display: block; height: 100%; background: linear-gradient(90deg, #4973cf, #7eefd2); transform-origin: left; transition: transform .8s ease; }
.mg-evidence-track--network i { transform: scaleX(.92); }
.mg-evidence-track--transport i { transform: scaleX(.82); }
.mg-evidence-track--continuity i { transform: scaleX(.74); }
.mg-fingerprint[data-phase="0"] .mg-evidence-track i { transform: scaleX(.08); }
.mg-fingerprint[data-phase="1"] .mg-evidence-track i { transform: scaleX(.48); }
.mg-detection-steps { list-style: none; counter-reset: detection; margin: 0; padding: 0 24px 22px; display: grid; gap: 10px; }
.mg-detection-steps li { counter-increment: detection; font-size: 11px; padding: 8px 12px; background: #11223e; border: 1px solid #294363; border-radius: 5px; }
.mg-detection-steps li::before { content: "0" counter(detection); color: #6edbc0; margin-right: 14px; font-family: ui-monospace, monospace; }
.mg-fingerprint[data-phase="0"] .mg-detection-steps li:nth-child(n+2),
.mg-fingerprint[data-phase="1"] .mg-detection-steps li:nth-child(3) { opacity: .45; }
.mg-visibility { background: #f4f7fd; border-block: 1px solid #e1e8f5; }
.mg-visibility__head { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 55px; margin-bottom: 34px; }
.mg-visibility__head h2 { margin-bottom: 0; }
.mg-visibility__head > p { margin: 0; }
.mg-browser-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: stretch; gap: 24px; }
.mg-browser-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 20px 22px 12px; }
.mg-filters { display: flex; gap: 5px; }
.mg-filters button { background: #152943; color: #c2d3ee; border: 1px solid #3c5271; border-radius: 5px; font: 11px var(--font-body); padding: 8px 10px; cursor: pointer; }
.mg-filters button[aria-pressed="true"] { background: #174539; border-color: #72dec1; color: #a2f3df; }
.mg-filters button:hover { border-color: #9aadd1; }
.mg-browser-summary { display: flex; justify-content: space-between; gap: 12px; padding: 10px 22px 16px; font-size: 10px; color: #a8bedc; }
.mg-browser-summary strong { color: #e3edff; font-variant-numeric: tabular-nums; }
.mg-visits { padding-inline: 22px; min-height: 344px; }
.mg-visit { display: grid; grid-template-columns: 60px minmax(0, 1fr) 86px; align-items: start; gap: 12px; width: 100%; min-height: 86px; padding: 17px 0; border: 0; border-top: 1px solid #2b3e5c; background: transparent; color: #e4edfc; font: 12px/1.6 var(--font-body); text-align: left; }
button.mg-visit { cursor: pointer; }
button.mg-visit:hover, .mg-visit[aria-pressed="true"] { background: #142844; }
.mg-visit .edge-status { justify-self: start; margin-top: 2px; }
.mg-visit__meta { display: block; color: #a4bbdb; font-size: 10px; margin-top: 5px; }
.mg-visit > code { display: block; color: #83e2c8; font: 10px/1.6 ui-monospace, monospace; text-align: right; overflow-wrap: anywhere; }
.mg-visit time { display: block; margin-top: 6px; color: #a4bbdb; font-size: 9px; font-variant-numeric: tabular-nums; }
.mg-visit--new { animation: edge-row-in .4s ease-out; }
.mg-visits-empty { color: #b7c8e2; padding: 30px 0; font-size: 13px; }
.mg-session { padding: 28px; border: 1px solid #d4deef; border-radius: 14px; background: #fff; }
.mg-session .mg-mono-label { color: #5c708e; }
.mg-session h3 { font-size: 24px; line-height: 1.2; margin: 15px 0 18px; }
.mg-session__identity { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mg-session__identity code { font: 13px ui-monospace, monospace; color: var(--blue); }
.mg-session dl { margin: 24px 0 18px; }
.mg-session dl > div { padding: 12px 0; border-top: 1px solid #e0e6f0; font-size: 12px; }
.mg-session dt { color: #63728d; font-size: 11px; margin-bottom: 5px; }
.mg-session dd { margin: 0; overflow-wrap: anywhere; color: var(--navy); }
.mg-session > p { font-size: 13px; line-height: 1.8; color: var(--text-muted); }
.mg-rule-intro { margin: 0; padding: 20px 22px; font-size: 12px; line-height: 1.7; color: #b1c3df; }
.mg-rule-fields { border: 0; margin: 0; padding: 0 22px; min-width: 0; }
.mg-rule-row { display: grid; grid-template-columns: 16px 65px 42px minmax(0, 1fr); align-items: center; gap: 10px; padding: 14px 0; border-top: 1px solid #2c3e5b; font: 12px ui-monospace, monospace; }
.mg-rule-row input { width: 15px; height: 15px; margin: 0; accent-color: #6bdabe; }
.mg-rule-row output { color: #a0e6d5; font-size: 11px; line-height: 1.65; overflow-wrap: anywhere; }
.mg-rule-builder select { max-width: 100%; background: #142743; color: #e0ecff; border: 1px solid #42587a; border-radius: 5px; padding: 7px; font: 11px var(--font-body); color-scheme: dark; }
.mg-rule-row.is-unavailable { opacity: .6; }
.mg-rule-actions { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 18px 22px; border-top: 1px solid #2c3e5b; margin-top: 12px; }
.mg-rule-actions label { display: flex; gap: 10px; align-items: center; font: 10px ui-monospace, monospace; }
.mg-rule-code { margin: 0 22px 22px; padding: 18px; background: #071025; border: 1px solid #2b4265; border-radius: 8px; white-space: pre-wrap; overflow-wrap: anywhere; color: #95e9d2; min-height: 124px; font: 12px/1.9 ui-monospace, SFMono-Regular, Consolas, monospace; }
.mg-rule-code code { font: inherit; }
.mg-rule-builder .mg-panel__foot > span { flex: 1; }
.mg-rotation { background: linear-gradient(180deg, #f5f8fd, #eef3fc); }
.mg-ring-map { position: relative; width: 100%; aspect-ratio: 560 / 310; background: radial-gradient(ellipse at center, #20486355, transparent 65%); }
.mg-ring-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mg-ring-links { stroke: #3a587b; stroke-width: 1.5; fill: none; stroke-dasharray: 5 6; }
.mg-ring-orbit { stroke: #5789a5; stroke-width: 1; fill: none; stroke-dasharray: 3 8; transform-origin: 280px 155px; animation: mg-orbit 22s linear infinite; animation-play-state: paused; }
.is-running .mg-ring-orbit { animation-play-state: running; }
@keyframes mg-orbit { to { transform: rotate(360deg); } }
.mg-ring-ip { position: absolute; transform: translate(-50%, -50%); color: #b1c5e1; background: #142743; border: 1px solid #3b5377; border-radius: 5px; padding: 7px 8px; font: 10px ui-monospace, monospace; white-space: nowrap; transition: border-color .4s, color .4s, background .4s; }
.mg-ring-ip--0 { left: 20%; top: 18%; }
.mg-ring-ip--1 { left: 80%; top: 18%; }
.mg-ring-ip--2 { left: 86%; top: 50%; }
.mg-ring-ip--3 { left: 80%; top: 82%; }
.mg-ring-ip--4 { left: 20%; top: 82%; }
.mg-ring-ip--5 { left: 14%; top: 50%; }
.mg-ring-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; gap: 9px; text-align: center; width: 144px; border-radius: 12px; border: 1px solid #6ee4c4; background: #103747; padding: 18px 8px; box-shadow: 0 0 30px #51caaf1c; }
.mg-ring-core > span { color: #a3e9da; font: 8px ui-monospace, monospace; }
.mg-ring-core code { color: #caffef; font: 600 17px ui-monospace, monospace; }
.mg-ring-core small { font-size: 9px; color: #92bdb8; }
.mg-ring[data-active="0"] .mg-ring-ip--0, .mg-ring[data-active="1"] .mg-ring-ip--1,
.mg-ring[data-active="2"] .mg-ring-ip--2, .mg-ring[data-active="3"] .mg-ring-ip--3,
.mg-ring[data-active="4"] .mg-ring-ip--4, .mg-ring[data-active="5"] .mg-ring-ip--5 { color: #b1f7e3; border-color: #71dcbf; background: #144338; }
.mg-ring[data-active="0"] path:nth-child(1), .mg-ring[data-active="1"] path:nth-child(2),
.mg-ring[data-active="2"] path:nth-child(3), .mg-ring[data-active="3"] path:nth-child(4),
.mg-ring[data-active="4"] path:nth-child(5), .mg-ring[data-active="5"] path:nth-child(6) { stroke: #8bebcb; stroke-width: 2.5; }
.mg-ring-event { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0 22px 23px; padding: 12px; border: 1px solid #355375; border-radius: 6px; background: #10243c; font: 11px ui-monospace, monospace; }
.mg-ring-event code { color: #b7eddc; font: inherit; }
.mg-rotation-proof { margin: 25px 0; padding: 20px 24px; border-left: 3px solid #304cb2; background: #e5edfc; border-radius: 0 8px 8px 0; }
.mg-rotation-proof strong, .mg-rotation-proof span { display: block; }
.mg-rotation-proof strong { font-size: 19px; }
.mg-rotation-proof span { font-size: 13px; color: #536886; margin-top: 6px; }
body.mg-motion-paused .mg-live *, body.mg-motion-paused .mg-cursor { animation-play-state: paused !important; transition: none !important; }
body.mg-motion-paused .edge-log__new { animation-play-state: paused !important; }
@media (max-width: 1100px) {
  .mg-split { gap: 32px; }
  .mg-ring-core { width: 126px; padding: 14px 5px; }
  .mg-ring-core code { font-size: 15px; }
  .mg-ring-ip { font-size: 9px; padding: 7px 5px; }
  .mg-evidence-bars > div { grid-template-columns: 125px minmax(0, 1fr) 55px; gap: 8px; }
}
@media (max-width: 960px) {
  .mg-split, .mg-visibility__head, .mg-browser-grid { grid-template-columns: 1fr; gap: 30px; }
  .mg-panel { width: 100%; max-width: 690px; justify-self: center; }
  .mg-fingerprint { order: 2; }
  .mg-ring { order: 2; }
  .mg-session { max-width: 690px; width: 100%; justify-self: center; }
  .mg-visibility__head > p { max-width: 690px; }
  .mg-section-copy { max-width: 690px; }
  .mg-visibility__head h2 { margin-bottom: 0; }
}
@media (max-width: 600px) {
  .mg-panel__bar { padding: 14px 16px; font-size: 9px; gap: 8px; }
  .mg-panel__foot { padding: 14px 16px; }
  .mg-section-copy h2 { font-size: 34px; }
  .mg-fingerprint__visual { padding-inline: 16px; }
  .mg-fingerprint__visual code { font-size: 13px; }
  .mg-mono-label { font-size: 9px; }
  .mg-evidence-bars { padding-inline: 16px; }
  .mg-evidence-bars > div { grid-template-columns: 118px minmax(0, 1fr) 55px; font-size: 10px; }
  .mg-detection-steps { padding-inline: 16px; }
  .mg-browser-toolbar, .mg-browser-summary { padding-inline: 16px; }
  .mg-browser-summary { flex-direction: column; gap: 4px; }
  .mg-visits { padding-inline: 16px; min-height: 432px; }
  .mg-visit { grid-template-columns: 55px minmax(0, 1fr); gap: 8px 12px; min-height: 108px; padding-block: 13px; font-size: 11px; }
  .mg-visit > code { grid-column: 2; text-align: left; display: flex; align-items: center; gap: 14px; }
  .mg-visit time { margin: 0; }
  .mg-session { padding: 24px; }
  .mg-rule-intro, .mg-rule-fields { padding-inline: 16px; }
  .mg-rule-row { grid-template-columns: 16px 60px 40px minmax(0, 1fr); gap: 7px; }
  .mg-rule-row output { font-size: 10px; }
  .mg-rule-actions { padding-inline: 16px; }
  .mg-rule-code { margin-inline: 16px; font-size: 11px; padding: 14px; }
  .mg-ring-map { aspect-ratio: 560 / 380; }
  .mg-ring-map svg { top: 9%; height: 82%; }
  .mg-ring-core { width: 112px; padding: 12px 4px; gap: 7px; }
  .mg-ring-core > span { font-size: 6px; }
  .mg-ring-core code { font-size: 13px; }
  .mg-ring-core small { font-size: 8px; }
  .mg-ring-ip { font-size: 8px; padding-inline: 4px; }
  .mg-ring-ip--2 { left: 87%; }
  .mg-ring-ip--5 { left: 13%; }
  .mg-ring-event { font-size: 10px; margin-inline: 16px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .mg-live *, .mg-cursor { animation: none !important; transition: none !important; }
  .mg-fingerprint__scan { display: none; }
}

/* Navigation and readability pass for the technology stories. */
.mg-explore { background: #fff; border-bottom: 1px solid #dfe7f4; }
.mg-explore__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mg-explore a { display: grid; grid-template-columns: 22px minmax(0, 1fr) 14px; gap: 12px; align-items: center; padding: 23px 16px; border-right: 1px solid #e1e7f1; }
.mg-explore a:first-child { border-left: 1px solid #e1e7f1; }
.mg-explore a:hover { background: #edf3ff; }
.mg-explore__number { color: #697eaa; font: 12px ui-monospace, monospace; }
.mg-explore strong { display: block; color: var(--navy); font-size: 13px; line-height: 1.5; }
.mg-explore small { display: block; color: #677993; font-size: 11px; line-height: 1.6; margin-top: 3px; }
.mg-explore a > span:last-child { color: var(--blue); font-size: 16px; }
.mg-panel :focus-visible, .edge-console :focus-visible { outline: 2px solid #99f2d8; outline-offset: 3px; }
.mg-panel__bar, .edge-console__bar { font-size: 11px; }
.mg-demo-label, .edge-sample-label { font-size: 10px; }
.mg-panel__foot, .edge-console__footer { font-size: 11px; }
.mg-text-button, .edge-feed-heading button { font-size: 12px; }
.mg-panel { box-shadow: 0 24px 55px -30px #172e6870; }
.mg-panel__bar { background: linear-gradient(110deg, #152949, #10213e); }
.mg-visit { font-size: 13px; }
.mg-visit__meta { font-size: 11px; }
.mg-visit > code, .mg-browser-summary { font-size: 11px; }
.mg-rule-row output { font-size: 12px; }
.mg-fingerprint__ridges { filter: drop-shadow(0 0 5px #5bdbbd30); }
.edge-log__layer { font-size: 10px; }
@media (min-width: 768px) {
  .edge-log__reason { font-size: 12px; }
  .edge-evidence dd, .edge-evidence dt { font-size: 13px; }
}
@media (max-width: 960px) {
  .mg-explore__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mg-explore a:nth-child(3) { border-left: 1px solid #e1e7f1; }
  .mg-explore a:nth-child(n+3) { border-top: 1px solid #e1e7f1; }
}
@media (max-width: 600px) {
  .mg-explore a { grid-template-columns: 18px minmax(0, 1fr); gap: 8px; padding: 15px 12px; }
  .mg-explore a > span:last-child { display: none; }
  .mg-explore strong { font-size: 12px; }
  .mg-explore small { font-size: 10px; }
  .mg-panel__bar, .edge-console__bar { font-size: 10px; }
  .mg-demo-label, .edge-sample-label { font-size: 9px; }
  .mg-visit { font-size: 12px; min-height: 120px; }
  .mg-visits { min-height: 480px; }
  .mg-visit__meta { font-size: 10px; }
  .mg-rule-row output { font-size: 11px; }
}