/* Orli v3 site · Safeguarding and Data protection · design pass (3 Nov 2026)
   ---------------------------------------------------------------------------
   safety.html (Safeguarding) and data-protection.html (Data protection),
   after safety/pages.css (which the accessibility statement, privacy and
   cookies pages share and which this file leaves alone). It lifts both
   pages to the home page's felt-and-clay standard:

   - hero: the warm sky behind, a felt picture from the school island sewn
     on (a cream running stitch) with the felt star on its corner: the
     calm corner's tent with Orla peeking up over its edge (Safeguarding),
     the island's office with its laptop (Data protection). Under the lead,
     one quiet line to the other page (.sf-also);
   - Safeguarding: the sessions band on warm; "If a child shares something
     worrying" as the deep felt band, its three steps a sequence on a
     stitched thread; the GOV.UK card with a sage running stitch;
   - "Help" in the check-in we're building: a quiet note, no badges, so
     "we're building" carries it (Ryan's rule: no In development chips);
   - the doodles in round felt badges (felt grain, a stitched ring), in one
     colour per kind of information on the data cards: green stays on your
     device, peach comes to us, lilac is the app;
   - Data protection: a small felt picture (your device, a thread with an
     envelope, the Orli team, under it the website card's own words in
     full), then cards whose every item has a doodle; Orli Schools apart
     from the website, its intro beside its card; your rights.

   Review round 2 (3 Nov) split the old "Safety, safeguarding and data"
   page in two, took out the "Worried about a child?" button, the "On this
   page" row and the "What Orli is not" cards (now one sentence in the
   lead). Every fact and data-verify mark is the old page's. All of the
   art is decoration (aria-hidden). Motion is the home page's: in Full
   motion the cards rise in once as they're reached, the threads draw in,
   the star floats and Orla blinks now and then (safety.js arms it). Under
   Reduced or Still motion, or without script, everything is simply there.
   Print drops the art and keeps every word (pages.css, and the end of this
   file).
   ------------------------------------------------------------------------- */

/* ============================================================ the doodles
   One mask per doodle: the design kit's schools doodles and the new ones
   in safety/doodles/ (drawn to match). Colour comes from currentColor. */
.sf-i {
  display: inline-block; flex: none; width: var(--size, 24px); height: var(--size, 24px);
  background-color: currentColor;
  -webkit-mask: var(--sf-i) center / contain no-repeat; mask: var(--sf-i) center / contain no-repeat;
}
.sf-i--talk     { --sf-i: url(doodles/talk.svg); }
.sf-i--phone    { --sf-i: url(doodles/phone.svg); }
.sf-i--chart    { --sf-i: url(doodles/chart.svg); }
.sf-i--camera   { --sf-i: url(doodles/camera.svg); }
.sf-i--board    { --sf-i: url(doodles/board.svg); }
.sf-i--mail     { --sf-i: url(doodles/mail.svg); }
.sf-i--laptop   { --sf-i: url(doodles/laptop.svg); }
.sf-i--team     { --sf-i: url(doodles/team.svg); }
.sf-i--folder   { --sf-i: url(../../../../design-kit/icons/schools-doodles/resources--doodle-folder.svg); }
.sf-i--smile    { --sf-i: url(../../../../design-kit/icons/schools-doodles/session--doodles--smile.svg); }
.sf-i--lock     { --sf-i: url(../../../../design-kit/icons/schools-doodles/nav--lock-doodle.svg); }
.sf-i--pause    { --sf-i: url(../../../../design-kit/icons/schools-doodles/session--doodles--pause.svg); }
.sf-i--heart    { --sf-i: url(../../../../design-kit/icons/schools-doodles/resources--doodle-heart.svg); }
.sf-i--list     { --sf-i: url(../../../../design-kit/icons/schools-doodles/resources--doodle-list.svg); }
.sf-i--shield   { --sf-i: url(../../../../design-kit/icons/schools-doodles/resources--doodle-shield.svg); }
.sf-i--brush    { --sf-i: url(../../../../design-kit/icons/schools-doodles/nav--paint-brush-doodle.svg); }
.sf-i--play     { --sf-i: url(../../../../design-kit/icons/schools-doodles/resources--doodle-play.svg); }
.sf-i--settings { --sf-i: url(../../../../design-kit/icons/schools-doodles/resources--doodle-settings.svg); }
.sf-i--doc      { --sf-i: url(../../../../design-kit/icons/schools-doodles/resources--doodle-doc-add.svg); }
.sf-i--tick     { --sf-i: url(../../../../design-kit/icons/schools-doodles/teacher-setup--doodle-tick.svg); }
.sf-i--clock    { --sf-i: url(../../../../design-kit/icons/schools-doodles/session--doodles--clock.svg); }
.sf-i--guides   { --sf-i: url(../../../../design-kit/icons/schools-doodles/resources--doodle-guides.svg); }
.sf-i--key      { --sf-i: url(../../../../design-kit/icons/schools-doodles/nav--key-doodle.svg); }

/* ============================================================ felt badges
   A doodle in a round felt patch: the colour, a felt grain, a stitched ring
   just inside the edge and a soft contact shadow (the home page's felt tag). */
.sf-felt {
  --felt: var(--w-orla-soft); --felt-ink: var(--w-orla-deep); --felt-stitch: rgb(25 84 64 / .36);
  position: relative; flex: none; display: inline-grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--felt) url(img/felt-grain-256.webp) 0 0 / 180px 180px; background-blend-mode: soft-light;
  color: var(--felt-ink);
  box-shadow: inset 0 -2px 4px rgb(60 57 50 / .07), 0 1px 1px rgb(60 57 50 / .1), 0 5px 12px -6px rgb(60 57 50 / .38);
}
.sf-felt::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%; pointer-events: none;
  border: 1.5px dashed var(--felt-stitch);
}
.sf-felt .sf-i { --size: 26px; }
.sf-felt--sm { width: 36px; height: 36px; }
.sf-felt--sm::after { inset: 3px; border-width: 1.25px; }
.sf-felt--sm .sf-i { --size: 18px; }
.sf-felt--lg { width: 88px; height: 88px; }
.sf-felt--lg::after { inset: 6px; border-width: 2px; }
.sf-felt--lg .sf-i { --size: 42px; }
.sf-felt--green { --felt: #d3ead6; --felt-ink: var(--w-orla-deep); --felt-stitch: rgb(25 84 64 / .36); }
.sf-felt--peach { --felt: #fbe0c8; --felt-ink: var(--w-nova-deep); --felt-stitch: rgb(124 63 27 / .34); }
.sf-felt--lilac { --felt: #dfe1f8; --felt-ink: var(--w-zeke-deep); --felt-stitch: rgb(52 65 154 / .32); }
.sf-felt--rose  { --felt: #f7dcec; --felt-ink: var(--w-luna-deep); --felt-stitch: rgb(118 48 95 / .32); }
.sf-felt--butter { --felt: #f8ebc6; --felt-ink: #6a4f0e; --felt-stitch: rgb(106 79 14 / .3); }
.sf-felt--cream { --felt: #fff4df; --felt-ink: var(--w-orla-deep); --felt-stitch: rgb(25 84 64 / .34); }

/* ============================================================ felt cards
   .sf-felted: a faint felt grain (the home page's programme card).
   .sf-stitch: and a sage running stitch just inside the edge, kept for the
   one GOV.UK card; the pictures and badges carry the rest of the stitching,
   so the text cards stay quiet. */
.sf-felted { isolation: isolate; }
.sf-felted::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url(img/felt-grain-256.webp) 0 0 / 256px 256px; opacity: .045; mix-blend-mode: multiply;
}
.sf-stitch::after {
  content: ""; position: absolute; inset: 10px; z-index: 0; pointer-events: none;
  border: 2px dashed rgb(50 131 96 / .28); border-radius: calc(var(--o-r-card) - 8px);
}
.sf-felted > .o-card__body { position: relative; z-index: 1; }
/* a word that shouldn't break at its hyphen ("check-in") */
.sf-nowrap { white-space: nowrap; }

/* ================================================================== hero */
.sf-hero { position: relative; isolation: isolate; overflow: clip; }
/* The school island's warm sky (the home hero's), turned so its sun is top
   right, behind the picture; it melts into the page under the words and
   above the contents row. */
.sf-hero__sky {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(../../hero/school/assets/sky-wide-1920.webp) center top / cover no-repeat;
  scale: -1 1;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 88%), linear-gradient(to right, #000 0%, rgb(0 0 0 / .9) 40%, rgb(0 0 0 / .25) 64%, transparent 84%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 88%), linear-gradient(to right, #000 0%, rgb(0 0 0 / .9) 40%, rgb(0 0 0 / .25) 64%, transparent 84%);
          mask-composite: intersect;
}
.sf-hero__grid { align-items: center; }
.sf-hero__art { position: relative; justify-self: start; width: min(100%, 520px); margin-block: var(--o-space-6) var(--o-space-4); }
/* "Last updated" and "Print this page": the row keeps the button's height
   before the script shows it, so nothing under it moves (CLS). */
.sf-hero .sf-meta { min-block-size: 44px; }
@media (max-width: 379.98px) {
  /* too narrow for both on one line: the button goes under the date, its
     words lined up with it, and the row keeps both lines' height */
  .sf-hero .sf-meta { flex-direction: column; align-items: flex-start; row-gap: var(--o-space-1); min-block-size: 68px; }
  .sf-hero .sf-meta > p + .o-btn { margin-inline-start: -16px; }
}
.sf-hero__pic {
  position: relative; aspect-ratio: 1120 / 865; border-radius: var(--o-r-card); overflow: clip;
  background: #ead8bf; box-shadow: var(--o-shadow-raised);
}
.sf-hero__pic > img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* sewn on: a cream running stitch just inside the picture's edge */
.sf-hero__pic::after {
  content: ""; position: absolute; inset: 10px; z-index: 2; pointer-events: none;
  border: 2px dashed rgb(255 246 228 / .78); border-radius: calc(var(--o-r-card) - 8px);
}
/* the felt star (the home hero's) resting on the top corner */
.sf-hero__star {
  position: absolute; z-index: 3; inset-block-start: -22px; inset-inline-end: -14px;
  width: 72px; height: 72px; rotate: 12deg; pointer-events: none;
  filter: drop-shadow(0 0 12px rgb(255 226 168 / .5)) drop-shadow(0 4px 6px rgb(60 57 50 / .22));
}
/* Orla, peeking up from the picture's bottom edge (the home page's case
   study peeker): the official render, ball 75% of its square, foot on the
   bottom edge; the frame cuts her off, so only her top shows. */
.sf-hero__orla {
  position: absolute; z-index: 3; inset-block-end: 0; inset-inline-start: 6%;
  width: clamp(72px, 22%, 116px); aspect-ratio: 1; pointer-events: none;
  translate: 0 30%;
  filter: drop-shadow(0 -2px 6px rgb(60 57 50 / .2));
}
.sf-hero__orla img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.sf-hero__blink { opacity: 0; }
@media (min-width: 900px) {
  .sf-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
  .sf-hero__art { justify-self: end; width: min(100%, 488px); margin-block: var(--o-space-5) var(--o-space-5); }
  .sf-hero__star { width: 84px; height: 84px; inset-block-start: -28px; inset-inline-end: -22px; }
}
@media (max-width: 899.98px) {
  /* under 900px the sky is a soft warm glow behind the picture (which sits
     under the words, to their left edge), not a band across the page. The
     layer is mirrored (scale -1 1), so the glow's 63% is the picture's 37%. */
  .sf-hero__sky {
    -webkit-mask-image: radial-gradient(ellipse 72% 34% at 63% 64%, #000 0%, rgb(0 0 0 / .72) 42%, rgb(0 0 0 / .22) 72%, transparent 100%);
    -webkit-mask-composite: source-over;
            mask-image: radial-gradient(ellipse 72% 34% at 63% 64%, #000 0%, rgb(0 0 0 / .72) 42%, rgb(0 0 0 / .22) 72%, transparent 100%);
            mask-composite: add;
  }
}
@media (max-width: 599.98px) {
  .sf-hero__sky {
    -webkit-mask-image: radial-gradient(ellipse 95% 30% at 50% 64%, #000 0%, rgb(0 0 0 / .72) 45%, rgb(0 0 0 / .2) 75%, transparent 100%);
            mask-image: radial-gradient(ellipse 95% 30% at 50% 64%, #000 0%, rgb(0 0 0 / .72) 45%, rgb(0 0 0 / .2) 75%, transparent 100%);
  }
}
@media (max-width: 599.98px) {
  .sf-hero__art { margin-block: var(--o-space-5) var(--o-space-3); }
  .sf-hero__pic::after { inset: 8px; border-radius: calc(var(--o-r-card) - 7px); }
  .sf-hero__star { width: 56px; height: 56px; inset-block-start: -16px; inset-inline-end: -6px; }
}
/* The one quiet line to the other page (Safeguarding <-> Data protection),
   under the lead: body size, ink-2, no button. */
.sf-hero .sf-also { color: var(--o-ink-2); text-wrap: pretty; max-inline-size: 46ch; }
/* A link to something in the hero (#not, the "what Orli is not" sentence;
   #data, the line to Data protection, where old /safety#data links land)
   opens the page at its top, title and all, not with the line under the
   header. */
.sf-hero [id] { scroll-margin-top: 100vh; }

/* ============================================== If you're worried: felt
   The deep band as a felt patch: the felt grain over the deep green. */
.sf-worried { position: relative; isolation: isolate; }
.sf-worried::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(img/felt-grain-256.webp) 0 0 / 256px 256px; opacity: .22; mix-blend-mode: soft-light;
}
.sf-worried .sf-worried__head { margin-block-end: calc(var(--o-head-gap) + var(--o-space-2)); }
.sf-worried__head .o-lead { max-inline-size: 34ch; }
@media (min-width: 900px) {
  .sf-worried__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--o-space-8); align-items: end; }
  .sf-worried__head .o-title { max-inline-size: 18ch; }
}

/* the three steps, on a stitched thread: each step's thread runs from its
   mark to the next one's (down on a phone, across from 900px) */
.sf-seq {
  --mark: 64px; --gap: var(--o-space-6);
  display: grid; gap: var(--gap); margin: 0; padding: 0; list-style: none;
  counter-reset: sf-step;
}
.sf-step { position: relative; display: grid; grid-template-columns: var(--mark) minmax(0, 1fr); gap: var(--o-space-4) var(--o-space-5); align-items: start; counter-increment: sf-step; }
.sf-step:not(:last-child)::before {
  content: ""; position: absolute; pointer-events: none;
  inset-block-start: calc(var(--mark) / 2); inset-inline-start: calc(var(--mark) / 2 - 1.25px);
  height: calc(100% + var(--gap));
  border-inline-start: 2.5px dashed rgb(255 246 228 / .45);
  transform-origin: top center;
}
.sf-step__mark { position: relative; z-index: 1; width: var(--mark); height: var(--mark); }
.sf-step__mark .sf-felt { width: 100%; height: 100%; box-shadow: 0 1px 1px rgb(0 0 0 / .18), 0 8px 18px -8px rgb(0 0 0 / .55), inset 0 -2px 4px rgb(60 57 50 / .1); }
.sf-step__mark .sf-felt::after { inset: 5px; border-width: 2px; }
.sf-step__mark .sf-i { --size: calc(var(--mark) * .46); }
/* its number, a mint felt button on the patch's shoulder */
.sf-step__mark::after {
  content: counter(sf-step);
  position: absolute; z-index: 1; inset-block-start: -6px; inset-inline-end: -8px;
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--o-mint); color: #0f2e22;
  font: var(--o-weight-title) .9375rem / 1 var(--o-font-ui);
  box-shadow: 0 0 0 3px var(--o-action-press), 0 2px 4px rgb(0 0 0 / .25);
}
.sf-step__text {
  padding-block-start: calc(var(--mark) / 2 - .75em);
  font-size: var(--o-text-lead); line-height: var(--o-lh-lead); color: #fff; text-wrap: pretty;
  max-inline-size: 34ch;
}
.sf-step__text strong { font-weight: var(--o-weight-strong); }
@media (min-width: 900px) {
  .sf-seq { --mark: 88px; --gap: var(--o-space-7); grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sf-step { grid-template-columns: minmax(0, 1fr); gap: var(--o-space-5); align-content: start; }
  .sf-step:not(:last-child)::before {
    inset-block-start: calc(var(--mark) / 2 - 1.25px); inset-inline-start: calc(var(--mark) / 2);
    height: 0; width: calc(100% + var(--gap));
    border-inline-start: 0; border-block-start: 2.5px dashed rgb(255 246 228 / .45);
    transform-origin: left center;
  }
  .sf-step__text { padding-block-start: 0; }
}

/* ========================================================= sessions */
.sf-point { grid-template-columns: 52px minmax(0, 1fr); }
.sf-point__title { padding-block-start: 13px; }
/* "Help" in the pupil check-in we're building: a quiet note under the
   point, in the small type, so "we're building" carries it */
.sf-help {
  margin-block-start: var(--o-space-4); max-inline-size: 52ch;
  padding: var(--o-space-3) var(--o-space-5) var(--o-space-4); border-radius: 16px;
  background: var(--o-warm); color: var(--o-ink-2);
}
.sf-help__text { display: block; font-size: var(--o-text-small); line-height: var(--o-lh-small); text-wrap: pretty; }
/* the sessions band is warm now: the note is a white slip on it */
.o-section--warm .sf-help { background: var(--o-surface); box-shadow: inset 0 0 0 1px var(--o-line); }

/* the two devices on a felt stage, sewn on */
.sf-figure__stage {
  position: relative; isolation: isolate; overflow: clip;
  padding: clamp(var(--o-space-4), 4%, var(--o-space-7)) clamp(var(--o-space-4), 4%, var(--o-space-6));
  border-radius: var(--o-r-card);
  background: linear-gradient(160deg, #f6ecdd 0%, #efe3d0 100%);
}
.sf-figure__stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(img/felt-grain-256.webp) 0 0 / 256px 256px; opacity: .1; mix-blend-mode: multiply;
}
.sf-figure__stage::after {
  content: ""; position: absolute; inset: 10px; z-index: 0; pointer-events: none;
  border: 2px dashed rgb(255 253 248 / .9); border-radius: calc(var(--o-r-card) - 8px);
}
.sf-figure__stage .ps-stack { position: relative; z-index: 1; }
/* from 900px the picture stays beside the four points as they're read */
@media (min-width: 900px) {
  .sf-sessions .sf-sessions__grid { align-items: start; }
  .sf-figure { position: sticky; inset-block-start: calc(var(--o-header-h) + var(--o-space-6)); }
}

/* ======================================================= data protection */
/* Land a section's title just under the header (not the band's top
   padding) when the page opens at one of its sections. */
main > section[id] { scroll-margin-top: calc(var(--o-header-h) + var(--o-space-6) - var(--o-section)); }
/* Without script (safety.js does this otherwise), a link to a section
   lands at once rather than gliding down from the top. */
html:not(.js):has(> body:is([data-page="safety"], [data-page="data-protection"])) { scroll-behavior: auto; }

/* The flow picture: where the website's information goes, in felt. Your
   device, a stitched thread with a felt envelope on it, the Orli team; the
   website card's own words under the thread. Across at every width (more
   compact on a phone), so it never costs a screen before the facts. */
.sf-flow {
  position: relative; isolation: isolate; overflow: clip;
  margin: 0 0 var(--o-space-6); padding: var(--o-space-7) var(--o-space-6) var(--o-space-6);
  border-radius: var(--o-r-card); background: var(--o-paper); border: 1px solid var(--o-line);
  box-shadow: var(--o-shadow);
}
.sf-flow::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(img/felt-grain-256.webp) 0 0 / 256px 256px; opacity: .05; mix-blend-mode: multiply;
}
.sf-flow::after {
  content: ""; position: absolute; inset: 10px; z-index: -1; pointer-events: none;
  border: 2px dashed rgb(50 131 96 / .26); border-radius: calc(var(--o-r-card) - 8px);
}
.sf-flow__route {
  --badge: 88px;
  display: grid; grid-template-columns: minmax(0, var(--node, 12rem)) minmax(0, 1fr) minmax(0, var(--node, 12rem));
  grid-template-rows: var(--badge) auto;
  grid-template-areas: "device thread team" "device label team";
  gap: var(--o-space-3) var(--o-space-3);
  max-inline-size: 54rem; margin-inline: auto;
}
.sf-flow__node { display: grid; justify-items: center; align-content: start; gap: var(--o-space-1); text-align: center; }
.sf-flow__node--device { grid-area: device; }
.sf-flow__node--team { grid-area: team; }
.sf-flow__node .sf-felt { width: var(--badge); height: var(--badge); margin-block-end: var(--o-space-3); }
.sf-flow__name { font: var(--o-weight-title) var(--o-text-heading) / var(--o-lh-heading) var(--o-font-ui); letter-spacing: var(--o-track-heading); color: var(--o-ink); text-wrap: balance; }
.sf-flow__note { font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); }
/* the stitched thread and its arrow, level with the badges' centres */
.sf-flow__thread { grid-area: thread; position: relative; align-self: start; block-size: var(--badge); }
.sf-flow__line {
  position: absolute; inset-block-start: calc(50% - 1.5px); inset-inline: var(--o-space-2) var(--o-space-3);
  border-block-start: 3px dashed rgb(50 131 96 / .55); transform-origin: left center;
}
.sf-flow__line::after {
  content: ""; position: absolute; inset-inline-end: -4px; inset-block-start: -9.5px;
  width: 14px; height: 14px; border: solid rgb(50 131 96 / .7); border-width: 3px 3px 0 0; border-radius: 2px;
  rotate: 45deg;
}
/* a little felt envelope on the thread */
.sf-flow__env {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%; translate: -50% -50%;
  display: grid; place-items: center; width: 46px; height: 34px; border-radius: 9px;
  background: #fbe0c8 url(img/felt-grain-256.webp) 0 0 / 160px 160px; background-blend-mode: soft-light;
  color: var(--w-nova-deep);
  box-shadow: 0 1px 1px rgb(60 57 50 / .12), 0 5px 10px -5px rgb(60 57 50 / .4);
}
.sf-flow__env::after { content: ""; position: absolute; inset: 3px; border: 1.25px dashed rgb(124 63 27 / .34); border-radius: 7px; }
.sf-flow__env .sf-i { --size: 24px; }
.sf-flow__label {
  grid-area: label; justify-self: center; margin: 0; max-inline-size: 24rem; text-align: center;
  font: var(--o-weight-ui) var(--o-text-body) / 1.4 var(--o-font-ui); color: var(--w-orla-deep); text-wrap: balance;
}
@media (max-width: 899.98px) { .sf-flow__route { --node: 10rem; } }
@media (max-width: 599.98px) {
  /* a phone: smaller badges, the words under the whole picture */
  .sf-flow { padding: var(--o-space-5) var(--o-space-4); }
  .sf-flow::after { inset: 8px; border-radius: calc(var(--o-r-card) - 7px); }
  .sf-flow__route {
    --badge: 64px;
    grid-template-columns: auto minmax(56px, 1fr) auto;
    grid-template-rows: auto auto; grid-template-areas: "device thread team" "label label label";
    gap: var(--o-space-4) var(--o-space-2);
  }
  .sf-flow__name { white-space: nowrap; }
  .sf-flow__node .sf-felt { margin-block-end: var(--o-space-2); }
  .sf-flow__node .sf-felt::after { inset: 5px; border-width: 1.75px; }
  .sf-flow__node .sf-i { --size: 30px; }
  .sf-flow__name { font-size: var(--o-text-body); line-height: 1.25; letter-spacing: 0; }
  .sf-flow__line { inset-inline: 2px var(--o-space-2); }
  .sf-flow__env { width: 36px; height: 27px; border-radius: 7px; }
  .sf-flow__env::after { inset: 2.5px; border-radius: 5px; }
  .sf-flow__env .sf-i { --size: 19px; }
  .sf-flow__label { max-inline-size: 18rem; }
}

/* The three cards, in the picture's colours. */
.sf-zones { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--o-grid-gap); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .sf-zones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sf-zone { --zone-soft: #e6f2e6; --zone-ink: var(--w-orla-deep); }
.sf-zone--site { --zone-soft: #fcebdc; --zone-ink: var(--w-nova-deep); }
.sf-zone--app  { --zone-soft: #e9eafa; --zone-ink: var(--w-zeke-deep); }
.sf-data .sf-zone .o-card__body { gap: var(--o-space-4); padding: var(--o-space-6); }
.sf-zone__head { display: flex; align-items: center; gap: var(--o-space-4); margin-block-end: var(--o-space-1); }
.sf-data .sf-zone .o-card__title { margin: 0; }
.sf-zone__intro { color: var(--o-ink); text-wrap: pretty; }

/* an item: its doodle in a soft round, then its words */
.sf-items { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; color: var(--o-ink-2); }
.sf-items > li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--o-space-4); align-items: start; padding-block: var(--o-space-4); text-wrap: pretty; }
.sf-items > li + li { border-block-start: 1px solid var(--o-line); }
.sf-items > li:first-child { padding-block-start: var(--o-space-2); }
.sf-items > li:last-child { padding-block-end: 0; }
.sf-items > li > span:last-child { padding-block-start: 7px; }
.sf-items strong { font-weight: var(--o-weight-strong); color: var(--o-ink); }
.sf-items__icon {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--zone-soft, var(--o-warm)); color: var(--zone-ink, var(--o-ink));
}
.sf-items__icon .sf-i { --size: 22px; }

/* where it goes, and the one thing we never ask for */
.sf-zone__where { display: grid; gap: var(--o-space-3); margin-block-start: var(--o-space-2); padding-block-start: var(--o-space-4); border-block-start: 1px solid var(--o-line); color: var(--o-ink-2); }
.sf-zone__where > p { text-wrap: pretty; }
.sf-never {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--o-space-4); align-items: start;
  padding: var(--o-space-3) var(--o-space-4) var(--o-space-3) var(--o-space-3); border-radius: 16px;
  background: #fbeef5; color: var(--o-ink);
}
.sf-never .sf-items__icon { background: #fff; color: var(--w-luna-deep); }
.sf-never > span:last-child { padding-block-start: 7px; }
/* Anonymous statistics: its own row under the two cards (what the site
   counts as it's used), the badge beside the words */
.sf-zones .sf-statcard { grid-column: 1 / -1; }
.sf-data .sf-statcard .o-card__body { flex-direction: row; align-items: center; gap: var(--o-space-5); padding: var(--o-space-5) var(--o-space-6); }
.sf-stat__text { color: var(--o-ink-2); text-wrap: pretty; max-inline-size: 78ch; }
.sf-stat__text strong { font-weight: var(--o-weight-strong); color: var(--o-ink); }

/* The app: full width under the two above, its intro beside its facts. */
.sf-zones .sf-app { grid-column: 1 / -1; }
.sf-data .sf-app .o-card__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--o-space-5); align-items: start; }
.sf-app__intro { display: grid; gap: var(--o-space-3); justify-items: start; }
@media (min-width: 900px) {
  .sf-data .sf-app .o-card__body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--o-space-8); }
  .sf-app__list { padding-block-start: 0; }
  .sf-app__list > li + li::before { content: none; }
}
.sf-app__list > li::before { content: none; }
.sf-items.sf-app__list > li + li { padding-block-start: var(--o-space-4); border-block-start: 1px solid var(--o-line); }
/* Orli Schools, a section of its own (Data protection): its intro and the
   documents link beside one lilac card of what we can say today. */
.sf-app-sec .o-split { align-items: center; }
.sf-app-sec .o-section-head { margin: 0; }
.sf-app-sec .sf-app { grid-column: auto; }
.sf-app-sec.sf-data .sf-app .o-card__body { display: block; }
.sf-app-sec .sf-app__list > li:first-child { padding-block-start: 0; }

/* Your rights (Data protection): after a hairline, the title beside the
   two paragraphs. */
.sf-rights-sec .o-split { align-items: start; }
.sf-rights-sec .o-section-head { margin: 0; }
.sf-rights__prose { display: grid; gap: var(--o-space-4); max-inline-size: 62ch; }
.sf-rights__prose .o-body { color: var(--o-ink); text-wrap: pretty; }
@media (max-width: 599.98px) {
  .sf-items > li, .sf-never { grid-template-columns: 36px minmax(0, 1fr); gap: var(--o-space-3); }
  .sf-data .sf-statcard .o-card__body { flex-direction: column; align-items: flex-start; gap: var(--o-space-3); padding: var(--o-space-5); }
  .sf-items__icon { width: 36px; height: 36px; }
  .sf-items__icon .sf-i { --size: 20px; }
  .sf-items > li > span:last-child, .sf-never > span:last-child { padding-block-start: 5px; }
  .sf-data .sf-zone .o-card__body { padding: var(--o-space-5); }
  .sf-never { padding: var(--o-space-3); }
}

/* ================================================================ KCSIE */
.sf-linkcard.sf-stitch .o-card__body { padding: var(--o-space-6) var(--o-space-6) var(--o-space-5); }
.sf-linkcard.sf-stitch .o-card__link::after { z-index: 2; }

/* ================================================================ motion
   As the home page (home.css "small reveals"): armed (.is-armed) only in
   full motion, let go once in (data-in), so a hover is never delayed. */
.is-armed { transition: opacity 760ms var(--o-ease), translate 760ms var(--o-ease); transition-delay: calc(var(--i, 0) * 110ms); }
.is-armed:not([data-in]) { opacity: 0; translate: 0 22px; }
.is-armed:target { opacity: 1; translate: none; transition: none; }
/* the steps: the list stays put, each step rises in turn, then the thread draws across */
.sf-seq.is-armed:not([data-in]) { opacity: 1; translate: none; }
.sf-seq.is-armed .sf-step { transition: opacity 700ms var(--o-ease), translate 700ms var(--o-ease); }
.sf-seq.is-armed .sf-step:nth-child(2) { transition-delay: 200ms; }
.sf-seq.is-armed .sf-step:nth-child(3) { transition-delay: 400ms; }
.sf-seq.is-armed:not([data-in]) .sf-step { opacity: 0; translate: 0 18px; }
.sf-seq.is-armed .sf-step::before { transition: scale 900ms var(--o-ease) 500ms; }
.sf-seq.is-armed .sf-step:nth-child(2)::before { transition-delay: 800ms; }
.sf-seq.is-armed:not([data-in]) .sf-step::before { scale: 1 0; }
@media (min-width: 900px) { .sf-seq.is-armed:not([data-in]) .sf-step::before { scale: 0 1; } }
/* the flow picture: in place, its thread draws to the team and the
   envelope slides along it */
.sf-flow.is-armed:not([data-in]) { translate: 0 14px; }
.sf-flow.is-armed .sf-flow__line { transition: scale 1300ms var(--o-ease) 350ms; }
.sf-flow.is-armed:not([data-in]) .sf-flow__line { scale: 0 1; }
.sf-flow.is-armed .sf-flow__env { transition: opacity 500ms var(--o-ease) 900ms, translate 1100ms var(--o-settle) 700ms; }
.sf-flow.is-armed:not([data-in]) .sf-flow__env { opacity: 0; translate: calc(-50% - 32px) -50%; }
/* the felt star floats, Orla bobs a little and blinks now and then (full motion only) */
.is-moving .sf-hero__star { animation: sf-star 7s ease-in-out infinite; }
@keyframes sf-star { 0%, 100% { translate: 0 0; rotate: 12deg; } 50% { translate: 0 -7px; rotate: 3deg; } }
.is-moving .sf-hero__orla { animation: sf-peek 6.4s ease-in-out 1.2s infinite; }
@keyframes sf-peek { 0%, 100% { translate: 0 30%; } 45% { translate: 0 22%; rotate: -3deg; } 60% { translate: 0 23%; rotate: 1.5deg; } }
.is-moving .sf-hero__blink { animation: sf-blink 5.4s steps(1, end) 2s infinite; }
@keyframes sf-blink { 0%, 95.5% { opacity: 0; } 96%, 98.4% { opacity: 1; } 98.5%, 100% { opacity: 0; } }

/* ======================================================== forced colours */
@media (forced-colors: active) {
  .sf-hero__sky, .sf-felted::before, .sf-stitch::after, .sf-worried::before, .sf-flow::before, .sf-flow::after,
  .sf-figure__stage::before, .sf-figure__stage::after, .sf-hero__pic::after, .sf-felt::after, .sf-flow__env::after { display: none; }
  .sf-i { background-color: CanvasText; forced-color-adjust: none; }
  .sf-felt, .sf-items__icon, .sf-flow__env { border: 1px solid CanvasText; }
  .sf-step::before, .sf-flow__line { border-color: CanvasText; }
  .sf-flow__line::after { border-color: CanvasText; }
  .sf-step__mark::after { forced-color-adjust: none; background: Canvas; color: CanvasText; box-shadow: inset 0 0 0 2px CanvasText; }
  .sf-flow, .sf-never, .sf-help { border: 1px solid CanvasText; }
}

/* ================================================================ print
   The art and the flow picture (its words are all in the cards) drop out;
   every word prints, the steps keep their numbers. */
@media print {
  .sf-hero__sky, .sf-hero__art, .sf-flow, .sf-felt, .sf-items__icon, .sf-step__mark { display: none !important; }
  .sf-felted::before, .sf-stitch::after, .sf-worried::before, .sf-figure__stage::before, .sf-figure__stage::after { display: none !important; }
  .sf-hero__grid { display: block !important; }
  .sf-seq { display: block !important; }
  .sf-step { display: block !important; margin-block-end: 3mm; break-inside: avoid; }
  .sf-step::before, .sf-step:not(:last-child)::before { content: counter(sf-step) ". " !important; position: static !important; border: 0 !important; width: auto !important; height: auto !important; scale: none !important; font-weight: 700; }
  .sf-step__text { color: #000 !important; padding: 0 !important; display: inline; }
  .sf-worried__head { display: block !important; }
  .sf-zones { display: block !important; }
  .sf-data .o-section-head { break-after: avoid; }
  .sf-zones > * + * { margin-block-start: 3mm; }
  .sf-items > li, .sf-never { display: block !important; padding-block: 1.5mm !important; break-inside: avoid; }
  .sf-data .sf-statcard .o-card__body { display: block !important; }
  .sf-items, .sf-zone__where, .sf-stat__text, .sf-help, .sf-help__text { color: #000 !important; }
  .sf-never, .sf-help { background: none !important; border: 1px solid #999; padding: 2mm 3mm !important; }
  .sf-zone__head { display: block !important; }
  .sf-app-sec .o-split, .sf-rights-sec .o-split { display: block !important; }
  .is-armed, .is-armed :is(.sf-step, .sf-step::before) { opacity: 1 !important; translate: none !important; scale: none !important; }
}