/* How to secure your website — article and practical guide components */

.security-guide-page { color: var(--text-dark); }
.security-guide-page .section-kicker { color: #126a9c; }
.security-guide-hero { padding-bottom: 104px; }
.security-guide-hero h1 { max-width: 940px; }
.security-guide-hero .hero-lede { max-width: 850px; }
.security-guide-hero .docs-hero-grid { align-items: center; margin-bottom: 68px; }

.security-plan-summary ol { display: grid; gap: 0; margin: 0 0 20px; padding: 0; list-style: none; }
.security-plan-summary li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid rgba(167, 210, 233, 0.11); }
.security-plan-summary li:first-child { padding-top: 3px; }
.security-plan-summary li > span { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid rgba(91, 173, 218, 0.28); border-radius: 10px; color: #63bde7; font-family: ui-monospace, monospace; font-weight: 800; }
.security-plan-summary li strong { display: block; color: #dceaf2; }
.security-plan-summary li p { margin: 2px 0 0; color: #899fac; }

.security-path { display: grid; grid-template-columns: repeat(3, 1fr auto) 1fr; align-items: center; padding: 8px; border: 1px solid rgba(167, 210, 233, 0.18); border-radius: 20px; background: rgba(10, 28, 45, 0.82); box-shadow: 0 35px 90px rgba(0, 0, 0, 0.28); }
.security-path > div { position: relative; min-height: 126px; display: grid; align-content: center; padding: 22px; border-radius: 14px; background: rgba(255, 255, 255, 0.025); }
.security-path > div:last-child { background: rgba(91, 173, 218, 0.09); }
.security-path > div > span { position: absolute; top: 14px; right: 15px; color: #577284; font-family: ui-monospace, monospace; font-weight: 700; }
.security-path .icon { width: 22px; margin-bottom: 15px; color: #5eb9e5; }
.security-path strong,
.security-path small { display: block; }
.security-path strong { color: #e5f1f7; }
.security-path small { margin-top: 3px; color: #738c9c; }
.security-path > i { padding: 0 10px; color: #456276; font-style: normal; }

.security-reality { padding: 112px 0; color: var(--text-dark); background: var(--paper); scroll-margin-top: var(--nav-height); }
.reality-grid { display: grid; grid-template-columns: 1fr 0.8fr; gap: clamp(55px, 8vw, 105px); align-items: center; }
.reality-grid h2 { margin-bottom: 23px; font-weight: 790; letter-spacing: -0.06em; line-height: 0.98; }
.reality-grid > div > p { color: #566e7d; line-height: 1.78; }
.security-quote { margin: 0; padding: 38px; border: 1px solid #173c57; border-radius: 23px; color: #e7f3f9; background: #0a2033; box-shadow: 0 28px 65px rgba(7, 19, 34, 0.13); }
.security-quote span { display: block; margin-bottom: 45px; color: #62bde8; font-weight: 850; letter-spacing: 0.1em; }
.security-quote p { margin: 0; font-weight: 750; letter-spacing: -0.04em; line-height: 1.16; }
.two-job-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 72px; }
.two-job-grid article { position: relative; min-height: 330px; padding: 34px; border: 1px solid #d8e2e8; border-radius: 21px; background: #fff; }
.job-number { position: absolute; top: 27px; right: 28px; color: #778b97; font-family: ui-monospace, monospace; font-weight: 800; letter-spacing: 0.08em; }
.job-icon { width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 68px; border-radius: 15px; color: #176f9f; background: #e4f2f8; }
.job-icon .icon { width: 24px; }
.two-job-grid h3 { max-width: 500px; margin-bottom: 13px; color: #18364a; font-weight: 770; letter-spacing: -0.045em; line-height: 1.08; }
.two-job-grid p { max-width: 560px; margin: 0; color: #5c7280; line-height: 1.7; }
.two-job-grid .job-two { color: #e7f3f9; border-color: #173c57; background: #0a2033; }
.job-two .job-number { color: #63bee9; }
.job-two .job-icon { color: #0a2033; background: #62bde8; }
.two-job-grid .job-two h3 { color: #e7f3f9; }
.two-job-grid .job-two p { color: #91a9b7; }

.security-guide-body { border-top: 1px solid #e0e7ec; }
.security-article .doc-section { padding-bottom: 112px; }
.article-copy { max-width: 790px; color: #586f7e; line-height: 1.82; }
.security-article code { padding: 2px 6px; border-radius: 5px; color: #155f87; background: #e7f2f7; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }

.hardening-grid { display: grid; grid-template-columns: repeat(2, 1fr); overflow: hidden; border: 1px solid #dbe4ea; border-radius: 19px; }
.hardening-grid article { position: relative; min-height: 210px; padding: 27px; border-right: 1px solid #e1e8ed; border-bottom: 1px solid #e1e8ed; }
.hardening-grid article:nth-child(2n) { border-right: 0; }
.hardening-grid article:nth-last-child(-n + 2) { border-bottom: 0; }
.hardening-grid .icon { width: 24px; margin-bottom: 39px; color: #218bc9; }
.hardening-grid span { position: absolute; top: 25px; right: 25px; color: #81919b; font-weight: 850; letter-spacing: 0.08em; }
.hardening-grid h3 { margin-bottom: 7px; color: #203b4e; }
.hardening-grid p { margin: 0; color: #617583; line-height: 1.65; }

.patch-timeline { display: grid; grid-template-columns: repeat(3, 1fr auto) 1fr; align-items: stretch; margin-top: 28px; padding: 8px; border-radius: 18px; color: #dceaf2; background: #0b1f32; }
.patch-timeline > div { min-height: 175px; padding: 22px; border: 1px solid rgba(167, 210, 233, 0.1); border-radius: 12px; background: rgba(255, 255, 255, 0.025); }
.patch-timeline span { display: block; margin-bottom: 44px; color: #5eb9e5; font-family: ui-monospace, monospace; font-weight: 800; }
.patch-timeline strong { display: block; }
.patch-timeline p { margin: 5px 0 0; color: #849baa; }
.patch-timeline > i { align-self: center; padding: 0 7px; color: #547083; font-style: normal; }
.race-callout { display: grid; grid-template-columns: 29px 1fr; gap: 15px; margin-top: 18px; padding: 22px; border: 1px solid #efd4ab; border-radius: 15px; background: #fff9ef; }
.race-callout .icon { width: 23px; color: #c7811e; }
.race-callout strong { color: #604721; }
.race-callout p { margin: 4px 0 0; color: #786547; }

.traffic-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 27px; }
.traffic-grid article { display: grid; grid-template-columns: 52px 1fr; gap: 18px; min-height: 230px; padding: 27px; border: 1px solid #dbe4ea; border-radius: 18px; background: #fbfdff; }
.traffic-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 15px; color: #176f9f; background: #e4f2f8; }
.traffic-icon .icon { width: 24px; }
.traffic-grid small { display: block; margin: 4px 0 7px; color: #218bc9; font-weight: 850; letter-spacing: 0.08em; }
.traffic-grid h3 { margin-bottom: 9px; color: #203b4e; }
.traffic-grid p { margin: 0; color: #607482; line-height: 1.65; }
.impersonation-box { display: grid; grid-template-columns: 29px 1fr; gap: 15px; margin-top: 16px; padding: 22px; border: 1px solid #efd3aa; border-radius: 15px; background: #fff9ef; }
.impersonation-box .icon { width: 23px; color: #c47e1d; }
.impersonation-box strong { color: #624921; }
.impersonation-box p { margin: 4px 0 0; color: #776446; }
.verification-flow { display: grid; grid-template-columns: 1fr auto 1.2fr auto 1fr auto 1fr; gap: 9px; align-items: center; margin: 18px 0 24px; padding: 21px; border: 1px solid #dbe4ea; border-radius: 16px; background: #f7fafc; }
.verification-flow span { min-height: 58px; display: grid; place-items: center; padding: 10px; border: 1px solid #d8e2e8; border-radius: 10px; color: #4f6878; background: #fff; text-align: center; }
.verification-flow b { color: #8ca0ad; }
.verification-flow i { color: #8799a4; font-style: normal; text-align: center; }
.verification-flow .verified { color: #087047; border-color: #bfe2cd; background: #edf9f2; }
.verification-flow .restricted { color: #986014; border-color: #ead4ad; background: #fff8eb; }

.legitimate-abuse { display: grid; grid-template-columns: 0.5fr 1.2fr 0.9fr; gap: 25px; align-items: center; margin-bottom: 18px; padding: 26px; border: 1px solid #dbe4ea; border-radius: 17px; background: #f8fafc; }
.legitimate-abuse > span { color: #218bc9; font-family: ui-monospace, monospace; font-weight: 850; letter-spacing: 0.08em; }
.legitimate-abuse div { padding: 0 25px; border-right: 1px solid #dce4e9; border-left: 1px solid #dce4e9; }
.legitimate-abuse p { margin: 0; color: #5d7280; }
.legitimate-abuse div p + p { margin-top: 10px; }
.legitimate-abuse strong { color: #29475a; }
.defense-layers { display: grid; grid-template-columns: repeat(2, 1fr); overflow: hidden; border: 1px solid #dbe4ea; border-radius: 19px; }
.defense-layers article { position: relative; min-height: 205px; padding: 27px; border-right: 1px solid #e1e8ed; border-bottom: 1px solid #e1e8ed; }
.defense-layers article:nth-child(2n) { border-right: 0; }
.defense-layers article:nth-last-child(-n + 2) { border-bottom: 0; }
.layer-index { position: absolute; top: 24px; right: 25px; color: #91a0a9; font-family: ui-monospace, monospace; font-weight: 800; }
.defense-layers .icon { width: 24px; margin-bottom: 39px; color: #218bc9; }
.defense-layers h3 { margin-bottom: 7px; color: #203b4e; }
.defense-layers p { margin: 0; color: #607482; }
.outcome-panel { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 35px; align-items: center; margin-top: 18px; padding: 31px; border-radius: 18px; color: #e6f2f8; background: #0a2033; }
.outcome-panel span { display: block; margin-bottom: 8px; color: #62bde8; font-weight: 850; letter-spacing: 0.09em; }
.outcome-panel h3 { margin: 0; line-height: 1.25; }
.outcome-panel p { margin: 0; color: #98adba; line-height: 1.7; }

.security-checklist { display: grid; grid-template-columns: repeat(2, 1fr); overflow: hidden; margin: 0; padding: 0; border: 1px solid #dbe4ea; border-radius: 19px; list-style: none; }
.security-checklist li { display: grid; grid-template-columns: 42px 1fr; gap: 16px; padding: 24px; border-right: 1px solid #e1e8ed; border-bottom: 1px solid #e1e8ed; }
.security-checklist li:nth-child(2n) { border-right: 0; }
.security-checklist li:nth-last-child(-n + 2) { border-bottom: 0; }
.security-checklist li > span { width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid #cfe0e9; border-radius: 12px; color: #197bad; background: #f1f8fb; font-family: ui-monospace, monospace; font-weight: 800; }
.security-checklist strong { display: block; margin-bottom: 4px; color: #203b4e; }
.security-checklist p { margin: 0; color: #607482; }

.guide-disclosure { padding: 28px 0; color: #8fa5b3; border-top: 1px solid rgba(167, 210, 233, 0.1); background: #091827; }
.guide-disclosure .container { display: flex; gap: 13px; align-items: flex-start; }
.guide-disclosure .icon { width: 19px; flex: 0 0 auto; color: #5eb9e5; }
.guide-disclosure p { margin: 0; }
.guide-disclosure strong { color: #bfd0da; }
.security-guide-cta { padding-top: 92px; }
.security-guide-cta .section-kicker { color: #5eb9e5; }

@media (max-width: 1050px) {
  .security-path > div { padding: 18px; }
  .reality-grid { grid-template-columns: 1fr; }
  .security-quote { max-width: 720px; }
  .verification-flow { grid-template-columns: 1fr auto 1fr; }
  .verification-flow i { grid-column: 1 / -1; }
  .verification-flow .restricted { grid-column: 2 / 4; }
  .legitimate-abuse { grid-template-columns: 1fr; }
  .legitimate-abuse div { padding: 18px 0; border: 0; border-top: 1px solid #dce4e9; border-bottom: 1px solid #dce4e9; }
}

@media (max-width: 820px) {
  .security-guide-hero { padding-bottom: 82px; }
  .security-guide-hero .docs-hero-grid { margin-bottom: 48px; }
  .security-path { grid-template-columns: 1fr; }
  .security-path > div { min-height: 100px; grid-template-columns: 38px 1fr; align-items: center; column-gap: 12px; }
  .security-path .icon { grid-row: 1 / 3; margin: 0; }
  .security-path > i { padding: 6px 0; text-align: center; transform: rotate(90deg); }
  .security-reality { padding: 88px 0; }
  .two-job-grid { grid-template-columns: 1fr; margin-top: 50px; }
  .two-job-grid article { min-height: 300px; }
  .patch-timeline { grid-template-columns: 1fr; }
  .patch-timeline > div { min-height: 135px; }
  .patch-timeline span { margin-bottom: 24px; }
  .patch-timeline > i { padding: 7px 0; text-align: center; transform: rotate(90deg); }
  .traffic-grid { grid-template-columns: 1fr; }
  .traffic-grid article { min-height: 190px; }
  .outcome-panel { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 560px) {
  .security-guide-hero { padding-bottom: 68px; }
  .security-plan-summary { padding: 22px; }
  .security-path > div { min-height: 88px; }
  .security-reality { padding: 72px 0; }
  .security-quote { padding: 28px 23px; }
  .security-quote span { margin-bottom: 32px; }
  .two-job-grid article { min-height: 0; padding: 27px 22px; }
  .job-icon { margin-bottom: 50px; }
  .hardening-grid,
  .defense-layers,
  .security-checklist { grid-template-columns: 1fr; }
  .hardening-grid article,
  .hardening-grid article:nth-child(2n),
  .hardening-grid article:nth-last-child(-n + 2),
  .defense-layers article,
  .defense-layers article:nth-child(2n),
  .defense-layers article:nth-last-child(-n + 2) { min-height: auto; border-right: 0; border-bottom: 1px solid #e1e8ed; }
  .hardening-grid article:last-child,
  .defense-layers article:last-child { border-bottom: 0; }
  .traffic-grid article { grid-template-columns: 1fr; min-height: 0; padding: 23px; }
  .verification-flow { grid-template-columns: 1fr; }
  .verification-flow b { text-align: center; transform: rotate(90deg); }
  .verification-flow i,
  .verification-flow .restricted { grid-column: auto; }
  .legitimate-abuse { padding: 22px; }
  .outcome-panel { padding: 25px 22px; }
  .security-checklist li,
  .security-checklist li:nth-child(2n),
  .security-checklist li:nth-last-child(-n + 2) { border-right: 0; border-bottom: 1px solid #e1e8ed; }
  .security-checklist li:last-child { border-bottom: 0; }
  .security-guide-cta { padding-top: 68px; }
}