/* Homepage: hover and state colours, anchor offsets, the hero stack, responsive rules and the scroll story's
   layout modes. Static styles are inline in templates/pages/home.php, so overrides need !important. */
.home a { text-decoration: none; }
.home [id] { scroll-margin-top: 72px; }
.h-feat, .h-case { transition: background-color var(--dur-fast); }
.h-feat:hover, .h-case:hover { background: var(--white) !important; }
.h-link { white-space: nowrap; flex: none; color: var(--ink-900); text-decoration: underline !important; text-decoration-color: var(--ink-300) !important; text-underline-offset: 4px; }
.h-link:hover, .h-case:hover .h-link { color: var(--ink-900); text-decoration-color: var(--orange-500) !important; }
.h-link-dark { color: var(--white); text-decoration-color: var(--night-700) !important; }
.h-link-dark:hover { color: var(--white); }

/* Hero stack: axis labels sit right of the axis tick at their plate's height, each with a caption of what changed.
   home.js adds .is-live and plays the change: the pulse runs down the rule line, and a plate, its label and caption
   count as reached (.is-hit) once it passes. Without .is-live (no JS, reduced motion) the end state shows. */
.h-axis { position: absolute; left: 75.3%; transform: translateY(-50%); white-space: nowrap; font-size: 11px; color: var(--ink-600); transition: color .3s; }
.h-axis--rule { background: var(--orange-100); color: var(--orange-800); padding: 3px 6px; }
.h-axis--sync { color: var(--ink-500); }
.h-cap { position: absolute; left: 0; top: calc(100% + 4px); width: max-content; max-width: 22ch; white-space: normal; text-transform: none; letter-spacing: 0; line-height: 1.35; color: var(--orange-800); transition: opacity .35s; }
.h-axis--rule .h-cap { top: calc(100% + 6px); }
.h-ticker { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 12px); margin: 0; font-size: 11px; color: var(--orange-800); }
.h-stack [data-node] { transform-box: fill-box; transform-origin: center; }
.h-plate { transition: stroke .35s; }
.h-stack:not(.is-live) :is([data-rule-trail], [data-pulse]) { display: none; }
.h-stack.is-live [data-rule-line] { stroke: var(--orange-200); }
.h-stack.is-live .h-axis:not(.is-hit) .h-cap { opacity: 0; }
.h-stack.is-live .h-axis.is-hit:not(.h-axis--rule) { color: var(--ink-900); }
.h-stack.is-live [data-plate].is-hit .h-plate { stroke: var(--orange-400); stroke-dasharray: none; }
.h-stack.is-live [data-plate].is-hit [data-node] { animation: h-pop .5s var(--ease-standard); }
.h-axis--sync.is-hit::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; background: var(--status-green); }
@keyframes h-pop { 40% { transform: scale(1.7); } }

/* Try it: a dark .mrm-tab block on the paper ground. */
.h-rule [data-cycle] { flex: 1; white-space: nowrap; background: transparent; color: var(--text-on-dark-muted); }
.h-rule [data-cycle][aria-pressed="true"] { background: var(--paper); color: var(--ink-900); }
.h-rule [data-cycle][aria-pressed="false"]:hover { color: var(--white); }

/* Lifecycle story: the box fill marks done steps, text colour the current one (no opacity: stays >= 4.5:1). */
.h-step-n { border-color: var(--line-200); background: var(--paper); color: var(--ink-500); transition: background-color .35s, border-color .35s, color .35s; }
.h-step.is-done .h-step-n { border-color: var(--orange-700); background: var(--orange-700); color: var(--white); }
.h-step-t { color: var(--ink-900); transition: color .35s; }
.h-step-d { color: var(--ink-600); transition: color .35s; }
.h-step:not(.is-on) .h-step-t, .h-step:not(.is-on) .h-step-d { color: var(--ink-500); }
.h-story.is-compact .h-step:not(.is-on) .h-step-d { display: none; }
[data-box] { text-align: center; }  /* long German labels wrap to two centred lines */

/* Flat story (set by home.js when the sticky panel can't hold it): steps stack, each followed by its scene. */
.h-story.h-story-flat { height: auto !important; }
.h-story-flat .h-story-in { position: static !important; height: auto !important; display: flex !important; flex-direction: column; align-items: stretch !important; gap: 16px !important; padding-top: 72px !important; padding-bottom: 72px !important; }
.h-story-flat :is(.h-story-text, .h-steps, .h-stage) { display: contents !important; }
.h-story-flat :is([data-step], [data-scene]) { order: var(--n); }
.h-story-flat [data-scene] { position: relative !important; inset: auto !important; opacity: 1 !important; transform: none !important; background: var(--sand-100); border: 1px solid var(--line-200); margin-bottom: 16px; }
.h-story-flat [data-line] { stroke-dasharray: none; }

@media (max-width: 1100px) {
  .h-grid4 { grid-template-columns: repeat(2, 1fr) !important; }
  .h-wire { display: none !important; }
  .h-rule { margin-bottom: 32px !important; }
  /* Hero: copy on top, the stack below it. */
  .h-hero { grid-template-columns: 1fr !important; gap: 40px !important; padding-top: 56px !important; }
  .h-stack { max-width: 640px; }
}

@media (max-width: 1000px) {
  .h-grid3 { grid-template-columns: repeat(2, 1fr) !important; }
  .h-staff, .h-band { grid-template-columns: 1fr !important; gap: 40px !important; }
}

/* Below ~960 px the two story columns get too narrow for a .75 stage: text on top, stage below. */
@media (max-width: 960px) {
  .h-story-in { grid-template-columns: 1fr !important; gap: 20px !important; align-content: center; }
  .h-story-text { gap: 18px !important; }
  .h-steps { gap: 12px !important; }
}

@media (max-width: 800px) {
  .h-hero, .h-trusted, .h-try, .h-sec, .h-story-in { padding-left: 20px !important; padding-right: 20px !important; }
  .h-sec { padding-top: 72px !important; padding-bottom: 72px !important; }
  .h-sec.h-flush { padding-top: 0 !important; }
  .h-try { padding-bottom: 72px !important; }
  .h-try-in { padding: 96px 20px 48px !important; }

  .h-h1 { font-size: 46px !important; }
  .h-lead { font-size: 17px !important; }
  .h-btns { flex-wrap: wrap; }

  .h-h2 { font-size: 34px !important; }
  .h-h3 { font-size: 28px !important; }
  .h-h4 { font-size: 24px !important; }
  .h-bq { font-size: 23px !important; }
  .h-head { flex-direction: column; align-items: flex-start !important; gap: 20px !important; margin-bottom: 32px !important; }

  .h-story-in { padding-top: 20px !important; padding-bottom: 20px !important; }
  /* Flat scenes reflow instead of scaling (text stays >= 11 px): the process becomes a two-column snake. */
  .h-story-flat [data-scene] { padding: 20px 16px !important; }
  .h-story-flat .h-canvas { width: auto !important; height: 336px !important; margin-top: 16px !important; }
  .h-story-flat .h-lane { top: calc(var(--i) * 84px) !important; height: 84px !important; }
  .h-story-flat [data-box] { left: calc(var(--c) * (50% + 6px)) !important; top: calc(var(--r) * 84px + 28px) !important; width: calc(50% - 6px) !important; padding: 0 6px; }
  .h-story-flat .h-scene-doc { flex-direction: column; align-items: stretch !important; }
  .h-story-flat .h-scene-doc > div { width: auto !important; height: auto !important; }
  .h-story-flat .h-ics { width: auto !important; padding: 0 !important; }
  .h-story-flat .h-ics-head { flex-wrap: wrap; gap: 4px 12px; }
  .h-story-flat [data-control] { grid-template-columns: 1fr auto !important; gap: 4px 12px !important; }
  .h-story-flat [data-control] > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .h-story-flat .h-scene-ack { grid-template-columns: 1fr !important; gap: 24px !important; }

  .h-rule { width: auto !important; }
  .h-cards > div { min-height: 0 !important; }
  .h-grid4, .h-grid3, .h-grid2 { grid-template-columns: 1fr !important; }
  .h-band, .h-aud-in { padding: 32px 24px !important; }
  .h-feat, .h-case { padding: 24px !important; }
}

/* Narrow phones: the three cycle toggles stay on one line each; axis labels shrink with the stack. */
@media (max-width: 480px) {
  .h-rule { padding: 20px 14px !important; }
  .h-rule [data-cycle] { flex: 1 1 auto; padding: 10px 6px !important; }
  .h-axis { font-size: 10px; letter-spacing: .03em; }
  .h-axis--sync { left: auto; right: 0; } /* the longest label; below the slab there is room to its left */
}
/* Phones: no room for captions beside the plates; one line under the stack says what just changed. */
@media (max-width: 600px) {
  .h-cap { display: none; }
  .h-ticker { display: block; }
}