/* Vanity Ink: the Privacy Policy and the 404 page (10-06). Loaded only by privacy.html and 404.html.
   Both use the tall inner hero's markup (.page-hero.tall) without a photo: a black hero with the text left, then the
   river easing in under it with the soft entry (--entry, pages.css), as on every inner page. With no photo there is
   nothing to fill a whole screen, so the hero is capped to its text (legal-hero) and the river rises on the first
   screen, around the first heading, instead of below the fold.
   Elementor: the hero container without Min Height (padding 210/64, tablet 150/56, phone 130/40), background #060607. */
.page-hero.tall.legal-hero{min-height:0;padding-bottom:64px}

/* Privacy: one measured column on the river (c-about-flow, its own page, so no view repeats within it). The text
   column sits on the container's left edge, under the hero's words; the river flows to its right. Each heading and its
   paragraphs sit on an ink pool (.pool, vanity.css), so body text never sits on bright marble.
   The river: the cut at Cover (like Aftercare's flow-care), so it runs the whole length of the long column at every
   width; the entry ramp, full behind the opening sections, a step down to --m-mid and --m-dim behind the rest, and a
   fade over the last 420px, before the strip's finale rises (stops tuned at 1440).
   Elementor: outer container (the flow) with the image top center / 100% auto and the overlay gradient (route A or B,
   section 5.3); inside, a boxed container, content width 720, align start; one inner container per heading
   (Heading H2 + Text Editor), each with the pool's radial gradient as its background. */
.flow-legal{--mlift:0px;--msize:cover;--mmask:linear-gradient(180deg,var(--entry),#000 380px,#000 1100px,rgb(0 0 0/var(--m-mid)) 1400px,rgb(0 0 0/var(--m-dim)) 1800px,rgb(0 0 0/var(--m-dim)) calc(100% - 420px),transparent 100%)}
.legal-body{padding-top:40px}
.legal-col{max-width:720px}
.legal-block{margin-top:64px}
.legal-block:first-child{margin-top:0}
.legal-block.pool::before{inset:-14% -10%}
.legal-block h2{font-size:var(--h2-sm);margin-bottom:18px}
.legal-block p{text-wrap:pretty}
.legal-lead{font-size:var(--body);color:#C4C4CB}
.legal-date{margin-top:40px;font:500 11px/1.8 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted)}

/* 404: the hero's two actions stacked (Contact's .actions.stacked): the button, then a glyph link set like the phone
   link (.call-link, site.css) with the arrow glyph. The button shows at every width (not .hero-book). Under the hero,
   an empty stretch of river (c-aftercare-time) eases in from the black and fades into the footer's overlap.
   Elementor: a spacer container, Min Height 620 (phone 400), the cut as its background with the overlay gradient. */
.flow-404{height:620px;--mlift:0px;--mmask:linear-gradient(180deg,var(--entry),#000 380px,#000 440px,transparent 100%)}

@media (max-width:1023px){
  .page-hero.tall.legal-hero{padding-bottom:56px}
  .legal-block{margin-top:56px}
}
@media (max-width:767px){
  .page-hero.tall.legal-hero{padding-bottom:40px}
  .legal-body{padding-top:32px}
  .legal-block{margin-top:48px}
  .flow-404{height:400px;--mmask-m:linear-gradient(180deg,var(--entry),#000 300px,transparent 100%)}
}

/* 10-06 legible: Privacy's pools at the house pool's reach (was -14% -10%; the recipe is --pool, vanity.css). Each
   heading opens its block's top-left corner, which a closest-side pool that tight left on its feather ("Your Choices"
   2.89:1 at 1512, "Other Services" 2.69:1 at 1280, against 3:1 for the chrome). Elementor: no change (the container's
   radial gradient already spans its padding). */
.legal-block.pool::before{inset:-18% -14%}
/* the other legal page, one link under the last block (10-14) */
.legal-links{margin-top:32px}