/* Home — every selector scoped under .m-home (style.css rule 3).
   Colours are tokens only; layout leans on .wrap/.section/.cols/.stack/.prose. */

/* ── hero ─────────────────────────────────────────────────────────────────── */

/* The wash is --hero-surface; every colour in it is a token, so there is still
   no colour function outside style.css's token block (rule 1).

   background-color is the floor, not decoration: if the gradient never paints
   — an old engine, a forced-colours mode, an image-blocking extension — the
   hero is exactly the flat --bg it has always been, which reads as restraint
   rather than as breakage (G7). Backgrounds are clipped to the border box, so
   none of this can widen the page at any viewport.

   The repeat list is per-layer: the dither tiles, the three colour ramps do
   not. Nothing here animates. */
.m-home__hero {
  background-color: var(--bg);
  background-image: var(--hero-surface);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  /* the glow needs air above the headline or it reads as a clipped band */
  padding-block-start: calc(var(--section-y-lg) + var(--sp-5));
}

/* The hero's three blocks (title, lede, buttons) sit further apart than .stack's
   default step, which is tuned for body copy. */
.m-home__hero .wrap > * + * { margin-block-start: var(--sp-5); }

/* Hold the opening sentence to a readable measure at wide viewports (G4). */
.m-home__lede { max-width: var(--measure); }

.m-home__slides { min-block-size: 22rem; }
.m-home__slide > * + * { margin-block-start: var(--sp-5); }
.m-home__slide:not([hidden]) { animation: m-home-slide-in var(--dur-2) var(--ease); }
@keyframes m-home-slide-in {
  from { opacity: 0; transform: translateY(.35rem); }
  to { opacity: 1; transform: none; }
}

.m-home__marquee-controls { display: flex; align-items: center; gap: var(--sp-2); margin-block-start: var(--sp-5); }
.m-home__marquee-controls button {
  width: 2.25rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.m-home__marquee-controls button span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
  transition: height var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.m-home__marquee-controls button[aria-pressed="true"] span { height: 4px; background: var(--accent); }
.m-home__marquee-controls button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-pill); }

/* Both buttons now sit on a tinted surface instead of flat paper, so they get
   the system's smallest shadow to hold their edge. Token, so it flips with the
   theme; --shadow-1 only, because anything heavier stops looking like Apple. */
.m-home__actions { margin-block-start: var(--sp-6); }
.m-home__actions .btn { box-shadow: var(--shadow-1); }

/* Each statement is separated by a hairline rather than a card: one hue, so
   structure is carried by line and space (G1). */
.m-home__point { border-block-start: var(--hairline) solid var(--line); padding-block-start: var(--sp-4); }

/* Inside a third of the page the column is already narrower than --measure. */
.m-home__points .prose { max-width: none; }

.m-home__hero-grid,
.m-home__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, .82fr);
  gap: clamp(var(--sp-7), 7vw, var(--sp-9));
  align-items: center;
}

.m-home__session { display: grid; place-items: center; }
.m-home__mac { width: min(120%, 42rem); max-width: none; height: auto; overflow: visible; filter: drop-shadow(0 10px 14px var(--line)); }
.m-home__mac * { vector-effect: non-scaling-stroke; }
.m-home__mac-shell { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.5; }
.m-home__mac-screen { fill: var(--bg-sunken); stroke: var(--line); }
.m-home__mac-camera { fill: var(--ink-ui); }
.m-home__gradient-edge { stop-color: var(--surface); }
.m-home__gradient-core { stop-color: var(--accent); }
.m-home__screen-gradient {
  fill: url(#mac-screen-gradient);
  opacity: .26;
  pointer-events: none;
  transform-origin: center;
  animation: m-home-gradient-drift 5s ease-in-out infinite alternate;
}
@keyframes m-home-gradient-drift {
  from { opacity: .16; transform: translateX(-14px) scale(1.03); }
  to { opacity: .4; transform: translateX(14px) scale(1.08); }
}
.m-home__mac-stand { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.5; }
.m-home__mac-base { fill: none; stroke: var(--line-strong); stroke-width: 5; stroke-linecap: round; }
.m-home__scene-bg { fill: var(--bg-sunken); }
[data-visual-scene]:not([hidden]) > :not(.m-home__scene-bg):not(.m-home__screen-gradient) {
  animation: m-home-scene-content-in .55s var(--ease) both;
}
@keyframes m-home-scene-content-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}
.m-home__window { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1; }
.m-home__session-card { fill: var(--surface); stroke: var(--line); }
.m-home__window-bar,.m-home__frame-line { fill: none; stroke: var(--line); stroke-linecap: round; }
.m-home__window-dot--close { fill: var(--status-error-bg); }
.m-home__window-dot--minimize { fill: var(--status-warn-bg); }
.m-home__window-dot--zoom { fill: var(--status-ok-bg); }
.m-home__svg-kicker,.m-home__svg-title,.m-home__svg-copy,.m-home__svg-number,.m-home__svg-unit,.m-home__svg-route { font-family: var(--font); fill: var(--ink); }
.m-home__svg-kicker { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; fill: var(--ink-2); }
.m-home__svg-title { font-size: 22px; font-weight: 700; letter-spacing: -.5px; }
.m-home__svg-copy { font-size: 12px; fill: var(--ink-2); }
.m-home__svg-number { font-size: 72px; font-weight: 750; letter-spacing: -4px; }
.m-home__svg-unit { font-size: 22px; font-weight: 700; fill: var(--ink-2); }
.m-home__endpoint { fill: var(--surface); stroke: var(--ink-2); stroke-width: 1.5; }
.m-home__endpoint-stand,.m-home__direct-path,.m-home__relay-path,.m-home__network-old,.m-home__network-new,.m-home__network-arrow,.m-home__sealed-path,.m-home__audio-wave { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.m-home__endpoint-stand { stroke: var(--ink-2); }
.m-home__direct-path,.m-home__sealed-path { stroke: var(--accent); stroke-width: 3; }
.m-home__relay-path { stroke: var(--ink-ui); stroke-width: 2; stroke-dasharray: 5 5; }
.m-home__route-node { fill: var(--surface); stroke: var(--ink-ui); }
.m-home__svg-route { font-size: 11px; font-weight: 700; fill: var(--ink-2); }
.m-home__status-dot { fill: var(--accent); }
.m-home__network-old { stroke: var(--ink-ui); stroke-width: 2; }
.m-home__network-new,.m-home__network-arrow { stroke: var(--accent); stroke-width: 2.5; }
.m-home__frame-line { stroke-width: 5; }
.m-home__cursor { fill: var(--accent); stroke: var(--surface); stroke-width: 2; stroke-linejoin: round; }
.m-home__audio-wave { stroke: var(--accent); stroke-width: 2.5; }
.m-home__lock { fill: var(--accent-quiet); stroke: var(--accent); stroke-width: 2; }
.m-home__lock-shackle { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.m-home__lock-key { fill: var(--accent); }
.m-home__studio-metal-light { stop-color: color-mix(in srgb, var(--surface) 92%, white); }
.m-home__studio-metal-mid { stop-color: color-mix(in srgb, var(--surface) 76%, var(--line-strong)); }
.m-home__studio-metal-dark { stop-color: color-mix(in srgb, var(--bg-sunken) 75%, var(--line-strong)); }
.m-home__studio-shadow { fill: rgb(0 0 0 / .14); filter: blur(3px); }
.m-home__studio-body { fill: url(#mac-studio-aluminum); stroke: var(--line-strong); stroke-width: 1.5; }
.m-home__studio-top-edge { fill: none; stroke: rgb(255 255 255 / .7); stroke-width: 1; stroke-linecap: round; }
.m-home__studio-port { fill: var(--ink-ui); stroke: color-mix(in srgb, var(--ink) 58%, transparent); stroke-width: .8; }
.m-home__studio-sd { fill: none; stroke: var(--ink-ui); stroke-width: 2.2; stroke-linecap: round; }
.m-home__studio-power { fill: #39ff14; filter: drop-shadow(0 0 3px rgb(57 255 20 / .95)); }
.m-home__studio-vent { fill: none; stroke: color-mix(in srgb, var(--ink-ui) 76%, transparent); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: .1 7; }
.m-home__studio-foot { fill: none; stroke: color-mix(in srgb, var(--ink-ui) 42%, transparent); stroke-width: 2.5; stroke-linecap: round; }
[data-visual-scene][hidden] { display: none; }

.m-home__metrics { border-block: var(--hairline) solid var(--line); background: var(--surface); }
.m-home__metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.m-home__metric-grid > div { padding: var(--sp-5); border-inline-start: var(--hairline) solid var(--line); }
.m-home__metric-grid > div:first-child { border-inline-start: 0; }
.m-home__metric-grid strong { display: block; font-size: var(--fs-h2); letter-spacing: var(--tr-head); }
.m-home__metric-grid span { display: block; margin-block-start: var(--sp-1); color: var(--ink-2); font-size: var(--fs-sm); }

.m-home__cards { margin-block-start: var(--sp-7); }
.m-home__cards .card { height: 100%; }
.m-home__cards p { color: var(--ink-2); }
.m-home__proofs .card > a { margin-block-start: auto; }
.m-home__section-link { margin-block-start: var(--sp-6); }

.m-home__faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--sp-8);
  margin-block-start: var(--sp-7);
}
.m-home__faq article { padding-block: var(--sp-5); border-block-start: var(--hairline) solid var(--line); }
.m-home__faq p { margin-block-start: var(--sp-2); color: var(--ink-2); }

.m-home__steps { margin: 0; padding: 0; list-style: none; counter-reset: route; }
.m-home__steps li { counter-increment: route; position: relative; padding: var(--sp-4) 0 var(--sp-4) 3rem; border-block-start: var(--hairline) solid var(--line); }
.m-home__steps li::before { content: counter(route); position: absolute; inset: var(--sp-4) auto auto 0; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: var(--radius-pill); background: var(--accent-quiet); color: var(--accent); font-weight: 700; }
.m-home__steps strong, .m-home__steps span { display: block; }
.m-home__steps span { margin-block-start: var(--sp-1); color: var(--ink-2); }
.m-home__links { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-block-start: var(--sp-7); }

.m-home__pipeline { display: flex; align-items: center; gap: var(--sp-3); overflow-x: auto; padding-block: var(--sp-6); }
.m-home__pipeline span { flex: 0 0 auto; padding: var(--sp-3) var(--sp-4); border: var(--hairline) solid var(--line); border-radius: var(--radius); background: var(--surface); font-family: var(--font-mono); font-size: var(--fs-sm); }
.m-home__pipeline i { color: var(--ink-ui); font-style: normal; }
.m-home__close { background-image: var(--hero-surface); }
.m-home__close .lede { margin-inline: auto; }
.m-home__close-actions { justify-content: center; margin-block-start: var(--sp-6); }

@media (max-width: 760px) {
  .m-home__hero-grid, .m-home__split { grid-template-columns: 1fr; gap: var(--sp-7); }
  .m-home__hero-grid { gap: var(--sp-5); }
  .m-home__marquee { display: contents; }
  .m-home__session { display: grid; order: 1; margin-block-start: 0; }
  .m-home__slides { order: 2; }
  .m-home__actions { order: 3; margin-block-start: 0; }
  .m-home__mac { width: min(100%, 32rem); max-width: 100%; }
  .m-home__marquee-controls { order: 4; margin-block-start: 0; }
  .m-home__slides { min-block-size: 0; }
  .m-home__faq { grid-template-columns: 1fr; }
  .m-home__metric-grid { grid-template-columns: repeat(2, 1fr); }
  .m-home__metric-grid > div:nth-child(3) { border-inline-start: 0; border-block-start: var(--hairline) solid var(--line); }
  .m-home__metric-grid > div:nth-child(4) { border-block-start: var(--hairline) solid var(--line); }
}

@media (max-width: 600px) and (orientation: portrait) {
  .m-home__hero { padding-block-start: var(--sp-4); }
  .m-home__session { width: 100%; justify-self: center; }
  .m-home__mac { margin-inline: auto; }
  .m-home__slides { min-block-size: 24rem; }
  .m-home__marquee-controls { order: 3; justify-content: center; width: 100%; }
  .m-home__actions { order: 4; }
}

@media (max-width: 600px) {
  .m-home__links,
  .m-home__close-actions { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .m-home__links .btn,
  .m-home__close-actions .btn { width: 100%; min-width: 0; white-space: normal; }
  .m-home__pipeline { flex-direction: column; align-items: stretch; overflow-x: visible; }
  .m-home__pipeline span { width: 100%; text-align: center; }
  .m-home__pipeline i { align-self: center; transform: rotate(90deg); }
}

@media (prefers-reduced-motion: reduce) {
  .m-home__slide:not([hidden]) { animation: none; }
  .m-home__screen-gradient { animation: none; opacity: .26; }
  [data-visual-scene]:not([hidden]) > :not(.m-home__scene-bg):not(.m-home__screen-gradient) { animation: none; }
}

@media (max-width: 440px) {
  .m-home__metric-grid { grid-template-columns: 1fr; }
  .m-home__metric-grid > div { border-inline-start: 0; border-block-start: var(--hairline) solid var(--line); }
  .m-home__metric-grid > div:first-child { border-block-start: 0; }
}