/* Hypas Security Centre — article layout
   Upload to: docs/assets/security-centre-article.css */

html{scroll-behavior:smooth}
.articleShell{max-width:var(--max);margin:0 auto;padding:126px 22px 90px}
.articleCrumbs{display:flex;gap:10px;align-items:center;margin-bottom:46px;color:#657985;font-size:9px;letter-spacing:.11em;text-transform:uppercase}
.articleCrumbs a{text-decoration:none;color:#84949e}
.articleCrumbs b{color:#aeb8bf;font-weight:700}

.articleHero{
  position:relative!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  z-index:auto!important;
  width:auto!important;
  max-width:none!important;
  min-height:0!important;
  padding:0 0 72px!important;
  margin:0!important;
  display:grid!important;
  grid-template-columns:1.15fr .85fr;
  gap:72px;
  align-items:end;
  border-bottom:1px solid var(--border);
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
.articleHero h1{max-width:880px;margin:0;font:400 clamp(50px,6vw,82px)/1.02 Georgia,serif;letter-spacing:-.045em}
.articleLead{max-width:820px;margin:28px 0 0;color:#9ca8b0;font-size:17px;line-height:1.75}
.articleMeta{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.articleMeta span{padding:8px 10px;border:1px solid rgba(174,184,191,.14);color:#71838e;font-size:8px;letter-spacing:.11em;text-transform:uppercase}

.articleSummary{padding:28px;border:1px solid var(--border);background:linear-gradient(145deg,rgba(16,27,37,.54),rgba(8,16,24,.28))}
.articleSummary>small{color:#657d8c;font-size:8px;letter-spacing:.16em}
.articleSummary ol{margin:20px 0 0;padding:0;list-style:none;counter-reset:guide}
.articleSummary li{counter-increment:guide;border-bottom:1px solid rgba(174,184,191,.08)}
.articleSummary a{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:12px 0;text-decoration:none;color:#99a5ad;font-size:11px}
.articleSummary a:before{content:counter(guide,decimal-leading-zero);color:#5d7482;font-size:8px;letter-spacing:.08em}
.articleSummary a:hover{color:var(--ivory)}

.articleKey{margin:45px 0 70px;padding:45px 50px;border:1px solid rgba(174,184,191,.26);background:linear-gradient(120deg,rgba(40,76,102,.28),rgba(8,16,24,.26))}
.articleKey>span{color:#6e8796;font-size:8px;letter-spacing:.17em}
.articleKey h2{max-width:990px;margin:18px 0 15px;font:400 clamp(30px,4vw,48px)/1.12 Georgia,serif}
.articleKey p{max-width:900px;color:#96a2aa}

.articleLayout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:72px}
.articleRail{position:relative}
.articleRail nav{position:sticky;top:108px;padding:24px;border-left:1px solid var(--border);display:flex;flex-direction:column}
.articleRail small{margin-bottom:13px;color:#607886;font-size:8px;letter-spacing:.16em}
.articleRail a{padding:9px 0;text-decoration:none;color:#72838d;font-size:10px}
.articleRail a:hover{color:var(--ivory)}

.articleBody{max-width:850px}
.articleBody>section{padding:0 0 75px;margin-bottom:75px;border-bottom:1px solid var(--border);scroll-margin-top:120px}
.articleBody>section:last-child{margin-bottom:0}
.sectionLabel{margin:0 0 20px!important;color:#657f8e!important;font-size:8px!important;letter-spacing:.17em!important;text-transform:uppercase}
.articleBody h2{margin:0 0 25px;font:400 clamp(34px,4.4vw,54px)/1.08 Georgia,serif;letter-spacing:-.025em}
.articleBody h3{margin:34px 0 14px;font:400 25px/1.2 Georgia,serif}
.articleBody p{color:#98a3aa;font-size:15px;line-height:1.8}
.articleBody strong{color:#d2d6d8}
.articleBody a{color:#c2cbd0}

.articleCallout{margin:35px 0 0;padding:27px 30px;border-left:2px solid #6a8494;background:rgba(40,76,102,.15)}
.articleCallout b{font:400 21px Georgia;color:#d5d7d6}
.articleCallout p{margin:13px 0 0;font-size:13px}

.riskGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:38px}
.riskGrid article{min-height:200px;padding:26px;border:1px solid var(--border);background:rgba(8,16,24,.36)}
.riskGrid span{color:#607d8e;font-size:8px;letter-spacing:.16em}
.riskGrid h3{margin:19px 0 11px;font-size:23px}
.riskGrid p{margin:0;font-size:12px;line-height:1.65}

.authorityFlow{margin:40px 0;display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;gap:12px;align-items:center}
.authorityFlow>div{min-height:166px;padding:22px;border:1px solid var(--border);background:linear-gradient(145deg,rgba(16,27,37,.5),rgba(8,16,24,.25))}
.authorityFlow>i{font-style:normal;color:#5f7481}
.authorityFlow small{display:block;color:#5f7989;font-size:8px}
.authorityFlow b{display:block;margin:24px 0 9px;font:400 20px Georgia}
.authorityFlow span{display:block;color:#82909a;font-size:10px;line-height:1.55}

.articleList{margin:22px 0 0;padding:0;list-style:none}
.articleList li{position:relative;padding:12px 0 12px 25px;border-bottom:1px solid rgba(174,184,191,.08);color:#98a4ab;font-size:13px;line-height:1.6}
.articleList li:before{content:"◇";position:absolute;left:0;color:#637d8c}

.layerStack{display:grid;gap:11px;margin-top:40px}
.layerStack>article{display:grid;grid-template-columns:105px 1fr;border:1px solid var(--border);background:linear-gradient(145deg,rgba(16,27,37,.4),rgba(8,16,24,.22))}
.layerStack>article>div{padding:27px 22px;border-right:1px solid var(--border);display:flex;flex-direction:column;justify-content:space-between}
.layerStack>article>div span{font:36px Georgia;color:#627986}
.layerStack>article>div small{color:#5e7582;font-size:7px;letter-spacing:.15em}
.layerStack section{padding:27px 30px}
.layerStack h3{margin:0 0 12px;font-size:25px}
.layerStack p{margin:0;font-size:13px}

.evidenceModel{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:38px 0}
.evidenceModel div{min-height:165px;padding:22px;border:1px solid var(--border);background:rgba(8,16,24,.36)}
.evidenceModel span{color:#5f7b8a;font-size:8px;letter-spacing:.15em}
.evidenceModel b{display:block;margin-top:30px;font:400 18px/1.3 Georgia;color:#c7cccf}

.articleLink{padding:18px 20px;border:1px solid rgba(174,184,191,.12);background:rgba(16,27,37,.3);font-size:12px!important}
.articleLink a{margin-left:7px;font-weight:700}

.practiceGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:35px}
.practiceGrid article{padding:26px;border:1px solid var(--border);background:rgba(8,16,24,.34)}
.practiceGrid b{font:400 21px Georgia;color:#d0d3d4}
.practiceGrid p{margin:12px 0 0;font-size:12px}

.mythList{display:grid;gap:10px;margin-top:35px}
.mythList article{padding:25px 29px;border:1px solid var(--border);background:rgba(8,16,24,.32)}
.mythList h3{margin:0 0 9px;font-size:22px}
.mythList p{margin:0;font-size:12px}

.buyerChecklist{margin-top:34px;border-top:1px solid var(--border);border-left:1px solid var(--border)}
.buyerChecklist label{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:18px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);background:rgba(8,16,24,.3)}
.buyerChecklist input{appearance:none;width:17px;height:17px;margin:2px 0 0;border:1px solid #718792;position:relative}
.buyerChecklist input:checked:after{content:"✓";position:absolute;left:3px;top:-2px;color:#9eafb7;font-size:13px}
.buyerChecklist span{color:#909da5;font-size:12px;line-height:1.6}
.buyerChecklist b{color:#cdd1d3}

.hypasSection{padding:48px!important;border:1px solid rgba(174,184,191,.25)!important;background:linear-gradient(140deg,rgba(40,76,102,.25),rgba(8,16,24,.25));margin-bottom:75px!important}
.hypasCapabilities{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:35px}
.hypasCapabilities article{padding:24px;border:1px solid rgba(174,184,191,.12);background:rgba(8,16,24,.35)}
.hypasCapabilities span{color:#648191;font-size:8px;letter-spacing:.15em}
.hypasCapabilities h3{margin:22px 0 11px;font-size:22px}
.hypasCapabilities p{margin:0;font-size:11px}

.articleActions{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.articleConclusion{border-bottom:0!important;padding-bottom:0!important}
.nextGuide{margin-top:35px;padding:30px;border:1px solid var(--border);background:rgba(16,27,37,.34)}
.nextGuide small{color:#617d8d;font-size:8px;letter-spacing:.15em}
.nextGuide h3{margin:19px 0 10px;font-size:28px}
.nextGuide p{margin:0;font-size:12px}
.nextGuide span{display:inline-block;margin-top:18px;color:#6f818c;font-size:9px;letter-spacing:.08em;text-transform:uppercase}

.relatedGuides{max-width:var(--max);margin:0 auto 110px;padding:0 22px}
.relatedGuides h2{font:400 clamp(37px,5vw,56px)/1.08 Georgia;margin:15px 0 38px}
.relatedGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.relatedGrid a{min-height:170px;padding:27px;display:flex;flex-direction:column;text-decoration:none;border:1px solid var(--border);background:rgba(8,16,24,.34);transition:.22s}
.relatedGrid a:hover{transform:translateY(-3px);border-color:rgba(174,184,191,.35)}
.relatedGrid small{color:#607b8b;font-size:8px;letter-spacing:.15em}
.relatedGrid b{margin:23px 0 12px;font:400 24px Georgia}
.relatedGrid span{margin-top:auto;color:#83929b;font-size:10px}

@media(max-width:1050px){
  .articleHero{grid-template-columns:1fr}
  .articleLayout{grid-template-columns:1fr}
  .articleRail{display:none}
  .articleBody{max-width:none}
  .authorityFlow{grid-template-columns:repeat(2,1fr)}
  .authorityFlow>i{display:none}
  .evidenceModel{grid-template-columns:repeat(2,1fr)}
  .hypasCapabilities{grid-template-columns:1fr}
}

@media(max-width:700px){
  .articleShell{padding:104px 17px 70px}
  .articleHero h1{font-size:46px}
  .articleLead{font-size:15px}
  .articleKey{padding:31px 25px}
  .riskGrid,.practiceGrid,.relatedGrid{grid-template-columns:1fr}
  .layerStack>article{grid-template-columns:1fr}
  .layerStack>article>div{min-height:95px;border-right:0;border-bottom:1px solid var(--border);flex-direction:row;align-items:center}
  .authorityFlow,.evidenceModel{grid-template-columns:1fr}
  .hypasSection{padding:31px 25px!important}
  .relatedGuides{padding:0 17px}
}


/* Security Centre article 002 — realistic security components */
.articleHeroShort h1{max-width:760px}
.answerBanner{margin:45px 0 70px;padding:45px 50px;border:1px solid rgba(174,184,191,.3);background:linear-gradient(120deg,rgba(40,76,102,.3),rgba(8,16,24,.25))}
.answerBanner>span{color:#7290a0;font-size:8px;letter-spacing:.17em}
.answerBanner h2{max-width:1040px;margin:18px 0 15px;font:400 clamp(31px,4.3vw,50px)/1.12 Georgia,serif}
.answerBanner p{max-width:930px;color:#98a4ab;font-size:14px;line-height:1.75}

.bypassMeaningGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:38px}
.bypassMeaningGrid article{min-height:215px;padding:27px;border:1px solid var(--border);background:rgba(8,16,24,.35)}
.bypassMeaningGrid span{color:#607f90;font-size:8px;letter-spacing:.16em}
.bypassMeaningGrid h3{margin:20px 0 11px;font-size:23px}
.bypassMeaningGrid p{margin:0;font-size:12px;line-height:1.65}

.resilienceTable{margin:38px 0;border-top:1px solid var(--border);border-left:1px solid var(--border)}
.resilienceHead,.resilienceTable>div{display:grid;grid-template-columns:.7fr 1.15fr 1.15fr}
.resilienceHead span{padding:13px 18px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);background:rgba(40,76,102,.17);color:#6f8997;font-size:8px;letter-spacing:.14em}
.resilienceTable>div:not(.resilienceHead)>*{margin:0;padding:20px 18px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.resilienceTable b{font:400 19px Georgia;color:#ccd1d3}
.resilienceTable p{font-size:11px;line-height:1.6;background:rgba(8,16,24,.28)}

.authorityComparison{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:38px 0}
.authorityComparison article{padding:29px;border:1px solid var(--border);background:rgba(8,16,24,.34)}
.authorityComparison article:last-child{background:linear-gradient(145deg,rgba(40,76,102,.24),rgba(8,16,24,.32));border-color:rgba(174,184,191,.27)}
.authorityComparison small{color:#607d8d;font-size:8px;letter-spacing:.15em}
.authorityComparison h3{margin:24px 0 12px;font-size:25px}
.authorityComparison p{margin:0;font-size:12px}
.authorityComparison span{display:block;margin-top:22px;padding-top:17px;border-top:1px solid rgba(174,184,191,.1);color:#8798a2;font-size:10px;line-height:1.55}

.articleQuote{margin:32px 0;padding:29px 34px;border-left:2px solid #6e8998;background:rgba(40,76,102,.15);font:400 25px/1.45 Georgia;color:#d0d3d4}

.limitationList{display:grid;gap:10px;margin-top:35px}
.limitationList article{display:grid;grid-template-columns:125px 1fr;border:1px solid var(--border);background:rgba(8,16,24,.32)}
.limitationList>article>span{padding:27px 20px;border-right:1px solid var(--border);color:#617d8d;font-size:8px;letter-spacing:.15em}
.limitationList>article>div{padding:25px 29px}
.limitationList h3{margin:0 0 9px;font-size:22px}
.limitationList p{margin:0;font-size:12px}

.securityCycle{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-top:38px}
.securityCycle article{min-height:265px;padding:23px;border:1px solid var(--border);background:rgba(8,16,24,.33)}
.securityCycle b{font:36px Georgia;color:#5f7886}
.securityCycle span{display:block;margin-top:30px;color:#617f8f;font-size:8px;letter-spacing:.15em}
.securityCycle h3{margin:18px 0 11px;font-size:20px}
.securityCycle p{margin:0;font-size:10px;line-height:1.6}

.hardeningSteps{margin-top:36px;border-top:1px solid var(--border)}
.hardeningSteps article{display:grid;grid-template-columns:78px 1fr;border-left:1px solid var(--border);border-right:1px solid var(--border);border-bottom:1px solid var(--border);background:rgba(8,16,24,.3)}
.hardeningSteps>article>span{padding:27px 22px;border-right:1px solid var(--border);font:29px Georgia;color:#5e7786}
.hardeningSteps>article>div{padding:24px 28px}
.hardeningSteps h3{margin:0 0 9px;font-size:22px}
.hardeningSteps p{margin:0;font-size:12px}

.claimGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:35px}
.claimGrid article{min-height:230px;padding:28px;border:1px solid var(--border);background:rgba(8,16,24,.33)}
.claimGrid article:not(.claimWeak){background:linear-gradient(145deg,rgba(40,76,102,.22),rgba(8,16,24,.3))}
.claimGrid small{color:#628092;font-size:8px;letter-spacing:.15em}
.claimGrid h3{margin:25px 0 12px;font-size:24px}
.claimGrid p{margin:0;font-size:12px}
.claimWeak{border-color:rgba(139,37,43,.35)!important}
.claimWeak small{color:#98666a}

.verdictPanel{margin-top:30px;padding:29px;border:1px solid rgba(174,184,191,.2);background:rgba(8,16,24,.37)}
.verdictPanel small{color:#658394;font-size:8px;letter-spacing:.15em}
.verdictPanel p{margin:17px 0 0;font:400 21px/1.55 Georgia;color:#cbd0d2}

.faqList{margin-top:34px;border-top:1px solid var(--border)}
.faqList details{border-left:1px solid var(--border);border-right:1px solid var(--border);border-bottom:1px solid var(--border);background:rgba(8,16,24,.3)}
.faqList summary{cursor:pointer;padding:21px 25px;font:400 20px Georgia;color:#c9ced0;list-style:none}
.faqList summary::-webkit-details-marker{display:none}
.faqList summary:after{content:"+";float:right;color:#647f8e}
.faqList details[open] summary:after{content:"–"}
.faqList details p{margin:0;padding:0 25px 24px;font-size:12px}

.nextGuide{text-decoration:none;display:block;transition:.22s}
a.nextGuide:hover{transform:translateY(-3px);border-color:rgba(174,184,191,.36)}

@media(max-width:1100px){
  .securityCycle{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
  .answerBanner{padding:31px 25px}
  .bypassMeaningGrid,.authorityComparison,.claimGrid{grid-template-columns:1fr}
  .resilienceHead{display:none}
  .resilienceTable>div:not(.resilienceHead){grid-template-columns:1fr}
  .resilienceTable>div:not(.resilienceHead)>*{border-bottom:1px solid rgba(174,184,191,.08)}
  .limitationList article{grid-template-columns:1fr}
  .limitationList>article>span{border-right:0;border-bottom:1px solid var(--border)}
  .securityCycle{grid-template-columns:1fr}
}