/* SPDX-License-Identifier: AGPL-3.0-only
   Static website: no app CSS or JavaScript dependency. Colour, type, spacing
   and motion are a local subset of design-tokens/tokens.css, verified against
   the implemented day palette on 2026-10-04. Shared tokens stay unchanged. */
@font-face { font-family: 'Alegreya Sans'; src: url('fonts/AlegreyaSans-Regular-subset.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; size-adjust: 106%; }
@font-face { font-family: 'Alegreya Sans'; src: url('fonts/AlegreyaSans-Medium-subset.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; size-adjust: 106%; }
@font-face { font-family: 'Alegreya Sans'; src: url('fonts/AlegreyaSans-Bold-subset.woff2') format('woff2'); font-weight: 600 700; font-style: normal; font-display: swap; size-adjust: 106%; }
@font-face { font-family: 'Alegreya'; src: url('fonts/Alegreya-subset.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --surface-page: #faf8f4;
  --surface-soft: #f2f0ec;
  --surface-raised: #fffdf9;
  --ink: #212121;
  --ink-secondary: #494949;
  --line: #d5d3cf;
  --yellow: #f5a81c;
  --yellow-hover: #e09305;
  --night: #0b0e12;
  --night-ink: #e6eef6;
  --night-secondary: #9aa7b4;
  --night-line: #2c353f;
  --font-body: 'Alegreya Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Alegreya', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --radius-sm: 4px;
  --radius-lg: 12px;
  --radius-full: 9999px;
  --duration-normal: 180ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* Website composition; independent of the app's device layout. */
  --page-width: 1280px;
  --gutter: clamp(var(--space-5), 5.55vw, 80px);
  --section-space: clamp(var(--space-8), 8vw, 112px);
  --layout-gap: clamp(var(--space-6), 5vw, var(--space-8));
  --body-size: 20px;
  --small-size: 16px;
  --heading-size: clamp(40px, 4.6vw, 64px);
  --hero-size: clamp(56px, 6.7vw, 96px);
  --touch-size: 48px;
  --rule-width: 1px;
  --focus-width: 3px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: var(--space-5); }
body { margin: 0; background: var(--surface-page); color: var(--ink); font-family: var(--font-body); font-size: var(--body-size); line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: var(--rule-width); }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, summary:focus-visible { outline: var(--focus-width) solid currentColor; outline-offset: var(--space-1); border-radius: var(--radius-sm); }
::selection { background: var(--yellow); color: var(--ink); }
figure, p, h1, h2, h3, h4 { margin: 0; }
p { text-wrap: pretty; }
strong, b { font-weight: 600; }
h1, h2, h3, h4 { font-weight: 500; text-wrap: balance; }
h1, h2 { line-height: 1.02; letter-spacing: -.025em; }
h1 { font-size: var(--hero-size); }
h2 { font-size: var(--heading-size); }
h3 { font-size: 32px; line-height: 1.1; letter-spacing: -.015em; }
h4 { font-size: var(--body-size); }
.telling { font-family: var(--font-display); font-weight: 400; letter-spacing: -.025em; }
.wrap { width: calc(100% - var(--gutter) * 2); max-width: var(--page-width); margin-inline: auto; }
.section-space { padding-block: var(--section-space); }
.section-label { font-size: var(--small-size); color: var(--ink-secondary); margin-bottom: var(--space-5); }
.lead { font-size: clamp(22px, 2vw, 26px); line-height: 1.35; }
.small { font-size: var(--small-size); color: var(--ink-secondary); }
.text-link { display: inline-flex; align-items: center; gap: var(--space-3); min-height: var(--touch-size); font-weight: 500; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-5); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-5); padding: var(--space-3) var(--space-5); min-height: var(--touch-size); border: var(--rule-width) solid transparent; border-radius: var(--radius-full); text-decoration: none; font-weight: 500; white-space: nowrap; }
.button-primary { background: var(--yellow); color: var(--ink); }
.button-primary:hover { background: var(--yellow-hover); }
.button-outline { border-color: var(--ink); }
.button-outline:hover { background: var(--surface-soft); }
.skip-link { position: absolute; inset-inline-start: var(--space-5); inset-block-start: var(--space-4); transform: translateY(-200%); padding: var(--space-3) var(--space-5); background: var(--yellow); z-index: 5; }
.skip-link:focus { transform: none; }
.anchor { display: block; }
.mobile-only { display: none; }

/* Quiet navigation, without a collapsed JavaScript menu. */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); padding-block: var(--space-5); }
.brand { display: inline-flex; flex: none; align-items: center; min-height: var(--touch-size); }
.brand img { width: 139px; }
.nav-links { display: flex; align-items: center; gap: var(--space-6); font-size: 18px; }
.nav-links a { display: inline-flex; align-items: center; min-height: var(--touch-size); gap: var(--space-2); text-decoration: none; }
.nav-links a:hover { text-decoration: underline; }

/* A: one large, unembellished product view. */
.hero { padding-top: var(--space-7); }
.hero-intro { display: grid; grid-template-columns: 1.25fr 1fr; align-items: start; gap: var(--layout-gap); margin-bottom: var(--space-7); }
.hero-copy { max-width: 43ch; padding-top: var(--space-2); }
.hero-copy > p + p { margin-top: var(--space-4); color: var(--ink-secondary); }
.hero-copy .actions { margin-top: var(--space-5); }
.hero-copy .hero-note { margin-top: var(--space-4); }
.hero-product picture { display: block; }
.hero-product img { width: 100%; border-radius: var(--radius-lg); }
figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-3); font-size: var(--small-size); line-height: 1.4; color: var(--ink-secondary); }
figcaption a { flex: none; padding-block: var(--space-3); }
.caption-meta { margin-inline-start: var(--space-2); }

/* B: an ordinary photo becomes the larger illustration. */
.section-intro { display: grid; grid-template-columns: 1fr 1fr; gap: var(--layout-gap); align-items: end; margin-bottom: var(--space-7); }
.intro-copy { max-width: 47ch; color: var(--ink-secondary); }
.room-pair { display: grid; grid-template-columns: .53fr 1fr; gap: var(--layout-gap); align-items: center; }
.room-pair img { width: 100%; border-radius: var(--radius-sm); }
.room-before { padding-bottom: var(--space-7); }
.room-pair b { color: var(--ink); }
.image-note { display: grid; grid-template-columns: 1.65fr 1fr; gap: var(--layout-gap); align-items: center; margin-top: var(--space-6); padding-top: var(--space-5); border-top: var(--rule-width) solid var(--line); font-size: 18px; color: var(--ink-secondary); }
.image-note .text-link { justify-self: end; color: var(--ink); }

/* C: native radios, no timers or scripts. */
.light-story { background: var(--night); color: var(--night-ink); }
.light-story .section-label, .light-story .intro-copy, .light-story .small { color: var(--night-secondary); }
.room-preview { position: relative; min-width: 0; padding: 0; margin: 0; border: 0; }
.room-preview legend { padding: 0; margin-bottom: var(--space-4); color: var(--night-secondary); font-size: var(--small-size); }
.preview-radio { position: absolute; width: var(--rule-width); height: var(--rule-width); clip-path: inset(50%); }
.room-preview > label { display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch-size); padding: var(--space-2) var(--space-5); margin-right: var(--space-2); border: var(--rule-width) solid var(--night-line); border-radius: var(--radius-full); cursor: pointer; font-size: 18px; }
.preview-radio:checked + label { background: var(--night-ink); color: var(--night); border-color: var(--night-ink); }
.preview-radio:focus-visible + label { outline: var(--focus-width) solid var(--yellow); outline-offset: var(--space-1); }
.room-preview > label:hover { border-color: var(--night-ink); }
.preview-stage { display: grid; margin-top: var(--space-5); }
.preview-stage img { grid-area: 1 / 1; width: 100%; opacity: 0; visibility: hidden; border-radius: var(--radius-sm); transition: opacity var(--duration-normal) var(--ease-out); }
#preview-day:checked ~ .preview-stage .state-day,
#preview-evening:checked ~ .preview-stage .state-evening,
#preview-off:checked ~ .preview-stage .state-off { opacity: 1; visibility: visible; }
.preview-note { margin-top: var(--space-4); max-width: 85ch; }
/* The picture as the switch: the wall moment's layout on the night ground. */
.picture-moment { margin-top: var(--space-8); padding-top: var(--space-8); border-top: var(--rule-width) solid var(--night-line); }
.picture-moment h3 { font-size: var(--heading-size); }
.light-story .moment-copy p, .light-story figcaption { color: var(--night-secondary); }

/* D: a wide wall view, then a readable phone screen. */
.wall-moment { display: grid; grid-template-columns: .43fr 1fr; gap: var(--layout-gap); align-items: center; margin-top: var(--space-7); }
.moment-copy p { color: var(--ink-secondary); margin-top: var(--space-4); }
.moment-copy .text-link { margin-top: var(--space-4); }
.wall-moment img { border-radius: var(--radius-sm); }
.image-link { display: block; }
.hand-moment { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--layout-gap); margin-top: var(--space-8); padding-top: var(--space-8); border-top: var(--rule-width) solid var(--line); }
.phone-figure { justify-self: center; width: min(100%, 304px); }
.phone-figure img { border-radius: var(--radius-lg); }
.phone-figure figcaption { justify-content: center; }
.phone-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); justify-self: center; width: min(100%, 560px); }
.phone-pair .phone-figure { width: 100%; }
.phone-pair .phone-figure img { border: var(--rule-width) solid var(--line); }
.phone-pair .phone-figure + .phone-figure { margin-top: var(--space-8); }
.hand-moment h3 { font-size: var(--heading-size); margin-top: var(--space-4); }
.hand-moment .moment-copy { max-width: 43ch; }

/* E: an editorial pause. */
.about { background: var(--surface-soft); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--layout-gap); }
.free-line { display: inline-block; margin-top: var(--space-6); padding-bottom: var(--space-2); border-bottom: var(--focus-width) solid var(--yellow); }
.about-copy > p + p { margin-top: var(--space-5); color: var(--ink-secondary); }
.about-copy .beta-note { border-top: var(--rule-width) solid var(--line); padding-top: var(--space-5); font-size: 18px; }

/* F: two household choices; packaging stays within the server path. */
.install-intro { margin-bottom: var(--space-8); }
.install-intro .button { margin-top: var(--space-5); }
.setup-path { display: grid; grid-template-columns: .65fr 1fr; gap: var(--layout-gap); padding-block: var(--space-7); border-top: var(--rule-width) solid var(--line); }
.path-heading h3 { margin-top: var(--space-2); }
.path-copy > p { color: var(--ink-secondary); max-width: 55ch; }
.path-copy .actions { margin-top: var(--space-5); }
.ha-paths { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-6); }
.ha-paths p { margin-block: var(--space-2); font-size: 18px; color: var(--ink-secondary); }
.ha-paths .text-link { font-size: 18px; }
.setup-guide { display: block; width: fit-content; min-height: var(--touch-size); padding-block: var(--space-3); }
.practical-notes { margin-top: var(--space-5); }
details { border-top: var(--rule-width) solid var(--line); }
details:last-child { border-bottom: var(--rule-width) solid var(--line); }
summary { cursor: pointer; padding-block: var(--space-5); font-weight: 500; }
details > p { max-width: 75ch; margin-bottom: var(--space-5); color: var(--ink-secondary); }
.site-footer { background: var(--surface-soft); padding-block: var(--space-7); }
.footer-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-5); margin-bottom: var(--space-6); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: 18px; }
.footer-links a { display: inline-flex; align-items: center; min-height: var(--touch-size); }
.site-footer p { max-width: 100ch; font-size: var(--small-size); color: var(--ink-secondary); }
.site-footer p + p { margin-top: var(--space-4); }

@media (max-width: 1100px) {
  .hero-intro { grid-template-columns: 1.1fr 1fr; }
  .hero-copy .actions { gap: var(--space-3) var(--space-5); }
  .hero-copy .button { gap: var(--space-4); padding-inline: var(--space-4); }
  .hero-copy .text-link { font-size: 18px; }
  .setup-path { grid-template-columns: .8fr 1.2fr; }
  .ha-paths { grid-template-columns: 1fr; }
  .wall-moment { grid-template-columns: 1fr; }
  .wall-moment .moment-copy { display: grid; grid-template-columns: 1fr 1.6fr; gap: 0 var(--space-6); }
  .wall-moment .moment-copy p { margin-top: 0; }
  .wall-moment .text-link { grid-column: 2; }
}
@media (min-width: 768px) and (max-width: 1000px) {
  .hero-intro { grid-template-columns: 1fr; gap: var(--space-5); }
  .hero h1 br { display: none; }
  .hero h1 .telling { display: inline-block; margin-left: var(--space-3); }
  .hero-copy { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-6); max-width: none; padding-top: 0; }
  .hero-copy > p + p, .hero-copy .actions, .hero-copy .hero-note { margin-top: 0; }
  .hero-copy .hero-note { align-self: center; }
}
@media (max-width: 767px) {
  :root { --gutter: var(--space-5); }
  .hero { padding-top: var(--space-6); }
  .hero-intro, .section-intro, .about-grid, .setup-path { grid-template-columns: 1fr; gap: var(--space-5); }
  .hero-copy { padding-top: 0; max-width: 100%; }
  .hero-intro { margin-bottom: var(--space-6); }
  .hero-copy .lead { max-width: 32ch; }
  .section-label { margin-bottom: var(--space-4); }
  .section-intro { margin-bottom: var(--space-6); }
  .room-pair { grid-template-columns: 1fr; gap: var(--space-5); }
  .room-before { width: 80%; padding: 0; }
  .room-after { margin-left: var(--space-5); }
  .image-note { grid-template-columns: 1fr; gap: var(--space-2); font-size: var(--small-size); }
  .image-note .text-link { justify-self: start; font-size: 18px; }
  .wall-moment .moment-copy { display: block; }
  .wall-moment .moment-copy p { margin-top: var(--space-4); }
  .wall-moment { margin-top: var(--space-6); gap: var(--space-5); }
  .picture-moment { margin-top: var(--space-7); padding-top: var(--space-7); }
  .picture-moment h3 { font-size: 36px; }
  .hand-moment { gap: var(--space-5); }
  .hand-moment .moment-copy { font-size: 18px; }
  .hand-moment h3 { font-size: 36px; }
  .free-line { margin-top: var(--space-5); }
  .setup-path { padding-block: var(--space-6); }
  .ha-paths { gap: var(--space-5); }
  .footer-top { align-items: start; }
}
@media (max-width: 599px) {
  :root { --hero-size: clamp(48px, 12.8vw, 72px); --heading-size: clamp(38px, 10vw, 52px); }
  .site-header { padding-block: var(--space-4); gap: var(--space-4); }
  .brand img { width: 116px; }
  .nav-docs { display: none !important; }
  .nav-links { gap: var(--space-4); font-size: 18px; }
  .hero { padding-top: var(--space-5); }
  .hero-copy .lead { font-size: 22px; }
  .hero-copy .actions { gap: var(--space-4); }
  .hero-copy > p + p { font-size: 18px; }
  .hero-copy .hero-note { font-size: var(--small-size); }
  .hero-product img { border-radius: var(--radius-sm); }
  .desktop-only { display: none; }
  .mobile-only { display: inline; }
  figcaption { flex-wrap: wrap; gap: 0 var(--space-3); }
  .hero-product figcaption { align-items: center; }
  .hero-product figcaption > span { max-width: 21ch; }
  .caption-meta { display: block; margin: 0; }
  .room-after { margin-left: 0; }
  .room-preview > label { padding-inline: var(--space-4); margin-right: var(--space-1); }
  .hand-moment { grid-template-columns: 1fr; gap: var(--space-6); margin-top: var(--space-7); padding-top: var(--space-7); }
  .hand-moment .moment-copy { grid-row: 1; font-size: var(--body-size); }
  .hand-moment h3 { font-size: var(--heading-size); }
  .hand-moment .moment-copy > .small { margin-top: 0; }
  .phone-figure { width: min(100%, 304px); }
  .phone-pair { gap: var(--space-4); }
  .phone-pair .phone-figure + .phone-figure { margin-top: var(--space-7); }
  .picture-moment h3 { font-size: var(--heading-size); }
  .ha-paths { grid-template-columns: 1fr; }
  .setup-path .actions { align-items: start; flex-direction: column; gap: var(--space-2); }
  .footer-links { gap: var(--space-1) var(--space-5); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .preview-radio:checked + label { outline: var(--focus-width) solid Highlight; }
  .button { border-color: ButtonText; }
}