@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

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

:root {
  --bg: #0a0a0b;
  --bg-raised: #111113;
  --bg-card: #16161a;
  --text: #ededef;
  --text-sec: #8a8a9a;
  --text-dim: #56566a;
  --border: rgba(255,255,255,.06);
  --accent: #5aad6f;
  --accent-dim: rgba(90,173,111,.12);
  --font: 'Inter', -apple-system, system-ui, sans-serif;
}

html {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body { min-height: 100vh; }

a { color: var(--accent); text-decoration: none; }
a:hover { opacity: .8; }

/* ── nav ── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: 56px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 32px;
  background: rgba(10,10,11,.7);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
}

/* Idle mode (home page, immersive clock view): the nav stays put
   now - only the centre composition (clock + hero text) responds to
   the idle class. Earlier this rule slid the nav up via
   `translateY(-100%)`; removed so the top menu stays accessible. */

.nav-logo {
  display: flex; align-items: center; gap: 14px;
  text-decoration: none;
}

.nav-logo .logo-mark { display: flex; flex-direction: column; gap: 0; }

.logo-clock {
  display: grid; grid-template-columns: 1fr 1fr; width: 16px; height: 16px; gap: 0;
}
.logo-clock span:nth-child(1) { background: #333; }
.logo-clock span:nth-child(2) { background: #666; }
.logo-clock span:nth-child(3) { background: #666; }
.logo-clock span:nth-child(4) { background: #ccc; }

.logo-cal {
  display: grid; grid-template-columns: repeat(4,1fr); width: 16px; height: 16px; gap: 0;
}
.logo-cal span { display: block; }
.logo-cal span:nth-child(1)  { background: #555; }
.logo-cal span:nth-child(2)  { background: #666; }
.logo-cal span:nth-child(3)  { background: #888; }
.logo-cal span:nth-child(4)  { background: #666; }
.logo-cal span:nth-child(5)  { background: #666; }
.logo-cal span:nth-child(6)  { background: #888; }
.logo-cal span:nth-child(7)  { background: #aaa; }
.logo-cal span:nth-child(8)  { background: #888; }
.logo-cal span:nth-child(9)  { background: #888; }
.logo-cal span:nth-child(10) { background: #aaa; }
.logo-cal span:nth-child(11) { background: #ddd; }
.logo-cal span:nth-child(12) { background: #aaa; }
.logo-cal span:nth-child(13) { background: #666; }
.logo-cal span:nth-child(14) { background: #888; }
.logo-cal span:nth-child(15) { background: #aaa; }
.logo-cal span:nth-child(16) { background: #888; }

.nav-logo .logo-text {
  font-size: 14px; font-weight: 600; color: var(--text);
  letter-spacing: -.01em;
}

.nav-links {
  margin-left: 14px;
  display: flex; gap: 14px; list-style: none;
}

.nav-links a {
  font-size: 13px; font-weight: 400;
  color: var(--text-sec);
  transition: color .15s;
}
.nav-links a:hover { color: var(--text); opacity: 1; }
.nav-links a.current {
  color: #fff;
  font-weight: 600;
  opacity: 1;
}

/* ── hero ── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center;
  overflow: hidden;
  padding: 0 32px;
  text-transform: lowercase;
}

.hero-bg {
  position: absolute; inset: 0;
  background-color: #000;
  background-image: url('/images/milkyway.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 55%, var(--bg) 92%);
  z-index: 2;
  pointer-events: none;
}

/* ── Lightning bolt over the galaxy ───────────────────────────────
   Sits below the pointer trails (clock SVG, z-index 1) but above
   the galaxy bg. Hidden by default; the .active class triggers a
   short, jittery 0.5 s flash. Fired by JS at the midpoint (1 s in)
   of every 2 s idle/fullscreen toggle. */
.hero-lightning {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: clamp(60px, 14vmin, 140px);
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
}
.hero-lightning svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hero-lightning .bolt {
  fill: none;
  stroke: #d8ecff;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px #9ec8ff) drop-shadow(0 0 14px #4a9bff);
  vector-effect: non-scaling-stroke;
}
.hero-lightning .bolt-back { stroke: #6aaaff; stroke-width: 6; opacity: .55; }
.hero-lightning .bolt-main { stroke: #f1f7ff; stroke-width: 2; }
.hero-lightning .bolt-fork { stroke: #c7e0ff; stroke-width: 1.4; opacity: .85; }

.hero-lightning.active {
  animation: hero-bolt 500ms steps(20, end);
}
/* Stepped flicker: opacity jumps between bright / dim / off to mimic
   electric arc strobing. Peak opacity is 0.5 (50% translucent over
   the galaxy) so the bolt blends into the sky instead of dominating.
   Final keyframe leaves it invisible. */
@keyframes hero-bolt {
   0% { opacity: 0;     transform: translateY(-50%) translateX(0); }
   8% { opacity: .5;    transform: translateY(-50%) translateX(-4px); }
  16% { opacity: .125;  transform: translateY(-50%) translateX(2px); }
  24% { opacity: .5;    transform: translateY(-50%) translateX(-2px); }
  36% { opacity: .275;  transform: translateY(-50%) translateX(3px); }
  48% { opacity: .5;    transform: translateY(-50%) translateX(-1px); }
  60% { opacity: .175;  transform: translateY(-50%) translateX(2px); }
  72% { opacity: .425;  transform: translateY(-50%) translateX(-3px); }
  84% { opacity: .075;  transform: translateY(-50%) translateX(1px); }
  100% { opacity: 0;    transform: translateY(-50%) translateX(0); }
}

/* ── hero clock (live SVG day view) ── */
.hero-clock {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 1;
}
.hero-clock > * {
  grid-area: 1 / 1;
}
.hero-clock svg {
  width: 82vmin;
  height: 82vmin;
  max-width: 720px;
  max-height: 720px;
  opacity: 1;
}
/* Clock size no longer responds to body.idle - it stays at the
   default 82vmin (capped 720 px) at all times. The previous
   `body.idle .hero-clock svg { width: 96vmin; height: 96vmin; ... }`
   rule was removed. */
/* Conic RGB backdrop - red at bottom (hour 0), cyan at top (hour 12),
   matching the pointer color mapping. */
.rh-rgb {
  width: 82vmin;
  height: 82vmin;
  max-width: 720px;
  max-height: 720px;
  border-radius: 4px;
  background: conic-gradient(
    from 0deg at 50% 50%,
    hsl(180, 70%, 55%)   0%,    /* cyan (top, hour 12) */
    hsl(225, 70%, 55%)  12%,
    hsl(270, 70%, 55%)  25%,    /* purple (right, hour 18) */
    hsl(315, 70%, 55%)  38%,
    hsl(0,   80%, 55%)  50%,    /* RED (bottom, hour 0) */
    hsl(40,  75%, 55%)  62%,
    hsl(90,  70%, 55%)  75%,    /* yellow-green (left, hour 6) */
    hsl(135, 70%, 55%)  88%,
    hsl(180, 70%, 55%) 100%     /* back to cyan */
  );
  opacity: 0.5;
  filter: blur(44px);
  /* Mask: fade out toward center so the digital + title stay clean.
     Central transparent radius bumped 10% (18% → 20%) - a slightly
     wider quiet zone around the dial centre. */
  -webkit-mask: radial-gradient(circle at center, transparent 20%, black 70%);
          mask: radial-gradient(circle at center, transparent 20%, black 70%);
}
/* `body.idle .rh-rgb` size override also removed - conic backdrop
   stays at its default 82vmin / 720 px to match the clock. */
.rh-ticks line { vector-effect: non-scaling-stroke; }
.rh-nums text { font-feature-settings: "tnum" 1; }

/* Hour / Minute / Second pointer fans - RGB-tinted, near-solid.
   Front-most pointer is most opaque; hour (outermost, drawn first) is
   the most receded, second (innermost, drawn last on top) is the most
   prominent. */
.rh-h-ptr { fill-opacity: 0.55; }
.rh-m-ptr { fill-opacity: 0.65; }
.rh-s-ptr { fill-opacity: 0.75; }
.rh-h-tip { fill-opacity: 1; }
.rh-m-tip { fill-opacity: 1; }
.rh-s-tip { fill-opacity: 1; }
/* Hour dial (outer frame + ticks + numbers) stays visible at all
   times now - clock face is rigid in both idle and non-idle states. */

/* Second pointer tip: in fullscreen the tip doubles (4.5 → 9). */
.rh-s-tip {
  transition: r 2000ms cubic-bezier(.65, 0, .35, 1);
}
body.idle .rh-s-tip { r: 9; }

/* Slower-hand markers (.rh-m-mark / .rh-h-mark): hidden by default,
   grow to r=9 in fullscreen. cx/cy/fill are updated each frame from
   JS so they ride the minute and hour pointer angles at the second-
   dial radius. */
.rh-m-mark,
.rh-h-mark {
  fill-opacity: 0.9;
  transition: r 2000ms cubic-bezier(.65, 0, .35, 1);
}
body.idle .rh-m-mark,
body.idle .rh-h-mark { r: 9; }


/* Second-dial digit labels (00 / 15 / 30 / 45 text inside .rh-min)
   stay visible at all times now - the clock face is rigid in both
   idle and non-idle states. */

.hero-time {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  margin: 0;
  font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  font-size: 20px;
  color: #fff;
  letter-spacing: 0.18em;
  font-feature-settings: "tnum" 1;
  text-shadow: 0 1px 12px rgba(0,0,0,.5);
  pointer-events: none;
  transition: opacity 2000ms cubic-bezier(.65, 0, .35, 1);
  /* Vertically CENTRED in the band between the hour-dial perimeter
     (~36 vmin from centre) and the minute-pointer trajectory
     (~28 vmin from centre). `translate(-50%, -50%)` centres the
     time element on the offset point (instead of placing its top
     edge there). min() caps the offset when the clock hits its
     720 px max so the readout stays inside the dial face. */
  transform: translate(-50%, -50%);
  top: calc(50% - min(32vmin, 280px));
}

.hero h1 { text-shadow: 0 2px 32px rgba(0,0,0,.7); }
.hero .tagline { text-shadow: 0 1px 20px rgba(0,0,0,.6); }

/* Hero title: IBM Plex Mono. */
.hero-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  margin: 0;
  font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  text-transform: none;
  text-shadow: 0 2px 32px rgba(0,0,0,.7);
  transition: opacity 2000ms cubic-bezier(.65, 0, .35, 1);
}
.hero-title .o {
  color: #fff;
  font-weight: 500;
}

/* Hero top (live clock readout, sits above the dial) */
/* Hero bottom - hosts the identity selector ("continue as
   [human] [agent]"). Vertically CENTRED in the band between the
   minute-pointer trajectory (~28 vmin from centre) and the hour-
   dial perimeter (~36 vmin from centre) below centre - mirrors
   `.hero-time` above. `translateY(-50%)` centres the strip on the
   offset point (we can't translateX since the strip is full-width). */
.hero-bottom {
  position: absolute;
  top: calc(50% + min(32vmin, 280px));
  transform: translateY(-50%);
  left: 0; right: 0;
  text-align: center;
  z-index: 4;
  padding: 0 32px;
  pointer-events: none;
  transition: opacity 2000ms cubic-bezier(.65, 0, .35, 1);
}
.hero-bottom > * { pointer-events: auto; }

.hero .tagline,
.hero .sub-name,
.hero .sub-role {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  margin: 0;
  font-size: 18px; font-weight: 300;
  color: #fff;
  letter-spacing: .01em;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 2000ms cubic-bezier(.65, 0, .35, 1);
  line-height: 1.5;  /* predictable line spacing for the 2-line tagline */
  text-align: center;
}
/* Mirror layout around the title - both 2-line blocks (tagline above,
   Rhythmographer + profession below) sit CENTRED in the band between
   the dial centre and the second-dial perimeter (~20 vmin from
   centre). Px caps lock the position when the clock hits its 720 px
   max so the text stays inside the dial face.
     above - 2-line tagline       (block centered at −10 vmin / −90 px)
     centre - RHYTHMoGRAPHY
     below - Rhythmographer       (single line)
             profession ...       (single line, abutting sub-name)
   Tagline block + sub-name/sub-role pair are mirror-symmetric. */
.hero .tagline  {
  /* tagline top = −(sub-name top + 54 px) so the 2-line tagline
     mirrors the sub-name + sub-role 2-line block exactly across the
     dial centre, regardless of viewport size. */
  top: calc(50% - min(7vmin, 63px) - 54px);
  white-space: normal;  /* override the group's `nowrap` - allow the <br> to wrap */
  width: max-content;
}

/* Three-line identity stack - each line shifted up one band, then
   raised an additional half-line-height (~9 px) for tighter optical
   alignment with the surrounding clock geometry.
     line 1 (Rhythmographer)        - above hour pointer
     line 2 (profession ...)        - between hour and minute
     line 3 (trainings ...)         - between minute and second
   Clamped on very large viewports. */
.hero .sub-name { top: calc(50% + min(7vmin, 63px)); }
/* sub-role abuts sub-name exactly - one line-height (27 px) below
   - so the two read as a contiguous block mirroring the tagline. */
.hero .sub-role { top: calc(50% + min(7vmin, 63px) + 27px); }

/* Identity selector - the funnel's minimum goal. A small "continue
   as" label, followed by two pill buttons. Click sets rh-identity in
   localStorage, scrolls to content, and highlights the selected
   button so the choice persists visually across visits. */
.hero-id-label {
  font-family: inherit;
  font-size: 18px; font-weight: 300;
  color: #fff;
  letter-spacing: .04em;
  text-transform: lowercase;
  margin-right: 10px;
  vertical-align: middle;
  pointer-events: none;
}
.hero-id-pill {
  display: inline-block;
  margin: 0 4px;
  font-family: inherit;
  font-size: 18px; font-weight: 400;
  color: #fff;
  letter-spacing: .04em;
  text-transform: lowercase;
  border: 1px solid rgba(255,255,255,.30);
  background: transparent;
  padding: 8px 22px;
  border-radius: 22px;
  cursor: pointer;
  vertical-align: middle;
  transition: color .2s, border-color .2s, background .2s;
}
.hero-id-pill:hover {
  border-color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.08);
}
.hero-id-pill.selected {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.hero-id-pill.selected:hover {
  border-color: var(--accent);
  background: var(--accent);
  opacity: 0.9;
}

/* Fullscreen mode (body.idle, toggled by clicking the galaxy bg) hides
   all hero text so only the live clock + galaxy + bolt remain. Same
   2 s ease-in-out as the rest of the hero. */
body.idle .hero-time,
body.idle .hero-title,
body.idle .hero .tagline,
body.idle .hero .sub-name,
body.idle .hero .sub-role,
body.idle .hero-bottom {
  opacity: 0;
}
body.idle .hero-bottom { pointer-events: none; }

/* ── section ── */
.section {
  padding: 20px 32px;
  max-width: 820px;
  /* Centered on the page; on big screens the section sits in the
     middle of the viewport. */
  margin: 0 auto;
}

.section .eyebrow {
  font-size: 13px; font-weight: 500;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}

.section h2 {
  font-size: 36px; font-weight: 600;
  letter-spacing: -.03em; line-height: 1.1;
  margin-bottom: 18px;
}

.section p {
  font-size: 17px; font-weight: 300;
  color: var(--text-sec); line-height: 1.6;
  margin-bottom: 14px;
}

.section p:last-of-type { margin-bottom: 0; }

.section .highlight {
  color: var(--text);
  font-weight: 400;
}

/* ── band (full-bleed image) ── */
/* ── skylight grids (CSS logo/illustration) ── */
.skylight-pair {
  display: flex; gap: 0; align-items: flex-start;
  margin: 48px 0;
}

.sky-clock {
  display: grid; grid-template-columns: 1fr 1fr;
  width: 120px; height: 120px; gap: 0;
}
.sky-clock span:nth-child(1) { background: #2a2a2a; }
.sky-clock span:nth-child(2) { background: #555; }
.sky-clock span:nth-child(3) { background: #555; }
.sky-clock span:nth-child(4) { background: #bbb; }

.sky-cal {
  display: grid; grid-template-columns: repeat(4,1fr);
  width: 120px; height: 120px; gap: 0;
}
.sky-cal span { display: block; }
.sky-cal span:nth-child(1)  { background: #444; }
.sky-cal span:nth-child(2)  { background: #555; }
.sky-cal span:nth-child(3)  { background: #777; }
.sky-cal span:nth-child(4)  { background: #555; }
.sky-cal span:nth-child(5)  { background: #555; }
.sky-cal span:nth-child(6)  { background: #777; }
.sky-cal span:nth-child(7)  { background: #aaa; }
.sky-cal span:nth-child(8)  { background: #777; }
.sky-cal span:nth-child(9)  { background: #777; }
.sky-cal span:nth-child(10) { background: #aaa; }
.sky-cal span:nth-child(11) { background: #ddd; }
.sky-cal span:nth-child(12) { background: #aaa; }
.sky-cal span:nth-child(13) { background: #555; }
.sky-cal span:nth-child(14) { background: #777; }
.sky-cal span:nth-child(15) { background: #aaa; }
.sky-cal span:nth-child(16) { background: #777; }

.skylight-label {
  font-size: 11px; text-align: center;
  color: var(--text-dim); margin-top: 8px;
  letter-spacing: .04em;
}

/* ── scale row ── */
/* Scale-row cells (Clock/Day · Calendar/Year · Tower/Century · City/History).
   Styled to match the pro-page system-map cells (.sm-cell): square 200 px,
   raised bg-card, rounded 14 px, hover lift + accent border. The icon (the
   large geometric Unicode glyph) takes the visual role of .sm-symbol. */
.scale-row {
  /* Mirrors `.sm-cells` on /pro: flex row, compact gap, wraps below
     mobile. */
  display: flex;
  gap: 12px;
  margin: 24px 0;
}

.scale-item {
  /* Matches `.sm-cell` styling: small, fit-to-content tile. */
  flex: 0 0 auto;
  min-width: 130px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 2px;
  text-align: center;
  color: var(--text);
  transition: border-color .25s, transform .25s, background .25s;
}
.scale-item:hover {
  border-color: var(--accent);
  background: rgba(90, 173, 111, 0.04);
  transform: translateY(-3px);
}

.scale-item .icon {
  /* Matches `.sm-symbol` (36px, light weight, centred). */
  font-size: 36px;
  font-weight: 300;
  line-height: 1;
  align-self: center;
  color: var(--text);
  margin: 4px 0;
}

.scale-item h4 {
  /* Matches `.sm-name`. */
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.01em;
  margin: 0;
}

.scale-item .span {
  /* Matches `.sm-brand`. */
  font-size: 11px;
  color: var(--accent);
  letter-spacing: .02em;
  margin-top: 2px;
}

/* ── footer ── */
.footer {
  /* Match the top nav: 56px tall, 32px horizontal gutter, no extra
     vertical padding. Logo + newsletter form sit centred as a single
     group on the horizontal axis. */
  height: 56px;
  padding: 0 32px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.footer-news {
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  flex: 0 1 auto; max-width: 360px;
}
.footer-news-label {
  /* Hidden in the compact 56px footer - the input's placeholder
     ("email@example.com") communicates the field's purpose. */
  display: none;
}
.footer-news-row { display: flex; gap: 6px; flex: 1; }
.footer-news-input {
  flex: 1;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 6px;
  font-family: inherit;
}
.footer-news-input:focus {
  border-color: var(--accent);
  outline: none;
}
.footer-news-btn {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .15s;
}
.footer-news-btn:hover { opacity: .85; }
.footer-news-msg {
  /* Inline next to the Subscribe button. No reserved height so the
     compact 56px footer doesn't get pushed taller when empty. */
  font-size: 11px;
  color: var(--accent);
  letter-spacing: .02em;
  align-self: center;
}
.footer-news-msg:empty { display: none; }

.footer-logo {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  text-decoration: none;
}

.footer-logo .logo-clock,
.footer-logo .logo-cal {
  width: 16px; height: 16px;
}

@media (max-width: 768px) {
  /* Keep footer on a single row even on narrow viewports - logo stays
     pinned to the left, newsletter form sits next to it (NOT stretched
     to the right edge). Height stays at the 56px nav-matching value. */
  .footer { gap: 16px; padding: 0 20px; }
  .footer-news { flex: 0 1 auto; max-width: 280px; }
}

/* ── feedback form (lives on /feedback.html) ── */
.feedback-form {
  display: flex; flex-direction: column; gap: 16px;
  margin-top: 32px;
}
.feedback-row {
  display: flex; flex-direction: column; gap: 6px;
}
.feedback-row label {
  font-size: 11px; font-weight: 500;
  color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .08em;
}
.feedback-input,
.feedback-textarea {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  font-size: 14px;
  border-radius: 6px;
  font-family: inherit;
}
.feedback-input:focus,
.feedback-textarea:focus {
  border-color: var(--accent);
  outline: none;
}
.feedback-textarea {
  /* ~3 lines: 14 px × 1.5 line-height × 3 ≈ 63 px + 20 px padding. */
  min-height: 84px;
  resize: vertical;
  line-height: 1.5;
}
.feedback-radios {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 14px;
}
.feedback-radios label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--text);
  text-transform: none; letter-spacing: 0; font-weight: 400;
  cursor: pointer;
}
.feedback-radios .hint { font-size: 12px; color: var(--text-dim); }
.feedback-submit {
  align-self: flex-start;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
  padding: 10px 24px;
  border-radius: 6px;
  font-size: 14px; font-weight: 500;
  cursor: pointer; font-family: inherit;
  transition: opacity .15s;
}
.feedback-submit:hover { opacity: .85; }
.feedback-msg {
  font-size: 13px;
  color: var(--accent);
  min-height: 18px;
}

/* ── page TOC bar (auto-generated, top of page above first section) ── */
.page-toc-bar {
  /* Top padding clears the fixed 56px nav and adds breathing room.
     Centered on the page so it lines up with the section content. */
  padding: 88px 32px 16px;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
/* On TOC-less pages (currently only /feedback), the first section
   sits directly under the fixed 56px nav - give it room to clear it. */
section.section:first-of-type { padding-top: 88px; }
/* On TOC pages, the TOC already provides the nav clearance, so the
   first section sits just below it. Selector includes the element
   name to match `:first-of-type`'s specificity so this rule wins by
   source order. */
.page-toc-bar + section.section { padding-top: 24px; }
.page-toc {
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 300;
  color: var(--text-dim);
  letter-spacing: .04em;
  text-align: center;
}

/* ── section link ── */
.section-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 500;
  color: var(--accent); margin-top: 20px;
}

.section-link::after {
  content: '>'; font-size: 16px;
}

/* ── page "next" link ── */
/* `.page-next` is the DOM hook added in `auth.js`; the visual style
   comes from `.section-link` (and `.section-link::after` for the arrow
   glyph), so the inter-page link reads as "next >". Rendered as a
   centered pill button with grey-default / green-hover. This rule
   comes AFTER `.section-link` so its overrides (display, color, margin,
   etc.) win over `.section-link`'s defaults. */
.page-next {
  display: flex;
  width: fit-content;
  margin: 40px auto;
  /* Match the Subscribe / Send buttons: rounded-square pill, same
     padding and corner radius. */
  padding: 10px 24px;
  border: 1px solid var(--text-dim);
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  transition: color .2s, border-color .2s, background .2s;
}
.page-next:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(90, 173, 111, .06);
  opacity: 1;
}

/* ── responsive ── */
@media (max-width: 768px) {
  .hero h1 { font-size: 36px; }
  .section { padding: 40px 20px; }
  /* Match `.section` horizontal padding so the TOC line aligns with
     section eyebrows on mobile (desktop uses 32px on both).
     NOTE: `.system-map`'s mobile override is in the second
     `@media (max-width: 768px)` block lower down - it has to come
     AFTER the desktop `.system-map` rule for source order to win. */
  .page-toc-bar { padding: 88px 20px 16px; }
  .section h2 { font-size: 28px; }
  .section p { font-size: 16px; }
  .scale-row { flex-wrap: wrap; }
  .scale-item { flex: 1 1 calc(50% - 6px); }
  .nav { padding: 0 16px; }
  .nav-links { gap: 16px; }
  .skylight-pair { gap: 0; }
  .sky-clock, .sky-cal { width: 80px; height: 80px; }
}


/* ── home: breadth list ── */
.breadth {
  max-width: 820px;
  margin: 0 auto;
  /* Reduced top padding so the discipline list sits close to the
     bottom of the clock hero (was 60px). */
  padding: 16px 32px 80px;
}
.breadth-title {
  font-size: 12px; font-weight: 500;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 24px;
}
.breadth-list { list-style: none; }
.breadth-list li {
  border-top: 1px solid var(--border);
}
.breadth-list li:last-child {
  border-bottom: 1px solid var(--border);
}
.breadth-list a {
  display: grid;
  grid-template-columns: 110px 180px 1fr 24px;
  gap: 24px;
  padding: 22px 4px;
  align-items: center;
  color: var(--text);
  transition: background .15s;
}
.breadth-list a:hover {
  opacity: 1;
  background: rgba(255,255,255,.02);
}
.breadth-list a:hover .b-arrow {
  color: var(--accent);
  transform: translateX(4px);
}
.b-name {
  font-size: 18px; font-weight: 500;
  letter-spacing: -.01em;
}
.b-brand {
  font-size: 14px; color: var(--accent);
  font-weight: 400;
}
.b-tag {
  font-size: 14px; color: var(--text-sec);
  font-weight: 300;
}
.b-arrow {
  color: var(--text-dim);
  font-size: 18px;
  text-align: right;
  transition: color .15s, transform .2s;
}

/* ── system map (User page) ── */
.system-map {
  /* Same max-width + padding as `.section` and `.page-toc-bar`,
     centered on the page. */
  max-width: 820px;
  margin: 0 auto;
  padding: 24px 32px 32px;
}
.sm-title {
  font-size: 28px; font-weight: 600;
  letter-spacing: -.02em;
  text-align: left;
  margin: 0 0 12px 0;
}
.sm-tier {
  /* No 110px label gutter - label stacks above its row of cells, both
     flush left so the system map shares the same left edge as the TOC
     line, section eyebrows, sm-title, and sm-tagline. */
  margin-bottom: 16px;
}
.sm-tier-label {
  font-size: 11px; font-weight: 500;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .14em;
  text-align: left;
  margin-bottom: 8px;
}
.sm-cells {
  display: flex;
  gap: 12px;
}
.sm-cell {
  flex: 0 0 auto;
  min-width: 130px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: 2px;
  text-decoration: none;
  color: var(--text);
  transition: border-color .25s, transform .25s, background .25s;
  position: relative;
}
.sm-cell:hover {
  border-color: var(--accent);
  background: rgba(90,173,111,.04);
  transform: translateY(-3px);
  opacity: 1;
}
.sm-num {
  font-size: 11px;
  color: var(--text-dim);
  font-feature-settings: "tnum" 1;
}
.sm-symbol {
  font-size: 36px;
  font-weight: 300;
  letter-spacing: -.04em;
  line-height: 1;
  align-self: center;
  text-align: center;
  color: var(--text);
  margin: 4px 0;
}
.sm-name {
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  letter-spacing: -.01em;
}
.sm-brand {
  font-size: 11px;
  color: var(--accent);
  text-align: center;
  letter-spacing: .02em;
  margin-top: 2px;
}
.sm-flow-line {
  width: 1px;
  height: 32px;
  background: linear-gradient(180deg, var(--border), transparent);
  margin-left: 0;
}
.sm-tagline {
  /* Sits between the system-map title and the tier rows, flush with
     the page-wide left padding (no special indent). */
  margin: 0 0 32px 0;
  text-align: left;
  font-size: 16px;
  font-weight: 300;
  color: var(--text-sec);
  line-height: 1.7;
}
.sm-tagline strong {
  color: var(--text);
  font-weight: 400;
}
.sm-tagline span {
  display: block;
}

@media (max-width: 768px) {
  /* Match `.section` mobile horizontal padding so the system-map
     content (Rhythmographer title, ID/Skill/Tool labels, cells)
     aligns with section eyebrows on mobile. */
  .system-map { padding: 24px 20px 32px; }
  .sm-cells { flex-wrap: wrap; }
  .sm-cell { flex: 1 1 calc(50% - 6px); }
}

/* Breadth list: collapse the 4-column grid (name · brand · tag ·
   arrow) to just name + arrow only on genuinely narrow viewports.
   At all wider widths keep the full "discipline" row visible. */
@media (max-width: 480px) {
  .breadth-list a {
    grid-template-columns: 1fr 24px;
    gap: 8px; padding: 18px 4px;
  }
  .b-brand, .b-tag { display: none; }
}