@import url('./ambient-gradient.css?v=15e172f9b3');
@import url('./hero-story.css?v=3e00035cb7');
@import url('./home-academy.css?v=695a16208b');
@import url('./redesign.css?v=680663b928');

/* DS-08 applies these aliases only to index.html. The legacy --home-* values
 * remain in place for the other pages that share redesign.css. */
.home-page {
  --home-content-gap: var(--spacing-fields);
  --home-window-padding: var(--spacing-related);
  --value-card-inset: var(--spacing-content);
}

/* One adjacent-section gap has one owner: the following ordinary section. */
.home-page main > section:not(.home-hero, .home-join) {
  padding-block: 0;
}

.home-page main > section:not(.home-hero, .home-join, .home-showcase) {
  margin-top: var(--home-page-section-gap);
}

.home-page main > .home-showcase {
  margin-top: 0;
}

/* A divider splits the section gap: half above the line, half below it. */
.home-page main > .zigline,
.home-page main > .zigline + section {
  margin-top: calc(var(--home-page-section-gap) / 2);
}

/* The copy column never gets narrower than the title's first line;
 * all remaining width goes to the window. */
.home-page main > .home-hero {
  display: grid;
  grid-template-columns: minmax(var(--home-hero-copy-min), 1fr) 1.25fr;
  align-items: center;
  gap: var(--home-page-hero-gap);
  padding-block: var(--home-page-hero-space) var(--home-page-hero-after-space);
}

.home-hero-copy {
  min-width: 0;
}

.home-hero h1 {
  font-size: var(--nd-hero-size);
  font-weight: 500;
  letter-spacing: -0.057em;
  line-height: 1.08;
}

.home-workbench {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--home-window-frame);
  border-radius: var(--home-window-radius);
  background: var(--home-window-surface);
  box-shadow: var(--home-window-shadow);
  view-transition-name: hero-story-window;
}

/* Traffic lights: red and green are real buttons, yellow stays decorative.
 * The button itself is the hit area, 24px wide (grown away from the yellow
 * dot, never over it) and a finger tall; the dot is drawn by ::before.
 * Negative margins keep the 11px footprint, so the row still reads as three
 * plain dots. */
.home-window-bar .home-window-dots > .home-window-dot {
  --dot-half-gap: calc(var(--home-window-dot-gap) / 2);
  --dot-reach: calc(var(--home-window-dot-hit) - var(--home-window-dot-size) - var(--dot-half-gap));

  width: var(--home-window-dot-hit);
  height: var(--touch-target);
  margin-block: calc((var(--home-window-dot-size) - var(--touch-target)) / 2);
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  cursor: pointer;
}

.home-window-bar .home-window-dots > .home-window-dot.is-close {
  margin-inline: calc(-1 * var(--dot-reach)) calc(-1 * var(--dot-half-gap));
  padding-inline: var(--dot-reach) var(--dot-half-gap);
}

.home-window-bar .home-window-dots > .home-window-dot.is-zoom {
  margin-inline: calc(-1 * var(--dot-half-gap)) calc(-1 * var(--dot-reach));
  padding-inline: var(--dot-half-gap) var(--dot-reach);
}

.home-window-dot[inert] {
  cursor: default;
}

.home-window-dot::before,
.home-window-dot svg {
  grid-area: 1 / 1;
  width: var(--home-window-dot-size);
  height: var(--home-window-dot-size);
}

.home-window-dot::before {
  content: "";
  border: 1px solid var(--home-window-highlight);
  border-radius: var(--radius-full);
  background: var(--nd-window-red);
  box-shadow: inset 0 1px 1px var(--home-window-highlight), 0 1px 2px var(--home-window-shade);
}

.home-window-dot.is-zoom::before {
  background: var(--nd-window-green);
}

.home-window-dot svg {
  fill: currentcolor;
  stroke: currentcolor;
  stroke-width: 1.3;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity var(--duration-fast);
  pointer-events: none;
}

.home-window-dot.is-zoom svg {
  stroke: none;
}

.home-window-dot:not([inert]):focus-visible svg {
  opacity: 1;
}

.home-window-dots:hover .home-window-dot:not([inert]) svg {
  opacity: 1;
}

/* The ring goes round the dot, not the whole hit area. */
.home-redesign .home-window-dot:focus-visible {
  outline: none;
}

.home-window-dot:focus-visible::before {
  outline: 2px solid var(--ambient-mint);
  outline-offset: 2px;
}

/* Expanded window: moved into a modal dialog by js/hero-story/expand.js. */
.home-workbench.is-expanded {
  width: var(--story-expanded-width);
  max-width: none;
}

.home-workbench-placeholder {
  min-width: 0;
}

.story-dialog {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--story-expanded-gutter);
  border: 0;
  background: transparent;
  overflow: hidden;
}

.story-dialog:not([open]) {
  display: none;
}

.story-dialog::backdrop {
  background: var(--nd-backdrop);
  backdrop-filter: blur(var(--story-expanded-blur));
}

html:has(.story-dialog[open]) {
  overflow: hidden;
}

::view-transition-group(hero-story-window) {
  animation-duration: var(--story-expand-duration);
  animation-timing-function: var(--story-expand-ease);
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 160ms;
}

.home-window-time {
  justify-self: end;
  color: var(--story-dim);
  font: 400 var(--home-window-meta-size) / 1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.home-prompt {
  display: flex;
  align-items: baseline;
  gap: var(--home-prompt-gap);
  padding: var(--home-prompt-space) var(--home-window-text-inset);
  font: var(--home-window-meta-size) / var(--leading-snug) var(--font-mono);
}

.home-prompt > span {
  color: var(--ambient-mint);
}

.home-demo-preview {
  margin-inline: var(--home-window-inset);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--home-window-frame);
  border-radius: var(--home-stage-radius);
  background: var(--nd-bg);
  box-shadow: var(--home-window-preview-shadow);
}

/* ND-02 value: product shots built from HTML/CSS, decorative. */
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--home-page-card-gap);
}

.value-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--nd-line);
  border-radius: var(--home-stage-radius);
  background: var(--story-bg);
  background-image: radial-gradient(var(--story-grid-dot) 1px, transparent 1px);
  background-size: var(--value-shot-dot-step) var(--value-shot-dot-step);
  box-shadow: var(--story-shadow);
}

/* Mock and caption share one inset, so their left edges line up. */
.value-card h3 {
  margin: 0 var(--value-card-inset) var(--home-page-caption-gap);
}

.value-card > p {
  margin: 0 var(--value-card-inset) var(--value-card-inset);
  color: var(--nd-muted);
  font-size: var(--text-sm);
}

.value-shot {
  display: grid;
  align-items: center;
  min-height: var(--value-shot-height);
  padding: var(--value-card-inset);
}

.value-comment,
.value-notice,
.value-project {
  min-width: 0;
  padding: var(--value-row-padding);
  border: 1px solid var(--story-line-strong);
  border-radius: var(--home-stage-radius);
  background: var(--story-panel-raised);
  box-shadow: var(--story-shadow);
  color: var(--story-text);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.value-comment {
  display: flex;
  gap: var(--value-row-gap);
}

.value-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--value-avatar-size);
  height: var(--value-avatar-size);
  border-radius: var(--radius-full);
  background: var(--story-avatar-1);
  color: var(--ambient-ink);
  font-weight: 600;
}

.value-comment-body {
  min-width: 0;
}

.value-comment-head {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-bottom: var(--space-3xs);
}

.value-comment-body p {
  color: var(--story-muted);
}

.value-notice {
  display: flex;
  align-items: center;
  gap: var(--value-row-gap);
}

.value-notice-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--value-avatar-size);
  height: var(--value-avatar-size);
  border: 1px solid var(--story-line-strong);
  border-radius: var(--radius-xs);
  background: var(--story-wash-strong);
  color: var(--story-muted);
}

.value-notice-icon {
  width: 60%;
  height: 60%;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.value-notice-body {
  display: grid;
  min-width: 0;
  flex: 1;
}

.value-notice-body span {
  color: var(--story-muted);
}

.value-time {
  align-self: start;
  color: var(--story-dim);
  font: 400 var(--value-mono-size) / 1 var(--font-mono);
  white-space: nowrap;
}

.value-project {
  display: grid;
  gap: var(--value-row-gap);
}

.value-project-top {
  display: grid;
  grid-template-columns: minmax(min-content, 1fr) minmax(0, max-content) auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  font-size: var(--text-sm);
}

.value-core {
  justify-self: start;
  padding: var(--space-3xs) var(--value-chip-padding);
  border-radius: var(--radius-xs);
  color: var(--ambient-ink);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* ND-02 guides: whole card is one link. */
.guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--home-page-card-gap);
}

.guide-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-2xs);
  padding: var(--space-sm);
  border: 1px solid var(--nd-line);
  border-radius: var(--home-stage-radius);
  background: var(--nd-panel);
  transition: border-color var(--duration-fast), background var(--duration-fast);
}

.guide-card:hover {
  border-color: var(--nd-muted);
  background: var(--nd-hover);
}

.guide-kicker {
  color: var(--nd-muted);
  font: 400 var(--home-window-meta-size) / 1 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.guide-card h3 {
  padding-right: var(--space-sm);
}

.guide-card p {
  color: var(--nd-muted);
  font-size: var(--text-sm);
}

/* ND-02 faq: native details, no JS. Title left, questions in the right
 * column — the same split as .home-section-head elsewhere on the page. */
.home-faq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: var(--home-page-content-gap);
}

.faq-head > p {
  margin-top: var(--space-xs);
  color: var(--nd-muted);
  font-size: var(--text-sm);
}

.faq-list {
  border-top: 1px solid var(--nd-line);
}

@media (width <= 900px) {
  .home-faq {
    grid-template-columns: 1fr;
    gap: var(--home-content-gap);
  }
}

.faq-item {
  border-bottom: 1px solid var(--nd-line);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  min-height: var(--touch-target);
  padding-block: var(--space-xs);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: -0.02em;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "";
  flex: none;
  width: var(--faq-icon-size);
  height: var(--faq-icon-size);
  background:
    linear-gradient(var(--nd-muted), var(--nd-muted)) center / 100% var(--faq-icon-line) no-repeat,
    linear-gradient(var(--nd-muted), var(--nd-muted)) center / var(--faq-icon-line) 100% no-repeat;
  transition: transform var(--duration-fast);
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item summary:hover {
  color: var(--nd-text);
}

.faq-item p {
  max-width: var(--home-copy-width);
  padding-bottom: var(--space-xs);
  color: var(--nd-muted);
}

.faq-link {
  color: var(--nd-text);
  text-decoration: underline;
  text-underline-offset: var(--space-3xs);
}

/* Rows clip their chips (marquee), so each row gets room for the hover
 * border. Chip 40 + 2×pad + gap = 50 = ROW_STRIDE_PX in js/members.js, and
 * the height fits exactly the 4 rows that stride yields. The chips are links:
 * under the kit's touch query (css/ui-kit.css) they are 44, the stride 54 =
 * ROW_STRIDE_TOUCH_PX and the height --home-member-height-touch. */
.home-members .member-grid {
  height: var(--home-member-height);
  gap: var(--home-member-row-gap);
}

.home-members .member-row {
  padding-block: var(--home-member-row-pad);
}

.home-members .member-chip {
  --ui-chip-h: var(--ui-h-md);
}

.home-members > .ui-link {
  margin-top: var(--space-xs);
}

@media (pointer: coarse), (width <= 768px) {
  .home-members .member-grid {
    height: var(--home-member-height-touch);
  }

  .home-members .member-chip {
    --ui-chip-h: var(--ui-h-touch);
  }
}

/* Page-scoped counterparts of shared shell rules. */
.home-page .header-inner {
  gap: var(--home-page-logo-gap);
}

.home-page .home-lead {
  margin-top: var(--home-page-content-gap);
}

.home-page .home-actions {
  gap: var(--home-page-action-gap);
  margin-top: var(--home-page-content-gap);
}

.home-page .home-join-copy .home-join-note,
.home-page .home-hero-copy .home-join-note {
  margin-top: var(--home-page-action-gap);
}

.home-page .home-section-head {
  gap: var(--home-page-column-gap);
  margin-bottom: var(--home-page-heading-gap);
}

.home-page .showcase-grid,
.home-page .guide-grid {
  gap: var(--home-page-card-gap);
}

.home-page .home-section-foot {
  gap: var(--home-page-action-gap);
  margin-top: var(--home-page-content-gap);
}

/* FAQ keeps its documented local 24/32 rhythm. */
.home-page .faq-head > p {
  margin-top: var(--home-page-content-gap);
}

.home-page main > .home-join {
  gap: var(--home-page-panel-gap);
  margin: var(--home-page-cta-before-space) auto var(--home-page-cta-after-space);
  padding: var(--home-page-panel-padding);
}

.home-page .home-join h2 {
  margin-bottom: var(--home-page-content-gap);
}

.home-page .home-footer {
  padding-top: calc(var(--zig-height) + var(--home-page-footer-space));
}

.home-page .home-footer-top,
.home-page .home-footer-bottom {
  gap: var(--home-page-footer-space) var(--home-page-card-gap);
}

.home-page .home-footer-top p {
  margin-top: var(--home-page-logo-gap);
}

.home-page .home-footer-links {
  gap: var(--home-page-footer-link-gap);
}

.home-page .home-footer-bottom {
  margin-top: var(--home-page-footer-space);
}

.home-page .home-footer-word {
  margin-top: var(--home-page-footer-space);
}

.home-page .member-list-label {
  margin-bottom: var(--home-page-action-gap);
}

.home-page .home-members > .ui-link {
  margin-top: var(--home-page-action-gap);
}

.home-page .home-faq {
  column-gap: var(--home-page-column-gap);
}

/* Component scales narrow with the composition; the page macro rhythm
 * (--layout-*) switches only in tokens.css. */
@media (width <= 1200px) {
  .home-page {
    --home-page-column-gap: var(--spacing-groups);
    --home-page-panel-gap: var(--spacing-groups);
    --home-page-hero-gap: var(--spacing-groups);
    --home-page-panel-padding: var(--spacing-groups);
  }
}

@media (width <= 600px) {
  .home-page {
    --home-page-panel-padding: var(--spacing-fields);
  }
}

@media (width <= 900px) {
  .home-page main > .home-hero {
    grid-template-columns: 1fr;
    gap: var(--home-page-hero-gap);
  }

  .home-workbench,
  .home-workbench-placeholder {
    width: 100%;
    max-width: var(--home-workbench-width);
  }

  .home-workbench.is-expanded {
    width: var(--story-expanded-width);
    max-width: none;
  }

  .home-hero-copy {
    max-width: var(--home-workbench-width);
  }

  .value-grid {
    grid-template-columns: 1fr;
  }

  .value-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-content: center;
  }

  .value-shot {
    grid-row: 1 / span 2;
  }

  .value-card h3 {
    align-self: end;
    margin-top: var(--value-card-inset);
    margin-left: 0;
  }

  .value-card > p {
    margin-left: 0;
  }

  .home-page .home-faq {
    gap: var(--home-page-heading-gap);
  }

  .home-page .home-footer-links {
    gap: 0;
  }

  .home-page .home-footer-bottom {
    gap: 0;
  }
}

@media (width <= 768px) {
  .home-page .header-inner {
    padding-inline: var(--nd-gutter);
  }

  .home-page .home-section-head {
    gap: var(--home-page-intro-gap);
  }

  .home-page .home-join {
    padding-inline: var(--home-page-panel-padding);
  }

  .guide-card {
    padding: var(--space-xs);
  }

  .guide-grid {
    grid-template-columns: 1fr;
  }

  .value-card {
    display: flex;
  }

  .value-card h3,
  .value-card > p {
    margin-left: var(--value-card-inset);
  }

  .value-card h3 {
    align-self: auto;
    margin-top: 0;
  }
}