/* Custodian, new site (preview): the security page (security.html). Loaded
   after next.css and pages.css, on this page only.
   The one page in black, with white words: it is the page that a customer,
   an HR team or a data protection officer reads before anything else. The
   colours of the site stay as accents, a little lighter so that they read on
   black. Lines are real borders of --rule-w, as everywhere. Nothing moves for
   long: the two examples (the path of a message, a person who joins a team)
   play while they are on screen and stop with their pause buttons
   (security.js). */

:root {
  --s-bg: #000;
  --s-ink: #fff;
  --s-ink-2: rgba(255, 255, 255, 0.7);
  --s-ink-3: rgba(255, 255, 255, 0.5);
  --s-rule: rgba(255, 255, 255, 0.14);
  --s-card: rgba(255, 255, 255, 0.045);
  --s-teal: #7cc8d6;
  --s-sage: #8fd0a9;
  --s-amber: #ecb867;
  --s-coral: #f2917c;
  --s-lavender: #b0acec;
}

html, body { background: var(--s-bg); }
body { color: var(--s-ink); }
.sec-head, .sheet, .footer, .footer__sheet { background: var(--s-bg); }

/* Words on black */
.sec-head h1, .sheet h2, .sheet h3, .sheet h4 { color: var(--s-ink); }
.sec-head .page-head__lead, .sheet .lead, .sheet p, .sheet li { color: var(--s-ink-2); }
.sheet a:not(.btn), .section a:not(.btn) { color: var(--s-ink); text-decoration-color: rgba(255, 255, 255, 0.4); }
.section a:not(.btn):hover { color: var(--s-teal); }
.sheet .two-tone .accent { color: var(--s-ink-3); }
.sheet .fn-ref a { color: var(--s-teal); }
.sheet code { background: rgba(255, 255, 255, 0.1); color: var(--s-ink); }

/* ---------- the head and the path of one message ---------- */

.sec-head { padding-bottom: 8px; }
.sec-path { --gap: 16px; --rise: 30px; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); max-width: 1080px; margin: clamp(44px, 5vw, 72px) auto 0; padding-top: var(--rise); text-align: left; }
/* The line that the message follows joins the middles of the three cards:
   security.js measures them (--t-start, --t-end, --p1 to --p3, in px); the
   values below are the same sums for this grid, used until it has. */
.sec-path__track { position: absolute; top: 0; left: var(--t-start, calc((100% - 2 * var(--gap)) / 6)); right: calc(var(--t-end, calc((100% - 2 * var(--gap)) / 6)) - var(--rule-w)); height: var(--rule-w); background: var(--s-rule); }
.sec-path__track i { position: absolute; top: calc(var(--rule-w) / 2 - 4px); left: 0; width: 8px; height: 8px; margin-left: -3.5px; border-radius: 50%; background: var(--s-teal); opacity: 0; transition: left 0.9s var(--ease), top 0.9s var(--ease), opacity 0.3s; }
.sec-path[data-at="1"] .sec-path__track i { left: var(--p1, 0%); opacity: 1; }
.sec-path[data-at="2"] .sec-path__track i { left: var(--p2, 50%); opacity: 1; }
.sec-path[data-at="3"] .sec-path__track i, .sec-path[data-at="4"] .sec-path__track i { left: var(--p3, 100%); opacity: 1; }
.sec-path__stage { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; border: var(--rule-w) solid var(--s-rule); border-radius: 20px; background: var(--s-card); transition: background-color 0.5s, border-color 0.5s; }
/* A tick from the line down to the middle of each card: it starts on the
   line and ends on the edge of the card, so the corners close. */
.sec-path__stage::before { content: ""; position: absolute; top: calc(-1 * var(--rise) - var(--rule-w)); left: calc(50% - var(--rule-w) / 2); width: var(--rule-w); height: calc(var(--rise) + var(--rule-w)); background: var(--s-rule); }
/* The card where the message is now: a lighter edge and surface; the other
   cards stay fully readable. */
.sec-path[data-at="1"] [data-stage="1"], .sec-path[data-at="2"] [data-stage="2"], .sec-path[data-at="3"] [data-stage="3"] { border-color: rgba(255, 255, 255, 0.42); background: rgba(255, 255, 255, 0.09); }
.sec-path__where { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--s-ink); }
.sec-path__where span { display: grid; place-items: center; width: 22px; height: 22px; border: var(--rule-w) solid var(--s-rule); border-radius: 50%; font-size: 12px; font-variant-numeric: tabular-nums; }
.sec-path__msg { font-size: 15px; line-height: 1.55; color: var(--s-ink); }
.sec-path mark { padding: 0 3px; border-radius: 4px; background: rgba(242, 145, 124, 0.2); color: var(--s-ink); white-space: nowrap; }
/* The message as sent and as stored share one cell: the first fades out and
   the second comes in, so the card keeps its height. */
.sec-path__swap { display: grid; }
.sec-path__swap > p { grid-area: 1 / 1; transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
.sec-path__msg--after { opacity: 0; transform: translateY(6px); transition-delay: 0s; }
.sec-path.is-swapped .sec-path__msg--after { transition: opacity 0.45s var(--ease) 0.4s, transform 0.45s var(--ease) 0.4s; }
.sec-path__msg b { padding: 0 6px; border-radius: 4px; background: rgba(124, 200, 214, 0.18); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--s-teal); }
.sec-path.is-swapped .sec-path__msg--before, .sec-path:not([data-at]) .sec-path__msg--before { opacity: 0; transform: translateY(-6px); }
.sec-path.is-swapped .sec-path__msg--after, .sec-path:not([data-at]) .sec-path__msg--after { opacity: 1; transform: none; }
.sec-path__meta { display: flex; align-items: center; gap: 8px; margin-top: auto; font-size: 13px; color: var(--s-ink-3); }
.sec-path__meta code { font-size: 12px; }
.sec-dot { width: 8px; height: 8px; border-radius: 50%; }
.sec-dot--on { background: var(--s-sage); }
.sec-path__out { display: grid; gap: 8px; margin: auto 0 0; padding: 0; list-style: none; }
.sec-path__out li { display: flex; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: var(--rule-w) solid var(--s-rule); font-size: 13px; color: var(--s-ink-2); }
.sec-path__out b { flex: none; font-weight: 500; white-space: nowrap; color: var(--s-ink); }
.sec-path__out span { text-align: right; }

/* The pause button of an example. */
.sec-pause { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: var(--s-ink); transition: background-color 0.2s; }
.sec-pause:hover { background: rgba(255, 255, 255, 0.18); }
.sec-pause svg { width: 12px; height: 12px; }
.sec-pause .i-play, .sec-pause[aria-pressed="true"] .i-pause { display: none; }
.sec-pause[aria-pressed="true"] .i-play { display: block; }
.sec-path > .sec-pause { position: absolute; top: -16px; right: 0; }
.reduce .sec-pause { display: none; }

/* ---------- three steps ---------- */

.sec-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); margin: 0; padding: 0; list-style: none; }
.sec-step { padding-top: 22px; border-top: var(--rule-w) solid var(--s-rule); }
.sec-step__n { display: block; margin-bottom: 18px; font-family: var(--font-title); font-size: clamp(44px, 4.4vw, 68px); font-weight: 400; line-height: 1; letter-spacing: -0.03em; color: var(--s-ink-3); font-variant-numeric: tabular-nums; }
.sec-step h3 { font-size: 21px; }
.sec-step h3 + p { margin-top: 10px; }
.sec-step__proof { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 14px; font-weight: 500; color: var(--s-ink) !important; }
.sec-step__proof svg { flex: none; width: 16px; height: 16px; color: var(--s-teal); }

/* ---------- who sees what ---------- */

.sec-matrix table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sec-matrix th, .sec-matrix td { padding: 18px 16px 18px 0; border-bottom: var(--rule-w) solid var(--s-rule); text-align: left; vertical-align: middle; }
.sec-matrix thead th { padding-top: 0; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: var(--s-ink-3); }
.sec-matrix thead th:first-child { width: 28%; }
.sec-matrix tbody th { font-size: 18px; font-weight: 500; color: var(--s-ink); }
.sec-matrix td { font-size: 15px; color: var(--s-ink-2); }
/* Each answer has its mark before it: yes, no, or a part. */
.sec-matrix td > span { display: inline-block; padding-left: 30px; background-position: 0 50%; background-size: 20px 20px; background-repeat: no-repeat; line-height: 20px; }
.sec-yes { color: var(--s-ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%238fd0a9' fill-opacity='.16'/%3E%3Cpath d='M6 10.4l2.7 2.7L14 7.6' fill='none' stroke='%238fd0a9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.sec-no { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23fff' fill-opacity='.07'/%3E%3Cpath d='M7 7l6 6M13 7l-6 6' fill='none' stroke='%23fff' stroke-opacity='.5' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.sec-part { color: var(--s-ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23ecb867' fill-opacity='.16'/%3E%3Ccircle cx='10' cy='10' r='3' fill='%23ecb867'/%3E%3C/svg%3E"); }
/* The rows come in one after the other. */
.reveal .sec-matrix tbody tr, .sec-matrix.reveal tbody tr { opacity: 0; transform: translateY(8px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: calc(0.15s + var(--k, 0) * 0.12s); }
.sec-matrix.reveal.visible tbody tr { opacity: 1; transform: none; }
.sec-note { margin-top: 16px; font-size: 14px; color: var(--s-ink-3) !important; }

/* ---------- one person joins a team ---------- */

.sec-join { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.sec-join__panel { display: flex; flex-direction: column; gap: 16px; padding: 24px; border: var(--rule-w) solid var(--s-rule); border-radius: 20px; background: var(--s-card); }
.sec-join__title { font-size: 15px; font-weight: 500; color: var(--s-ink) !important; }
.sec-join__team { display: flex; gap: 10px; }
.sec-join__team i { width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); transition: background-color 0.5s, transform 0.6s var(--ease), opacity 0.6s; }
.sec-join__new { opacity: 0; transform: translateX(16px) scale(0.8); }
.sec-join.is-joined .sec-join__new { opacity: 1; transform: none; }
.sec-join.is-shown .sec-join__panel--bad .sec-join__new { background: var(--s-coral); }
.sec-join__figure { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: var(--rule-w) solid var(--s-rule); font-size: 14px; }
.sec-join__figure b { display: inline-grid; font-family: var(--font-title); font-size: 30px; font-weight: 400; line-height: 1; color: var(--s-ink); font-variant-numeric: tabular-nums; }
.sec-join__figure b > span { grid-area: 1 / 1; justify-self: end; transition: opacity 0.4s var(--ease); }
.sec-join__figure [data-after] { opacity: 0; color: var(--s-coral); }
.sec-join.is-shown [data-before] { opacity: 0; }
.sec-join.is-shown [data-after] { opacity: 1; }
.sec-join__verdict { min-height: 1.5em; font-size: 14px; font-weight: 500; opacity: 0; transform: translateY(6px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.sec-join__panel--bad .sec-join__verdict { color: var(--s-coral) !important; }
.sec-join__panel--good .sec-join__verdict { color: var(--s-sage) !important; }
.sec-join.is-shown .sec-join__verdict { opacity: 1; transform: none; }
.sec-join__foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--s-ink-3) !important; }
/* Without the script, or with less motion: the end of the example. */
.sec-join:not([data-live]) .sec-join__new { opacity: 1; transform: none; }
.sec-join:not([data-live]) .sec-join__panel--bad .sec-join__new { background: var(--s-coral); }
.sec-join:not([data-live]) [data-before] { opacity: 0; }
.sec-join:not([data-live]) [data-after] { opacity: 1; }
.sec-join:not([data-live]) .sec-join__verdict { opacity: 1; transform: none; }

/* ---------- the chart of the four designs, on black ---------- */

.sec-vchart { margin: 0 0 16px; padding: 26px 28px; border: var(--rule-w) solid var(--s-rule); border-radius: 20px; background: var(--s-card); }
.sec-vchart .chart__title { color: var(--s-ink); }
.sec-vchart .chart__sub, .sec-vchart .chart__note, .sec-vchart .vchart__legend, .sec-vchart .vchart__name { color: var(--s-ink-2); }
.sec-vchart .vchart__group--current .vchart__name { color: var(--s-ink); }
.sec-vchart .vchart__group--current .vchart__name .muted { color: var(--s-ink-3); }
.sec-vchart .vchart__bars { border-bottom-color: var(--s-rule); }
.sec-vchart .vchart__limit { border-top-color: rgba(255, 255, 255, 0.45); }
.sec-vchart .vchart__swatch--stress, .sec-vchart .vchart__bar--stress { background: var(--s-coral); }
.sec-vchart .vchart__swatch--states, .sec-vchart .vchart__bar--states { background: var(--s-amber); }
.sec-vchart .vchart__value { background: #0b0b0b; color: var(--s-ink-2); }
.sec-vchart .chart__verdict--fail { background: rgba(242, 145, 124, 0.16); color: var(--s-coral); }
.sec-vchart .chart__verdict--warn { background: rgba(236, 184, 103, 0.16); color: var(--s-amber); }
.sec-vchart .chart__verdict--pass { background: rgba(143, 208, 169, 0.16); color: var(--s-sage); }
/* The bars grow from the floor when the chart comes in. */
.sec-vchart.reveal .vchart__bar { transform: scaleY(0); transform-origin: bottom; transition: transform 1.1s var(--ease); }
.sec-vchart.reveal .vchart__group:nth-child(2) .vchart__bar { transition-delay: 0.1s; }
.sec-vchart.reveal .vchart__group:nth-child(3) .vchart__bar { transition-delay: 0.2s; }
.sec-vchart.reveal .vchart__group:nth-child(4) .vchart__bar { transition-delay: 0.3s; }
.sec-vchart.reveal.visible .vchart__bar { transform: none; }
/* The values come after their bars. */
.sec-vchart.reveal .vchart__value { opacity: 0; transition: opacity 0.4s 0.9s; }
.sec-vchart.reveal.visible .vchart__value { opacity: 1; }

/* ---------- the method, the findings, what HR sees, the limits ---------- */

.sec-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sec-card { padding: 24px; border: var(--rule-w) solid var(--s-rule); border-radius: 20px; background: var(--s-card); }
.sec-card h4 { font-size: 17px; font-weight: 500; }
.sec-card ul { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.sec-card li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.5; }
.sec-card li::before { content: ""; position: absolute; top: 0.62em; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--s-ink-3); }
.sec-card p { margin-top: 12px; font-size: 15px; }
.sec-card h4 + p { margin-top: 8px; }

/* ---------- where your data lives, tested ---------- */

.sec-tiles { display: grid; gap: 16px; }
.sec-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sec-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sec-tile { padding: 24px; border: var(--rule-w) solid var(--s-rule); border-radius: 20px; background: var(--s-card); }
.sec-tile svg { width: 22px; height: 22px; margin-bottom: 18px; color: var(--s-teal); }
.sec-tile h3 { font-size: 19px; }
.sec-tile h3 + p { margin-top: 8px; font-size: 15px; }
.sec-tile a { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 3px; }

/* ---------- controls on every layer ---------- */

/* One panel with round corners, as the cards. The cells draw the lines
   between them: each cell goes one rule past its right and bottom edge, where
   the panel cuts it off, so at each number of columns the outer line is only
   the border of the panel. */
.sec-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: var(--rule-w) solid var(--s-rule); border-radius: 20px; background: var(--s-card); }
.sec-control { margin: 0 calc(-1 * var(--rule-w)) calc(-1 * var(--rule-w)) 0; padding: 28px 26px 30px; border-right: var(--rule-w) solid var(--s-rule); border-bottom: var(--rule-w) solid var(--s-rule); }
.sec-control svg { width: 22px; height: 22px; color: var(--s-teal); }
.sec-control h3 { margin-top: 18px; font-size: 19px; }
.sec-control h3 + p { margin-top: 8px; font-size: 15px; }

/* ---------- the law ---------- */

.sec-laws { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sec-law { padding: 24px; border: var(--rule-w) solid var(--s-rule); border-radius: 20px; background: var(--s-card); }
/* The seals of the home page, on black. The seals name the laws; they do
   not claim a certification. */
.sec-law .seal { display: block; width: 80px; height: 80px; color: var(--s-ink); }
.sec-law .seal__bg { fill: rgba(255, 255, 255, 0.06); }
.sec-law .seal__edge { fill: none; stroke: currentColor; stroke-opacity: 0.22; }
.sec-law .seal__ring { fill: currentColor; transform-origin: 40px 40px; transition: transform 0.9s var(--ease); }
.sec-law .seal__text { fill: currentColor; font-family: var(--font-title); font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; }
:lang(de) .sec-law .seal__text { font-size: 11.5px; letter-spacing: 0; }
.sec-law:hover .seal__ring { transform: rotate(var(--turn)); }
.reduce .sec-law .seal__ring { transition: none; }
.sec-law h3 { margin-top: 20px; font-size: 18px; }
.sec-law h3 + p { margin-top: 8px; font-size: 15px; }
/* The sub-processors: one rounded panel, a line between the rows. */
.sec-vendors { margin-top: 16px; padding: 24px; border: var(--rule-w) solid var(--s-rule); border-radius: 20px; background: var(--s-card); }
.sec-vendors h3 { font-size: 19px; }
.sec-vendors dl { margin: 12px 0 0; }
.sec-vendors dl > div { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); grid-template-areas: "name text" "where text"; align-content: start; column-gap: 24px; padding: 14px 0; border-top: var(--rule-w) solid var(--s-rule); }
.sec-vendors dt { grid-area: name; font-size: 15px; font-weight: 500; color: var(--s-ink); }
.sec-vendors dd { grid-area: text; margin: 0; font-size: 15px; color: var(--s-ink-2); }
.sec-vendors dd.sec-vendors__where { grid-area: where; margin-top: 2px; font-size: 13px; color: var(--s-ink-3); }
.sec-vendors p { padding-top: 14px; border-top: var(--rule-w) solid var(--s-rule); font-size: 15px; color: var(--s-ink-2); }
.sec-vendors a { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 3px; }
@media (max-width: 720px) { .sec-vendors dl > div { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "where" "text"; } .sec-vendors dd { margin-top: 6px; } }
.sec-reviewed { margin-top: 14px; font-size: 13px; color: var(--s-ink-3); }
.sec-docs { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 24px; font-size: 15px; }
.sec-docs a { white-space: nowrap; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 4px; }
.sec-docs a:hover { text-decoration-color: var(--s-ink); }

/* ---------- references ---------- */

.sec-refs__title { font-size: 17px !important; font-weight: 500; letter-spacing: 0; }
.sheet .footnotes { max-width: 760px; color: var(--s-ink-3); }
.sheet .footnotes li { color: var(--s-ink-3); }
.sheet .footnotes a { color: var(--s-ink-2); }

/* ---------- the closing card and the footer, on black ---------- */

.cta__card { border: var(--rule-w) solid var(--s-rule); }
.footer { color: var(--s-ink); }
.footer__sheet::after { border-color: var(--s-rule); }
.footer__about p, .footer__cols a, .footer__legal a, .footer__row { color: var(--s-ink-2); }
.footer__cols a:hover, .footer__legal a:hover { color: var(--s-ink); }
.footer__row { border-top-color: var(--s-rule); }
.footer__status { box-shadow: inset 0 0 0 1px var(--s-rule); color: var(--s-ink); }
.footer__mail { color: var(--s-ink); }
.footer__mail:hover { background: rgba(255, 255, 255, 0.08); }
.footer__word svg { color: var(--s-ink); }

/* ---------- smaller screens ---------- */

@media (max-width: 900px) {
  .sec-path { grid-template-columns: minmax(0, 1fr); padding-top: 0; padding-left: 26px; }
  .sec-path__track { top: var(--t-start, 29px); bottom: calc(var(--t-end, 29px) - var(--rule-w)); left: 6px; right: auto; width: var(--rule-w); height: auto; }
  .sec-path__track i { top: 0; left: calc(var(--rule-w) / 2 - 4px); margin-left: 0; margin-top: -3.5px; }
  .sec-path[data-at="1"] .sec-path__track i { left: calc(var(--rule-w) / 2 - 4px); top: var(--p1, 0%); }
  .sec-path[data-at="2"] .sec-path__track i { left: calc(var(--rule-w) / 2 - 4px); top: var(--p2, 50%); }
  .sec-path[data-at="3"] .sec-path__track i, .sec-path[data-at="4"] .sec-path__track i { left: calc(var(--rule-w) / 2 - 4px); top: var(--p3, 100%); }
  /* The tick goes left from each card to the line, at the height of the
     card's first line. */
  .sec-path__stage::before { top: 28px; left: auto; right: 100%; width: calc(20px + var(--rule-w)); height: var(--rule-w); }
  .sec-path > .sec-pause { top: auto; bottom: -46px; }
  .sec-steps, .sec-laws, .sec-tiles--3 { grid-template-columns: minmax(0, 1fr); }
  .sec-tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec-join, .sec-cards { grid-template-columns: minmax(0, 1fr); }
  /* One law for each row: the seal on the left, as on the home page. */
  .sec-law { display: grid; grid-template-columns: 60px minmax(0, 1fr); align-items: start; column-gap: 18px; }
  .sec-law .seal { grid-row: span 2; width: 60px; height: 60px; }
  .sec-law h3 { margin-top: 0; }
}
@media (max-width: 640px) {
  .sec-controls, .sec-tiles--4 { grid-template-columns: minmax(0, 1fr); }
  .sec-matrix thead { display: none; }
  .sec-matrix table, .sec-matrix tbody, .sec-matrix tr, .sec-matrix th, .sec-matrix td { display: block; width: auto; }
  .sec-matrix tbody tr { padding: 16px 0 10px; border-bottom: var(--rule-w) solid var(--s-rule); }
  .sec-matrix tbody th { padding: 0 0 8px; border: 0; }
  /* On a phone each answer has its column name before it. The answers
     start at the same place in each row, on one line. */
  .sec-matrix td { display: grid; grid-template-columns: minmax(0, 1fr) 44%; align-items: center; column-gap: 12px; padding: 6px 0; border: 0; }
  .sec-matrix td::before { content: attr(data-label); font-size: 13px; color: var(--s-ink-3); }
  .sec-matrix td > span { justify-self: start; white-space: nowrap; }
  .sec-vchart { padding: 20px 16px; }
  .sec-vchart .vchart__group { border-top-color: var(--s-rule); }
  .sec-vchart .vchart__bars { border-left-color: var(--s-rule); }
  .sec-vchart .vchart__limit { border-left-color: rgba(255, 255, 255, 0.45); }
  .sec-vchart.reveal .vchart__bar { transform: scaleX(0); transform-origin: left; }
  .sec-vchart.reveal.visible .vchart__bar { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sec-vchart.reveal .vchart__bar, .sec-matrix.reveal tbody tr { transform: none; opacity: 1; }
  .sec-vchart.reveal .vchart__value { opacity: 1; transition: none; }
}