, then five bolded sections (each a heading + one/two paragraphs). CSS-ONLY design: never a raw hex — every value is a --ho-* token from brand-tokens.css. Production pulls the tokens + chrome from common.css / brand-tokens.css; the design lives entirely in this one page stylesheet. */ @import "common.css"; /* ── skip-link (visually hidden until focused) ─────────────────────────────── */ .skip-link{position:absolute;left:var(--ho-s-2);top:-48px;z-index:80; background:var(--ho-card);color:var(--ho-brand-text);font-weight:var(--ho-fw-semi); font-size:var(--ho-fs-sm);padding:var(--ho-s-2) var(--ho-s-4);border:1px solid var(--ho-brand); border-radius:var(--ho-r-sm);box-shadow:var(--ho-e-2);transition:top var(--ho-dur) var(--ho-ease)} .skip-link:focus{top:var(--ho-s-2)} /* ── page shell ────────────────────────────────────────────────────────────── */ /* Shell = contact-page/terms parity (edit req_20260828_100456_59c015): top pad 0 so the hero band sits FLUSH under the header, bottom --ho-s-5 so the footer's own margin-top:--ho-s-section (common.css) owns the gap before it. */ main{display:block;max-width:1080px;margin:0 auto; padding:0 var(--ho-s-5) var(--ho-s-5)} /* ── privacy block — .content_area > .content carries h1 + the sectioned copy ── Present the policy as one calm reading document: a pale cyan hero band behind the title, then a comfortable measure for the legal text with clearly-set section headings and generous vertical rhythm. */ .content_area{margin:0} /* The card chrome is GONE — no border, radius, shadow, card ground or overflow:hidden, and no bottom floor. A band cannot full-bleed out of a box that clips its children, and the floor only stacked with main's pad and the footer's own step. The policy is now a plain centred reading column, matching terms-and-conditions-page.css. */ /* no column cap (edit req_20260828_102005_705552) — the document fills main's own 1080px content box (~1032 inside its --ho-s-5 gutters). */ .content_area .content{margin:0 auto;padding:0} /* title — sits on a soft cyan hero band (full-bleed inside the card) with a brand accent rule beneath it */ /* the band spans BOTH the h1 and the intro
and full-bleeds to the viewport edges via margin-inline:calc(50% - 50vw) (not width:100vw, which overflows past the scrollbar); the inner padding re-insets the copy to the 820px reading column (half = 410) so the title lines up with the text under it. */ .content_area .content > h1, .content_area .content > h1 + p{background:var(--ho-hero-grad); margin-inline:calc(50% - 50vw)} .content_area .content > h1{padding-inline:max(var(--ho-s-5),calc(50vw - 410px))} /* the LEAD lines up with the BODY COPY (edit req_20260828_102420_9f660b, "increase width for large size screen … match .content > p"): 516 is half of 1032, the width .content > p occupies now the column cap is gone (main's 1080 box less its two --ho-s-5 gutters), so the lead's edges land exactly on the paragraphs'. The max() floor is what makes this "large screens only" — under ~1080px the floor wins and the lead keeps main's own --ho-s-5 gutter, same as the body. (This reverses the deeper inset from the previous edit, req_20260828_102005_705552.) */ .content_area .content > h1 + p{padding-inline:max(var(--ho-s-5),calc(50vw - 516px))} .content_area .content > h1{margin-top:0;margin-bottom:0; padding-top:var(--ho-s-section);padding-bottom:var(--ho-s-5); font-size:var(--ho-fs-hero);line-height:var(--ho-lh-tight); letter-spacing:var(--ho-tracking-tight);color:var(--ho-hero-ink); font-weight:var(--ho-fw-black);text-align:center;position:relative} .content_area .content > h1::after{content:"";display:block;width:64px;height:3px; margin:var(--ho-s-4) auto 0;border-radius:var(--ho-r-pill); background:var(--ho-brand)} /* section headings — each policy section opens with a cyan-accented h2; a short brand rule to its left sets it apart from the running text */ .content_area .content > h2{margin:var(--ho-s-7) 0 var(--ho-s-3); padding-left:var(--ho-s-4);position:relative; font-size:var(--ho-fs-xl);line-height:var(--ho-lh-snug); letter-spacing:var(--ho-tracking-tight);color:var(--ho-ink); font-weight:var(--ho-fw-bold)} .content_area .content > h2::before{content:"";position:absolute;left:0;top:.15em; bottom:.15em;width:4px;border-radius:var(--ho-r-pill);background:var(--ho-brand)} /* the intro paragraph reads as a lead — sits right under the hero band */ /* the intro lead closes the band — the hairline sits under IT, not under the title */ .content_area .content > h1 + p{margin-top:0;margin-bottom:var(--ho-s-7); padding-top:0;padding-bottom:var(--ho-s-6); border-bottom:1px solid var(--ho-sky-200); max-width:none;text-align:left; font-size:var(--ho-fs-md);color:var(--ho-sky-800)} /* body copy — comfortable measure + rhythm */ /* body copy runs the full column, left-aligned (the house style settled on the terms page): --wrap is 1180px against an 820px column, so in practice it fills 820. */ .content_area .content > p{margin:0 0 var(--ho-s-4); color:var(--ho-body);font-size:var(--ho-fs-base);line-height:1.85; text-align:left;max-width:var(--wrap)} .content_area .content > p a{color:var(--ho-brand-text);font-weight:var(--ho-fw-semi); text-decoration:underline;text-underline-offset:2px} .content_area .content > p a:hover{color:var(--ho-link-d)} /* ── responsive (1024 / 640 / 400 tiers) ───────────────────────────────────── */ @media (max-width:1024px){ .content_area .content > h1{padding-top:var(--ho-s-7);padding-bottom:var(--ho-s-4)} .content_area .content > h2{margin-top:var(--ho-s-6)} } @media (max-width:640px){ main{padding-left:var(--ho-s-4);padding-right:var(--ho-s-4)} .content_area .content > p{line-height:1.8} .content_area .content > h1 + p{font-size:var(--ho-fs-base)} } @media (max-width:400px){ main{padding-left:var(--ho-s-3);padding-right:var(--ho-s-3)} .content_area .content > h1{padding-top:var(--ho-s-6);padding-bottom:var(--ho-s-3)} }