/* The Security & privacy page (the captain's pick, 7 Oct): openai.com/security-and-privacy's structure for Elly, laid out across, so it reads in fewer, wider rows:
   the night hero, the two promises side by side, compliance with its certificates as one row of cards, four steps in a row, three documents in a row,
   and the questions grouped by who asks them, with the ask. Brand Guide colours only; nothing moves */
.sp-hero h1 { font-size: clamp(38px, 4.6vw, 64px); line-height: 1.05; font-weight: 800; color: #fff; }
.sp-hero h1 span, .section-head h2 span { color: var(--magenta); }
.sp-intro { max-width: 720px; margin-top: 18px; font-size: 20px; line-height: 1.5; color: var(--muted-on-dark); }
.tick { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--mint); color: var(--aubergine); }
.tick svg { width: 16px; height: 16px; }
.sp-icon { width: 26px; height: 26px; flex: none; }
.sp-tile { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 22px; background: #fff; color: var(--aubergine); box-shadow: 0 12px 32px rgba(39, 27, 54, .16); }
.sp-tile .sp-icon { width: 34px; height: 34px; }
/* Keeping your data safe: the two promises side by side, each with its soft gradient and one white tile */
.sp-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.sp-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: var(--paper); }
.sp-art { display: grid; place-items: center; height: 168px; }
.sp-art-0 { background: linear-gradient(135deg, var(--blush), rgba(226, 51, 107, .28) 55%, var(--sky)); }
.sp-art-1 { background: linear-gradient(135deg, var(--sky), rgba(38, 84, 124, .30) 55%, var(--mint-soft)); }
.sp-card-body { display: flex; flex-direction: column; flex: 1; padding: 30px 32px 32px; }
.sp-card h3 { font-size: 26px; font-weight: 800; }
.sp-sub { margin-top: 2px; font-size: 15px; font-weight: 700; color: var(--magenta-deep); }
.sp-promise { margin-top: 14px; font-size: 19px; line-height: 1.45; color: var(--ink); }
.sp-ticks { display: grid; gap: 12px; margin: 22px 0 26px; }
.sp-ticks li { display: flex; gap: 12px; align-items: flex-start; font-size: 16.5px; line-height: 1.45; color: var(--ink-soft); }
.sp-ticks .tick { width: 24px; height: 24px; margin-top: 1px; } .sp-ticks .tick svg { width: 14px; height: 14px; }
.sp-more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font-weight: 700; font-size: 16px; color: var(--magenta-deep); text-decoration: none; }
.sp-more .icon { width: 18px; height: 18px; }
.sp-more:hover { text-decoration: underline; }
/* The two card rows wear the promises' calm (the captain, 7 Oct: "that style is more calming"): a white card, a soft pastel band on top, a white tile with a gentle shadow,
   each card its own pair of brand pastels, each row its own twist */
.sp-band { position: relative; }
.sp-band .sp-tile { width: 60px; height: 60px; border-radius: 18px; box-shadow: 0 10px 26px rgba(39, 27, 54, .14); }
.sp-band .sp-tile .sp-icon { width: 27px; height: 27px; }
/* Compliance, on the night: a slim band with the tile resting on its lower edge at the left, and the status as a white pill in the band's corner */
.sp-certs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 8px; }
.sp-cert { position: relative; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--paper); }
.sp-cert .sp-band { height: 84px; }
.sp-cert .sp-tile { position: absolute; left: 22px; bottom: -30px; }
.sp-certs .sp-cert:nth-child(1) .sp-band { background: linear-gradient(120deg, var(--blush), rgba(226, 51, 107, .22) 55%, var(--sky)); }
.sp-certs .sp-cert:nth-child(2) .sp-band { background: linear-gradient(120deg, var(--sky), rgba(38, 84, 124, .24) 55%, var(--mint-soft)); }
.sp-certs .sp-cert:nth-child(3) .sp-band { background: linear-gradient(120deg, var(--mint-soft), rgba(39, 27, 54, .10) 60%, var(--sky)); }
.sp-certs .sp-cert:nth-child(4) .sp-band { background: linear-gradient(120deg, rgba(255, 209, 102, .42), rgba(226, 51, 107, .14) 60%, var(--blush)); }
.sp-cert-k { margin-top: 46px; padding: 0 24px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sp-cert h3 { margin-top: 4px; padding: 0 24px; font-size: 19px; font-weight: 800; color: var(--ink); hyphens: manual; overflow-wrap: break-word; }
.sp-cert > p:not(.sp-cert-k) { margin: 8px 0 26px; padding: 0 24px; font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); }
.sp-state { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 99px; font-size: 13px; font-weight: 700; background: var(--paper); box-shadow: 0 4px 14px rgba(39, 27, 54, .10); }
.sp-state svg { width: 14px; height: 14px; }
.is-ok .sp-state { color: var(--mint-deep); }
.is-req .sp-state { color: var(--blue); }
.is-pending .sp-state { color: var(--muted); background: rgba(255, 255, 255, .78); }
/* Security at every step, on the light: a taller band with the tile in its middle, as the promises have it, the pastels turned the other way */
.sp-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.sp-steps li { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: var(--paper); box-shadow: 0 10px 30px rgba(39, 27, 54, .06); }
.sp-steps .sp-band { display: grid; place-items: center; height: 112px; }
.sp-steps li:nth-child(1) .sp-band { background: linear-gradient(200deg, var(--sky), rgba(38, 84, 124, .22) 55%, var(--mint-soft)); }
.sp-steps li:nth-child(2) .sp-band { background: linear-gradient(200deg, var(--blush), rgba(226, 51, 107, .20) 55%, var(--sky)); }
.sp-steps li:nth-child(3) .sp-band { background: linear-gradient(200deg, var(--mint-soft), rgba(39, 27, 54, .10) 60%, var(--sky)); }
.sp-steps li:nth-child(4) .sp-band { background: linear-gradient(200deg, rgba(255, 209, 102, .42), rgba(226, 51, 107, .14) 60%, var(--blush)); }
.sp-steps h3 { padding: 24px 24px 0; font-size: 19px; font-weight: 800; hyphens: manual; overflow-wrap: break-word; }
.sp-steps p { margin-top: 10px; padding: 0 24px 26px; font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
.sp-steps a { color: var(--magenta-deep); font-weight: 700; }
/* A visitor whose browser still holds the page from before the bands (7 Oct) gets this CSS with icons straight inside the cards: they sit in the card's padding in the ink, never white on white.
   Keep until no cached page can carry that markup any more */
.sp-cert > .sp-icon, .sp-steps li > .sp-icon { margin: 24px 24px 0; color: var(--aubergine); }
.sp-cert > .sp-icon + .sp-cert-k { margin-top: 14px; }
.sp-steps li > .sp-icon + h3 { padding-top: 14px; }
/* The questions, grouped by who asks them, on the night since the documents section left (the captain, 7 Oct): the compliance officer's in the left column, the other three groups stacked in the right,
   so the columns stay even and opening a question never moves the other column; the ask under them, its heading and button */
.ask-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; align-items: start; }
.ask-col { display: grid; gap: 28px; }
.ask-group h3 { margin-bottom: 12px; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--magenta); }
.ask-group .questions { display: grid; gap: 10px; }
.ask-group .questions summary { font-size: 17px; padding: 16px 20px; }
/* On the night the question cards stay white, so their questions keep the ink */
.faq.dark .questions summary { color: var(--ink); }
.ask-group .answer-text { padding: 0 20px 18px; font-size: 16.5px; color: var(--ink-soft); }
/* Checklists inside answers, the IT team's 7 checks and the works council's memo (the captain, 7 Oct): a short document on a soft sheet, each line a tick, a label and its answer */
.ask-group .sp-checklist { gap: 10px; margin: -6px 24px 4px; padding: 16px 18px; background: var(--soft); border: 1px solid var(--line); border-radius: 12px; }
.ask-group .sp-checklist li { font-size: 16px; text-wrap: pretty; }
.sp-checklist strong { color: var(--ink); font-weight: 700; }
.sp-cta { margin-top: 88px; text-align: center; }
.sp-cta h2 { margin-bottom: 28px; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.1; font-weight: 800; }
/* Long one-word headings, as German's Sicherheitsfragebogen and Dutch beveiligingsprobleem, need both card rows two a row below 1180 px */
@media (max-width: 1180px) {
  .sp-certs, .sp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 793px) {
  .sp-two, .sp-certs, .sp-steps, .ask-groups { grid-template-columns: minmax(0, 1fr); }
  .sp-two { gap: 20px; }
  /* On a phone the checklist sheet takes the answer's full width, so its lines keep room for words */
  .ask-group .sp-checklist { margin: -6px 0 4px; padding: 14px; }
  .sp-art { height: 120px; }
  .sp-cert .sp-band { height: 72px; }
  .sp-steps .sp-band { height: 96px; }
  .sp-tile { width: 60px; height: 60px; border-radius: 18px; } .sp-tile .sp-icon { width: 28px; height: 28px; }
  .sp-card-body { padding: 24px 22px 26px; }
  .sp-card h3 { font-size: 23px; }
  .sp-promise { font-size: 17.5px; }
  .sp-intro { font-size: 17.5px; }
  .sp-cta { margin-top: 56px; }
  .sp-cta .button { width: 100%; }
}
/* The captain's spacing rule (7 Oct): from a section's last content to the next section's edge, at least 80 px on desktop and 120 where it fits, 40 to 80 px on phones */
main.page > .block { padding: 120px 0; }
.page-head.sp-hero { padding-bottom: 120px; }
@media (max-width: 793px) {
  main.page > .block { padding: 64px 0; }
  .page-head.sp-hero { padding-bottom: 64px; }
}