/* headroom.charithp.com — the promoted frames `Web Light|Dark — Site…` (Headroom's design/Headroom.dc.html,
   direction A · Surfaces, 2026-09-29) are the specification; DESIGN.md › Site · Web says why. The values below
   are the frames'. Nothing moves: links change colour on hover with no transition, as on Tare's site. */

body {
  background: var(--hr-bg);
  color: var(--hr-text);
  font: 400 16px/1.55 var(--hr-sans);
  margin: 0;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--hr-accent); }
a:focus-visible { outline: 2px solid var(--hr-accent); outline-offset: 3px; border-radius: 4px; }

/* One column: 1120 on a desktop, the full width less a 16px gutter below that. */
.col { width: min(1120px, 100% - 32px); margin-inline: auto; }

/* Nav: the icon and the name, then Privacy · Terms, and Download in the accent. */
nav { display: flex; align-items: center; gap: 22px; padding-block: 28px; font: 500 14px/1 var(--hr-sans); }
nav .mark { display: flex; align-items: center; gap: 10px; margin-right: auto; font: 600 18px/1 var(--hr-sans);
            letter-spacing: -.01em; color: var(--hr-text); }
nav .mark img { width: 28px; height: 28px; display: block; }
nav .link { color: var(--hr-muted); }
nav .download { color: var(--hr-accent); font-weight: 600; }

/* Hero: a card on --hr-accent-bg (DESIGN.md › Aesthetic's one exception, outside the app). */
.hero { background: var(--hr-accent-bg); border-radius: var(--hr-radius-hero); padding: 56px;
        display: flex; align-items: center; gap: 48px; }
.hero-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.eyebrow { font: 500 12px/1 var(--hr-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--hr-accent); }
.eyebrow.quiet { color: var(--hr-muted); }
h1 { font: 600 52px/1.08 var(--hr-sans); letter-spacing: -.03em; text-wrap: balance; }
.doc h1 { font-size: 44px; line-height: 1.1; }
.lede { font: 400 18px/1.55 var(--hr-sans); color: var(--hr-muted); max-width: 640px; }
.get { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 6px; }
.hero-icon { width: 200px; height: 200px; flex: none; display: block; }

.button { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px;
          border-radius: var(--hr-radius-button); background: var(--hr-accent); color: var(--hr-on-accent);
          font: 600 15px/1 var(--hr-sans); white-space: nowrap; }
.button:hover { color: var(--hr-on-accent); filter: brightness(1.08); }
.meta { font: 500 12px/1.5 var(--hr-mono); color: var(--hr-muted); }

/* Each part of the app: a heading beside a paragraph, then the whole window at the column's width. */
.part { margin-top: 72px; display: flex; flex-direction: column; gap: 22px; }
.part-head { display: flex; gap: 48px; align-items: baseline; }
.part h2 { font: 600 28px/1.2 var(--hr-sans); letter-spacing: -.02em; width: 380px; flex: none; }
.part p { font: 400 17px/1.55 var(--hr-sans); color: var(--hr-muted); }
/* Clipped to the window's own corner (26pt at 1440, so 20 at 1120): the shots' corners were transparent. */
.window img { display: block; width: 100%; height: auto; aspect-ratio: 1440 / 900; border: 1px solid var(--hr-line);
              border-radius: 20px; }

/* The close: a panel on staying local, with Download again and the checksum. */
.local { margin-top: 72px; background: var(--hr-panel); border: 1px solid var(--hr-line);
         border-radius: var(--hr-radius-panel); padding: 32px 36px; display: flex; gap: 48px; align-items: center; }
.local-text { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.local h2 { font: 600 24px/1.2 var(--hr-sans); letter-spacing: -.02em; }
.local p { font: 400 16px/1.55 var(--hr-sans); color: var(--hr-muted); }
.sha { font: 500 11px/1.4 var(--hr-mono); color: var(--hr-faint); max-width: 380px; word-break: break-all; }

/* Privacy and terms: a plain document, one 720 column under the nav's left edge, sections split by hairlines.
   (Changed 2026-09-29 after review: a wash hero at 1120 over centred 760 cards gave two left edges, a mostly
   empty hero, and a box round every paragraph.) */
.document { width: min(720px, 100%); }
.document header { display: flex; flex-direction: column; gap: 14px; padding: 32px 0 40px; }
.document .lede { max-width: none; }
.document section { border-top: 1px solid var(--hr-line); padding: 28px 0; display: flex; flex-direction: column; gap: 8px; }
.document section h2 { font: 600 18px/1.3 var(--hr-sans); }
.document section p { font: 400 16px/1.65 var(--hr-sans); color: var(--hr-muted); }
.document b { color: var(--hr-text); font-weight: 600; }
.doc footer { margin-top: 40px; }

footer { margin-top: 72px; padding-block: 40px 64px; border-top: 1px solid var(--hr-line);
         display: flex; flex-direction: column; gap: 10px; font: 400 13px/1.5 var(--hr-sans); }
footer .links { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--hr-muted); }
footer .links a { color: var(--hr-muted); }
footer .tm { color: var(--hr-faint); font-size: 12px; }

/* Phone (the 390 frames): only Download in the nav, the hero stacked with no icon, headings over paragraphs. */
@media (max-width: 720px) {
  nav { padding-block: 20px; }
  nav .link { display: none; }
  .hero { padding: 32px 22px; display: block; }
  .hero-icon { display: none; }
  h1 { font-size: 34px; }
  .doc h1 { font-size: 34px; }
  .lede { font-size: 16px; }
  .part { margin-top: 44px; gap: 16px; }
  .part-head { flex-direction: column; gap: 8px; }
  .part h2 { width: auto; font-size: 22px; }
  .part p { font-size: 15px; }
  .window img { border-radius: 7px; }
  .local { margin-top: 44px; padding: 22px; flex-direction: column; align-items: stretch; gap: 16px; }
  .local h2 { font-size: 20px; }
  .local p { font-size: 15px; }
  .document header { padding: 12px 0 28px; }
  .document .lede { font-size: 17px; }
  .document section { padding: 22px 0; }
  footer { margin-top: 48px; padding-block: 28px 40px; }
  .doc footer { margin-top: 24px; }
}