/* ════════════════════════════════════════════════════════════════════════
   privacy.css: the Privacy page. Loaded only on /privacy/, unlayered. Scoped to .page--privacy.

   Seven plain statements as petal rows: six petals and the core. From 56rem the bloom they
   build stands beside the list and stays in view; on a phone the mark opens in the hero.
   Nothing is hidden here unless privacy.js has said it is running (.is-live), motion is
   allowed and the design system's failsafe has not fired.
   ════════════════════════════════════════════════════════════════════════ */

.page--privacy .privacy-hero__art { display: grid; justify-items: start; }
/* The mark is a little larger than its disc and laid over it, so the disc stays a true circle. */
.page--privacy .privacy-hero__disc {
  position: relative;
  display: block;
  inline-size: min(46vw, 11rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--white);
}
.page--privacy .privacy-hero__disc > .mark { position: absolute; inset: -4%; inline-size: 108%; block-size: 108%; max-inline-size: none; }

.page--privacy .privacy-grid { display: grid; gap: clamp(2rem, 1rem + 5vw, 5.5rem); align-items: start; }

/* The rows. White on bone, a full panel's corner, the petal standing in a disc of its own tint. */
.page--privacy .privacy-rows { display: grid; gap: clamp(.75rem, .5rem + 1vw, 1.25rem); }
.page--privacy .privacy-row {
  --disc: clamp(3.25rem, 2.8rem + 1.8vw, 4.5rem);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(1rem, .6rem + 1.6vw, 1.75rem);
  align-items: start;
  padding: clamp(1.15rem, .9rem + 1.4vw, 2rem);
  border-radius: var(--r-panel);
  background: var(--white);
}
.page--privacy .privacy-row__petal {
  display: grid;
  place-items: center;
  inline-size: var(--disc);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c-mist);
}
.page--privacy .privacy-row__petal > .petal { --size: calc(var(--disc) * .58); vertical-align: 0; }
.page--privacy .privacy-row__petal--core { background: var(--gold-mist); }
.page--privacy .privacy-row__petal--core > span { inline-size: 46%; aspect-ratio: 1; border-radius: 50%; background: var(--gold); }
.page--privacy .privacy-row__text { display: grid; gap: .45rem; justify-items: start; align-content: start; min-inline-size: 0; padding-block-start: .2rem; }
.page--privacy .privacy-row__title { font-size: var(--fs-sub); }
.page--privacy .privacy-row__text > p { max-inline-size: 36em; color: var(--fg-muted); }
.page--privacy .privacy-row__text > .btn { margin-block-start: .65rem; }
/* The seventh row is the core: the one place to ask. */
.page--privacy .privacy-row--core { background: var(--gold-mist); }
.page--privacy .privacy-row--core .privacy-row__petal--core { background: var(--white); }
.page--privacy .privacy-row--core .privacy-row__text > p { color: var(--fg); }

/* The bloom the rows build. */
.page--privacy .privacy-bloom { display: none; }
@media (min-width: 56rem) {
  .page--privacy .privacy-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; }
  .page--privacy .privacy-bloom { display: block; }
  .page--privacy .privacy-bloom__disc {
    position: sticky;
    inset-block-start: calc(var(--header-h) + clamp(1.5rem, 8vh, 5rem));
    inline-size: min(100%, 24rem);
    aspect-ratio: 1;
    margin-inline: auto;
    border-radius: 50%;
    background: var(--white);
    overflow: hidden;          /* the mark turns inside the disc: a turning square must not widen the page */
  }
  .page--privacy .privacy-bloom__disc > .mark { position: absolute; inset: -4%; inline-size: 108%; block-size: 108%; max-inline-size: none; }
}
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.dt-failsafe) .page--privacy .privacy-bloom.is-live :is(.mark__petal, .mark__core):not(.is-on) { opacity: 0; }
  /* While it is being built the bloom stands one petal-step back. The core's arrival turns it home
     (privacy.js, which then sets .is-whole), so it comes to rest exactly as the mark is drawn. */
  html.js:not(.dt-failsafe) .page--privacy .privacy-bloom.is-live:not(.is-whole) .privacy-bloom__disc > .mark { transform: rotate(-60deg); }
}