/* /security · page scoped CSS (prefix pg-security-). Spacing between shared blocks, plus two figure parts this page introduces
   (promote requests): the data map of fig. 01 (.pg-security-map) and the neutral "compared" step of fig. 04 (.pg-security-seal),
   which reuses .cy-recs__row and .cy-rec but has no ember mark, because nobody decides anything in a seal check. */

/* hero (taste-03/07/14, 28 Sep): no comb; the H1 runs across the whole wrap so each of its two lines holds on one line at 1440
   ("What never leaves your Mac." is 1226px at 92px, the default eleven columns are 1215px); the caption is the stacked figcaption
   inside the figure, so the row needs no second track gap under a picture taller than the text */
/* step 6 (29 Sep): the head no longer spans the row; the calm stage hero puts the text beside it (css/components.css 2z) */
@media (min-width:900px){.pg-security-hero .cy-phero__row{row-gap:0}}

/* how it works: the intro head, then the first block on the same ground one title gap below (as /product) */
.pg-security-how{padding-bottom:var(--pg-title-gap)}
.pg-security-how__head{margin-bottom:0}
.pg-security-block--first{padding-top:0}

/* ------------------------------------------------------------------ fig. 01 · where the information goes (hero data map) */
.pg-security-map{display:grid}
.pg-security-map__stop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;row-gap:14px}
.pg-security-map__where{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px}
.pg-security-map__name{font-family:var(--font-display);font-size:26px;font-weight:500;letter-spacing:-.035em;line-height:1.1;color:var(--s-ink)}
.pg-security-map__note{font-family:var(--font-mono);font-size:calc(13px + var(--pg-mock-bump));line-height:1.4;color:var(--s-ink-3)}
.pg-security-map__k{margin-bottom:6px;font-family:var(--font-mono);font-size:calc(13px + var(--pg-mock-bump));line-height:1.4;color:var(--s-ink-3)}
.pg-security-map__k--wide{grid-column:1/-1;margin-bottom:-8px}
.pg-security-map__list{display:grid}
.pg-security-map__list>li{display:grid;grid-template-columns:6px minmax(0,1fr);column-gap:10px;padding:7px 0;border-top:1px solid var(--s-line);
  font-size:calc(15px + var(--pg-mock-bump));line-height:1.4;color:var(--s-ink);text-wrap:pretty}
.pg-security-map__list>li::before{content:"";width:6px;height:6px;margin-top:.5em;background:#2757C9}
.pg-security-map__list--stay>li::before{background:transparent;box-shadow:inset 0 0 0 1px var(--s-ink-3)}
.pg-security-map__foot{grid-column:1/-1;display:flex;align-items:center;gap:10px;font-size:calc(14px + var(--pg-mock-bump));line-height:1.4;color:var(--s-ink-2)}
.pg-security-map__foot .cy-hex{--hex-w:12px}
/* the connector between two stops: a hairline down with a small head, and what travels along it */
.pg-security-map__link{display:flex;align-items:center;gap:14px;padding:10px 0 10px 12px;font-family:var(--font-mono);
  font-size:calc(13px + var(--pg-mock-bump));line-height:1.4;color:var(--s-ink-2)}
.pg-security-map__line{position:relative;flex:none;width:1px;height:30px;background:var(--s-line-2)}
.pg-security-map__line::after{content:"";position:absolute;left:-3px;bottom:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:6px solid var(--s-ink-3)}
/* what you connect: name and what it handles, one ruled row each */
.pg-security-map__svc{grid-column:1/-1;display:grid;margin:0}
.pg-security-map__svc>div{display:grid;grid-template-columns:152px minmax(0,1fr);column-gap:16px;padding:7px 0;border-top:1px solid var(--s-line)}
.pg-security-map__svc dt{font-size:calc(15px + var(--pg-mock-bump));font-weight:500;line-height:1.4;color:var(--s-ink)}
.pg-security-map__svc dd{margin:0;font-size:calc(15px + var(--pg-mock-bump));line-height:1.4;color:var(--s-ink-2);text-wrap:pretty}
@media (max-width:519px){
  .pg-security-map__stop{grid-template-columns:minmax(0,1fr);row-gap:16px}
  .pg-security-map__name{font-size:24px}
  .pg-security-map__svc>div{grid-template-columns:minmax(0,1fr);row-gap:2px}
}

/* ------------------------------------------------------------------ what it sees: text, the four sources, the open items */
.pg-security-data__head{align-items:end;row-gap:28px}
.pg-security-data__title{grid-column:1/span 6}
.pg-security-data__lead{grid-column:8/span 5;margin:0}
@media (max-width:899px){.pg-security-data__title,.pg-security-data__lead{grid-column:1/-1}}
.pg-security-sources{margin-top:var(--pg-title-gap)}
.pg-security-sources__not{display:grid;grid-template-columns:6px minmax(0,1fr);column-gap:12px;align-items:baseline;margin-top:auto;padding-top:24px;
  font-size:16px;line-height:1.5;color:var(--s-ink);max-width:46ch}
.pg-security-sources__not .cy-sq{position:relative;top:-.12em}
.pg-security-data__open{margin-top:32px;max-width:880px}

/* ------------------------------------------------------------------ fig. 04 · the seal check: two records, a neutral step, one answer */
.pg-security-seal__step{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:0 10px;text-align:center}
.pg-security-seal__line{position:relative;display:block;width:100%;height:1px;background:var(--s-line-2)}
.pg-security-seal__line::before,.pg-security-seal__line::after{content:"";position:absolute;top:-3px;border-top:3.5px solid transparent;border-bottom:3.5px solid transparent}
.pg-security-seal__line::before{left:0;border-right:6px solid var(--s-ink-3)}
.pg-security-seal__line::after{right:0;border-left:6px solid var(--s-ink-3)}
.pg-security-seal__say{font-family:var(--font-mono);font-size:calc(13px + var(--pg-mock-bump));line-height:1.4;color:var(--s-ink-2)}
.pg-security-seal__fp{font-family:var(--font-mono);font-size:calc(13px + var(--pg-mock-bump));font-weight:400}
.pg-security-seal__answer{display:flex;align-items:baseline;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid var(--s-line-2);
  font-size:calc(16px + var(--pg-mock-bump));line-height:1.45;color:var(--s-ink)}
.pg-security-seal__answer .cy-hex{--hex-w:14px;position:relative;top:.1em}
.pg-security-seal__answer b{font-weight:500}
@media (max-width:639px){
  .pg-security-seal__step{flex-direction:row;justify-content:flex-start;gap:12px;padding:14px 0 14px 24px}
  .pg-security-seal__line{width:1px;height:28px;flex:none}
  .pg-security-seal__line::before,.pg-security-seal__line::after{left:-3px;right:auto;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:0;border-bottom:0}
  .pg-security-seal__line::before{top:0;border-bottom:6px solid var(--s-ink-3)}
  .pg-security-seal__line::after{top:auto;bottom:0;border-top:6px solid var(--s-ink-3)}
}