/* SOC 2 practice page. Scope to this file; do not restyle #site-top. */
:root{
  --soc2-navy:#060d18;
  --soc2-navy-2:#122a4d;
  --soc2-gold:#c4a35a;
  --soc2-gold-light:#e0c57a;
  --soc2-surface:#fffffe;
  --soc2-page:#eef3f8;
  --soc2-ink:#15181d;
  --soc2-ink-2:#4b5361;
  --soc2-muted:#4f5a6b;
  --soc2-line:#d9e0ea;
  --soc2-hair:rgba(6,13,24,.09);
  --soc2-ok:#0d7a3f;
  --soc2-bad:#9b1c1c;
  --soc2-unread:#8a6a12;
  --soc2-git:#0f5c3a;
  --soc2-draft:#8a6a12;
  --soc2-none:#5a6573;
}

body{
  margin:0;
  color:var(--soc2-ink);
  background:
    radial-gradient(900px 420px at 8% -12%, #d5e4f6 0%, transparent 55%),
    linear-gradient(180deg,#f7f9fc 0%,var(--soc2-page) 38%);
  min-height:100vh;
}

main.soc2{
  padding:0 0 72px;
}

.soc2 .wrap{
  max-width:980px;
  margin:0 auto;
  padding:28px 20px 0;
}

.soc2 .kicker{
  display:inline-block;
  font-family:"DM Sans",ui-sans-serif,system-ui,sans-serif;
  font-size:12px;
  font-weight:750;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#7a6220;
  background:rgba(196,163,90,.16);
  border:1px solid rgba(196,163,90,.35);
  padding:6px 12px;
  border-radius:999px;
  margin:0 0 16px;
}

.soc2 h1{
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
  font-size:clamp(1.85rem,4vw,2.55rem);
  line-height:1.15;
  letter-spacing:-.025em;
  color:var(--soc2-navy);
  margin:0 0 14px;
  max-width:18ch;
}

.soc2 h2{
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
  font-size:1.28rem;
  letter-spacing:-.015em;
  color:var(--soc2-navy);
  margin:36px 0 10px;
}

.soc2 h3{
  font-family:"DM Sans",ui-sans-serif,system-ui,sans-serif;
  font-size:15.5px;
  font-weight:750;
  color:var(--soc2-navy);
  margin:0;
}

.soc2 p,
.soc2 li{
  font-size:15.5px;
  color:var(--soc2-ink-2);
  line-height:1.6;
}

.soc2 p{
  margin:0 0 14px;
  max-width:66ch;
}

.soc2 a{
  color:#1a3a68;
}

.soc2 .lead{
  font-size:17.5px;
  color:var(--soc2-ink);
  max-width:62ch;
  margin:0;
}

.soc2 .intro{
  background:var(--soc2-surface);
  border:1px solid var(--soc2-hair);
  border-radius:16px;
  padding:26px 28px 24px;
  box-shadow:0 12px 40px rgba(6,13,24,.05);
  margin:0 0 22px;
}

.soc2 .who{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:0 0 8px;
}

.soc2 .who article{
  background:var(--soc2-surface);
  border:1px solid var(--soc2-hair);
  border-radius:14px;
  padding:18px 18px 16px;
}

.soc2 .who h2{
  margin:0 0 8px;
  font-size:1.05rem;
}

.soc2 .who p{
  margin:0;
  font-size:14.5px;
  max-width:none;
}

.soc2 .legend{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  margin:8px 0 16px;
  padding:12px 14px;
  background:rgba(255,255,254,.7);
  border:1px solid var(--soc2-hair);
  border-radius:12px;
}

.soc2 .legend p{
  margin:0;
  font-size:13.5px;
  max-width:none;
  color:var(--soc2-muted);
}

.soc2 .pill{
  display:inline-block;
  font-family:"DM Sans",ui-sans-serif,system-ui,sans-serif;
  font-size:11px;
  font-weight:750;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:4px 8px;
  border-radius:999px;
  white-space:nowrap;
}

.soc2 .pill-git{
  color:var(--soc2-git);
  background:rgba(13,122,63,.12);
}

.soc2 .pill-draft{
  color:var(--soc2-draft);
  background:rgba(201,162,39,.18);
}

.soc2 .pill-none{
  color:var(--soc2-none);
  background:rgba(90,101,115,.12);
}

#soc2-board{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin:0 0 8px;
}

.soc2-group{
  background:var(--soc2-surface);
  border:1px solid var(--soc2-hair);
  border-radius:14px;
  padding:0;
  overflow:hidden;
  min-height:100%;
  box-shadow:0 8px 28px rgba(6,13,24,.04);
}

.soc2-group header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 16px 12px;
  border-bottom:1px solid var(--soc2-line);
  background:linear-gradient(180deg,#fbfcfe 0%,#f4f7fb 100%);
}

.soc2-group.git{border-top:3px solid var(--soc2-ok)}
.soc2-group.draft{border-top:3px solid var(--soc2-gold)}
.soc2-group.none{border-top:3px solid #8a94a3}

.soc2-group ul{
  list-style:none;
  margin:0;
  padding:6px 0 8px;
}

.soc2-group li{
  margin:0;
  padding:10px 16px;
  border-top:1px solid rgba(217,224,234,.65);
  font-size:14.5px;
  color:var(--soc2-ink);
  max-width:none;
}

.soc2-group li:first-child{border-top:0}

.soc2 .live{
  background:var(--soc2-navy);
  color:#d7e0ea;
  border-radius:16px;
  padding:26px 28px 24px;
  margin:8px 0 0;
  box-shadow:0 16px 40px rgba(6,13,24,.18);
}

.soc2 .live h2{
  color:#fff;
  margin:0 0 10px;
}

.soc2 .live p{
  color:#c9d4e2;
  max-width:62ch;
}

.soc2 .live a{
  color:var(--soc2-gold-light);
}

#soc2-probes{margin:16px 0 8px}

.probe{
  display:grid;
  grid-template-columns:1fr auto;
  gap:6px 16px;
  align-items:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  padding:14px 16px;
  margin:0 0 10px;
}

.probe b{
  display:block;
  color:#fff;
  font-size:14.5px;
  font-weight:650;
}

.probe .detail{
  margin:4px 0 0;
  font-size:13px;
  color:#9fb0c4;
}

.probe .state{
  font-weight:750;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.probe.wait .state{color:#9fb0c4}
.probe.ok .state{color:#7dcea0}
.probe.bad .state{color:#f0a8a8}
.probe.unread .state{color:var(--soc2-gold-light)}

#soc2-stamp{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;
  color:#9fb0c4;
  margin:4px 0 12px;
  max-width:none;
}

#soc2-again{
  margin-top:4px;
  background:var(--soc2-gold);
  color:var(--soc2-navy);
  border:0;
  border-radius:8px;
  font-family:"DM Sans",ui-sans-serif,system-ui,sans-serif;
  font-weight:750;
  font-size:14.5px;
  padding:11px 18px;
  cursor:pointer;
}

#soc2-again:hover{background:var(--soc2-gold-light)}
#soc2-again:focus{outline:2px solid var(--soc2-gold-light);outline-offset:2px}

.soc2 .next p{max-width:62ch}

.soc2 .docnav{
  margin-top:28px;
  padding-top:18px;
  border-top:1px solid var(--soc2-line);
  display:flex;
  flex-wrap:wrap;
  gap:10px 12px;
}

.soc2 .docnav a{
  display:inline-block;
  text-decoration:none;
  font-weight:650;
  font-size:14px;
  color:var(--soc2-navy);
  background:var(--soc2-surface);
  border:1px solid var(--soc2-line);
  border-radius:999px;
  padding:8px 14px;
}

.soc2 .docnav a:hover{
  border-color:var(--soc2-gold);
  background:#fffdf6;
}

@media(max-width:760px){
  .soc2 .who,
  #soc2-board{grid-template-columns:1fr}
  .soc2 .intro,
  .soc2 .live{padding:20px 18px}
  .soc2 h1{max-width:none}
}