/* HeadSense — THE GREEN LAMP, per Docs/apps/headsense-style-card.md (ruled 2026-08-07,
   type amended 2026-08-09). The site is the same dim room as the app: warm near-black with
   zero blue cast, one green light, and nothing that glares.

   Two things here follow the app rather than the previous version of this page. Display type
   is New York, the system serif, because the type amendment moved every display element to it
   and the page was still setting headings in SF Pro Rounded. And the page has no cards: THE
   BEDSIDE RECORD replaced the app's cards with a ruled page, and rounded surface boxes on the
   marketing site were advertising a design the app no longer has. The rule is the structural
   unit here too. */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ---- Tokens. Dark is the base because the dim room is the app's primary state, not its
   alternate. "Dim the room" in the header writes data-theme to override the system. ---- */
:root {
  --ground: #141210;
  --surface: #1C1916;
  --ink: #E8E2D8;
  --dim: #9A9285;
  --faint: #6E675C;
  --lamp: #7FA886;
  --lamp-soft: rgba(127, 168, 134, .16);
  --calm: #7FA886;
  --amber: #C89B5A;
  --ember: #B0563C;
  --rule: #2E2823;
  --rule-faint: #221E1A;
  --glow: .34;
  --phone-shadow: rgba(0, 0, 0, .55);
  --grain: rgba(232, 226, 216, .045);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground: #F4F0E8;
    --surface: #FBF8F2;
    --ink: #26221C;
    --dim: #6E675C;
    --faint: #8B8375;
    --lamp: #5E8A68;
    --lamp-soft: rgba(94, 138, 104, .13);
    --calm: #5E8A68;
    --amber: #A87932;
    --ember: #9A452C;
    --rule: #D8D1C3;
    --rule-faint: #E6E0D4;
    --glow: .20;
    --phone-shadow: rgba(38, 34, 28, .22);
    --grain: rgba(38, 34, 28, .04);
  }
}

:root[data-theme="light"] {
  --ground: #F4F0E8;
  --surface: #FBF8F2;
  --ink: #26221C;
  --dim: #6E675C;
  --faint: #8B8375;
  --lamp: #5E8A68;
  --lamp-soft: rgba(94, 138, 104, .13);
  --calm: #5E8A68;
  --amber: #A87932;
  --ember: #9A452C;
  --rule: #D8D1C3;
  --rule-faint: #E6E0D4;
  --glow: .20;
  --phone-shadow: rgba(38, 34, 28, .22);
  --grain: rgba(38, 34, 28, .04);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  background: var(--ground);
  color: var(--ink);
  line-height: 1.65;
  font-family: -apple-system, "SF Pro Text", system-ui, sans-serif;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The paper's tooth, the same fine warm dot the app tiles across its ground. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(circle at 1px 1px, var(--grain) 1px, transparent 0);
  background-size: 4px 4px;
}

body > * { position: relative; z-index: 1; }

.serif { font-family: ui-serif, "New York", Georgia, "Times New Roman", serif; }

.wrap { max-width: 1000px; margin: 0 auto; padding: 0 24px; }
.measure { max-width: 60ch; }

a { color: var(--lamp); text-underline-offset: 3px; }
a:focus-visible,
button:focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; border-radius: 2px; }

/* ---- The rule, the app's structural unit ---- */
.rule { height: 2px; background: var(--rule); border: 0; }
.rule.faint { background: var(--rule-faint); }

/* ---- Labels, set in the app's small-caps voice ---- */
.label {
  font-family: ui-serif, "New York", Georgia, serif;
  font-style: italic;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lamp);
}

/* ---- Dim the room: the site's one interactive element, and the app's own control ---- */
.roomctl {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.roomctl .what { font-size: 14px; color: var(--faint); }
.roomctl .opts { display: flex; gap: 4px; }
.roomctl button {
  font: inherit;
  font-size: 14px;
  font-family: -apple-system, "SF Pro Rounded", system-ui, sans-serif;
  color: var(--dim);
  background: transparent;
  border: 1px solid var(--rule);
  padding: 8px 15px;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.roomctl button:first-child { border-radius: 999px 0 0 999px; }
.roomctl button:last-child { border-radius: 0 999px 999px 0; }
.roomctl button + button { border-left: 0; }
.roomctl button:hover { color: var(--ink); }
.roomctl button[aria-pressed="true"] {
  color: var(--lamp);
  border-color: var(--lamp);
  background: var(--lamp-soft);
}
.roomctl button[aria-pressed="true"] + button { border-left: 1px solid var(--lamp); }

/* ---- Hero: the lamp falls from above the frame, exactly as it does in the app ---- */
.hero {
  position: relative;
  text-align: center;
  padding: 76px 24px 0;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -22%;
  transform: translateX(-50%);
  width: min(1100px, 135vw);
  height: 820px;
  pointer-events: none;
  background: radial-gradient(closest-side,
    rgba(127, 168, 134, var(--glow)),
    rgba(127, 168, 134, calc(var(--glow) * .28)) 46%,
    transparent 72%);
}
.hero > * { position: relative; }

.hero .eyebrow {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--lamp);
}

h1 {
  font-family: ui-serif, "New York", Georgia, serif;
  font-size: clamp(38px, 7vw, 74px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.02;
  margin: 20px auto 0;
  max-width: 15ch;
  text-wrap: balance;
}

.hero .sub {
  font-size: clamp(16px, 2.2vw, 19px);
  color: var(--dim);
  max-width: 54ch;
  margin: 20px auto 0;
}

.hero .roomctl { margin-top: 36px; }

.store {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 30px;
  padding: 14px 28px;
  border: 1px solid var(--lamp);
  border-radius: 999px;
  color: var(--lamp);
  font-family: -apple-system, "SF Pro Rounded", system-ui, sans-serif;
  font-size: 16px;
  text-decoration: none;
  transition: background-color .18s ease;
}
.store:hover { background: var(--lamp-soft); }
.store .free {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---- The record, shown as a page rather than inside a device.

   Full-device captures are 1:2.17. At any width that fits a hero, the app's own type shrinks
   to unreadable noise, the frame swallows the section, and the simulator's status bar and
   notch come along for the ride. The app is a page, so it is shown as a page: cropped below
   the chrome, wide enough to actually read "One, and it was bad." ---- */
/* Both files ship; CSS picks the one matching the room, so the swap needs no script and is
   already right for a visitor who never touches the control. */
.shot-light { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .shot-dark { display: none; }
  :root:not([data-theme="dark"]) .shot-light { display: block; }
}
:root[data-theme="light"] .shot-dark { display: none; }
:root[data-theme="light"] .shot-light { display: block; }
:root[data-theme="dark"] .shot-dark { display: block; }
:root[data-theme="dark"] .shot-light { display: none; }

/* ---- Sections ---- */
section { padding: 92px 0; }
.hero + section { padding-top: 78px; }

h2 {
  font-family: ui-serif, "New York", Georgia, serif;
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.12;
  margin-top: 14px;
  text-wrap: balance;
}

p.lead { color: var(--dim); font-size: 17.5px; margin-top: 14px; }

/* ---- What it does: ruled entries with a tally mark, the way an entry reads in the app.
   The marks climb the intensity ramp, so the section is also the scale being taught. ---- */
.entries { margin-top: 40px; }

.entry {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 0 20px;
  padding: 26px 0;
  align-items: start;
}
.entry h3 {
  font-family: ui-serif, "New York", Georgia, serif;
  font-size: 21px;
  font-weight: 600;
  margin-bottom: 6px;
}
.entry p { color: var(--dim); font-size: 16px; max-width: 56ch; }

.marks { display: flex; gap: 4px; padding-top: 7px; }
.mark { width: 6px; height: 26px; border-radius: 3px; }
.mark.calm  { background: var(--calm);  box-shadow: 0 0 10px rgba(127, 168, 134, .5); }
.mark.amber { background: var(--amber); box-shadow: 0 0 10px rgba(200, 155, 90, .45); }
.mark.ember { background: var(--ember); box-shadow: 0 0 10px rgba(176, 86, 60, .45); }

/* ---- A page from the record, shown flat rather than inside another phone bezel. The
   report is a page in the app's own words, so it is presented as one: no second device
   mockup, and the fragment starts below the sheet's chrome. ---- */
.paper {
  margin: 44px 0 0;
  max-width: 680px;
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 34px 80px var(--phone-shadow);
}
.paper img { display: block; width: 100%; }
.paper figcaption {
  padding: 14px 20px 16px;
  border-top: 1px solid var(--rule);
  color: var(--faint);
  font-size: 14px;
  font-family: ui-serif, "New York", Georgia, serif;
  font-style: italic;
}

/* Declared after .paper on purpose: both are single-class selectors, so source order decides,
   and the shared margin above would otherwise cancel this centering. */
.hero-paper { margin-top: 54px; margin-inline: auto; }
.hero-paper figcaption { text-align: center; }

/* ---- The ledger. Dotted leaders, because the page is still a record. ---- */
.ledger { margin-top: 38px; max-width: 560px; }
.ledger .r {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 13px 0;
  font-size: 16.5px;
  border-bottom: 2px solid var(--rule-faint);
}
.ledger .r .fill { flex: 1; border-bottom: 1px dotted var(--rule); transform: translateY(-5px); }
.ledger .r .v {
  color: var(--dim);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ledger .r.hot .v { color: var(--lamp); }

.afterledger { color: var(--dim); font-size: 16px; margin-top: 26px; max-width: 60ch; }

/* ---- Footer ---- */
footer { border-top: 2px solid var(--rule); padding: 46px 24px 70px; text-align: center; color: var(--dim); }
footer nav { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; font-size: 15px; margin-bottom: 22px; }
footer .fine { font-size: 13px; color: var(--faint); line-height: 1.75; }

/* ---- Legal pages, on the same ruled page ---- */
.legal { max-width: 680px; margin: 0 auto; padding: 72px 24px 96px; }
.legal h1 {
  font-size: clamp(32px, 5vw, 44px);
  max-width: none;
  margin: 0 0 6px;
  text-align: left;
}
.legal .updated {
  color: var(--faint);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 40px;
  padding-bottom: 22px;
  border-bottom: 2px solid var(--rule);
}
.legal h2 {
  font-size: 15px;
  font-family: ui-serif, "New York", Georgia, serif;
  font-style: italic;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lamp);
  margin: 40px 0 10px;
}
.legal p, .legal li { color: var(--dim); font-size: 16.5px; }
.legal ul { padding-left: 22px; margin: 12px 0; }
.legal li { margin-bottom: 4px; }
.legal .back { display: inline-block; margin-top: 48px; font-size: 15px; }

@media (max-width: 720px) {
  .paper { margin-top: 34px; }
  section { padding: 68px 0; }
  .entry { grid-template-columns: 38px 1fr; gap: 0 16px; }
}