.attract-layout {
  width: min(100%, var(--content));
  min-height: calc(100svh - 5.5rem);
  margin: auto;
  display: grid;
  grid-template-columns: minmax(22rem, .9fr) minmax(34rem, 1.1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 6rem);
  padding: var(--space-6) clamp(1.25rem, 4vw, 4rem);
}
.attract-copy h1 {
  max-width: 10ch;
  margin: var(--space-4) 0;
  font-size: clamp(4.5rem, 7.5vw, 8rem);
  line-height: .84;
  letter-spacing: -.07em;
}
.attract-copy p { max-width: 34rem; color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
.attract-copy .entry-actions .primary-action { margin-top: 0; }
.artifact-shell { position: relative; min-height: 42rem; display: grid; place-items: center; }
.continuity-mark { width: min(46rem, 50vw); height: auto; overflow: visible; filter: drop-shadow(0 0 2rem color-mix(in srgb, var(--signal) 12%, transparent)); }
.artifact-grid, .artifact-line { fill: none; stroke: var(--line); stroke-width: 1; }
.route { fill: none; stroke: var(--signal); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 7 12; animation: route-flow 8s linear infinite; }
.route-two { animation-delay: -2.4s; }
.route-three { animation-delay: -4.8s; }
.route-out { stroke-width: 3; animation-duration: 5s; }
.route-node { fill: var(--surface); stroke: var(--signal); stroke-width: 3; }
.gateway { fill: color-mix(in srgb, var(--signal) 18%, var(--surface)); stroke: var(--text); stroke-width: 2; }
.route-arrow { fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes route-flow { to { stroke-dashoffset: -76; } }

.deck-layout { width: min(100%, var(--content)); margin: auto; padding: var(--space-7) clamp(1.25rem, 4vw, 4rem); }
.deck-heading { display: flex; justify-content: space-between; align-items: end; gap: var(--space-5); margin-bottom: var(--space-5); }
.deck-heading h1 { margin: var(--space-3) 0 0; font-size: clamp(3rem, 5vw, 5.4rem); line-height: .9; letter-spacing: -.06em; }
.deck-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.console-layout { display: grid; grid-template-columns: minmax(16rem, .35fr) 1fr; gap: var(--space-3); }
.canvas-layout { min-height: calc(100svh - 5.5rem); display: grid; place-items: center; }
.onboarding-layout {
  width: min(100%, var(--content));
  min-height: calc(100svh - 5.5rem);
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(22rem, .72fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 6rem);
  padding: var(--space-7) clamp(1.25rem, 4vw, 4rem);
}
.onboarding-intro h1 {
  max-width: 9ch;
  margin: var(--space-4) 0;
  font-size: clamp(4rem, 7vw, 7rem);
  line-height: .86;
  letter-spacing: -.065em;
}
.onboarding-lede { max-width: 42rem; color: var(--muted); font-size: 1.08rem; line-height: 1.65; }
.onboarding-actions { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-5); }
.setup-flow { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 76%, transparent); }
.setup-step { position: relative; display: grid; grid-template-columns: 3rem 1fr; gap: var(--space-4); align-items: center; min-height: 8.6rem; padding: var(--space-4); border-bottom: 1px solid var(--line); }
.setup-step:last-child { border-bottom: 0; }
.setup-step:not(:last-child)::after { content: "↓"; position: absolute; left: 2.25rem; bottom: -.72rem; z-index: 1; color: var(--signal); background: var(--surface); padding: 0 .3rem; font: 700 1rem var(--font-data); }
.step-icon { width: 3rem; height: 3rem; fill: none; stroke: var(--signal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.setup-step span { color: var(--signal); font: 700 .68rem/1 var(--font-data); letter-spacing: .14em; }
.setup-step h2 { margin: .5rem 0 .35rem; font-size: 1.45rem; letter-spacing: -.035em; }
.setup-step p { margin: 0; color: var(--muted); line-height: 1.45; }
.recovery-panel { margin-top: var(--space-3); }
.recovery-panel details { border: 1px solid var(--line); padding: 1rem 1.2rem; }
.recovery-panel summary { cursor: pointer; font-weight: 700; }
.recovery-panel p { margin: .8rem 0 0; color: var(--muted); line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .route { animation: none; stroke-dasharray: none; }
}

@media (max-width: 960px) {
  .attract-layout { grid-template-columns: 1fr; }
  .artifact-shell { min-height: 34rem; }
  .continuity-mark { width: min(42rem, 88vw); }
  .deck-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .onboarding-layout { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .platform-header { min-height: 4.5rem; padding-inline: 1rem; }
  .platform-context { display: none; }
  .platform-mark { font-size: 1.1rem; }
  .attract-layout { min-height: auto; padding: 4.5rem 1rem 3rem; gap: 2rem; }
  .attract-copy h1 { font-size: clamp(3.5rem, 18vw, 5.3rem); }
  .artifact-shell { min-height: 24rem; }
  .continuity-mark { width: min(31rem, 94vw); }
  .deck-layout { padding: 4.5rem 1rem; }
  .deck-heading { display: block; }
  .deck-grid { grid-template-columns: 1fr; }
  .onboarding-layout { min-height: auto; padding: 4.5rem 1rem 3rem; }
  .onboarding-intro h1 { font-size: clamp(3.4rem, 17vw, 5rem); }
  .onboarding-actions { align-items: flex-start; flex-direction: column; }
  .setup-step { min-height: 7.5rem; grid-template-columns: 2.5rem 1fr; padding: 1.25rem; }
  .step-icon { width: 2.5rem; height: 2.5rem; }
}