/* ==========================================================================
   Security and data (security.html) · page styles on top of tokens.css + site.css
   A reviewer's page: the How we work rail and one 46rem column for sections 01–07,
   then one full-coral room that closes the page: the paperwork (the call to action)
   and the policies under it.
   Numbering: the section numbers live only in "On this page" and the rail (navigation);
   the headings carry no chip. The data lifecycle is the only sequence (tiles on one ink rod).
   Diagrams are inline SVG with real text, drawn 360 units wide so labels stay legible on phones.
   ========================================================================== */

/* ---------- Page head: the vault (security and data protection) stands on the stage floor ---------- */
.sd-scene__obj { position: relative; max-width: 400px; margin-inline: auto; }
.sd-scene__obj::before { /* contact shadow, painted under the object */
  content: ""; position: absolute; left: 16%; right: 14%; bottom: 3%; height: 11%;
  background: radial-gradient(closest-side, rgba(17, 18, 22, .3), rgba(17, 18, 22, 0));
  filter: blur(6px);
}
.sd-scene__obj picture { position: relative; }
.sd-scene__obj img { width: 100%; height: auto; }
@media (max-width: 859px) { .sd-scene__obj { max-width: 260px; } }
/* two long button labels: the second button wraps to its own line, and no label breaks inside its button */
@media (min-width: 860px) and (max-width: 1199px) {
  .sd-head .lr-hero__copy .lr-actions { flex-wrap: wrap; }
  .sd-head .lr-hero__copy .lr-actions .lr-btn { white-space: nowrap; }
}

.sd-lead { max-width: 36em; }
.sd-body .lr-hsec .lr-h2 + .sd-lead { margin-top: -6px; }

/* ---------- Figures: a diagram on its plinth ---------- */
.sd-fig {
  margin: 28px 0 0; padding: clamp(18px, 3.4vw, 36px) clamp(12px, 3vw, 32px);
  border-radius: var(--lr-r-xl); display: grid; place-items: center;
}
.sd-fig--sky { background: linear-gradient(180deg, #F1FBFE 0%, #C9F1FF 100%); }
.sd-fig--peach { background: linear-gradient(180deg, #FFF3EC 0%, #FFDDCD 100%); }
.sd-fig--mint { background: linear-gradient(180deg, #EEFCF6 0%, #CAF4E3 100%); }
.sd-fig__svg { display: block; width: 100%; max-width: 400px; height: auto; }
.sd-svg-mono { font-family: var(--lr-font-mono); font-size: 14px; fill: var(--lr-ink); }
.sd-svg-mono--muted { fill: #4A4D55; }
.sd-svg-label { font-family: var(--lr-font); font-size: 17px; font-weight: 600; fill: var(--lr-ink); }
.sd-svg-label--s { font-size: 15px; }

/* phones: a diagram that repeats its list word for word gives way to the list (its aria-label says so) */
@media (max-width: 599px) { .sd-fig--wide-only { display: none; } }

/* ---------- 01 · Where your data lives (mint room in the column) ---------- */
.sd-where .lr-prose p { color: var(--lr-ink-2); }
.sd-where .lr-h2 { margin-bottom: 18px; }
.sd-where .sd-fig { margin-top: 26px; }
/* phones: the white panel reaches the edges of the mint room, so the diagram keeps its size */
@media (max-width: 599px) {
  .sd-fig { padding-inline: 8px; }
  .sd-where .sd-fig { margin-inline: -16px; border-radius: 20px; }
}

/* ---------- 02 · Personal data ---------- */
.sd-dl { margin-top: 28px; }
.sd-dl dd { color: var(--lr-ink-2); }
.sd-dl .lr-dl__row { border-color: var(--lr-line); }

/* ---------- 03 and 05 · Diagram, then the commitments ---------- */
.sd-split { display: grid; gap: 4px; }
.sd-checks { margin-top: 24px; }
.sd-checks li { color: var(--lr-ink); }

/* ---------- 04 · Outside services: the shared table, cards on phones (.lr-table--cards in site.css) ---------- */
.sd-table-wrap { margin-top: 28px; border-radius: var(--lr-r-l); border: 1px solid var(--lr-line); background: var(--lr-surface); overflow: hidden; }
.sd-table thead th { padding-top: 16px; }
@media (min-width: 600px) { .sd-table tbody th { width: 28%; } }
.sd-table td:last-child { font-family: inherit; font-size: inherit; color: var(--lr-ink-2); white-space: normal; }

/* ---------- 06 · Built into the software: a two-column check list (.lr-checklist in site.css) ---------- */
.sd-note-tight { margin-top: 12px; }
.sd-honest p { align-self: center; }

/* ---------- 07 · What we don't do (peach room in the column) ---------- */
.sd-boundary .lr-h2 { margin-bottom: 12px; }
.sd-nos .lr-risk:last-child { border-bottom: 0; padding-bottom: 0; }
.sd-nos .lr-risk p { color: var(--lr-ink-2); }
.sd-no { background: #FFFFFF; }

/* ---------- 08 · Paperwork: the documents in a sand room as one list, then the coral field that asks ---------- */
.sd-paper { margin-top: var(--lr-section-y); scroll-margin-top: 72px; }

.sd-paper__head { display: grid; gap: 20px; align-items: start; margin-bottom: clamp(24px, 3vw, 40px); }
.sd-paper__head .lr-h2 { max-width: 15em; }
.sd-paper .sd-paper__obj { width: clamp(168px, 20vw, 240px); }
@media (min-width: 600px) { .sd-paper__head { grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; } }
/* from 860 px the sheets stand at the right of the whole room, beside the heading and the six documents,
   so the heading starts at the top of the room and no band under it is left empty */
@media (min-width: 860px) {
  .sd-paper__docs .lr-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(32px, 4.5vw, 72px); align-items: start; }
  .sd-paper__head { display: contents; }
  .sd-paper__head > div:first-child { grid-column: 1; grid-row: 1; margin-bottom: clamp(24px, 3vw, 36px); }
  .sd-paper .sd-paper__obj { grid-column: 2; grid-row: 1 / span 2; }
  .sd-docs { grid-column: 1; grid-row: 2; }
}
@media (max-width: 599px) {
  .sd-paper__head { grid-template-columns: minmax(0, 1fr) 88px; column-gap: 14px; align-items: start; }
  .sd-paper .sd-paper__obj { width: 88px; }
}
/* six documents, two columns on hairlines: title, then what it is */
.sd-docs { display: grid; column-gap: clamp(24px, 4vw, 56px); border-top: 2px solid var(--lr-ink); }
.sd-doc { display: grid; gap: 4px; align-content: start; padding-block: 16px 18px; border-bottom: 1px solid var(--lr-line); }
.sd-doc__title { font-size: 1.1875rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.sd-doc dd { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--lr-ink-2); text-wrap: pretty; }
@media (min-width: 860px) { .sd-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the coral field asks, and only asks: the shared showroom close (site.css .lr-close), the envelope on the coral */
.sd-paper__ask.lr-close { margin-top: 0; }
/* the field's headline in the H2 face, as every closing field has (the SD3-08 sentence, split in two: the
   promise large, the second sentence as the lead) */
.sd-ask__big { font-size: var(--lr-fs-h2); font-weight: 600; font-stretch: 104%; line-height: 1.06; letter-spacing: -.025em; max-width: 15em; text-wrap: balance; color: var(--lr-ink); }
.sd-ask__lead { color: var(--lr-ink); }
.sd-ask__line { max-width: 34em; font-size: 1rem; line-height: 1.5; }
.sd-ask__line a { color: var(--lr-ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; }
@media (max-width: 599px) { .sd-ask .lr-actions .lr-btn { width: 100%; } }

/* ---------- 09 · Policies: one compact row of three links ---------- */
.sd-policies { padding-top: clamp(32px, 4vw, 56px); padding-bottom: 0; scroll-margin-top: 72px; }
.sd-policies__grid { display: grid; gap: 16px; }
.sd-policies__title { font-size: var(--lr-fs-big); font-weight: 600; font-stretch: 103%; line-height: 1.1; letter-spacing: -.02em; }
.sd-pols { display: grid; border-top: 1px solid var(--lr-line); }
.sd-pol { display: grid; gap: 4px; align-content: start; padding-block: 14px; border-bottom: 1px solid var(--lr-line); }
.sd-pol__a { justify-self: start; font-size: 1.0625rem; font-weight: 600; color: var(--lr-ink); text-decoration: underline; text-decoration-color: var(--lr-link-line); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.sd-pol__a:hover { text-decoration-thickness: 3px; }
.sd-pol p { font-size: .9375rem; line-height: 1.5; color: var(--lr-muted); }
@media (min-width: 860px) {
  .sd-policies__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: clamp(24px, 4vw, 56px); align-items: start; }
  .sd-pols { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; border-top: 0; }
  .sd-pol { border-top: 2px solid var(--lr-ink); border-bottom: 0; padding-top: 14px; }
}