/* StatusGuard extends the shared FraudGuard product-page design. */
.sg-page .hero-grid { grid-template-columns:1.08fr 1fr; gap:64px; padding-block:76px 68px; }
.sg-page .hero h1 { font-size:clamp(43px,4.1vw,58px); }
.sg-keep { white-space:nowrap; }
.sg-page .hero-lede { max-width:490px; }
.sg-page .hero-note { font-size:11px; }
.sg-page .hero-note>span { color:#7999ab; padding-inline:6px; }
.sg-surge { min-width:0; border:1px solid #395568; border-radius:12px; background:#102c40; overflow:hidden; box-shadow:0 30px 80px #03152144; }
.sg-surge figcaption { display:flex; align-items:center; gap:10px; border-bottom:1px solid #395568; padding:18px 22px; color:#c9dbe4; font-size:12px; font-weight:600; }
.sg-surge .example-tag { font-size:9px; }
.sg-scenarios { display:flex; gap:4px; margin:20px 22px 0; padding:4px; border:1px solid #365466; border-radius:6px; background:#0b2436; }
.sg-scenarios button { flex:1; min-height:40px; padding:8px 6px; border:1px solid transparent; border-radius:4px; background:transparent; color:#acc4d1; font-size:11px; font-weight:500; }
.sg-scenarios button:disabled { opacity:1; cursor:default; }
.sg-scenarios button[aria-pressed="true"] { background:#19403f; border-color:#5b9d8040; color:#b5f5d9; }
.sg-scenarios button:not(:disabled):hover { color:#e2fff2; }
.sg-scenarios button:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.sg-chart-panel { margin:25px 24px 0; }
.sg-chart-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:9px; color:#9db9c8; }
.sg-chart-heading>span:first-child { font-size:8px; letter-spacing:1px; }
.sg-traffic-chart { display:block; width:100%; height:auto; margin-top:19px; }
.sg-chart-bars rect { fill:#85c7b2; }
.sg-chart-bars rect:nth-last-child(-n+4) { fill:#e5c096; }
.sg-chart-axis { display:flex; align-items:center; justify-content:space-between; font-size:9px; color:#94afc0; padding-top:3px; }
.sg-signal-detail { padding:0 22px; }
.sg-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:24px 0 19px; padding:17px 0; border-block:1px solid #355365; }
.sg-metrics>div { display:flex; flex-direction:column; gap:7px; border-left:1px solid #355365; padding-left:20px; }
.sg-metrics>div:first-child { border:0; padding-left:0; }
.sg-metrics dt { color:#a6bfcc; font-size:10px; }
.sg-metrics dd { color:#e9f3f5; font-family:var(--heading); font-size:32px; font-weight:600; line-height:1.2; letter-spacing:-1px; margin:0; font-variant-numeric:tabular-nums; }
.sg-outcome { display:flex; align-items:center; gap:13px; border:1px solid #a1836377; border-radius:6px; padding:17px 16px; min-height:91px; background:linear-gradient(110deg,#37342f,#28323a); }
.sg-outcome-icon { display:grid; place-items:center; width:31px; height:31px; flex-shrink:0; border:1px solid #b7956650; border-radius:50%; color:#efd0aa; }
.sg-outcome-icon svg { width:19px; height:19px; }
.sg-outcome h2 { color:#f9e6cd; font-size:15px; line-height:1.45; letter-spacing:-.25px; font-weight:600; }
.sg-outcome p { color:#d4cfc2; font-size:11px; line-height:1.8; margin-top:5px; }
.sg-outcome[data-result="refreshes"] { background:#17333f; border-color:#547e9266; }
.sg-outcome[data-result="refreshes"] .sg-outcome-icon { color:#bad8e5; border-color:#719aaf50; }
.sg-outcome[data-result="refreshes"] h2 { color:#d9e9f1; }
.sg-outcome[data-result="refreshes"] p { color:#b2c9d4; }
.sg-example-rule { font-size:9px; text-align:center; color:#b0c7d3; padding:16px 14px; }
.sg-example-rule>span { color:#7193a5; padding-inline:3px; }
.sg-example-note { font-size:9px; text-align:center; color:#98b3c4; padding:11px 16px; border-top:1px solid #294557; }
.sg-workflow { grid-template-columns:repeat(3,minmax(0,1fr)); }
.sg-workflow li { display:flex; flex-direction:column; padding-right:42px; }
.sg-workflow p { max-width:310px; }
.sg-workflow .step-detail { margin-top:auto; padding-top:22px; }
.sg-link-path { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:43px; padding:23px 29px; border:1px solid #ccded8; border-radius:6px; background:#f2f7f5; }
.sg-link-path>div { display:flex; align-items:center; gap:13px; }
.sg-link-path svg { width:28px; height:28px; color:#498176; flex-shrink:0; }
.sg-link-path div>span { color:#557078; font-size:11px; line-height:1.7; }
.sg-link-path strong { display:block; color:#234c4c; font-size:13px; font-weight:600; }
.sg-path-arrow { color:#7ba293; font-size:24px; }
.sg-provider-row { display:flex; align-items:center; justify-content:space-between; gap:28px; padding-top:23px; }
.sg-provider-row p { color:var(--muted); font-size:11px; line-height:1.9; max-width:650px; }
.sg-provider-row strong { color:#425f6d; font-weight:500; }
.sg-provider-row .inline-link { flex-shrink:0; font-size:11px; }
.sg-tuning-section { background:#eef4f4; }
.sg-tuning-grid { display:grid; grid-template-columns:1.08fr 1fr; gap:90px; align-items:center; }
.sg-tuning-copy>p:not(.eyebrow) { color:var(--muted); font-size:16px; line-height:1.85; max-width:470px; margin-top:23px; }
.sg-tuning-copy>p.sg-tuning-note { font-size:13px; margin-top:16px; }
.sg-tuning-copy>.inline-link { margin-top:25px; }
.sg-rules { min-width:0; border:1px solid #c6d9d5; border-radius:8px; background:#fbfdfc; padding:24px 26px 0; }
.sg-rules-heading { color:#52767b; font-size:10px; letter-spacing:1px; font-weight:600; }
.sg-rule { display:flex; align-items:flex-start; gap:17px; padding:23px 0; border-bottom:1px solid #dce6e4; }
.sg-rule-number { color:#5b847f; font:11px ui-monospace,monospace; line-height:25px; }
.sg-rule h3 { font-size:17px; line-height:1.5; font-weight:600; }
.sg-rule p { color:#576f7e; font-size:12px; line-height:1.8; margin-top:7px; }
.sg-rules-foot { color:#52767b; font-size:10px; line-height:1.8; padding:18px 0; }
.sg-faq-section { background:#fff; }
.sg-page .faq-list p a { color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.sg-page .closing-grid { grid-template-columns:1.4fr 1fr; gap:95px; }
.sg-plan { border-left:1px solid #39576b; padding:10px 0 10px 42px; }
.sg-plan h3 { font-size:24px; font-weight:600; line-height:1.4; margin-top:9px; }
.sg-plan p { font-size:13px; color:#b7cddc; line-height:1.9; margin-top:17px; }
.sg-plan>a { display:inline-flex; gap:16px; color:var(--accent); font-size:13px; font-weight:500; padding:8px 0; margin-top:18px; }
.sg-plan>a:hover { text-decoration:underline; text-underline-offset:4px; }
@media(min-width:1440px) {
    .sg-page .hero-grid { padding-block:85px 76px; }
}
@media(max-width:1100px) {
    .sg-page .hero-grid { gap:40px; }
    .sg-page .hero-actions { gap:22px; }
    .sg-tuning-grid { gap:55px; }
    .sg-link-path { padding-inline:24px; gap:15px; }
    .sg-page .closing-grid { gap:60px; }
}
@media(max-width:900px) {
    .sg-page .hero-grid { grid-template-columns:1fr 1fr; gap:28px; padding-block:54px 46px; }
    .sg-page .hero h1 { font-size:40px; letter-spacing:-1.9px; }
    .sg-page .hero-lede { font-size:15px; }
    .sg-page .hero-note { font-size:10px; }
    .sg-surge figcaption { font-size:10px; padding:16px; gap:8px; }
    .sg-surge .example-tag { font-size:8px; letter-spacing:.5px; }
    .sg-scenarios { margin:17px 16px 0; }
    .sg-scenarios button { font-size:10px; }
    .sg-chart-panel { margin:23px 18px 0; }
    .sg-chart-heading { font-size:8px; }
    .sg-chart-heading>span:first-child { font-size:7px; letter-spacing:.7px; }
    .sg-chart-axis { font-size:8px; }
    .sg-signal-detail { padding-inline:16px; }
    .sg-metrics { margin-top:21px; }
    .sg-metrics>div { padding-left:13px; }
    .sg-metrics dt { font-size:8px; }
    .sg-metrics dd { font-size:28px; }
    .sg-outcome { padding:14px 12px; gap:10px; min-height:114px; }
    .sg-outcome-icon { width:27px; height:27px; }
    .sg-outcome h2 { font-size:13px; }
    .sg-outcome p { font-size:10px; }
    .sg-example-rule { font-size:8px; padding-inline:10px; }
    .sg-example-rule>span { padding-inline:2px; }
    .sg-example-note { font-size:8px; }
    .sg-workflow { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .sg-workflow li { padding-right:24px; }
    .sg-workflow p { max-width:100%; }
    .sg-workflow .step-detail { font-size:9px; }
    .sg-link-path { padding:20px; gap:12px; }
    .sg-link-path>div { gap:9px; }
    .sg-link-path svg { width:24px; height:24px; }
    .sg-link-path div>span { font-size:9px; }
    .sg-link-path strong { font-size:11px; }
    .sg-path-arrow { font-size:20px; }
    .sg-provider-row { align-items:flex-start; gap:25px; }
    .sg-provider-row p,.sg-provider-row .inline-link { font-size:10px; }
    .sg-provider-row .inline-link { max-width:185px; }
    .sg-tuning-grid { gap:35px; }
    .sg-tuning-copy>p:not(.eyebrow) { font-size:14px; }
    .sg-tuning-copy>p.sg-tuning-note { font-size:12px; }
    .sg-rules { padding:22px 20px 0; }
    .sg-rule { gap:12px; padding-block:21px; }
    .sg-rule h3 { font-size:16px; }
    .sg-rule p { font-size:11px; }
    .sg-rules-foot { font-size:9px; }
    .sg-page .closing-grid { gap:40px; }
    .sg-plan { padding-left:30px; }
    .sg-plan h3 { font-size:22px; }
}
@media(max-width:700px) {
    .sg-page .hero-grid { grid-template-columns:1fr; gap:35px; padding-block:44px 35px; }
    .sg-page .hero h1 { font-size:clamp(36px,8.8vw,57px); letter-spacing:-1.9px; }
    .sg-page .hero-lede { max-width:510px; }
    .sg-page .hero-note { margin-top:15px; }
    .sg-page .hero-actions { gap:16px 22px; }
    .sg-surge { width:100%; max-width:500px; margin:auto; }
    .sg-surge figcaption { padding:17px 18px; font-size:11px; }
    .sg-scenarios { margin:18px 18px 0; }
    .sg-scenarios button { font-size:11px; min-height:42px; }
    .sg-chart-panel { margin:25px 20px 0; }
    .sg-chart-heading { font-size:9px; }
    .sg-chart-heading>span:first-child { font-size:8px; }
    .sg-chart-axis { font-size:9px; }
    .sg-signal-detail { padding-inline:18px; }
    .sg-metrics { margin-top:22px; }
    .sg-metrics>div { padding-left:16px; }
    .sg-metrics dt { font-size:9px; }
    .sg-metrics dd { font-size:30px; }
    .sg-outcome { gap:11px; padding:15px 13px; min-height:104px; }
    .sg-outcome h2 { font-size:14px; }
    .sg-outcome p { font-size:11px; }
    .sg-example-rule { font-size:8px; }
    .sg-example-note { font-size:8px; }
    .sg-workflow { grid-template-columns:1fr; }
    .sg-workflow li,.sg-workflow li:last-child { padding:0 0 30px 30px; }
    .sg-workflow li:last-child { padding-bottom:0; }
    .sg-workflow .step-detail { font-size:10px; padding-top:0; margin-top:16px; }
    .sg-link-path { flex-direction:column; align-items:flex-start; padding:23px; margin-top:32px; gap:11px; }
    .sg-link-path>div { gap:15px; }
    .sg-link-path svg { width:27px; height:27px; }
    .sg-link-path div>span { font-size:11px; }
    .sg-link-path strong { font-size:13px; }
    .sg-path-arrow { transform:rotate(90deg); line-height:1; margin-left:6px; }
    .sg-provider-row { flex-direction:column; gap:14px; padding-top:19px; }
    .sg-provider-row p { font-size:11px; }
    .sg-provider-row .inline-link { max-width:none; font-size:12px; }
    .sg-tuning-grid { grid-template-columns:1fr; gap:32px; }
    .sg-tuning-copy>p:not(.eyebrow) { font-size:15px; }
    .sg-tuning-copy>p.sg-tuning-note { font-size:13px; }
    .sg-rules { padding:23px 23px 0; }
    .sg-rule { gap:14px; padding-block:23px; }
    .sg-rule h3 { font-size:17px; }
    .sg-rule p { font-size:12px; }
    .sg-rules-foot { font-size:10px; }
    .sg-page .closing-grid { grid-template-columns:1fr; gap:35px; }
    .sg-plan { border-left:0; border-top:1px solid #39576b; padding:28px 0 0; }
    .sg-plan h3 { font-size:23px; }
}
@media(max-width:375px) {
    .sg-page .hero h1 { font-size:34px; }
    .sg-surge figcaption { padding-inline:14px; font-size:10px; gap:7px; }
    .sg-surge .example-tag { font-size:7px; }
    .sg-scenarios { margin-inline:12px; gap:3px; }
    .sg-scenarios button { font-size:10px; }
    .sg-chart-panel { margin-inline:15px; }
    .sg-signal-detail { padding-inline:12px; }
    .sg-metrics>div { padding-left:10px; }
    .sg-metrics dt { font-size:8px; }
    .sg-metrics dd { font-size:27px; }
    .sg-outcome { padding-inline:11px; gap:9px; min-height:113px; }
    .sg-outcome h2 { font-size:13px; }
    .sg-outcome p { font-size:10px; }
    .sg-example-rule { padding-inline:8px; font-size:7px; }
    .sg-example-note { padding-inline:10px; }
    .sg-rules { padding-inline:19px; }
}