/* HA NOVA landing — cosmos night, cyan = local/client, amber = server/safe */

:root {
  --bg-0: #0A0E1A;
  --bg-1: #0D1525;
  --bg-2: #0A1628;
  --ink: #E8EDF2;
  --ink-soft: #B8CCE0;
  --cyan: #18BCF2;
  --amber: #FFB347;
  --hairline: rgba(184, 204, 224, 0.16);
  --panel: rgba(13, 21, 37, 0.6);
  --measure: 62ch;
  --ease-rise: cubic-bezier(0.16, 1, 0.3, 1);
  --bar: 56px; /* top bar height: anchor jumps land below it */
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  scroll-behavior: smooth;
  /* anything scrolled into view (anchors, keyboard focus) clears the top bar */
  scroll-padding-top: calc(var(--bar) + 1rem);
}

body {
  margin: 0;
  color: var(--ink-soft);
  background: var(--bg-2) linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 45%, var(--bg-2) 100%);
  font-family: -apple-system, 'Helvetica Neue', 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Sparse star dots, fixed so they hold still while the page scrolls.
   Four layers, three behaviors, like a real night sky: near-static fine grain,
   two shimmer layers offset in phase, and halo stars that softly flare. */
html::before,
html::after,
body::before,
body::after,
main::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* finest grain: barely moves */
html::before {
  background-image:
    radial-gradient(0.8px 0.8px at 48% 12%, rgba(255, 255, 255, 0.2) 50%, transparent 51%),
    radial-gradient(0.8px 0.8px at 5% 58%, rgba(255, 255, 255, 0.2) 50%, transparent 51%),
    radial-gradient(0.8px 0.8px at 36% 26%, rgba(255, 255, 255, 0.2) 50%, transparent 51%),
    radial-gradient(0.8px 0.8px at 64% 5%, rgba(255, 255, 255, 0.2) 50%, transparent 51%),
    radial-gradient(0.8px 0.8px at 27% 41%, rgba(255, 255, 255, 0.2) 50%, transparent 51%),
    radial-gradient(0.8px 0.8px at 88% 72%, rgba(255, 255, 255, 0.2) 50%, transparent 51%),
    radial-gradient(0.8px 0.8px at 52% 55%, rgba(255, 255, 255, 0.2) 50%, transparent 51%),
    radial-gradient(0.8px 0.8px at 14% 96%, rgba(255, 255, 255, 0.2) 50%, transparent 51%),
    radial-gradient(0.8px 0.8px at 76% 91%, rgba(255, 255, 255, 0.2) 50%, transparent 51%),
    radial-gradient(0.8px 0.8px at 41% 72%, rgba(255, 255, 255, 0.2) 50%, transparent 51%);
  animation: twinkle 21s ease-in-out -9s infinite alternate;
}

/* shimmer layer A */
body::before {
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, 0.3) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 9%, rgba(255, 255, 255, 0.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 32%, rgba(255, 255, 255, 0.2) 50%, transparent 51%),
    radial-gradient(1px 1px at 31% 61%, rgba(255, 255, 255, 0.25) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 90% 47%, rgba(255, 255, 255, 0.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 84%, rgba(255, 255, 255, 0.25) 50%, transparent 51%),
    radial-gradient(1px 1px at 67% 76%, rgba(255, 255, 255, 0.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 95% 15%, rgba(255, 255, 255, 0.25) 50%, transparent 51%);
  animation: twinkle 9s ease-in-out infinite alternate;
}

/* shimmer layer B, phase-shifted */
html::after {
  background-image:
    radial-gradient(1.5px 1.5px at 42% 93%, rgba(255, 255, 255, 0.2) 50%, transparent 51%),
    radial-gradient(1px 1px at 23% 5%, rgba(255, 255, 255, 0.2) 50%, transparent 51%),
    radial-gradient(1px 1px at 96% 88%, rgba(255, 255, 255, 0.25) 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 38%, rgba(255, 255, 255, 0.25) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 7% 31%, rgba(255, 255, 255, 0.25) 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 82%, rgba(255, 255, 255, 0.25) 50%, transparent 51%),
    radial-gradient(2px 2px at 33% 47%, rgba(255, 255, 255, 0.25) 50%, transparent 51%),
    radial-gradient(1px 1px at 82% 58%, rgba(255, 255, 255, 0.2) 50%, transparent 51%);
  animation: twinkle 11s ease-in-out -6s infinite alternate;
}

/* halo stars: quiet most of the cycle, then a soft flare */
body::after {
  background-image:
    radial-gradient(7px 7px at 84% 28%, rgba(255, 255, 255, 0.1) 30%, transparent 70%),
    radial-gradient(2px 2px at 84% 28%, rgba(255, 255, 255, 0.3) 50%, transparent 51%),
    radial-gradient(7px 7px at 18% 44%, rgba(255, 255, 255, 0.1) 30%, transparent 70%),
    radial-gradient(1.5px 1.5px at 18% 44%, rgba(255, 255, 255, 0.3) 50%, transparent 51%),
    radial-gradient(6px 6px at 61% 68%, rgba(255, 255, 255, 0.1) 30%, transparent 70%),
    radial-gradient(1.5px 1.5px at 61% 68%, rgba(255, 255, 255, 0.3) 50%, transparent 51%);
  animation: flare 16s ease-in-out infinite;
}

@keyframes twinkle {
  from { opacity: 0.68; }
  to   { opacity: 1; }
}

/* two more halo stars on their own rhythm, so flares wander instead of syncing */
main::before {
  background-image:
    radial-gradient(6px 6px at 8% 11%, rgba(255, 255, 255, 0.1) 30%, transparent 70%),
    radial-gradient(1.5px 1.5px at 8% 11%, rgba(255, 255, 255, 0.3) 50%, transparent 51%),
    radial-gradient(7px 7px at 47% 80%, rgba(255, 255, 255, 0.1) 30%, transparent 70%),
    radial-gradient(2px 2px at 47% 80%, rgba(255, 255, 255, 0.3) 50%, transparent 51%);
  animation: flare 19s ease-in-out -7s infinite;
}

@keyframes flare {
  0%, 62%, 100% { opacity: 0.45; }
  76%, 84% { opacity: 1; }
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1, h2, h3 {
  color: var(--ink);
  line-height: 1.2;
  text-wrap: balance;
  margin: 0;
}

h2 {
  font-size: clamp(1.875rem, 1.3rem + 2.4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

a {
  color: var(--cyan);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.9em;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Top bar ----------
   One bar on every page: the demo, the safety story, the build, GitHub, and the
   install stay one click away from any scroll position. Solid Night Top (text
   scrolling under it must not show through), one hairline below; no shadow,
   no blur, no motion. */

.skip-link {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 20;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  background: var(--cyan);
  color: #05121D;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-0);
  border-bottom: 1px solid var(--hairline);
}

.topbar-inner {
  max-width: 1040px;
  min-height: var(--bar);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.topbar-home {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.topbar-home img { width: 24px; height: 24px; flex-shrink: 0; }

.topbar-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.topbar-links a:not(.btn) {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0 0.7rem;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.topbar-links a:not(.btn):hover { color: var(--ink); }
.topbar-links a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(184, 204, 224, 0.5);
  text-underline-offset: 6px;
}

/* the GitHub mark takes the link's color, so it brightens with it */
.gh-mark {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: url("assets/github-mark.svg") center / contain no-repeat;
  mask: url("assets/github-mark.svg") center / contain no-repeat;
}

.topbar .btn-small {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: 0.5rem;
  padding: 0.55rem 1.15rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  white-space: nowrap;
}

/* ---------- Hero ---------- */

.hero {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(3rem, 9vh, 6.5rem) 1.5rem 0;
  text-align: center;
  position: relative;
}

/* a meteor crossing the open sky above the brand star: a long, shallow
   diagonal from upper right toward the left, ~1.6s visible */
.hero::before {
  content: "";
  position: absolute;
  top: 18px;
  right: 10%;
  width: 160px;
  height: 1px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3) 85%, transparent);
  opacity: 0;
  /* -74s shifts the 80s cycle so the first streak crosses ~4s after load,
     while the visitor is still in the hero; after that, one per 80s */
  animation: meteor 80s linear -74s infinite;
}

@keyframes meteor {
  0%, 97.4% { opacity: 0; transform: rotate(173deg) translateX(0); }
  97.8% { opacity: 1; }
  99% { opacity: 1; }
  99.4%, 100% { opacity: 0; transform: rotate(173deg) translateX(620px); }
}

/* a quiet constellation right of the star; scrolls away with the hero */
.hero-constellation {
  position: absolute;
  top: 2rem;
  right: 0;
  width: min(34%, 300px);
  height: auto;
  z-index: -1;
  pointer-events: none;
}

.hero-constellation .cl {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 1;
}

/* the lines draw themselves once, after the hero has risen */
.js .hero-constellation .cl {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: constellation-draw 1.4s ease-out 1.1s forwards;
}

@keyframes constellation-draw {
  to { stroke-dashoffset: 0; }
}

.hero-star {
  width: clamp(96px, 13vw, 148px);
  height: auto;
  margin: 0 auto;
  animation: rise 1s var(--ease-rise) both;
}

.hero-brand {
  margin: 1.5rem 0 0;
  color: var(--ink-soft);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  padding-left: 0.34em; /* optically recenter the tracked wordmark */
  text-transform: uppercase;
  animation: rise 1s var(--ease-rise) 0.08s both;
}

.hero-tagline {
  margin: 1.1rem 0 0;
  font-size: clamp(1.75rem, 0.9rem + 4vw, 3.9rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  animation: rise 1s var(--ease-rise) 0.16s both;
}

.hero-sub {
  max-width: 46ch;
  margin: 1.75rem auto 0;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  animation: rise 1s var(--ease-rise) 0.26s both;
}

.hero-ctas {
  margin: 2.5rem 0 0;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  animation: rise 1s var(--ease-rise) 0.36s both;
}

/* what the demo button is, right under it */
.hero-try {
  margin: 1.1rem 0 0;
  color: var(--ink);
  font-size: 0.9375rem;
  animation: rise 1s var(--ease-rise) 0.4s both;
}

@keyframes rise {
  from { opacity: 0.001; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.btn {
  display: inline-block;
  padding: 0.85rem 1.9rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1.0625rem;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.16s ease-out;
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: var(--cyan);
  color: #05121D;
}

.btn-primary:hover {
  background: #4FCDF6;
}

.btn-ghost {
  color: var(--ink);
  border: 1px solid var(--hairline);
}

.btn-ghost:hover {
  border-color: var(--ink-soft);
}

.btn:focus-visible,
a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

/* ---------- Sections ---------- */

.section {
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(5rem, 13vh, 8.5rem) 1.5rem 0;
}

/* anchor jumps: html's scroll-padding clears the bar; a little more air here */
main [id] { scroll-margin-top: 0.5rem; }
main .section { scroll-margin-top: 1rem; }

.section-lead {
  max-width: var(--measure);
  margin: 1.1rem 0 2.5rem;
  font-size: 1.125rem;
}

/* ---------- Authored neon scenes ---------- */

.scene {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.scene .d {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.scene .c { stroke: var(--cyan); filter: drop-shadow(0 0 5px rgba(24, 188, 242, 0.4)); }
.scene .a { stroke: var(--amber); filter: drop-shadow(0 0 5px rgba(255, 179, 71, 0.4)); }
.scene .n { stroke: rgba(184, 204, 224, 0.5); }
.scene .dim { opacity: 0.75; }

.scene text {
  font-family: -apple-system, 'Helvetica Neue', 'Segoe UI', sans-serif;
  stroke: none;
}

.t-label { font-size: 17px; font-weight: 600; fill: var(--ink); }
.t-cyan { fill: var(--cyan); }
.t-amber { fill: var(--amber); }
.t-btn { font-size: 12px; font-weight: 600; fill: var(--cyan); }
.t-code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 22px; font-weight: 600; fill: var(--amber); letter-spacing: 0.1em; }
.t-code-sm { font-size: 14px; }

.cursor {
  animation: blink 1.1s steps(1) infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* ---------- Scenes added in revision 3 ---------- */

.t-chat { font-size: 19px; font-weight: 600; fill: var(--ink); }
.t-sub { font-size: 14px; font-weight: 500; fill: var(--ink-soft); }

/* a lit window: the one sanctioned fill, a faint amber glow behind the stroke */
.scene .lamp { fill: rgba(255, 179, 71, 0.6); }

/* in-flight dots and typing dots exist only while moving */
.pulse, .typing { opacity: 0; }
.typing { fill: var(--amber); }

.figure.chat { max-width: 26rem; margin: 0 0 2.5rem; }
.figure.chat figcaption { margin-top: 0.75rem; text-align: left; font-weight: 400; color: var(--ink-soft); font-size: 0.9375rem; }

.safety-head, .section-head {
  display: flex;
  align-items: center;
  gap: 2rem;
  justify-content: space-between;
}
.safety-head .section-lead, .section-head .section-lead { margin-bottom: 0; }
.safety-emblem, .section-emblem { flex: 0 0 auto; width: 120px; }

/* chat apps: three easy steps under the heading */
.steps-title { margin-top: 2.5rem; font-size: 1.25rem; }
.steps-title + .steps { margin-top: 1.25rem; }

.confirm-ways {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  max-width: 30rem;
}
.confirm-ways li { text-align: center; }
.confirm-ways .scene { max-width: 13rem; margin: 0 auto 0.6rem; }
.confirm-ways span { display: block; color: var(--ink); font-weight: 600; line-height: 1.35; }
.workflow .confirm-fallback { margin-top: 1rem; font-size: 0.9375rem; }

/* folded detail: native <details>, a hairline and a cyan summary with a turning chevron */
.more {
  margin-top: 1.1rem;
  border-top: 1px solid var(--hairline);
  max-width: 52ch;
}
.section > .more { max-width: var(--measure); }
.more summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0 0.2rem;
  color: var(--cyan);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  list-style: none;
}
.more summary::-webkit-details-marker { display: none; }
.more summary::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.2s var(--ease-rise);
}
.more[open] summary::before { transform: rotate(45deg); }
.more summary:hover { color: #4FCDF6; }
.more summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
.more p, .workflow .more p { font-size: 0.9375rem; margin: 0.6rem 0 0; }
/* the rest of the "You say" rows, folded under the first five */
.section > .says-more { max-width: none; border-top: 0; margin-top: 0.5rem; }
.says-more .says { border-top: 0; margin-top: 0.4rem; }
.says-more .says-quote { margin: 0; font-size: 1.1875rem; }
.says-more .says-result { margin: 0; font-size: inherit; }

.demo-scene { max-width: 15rem; margin: 0 0 2rem; }

/* phones: wide-scene labels move out of the SVG into readable HTML */
.scene-legend { display: none; }
.t-cyan-text { color: var(--cyan); }
.t-amber-text { color: var(--amber); }

/* ---------- Scene motion: each scene plays its point once on scroll-in ----------
   Rest state = final frame. Only with JS and without a reduced-motion wish is
   the start frame hidden; .inview (IntersectionObserver, once) plays it. */

@media (prefers-reduced-motion: no-preference) {
  .press, .bubble-nova, .shield-body, .typing circle {
    transform-box: fill-box;
    transform-origin: center;
  }

  /* chat: the reply types, then lands with a check */
  .js .chat .bubble-nova, .js .chat .reply { opacity: 0; }
  .js .chat.inview .bubble-nova { animation: bubble-in 0.6s var(--ease-rise) 0.55s both; }
  .js .chat.inview .typing { animation: typing-show 1.25s linear 0.75s both; }
  .js .chat.inview .typing circle { animation: dot-bob 0.42s ease-in-out 0.8s 4 alternate both; }
  .js .chat.inview .typing circle:nth-child(2) { animation-delay: 0.94s; }
  .js .chat.inview .typing circle:nth-child(3) { animation-delay: 1.08s; }
  .js .chat.inview .reply { animation: fade-in 0.35s ease-out 2s both; }
  .js [data-reveal].chat .reply .d[pathLength] { transition-delay: 2.05s; transition-duration: 0.45s; }

  /* shield: the outline draws, settles into place, then the check draws */
  .js .safety-emblem.inview .shield-body { animation: settle 0.9s var(--ease-rise) 0.15s both; }
  .js [data-reveal].safety-emblem .check[pathLength] { transition-delay: 1s; transition-duration: 0.5s; }

  /* buttons that get pressed: Sign in, then Confirm and the phone tap */
  .js .steps .inview .press,
  .js .confirm-ways.inview .press { animation: press 0.42s var(--ease-rise) 1.15s both; }
  .js .confirm-ways.inview li:nth-child(2) .press { animation-delay: 1.85s; }
  .js [data-reveal].confirm-ways .press .d[pathLength] { transition-delay: 1.45s; transition-duration: 0.4s; }
  .js [data-reveal].confirm-ways li:nth-child(2) .press .d[pathLength] { transition-delay: 2.15s; }
  /* the checks wait for the pair itself, not for the workflow step around it */
  .js .confirm-ways:not(.inview) .d[pathLength] { stroke-dashoffset: 1; }

  /* a window lights up once the connection is made */
  .js .lamp { opacity: 0; }
  .js .steps .inview .lamp,
  .js .demo-scene.inview .lamp { animation: fade-in 0.7s ease-out 1.25s both; }
  .js #cloud .figure.inview .lamp { animation: fade-in 0.7s ease-out 2.2s both; }
  .js #chat-apps .steps .inview .lamp { animation-delay: 1.6s; }

  /* a request travels: your computer, the relay, then Home Assistant lights up */
  .js .flow.inview .pulse-c { animation: pulse-c 1s ease-in-out 1.3s both; }
  .js .flow.inview .pulse-a { animation: pulse-a 0.8s ease-in-out 2.3s both; }
  .js .flow.inview .lamp { animation: fade-in 0.7s ease-out 3s both; }

  /* demo: the reset arrow comes around, its head lands last */
  .js .demo-scene .arrowhead { opacity: 0; }
  .js .demo-scene.inview .arrowhead { animation: fade-in 0.3s ease-out 2.1s both; }

}

@keyframes bubble-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes typing-show {
  0% { opacity: 0; }
  8%, 88% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes dot-bob {
  to { transform: translateY(-4px); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes settle {
  from { transform: translateY(-8px) scale(1.06); }
  to   { transform: none; }
}
@keyframes press {
  0%, 100% { transform: none; }
  45% { transform: scale(0.9); }
}
@keyframes pulse-c {
  0%   { opacity: 0; transform: none; }
  12%, 88% { opacity: 1; }
  100% { opacity: 0; transform: translateX(232px); }
}
@keyframes pulse-a {
  0%   { opacity: 0; transform: none; }
  12%, 88% { opacity: 1; }
  100% { opacity: 0; transform: translateX(178px); }
}

.figure {
  margin: 2.5rem 0 0;
  padding: 0;
}

.figure figcaption {
  margin-top: 1rem;
  color: var(--ink);
  font-weight: 600;
  text-align: center;
}

/* ---------- Scroll reveal & line drawing ---------- */

.js [data-reveal] {
  opacity: 0.001;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease-rise), transform 0.7s var(--ease-rise);
}

.js [data-reveal].inview {
  opacity: 1;
  transform: none;
}

.js [data-reveal] .d[pathLength] {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1s ease-out 0.25s;
}

.js [data-reveal].inview .d[pathLength] {
  stroke-dashoffset: 0;
}

.js [data-reveal] .d.slow[pathLength] {
  transition-duration: 1.4s;
  transition-delay: 0.75s;
}

/* gentle stagger inside groups */
.js .steps li:nth-child(2),
.js .says-row:nth-child(3),
.js .rules li:nth-child(2) { transition-delay: 0.08s; }
.js .steps li:nth-child(3),
.js .says-row:nth-child(4),
.js .rules li:nth-child(3) { transition-delay: 0.16s; }
.js .says-row:nth-child(5),
.js .rules li:nth-child(4) { transition-delay: 0.24s; }
.js .says-row:nth-child(6) { transition-delay: 0.32s; }
.js .says-row:nth-child(7) { transition-delay: 0.4s; }
.js .says-row:nth-child(8) { transition-delay: 0.48s; }

/* Pairing steps */

.steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin: 2.5rem 0 0;
  padding: 0;
}

.steps li {
  counter-increment: step;
  border-top: 1px solid var(--hairline);
  padding-top: 1.5rem;
}

.steps .scene {
  margin-bottom: 1.25rem;
}

.steps li::before {
  content: counter(step);
  display: block;
  color: var(--cyan);
  font-weight: 700;
  font-size: 0.9375rem;
  margin-bottom: 0.9rem;
}

.steps strong {
  color: var(--ink);
  display: block;
  margin-bottom: 0.2rem;
}

/* You say → what happens */

.says {
  border-top: 1px solid var(--hairline);
}

.says-head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2.5rem;
  padding: 1rem 0 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.says-you { color: var(--cyan); }
.says-nova { color: var(--amber); }

.says-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2.5rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--hairline);
}

.says-quote {
  margin: 0;
  color: var(--ink);
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.says-result {
  margin: 0;
}

/* Safety workflow */

.section-safety {
  max-width: 760px;
}

.workflow {
  list-style: none;
  counter-reset: wf;
  margin: 3rem 0 0;
  padding: 0;
  position: relative;
}

.workflow::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: linear-gradient(180deg, rgba(255, 179, 71, 0.7), rgba(255, 179, 71, 0.15));
  transform-origin: top;
}

/* the amber thread draws itself down as the chain reveals */
.js .workflow::before {
  transform: scaleY(0);
  transition: transform 1.6s var(--ease-rise) 0.2s;
}

.js .workflow.inview::before {
  transform: scaleY(1);
}

.workflow > li {
  counter-increment: wf;
  position: relative;
  padding: 0 0 2.5rem 4rem;
}

.workflow > li:last-child { padding-bottom: 0; }

.workflow > li::before {
  content: counter(wf);
  position: absolute;
  left: 0;
  top: -2px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 1px solid rgba(255, 179, 71, 0.55);
  background: var(--bg-1);
  color: var(--amber);
  font-weight: 700;
  font-size: 0.9375rem;
  display: grid;
  place-items: center;
}

.js .workflow > li:nth-child(2) { transition-delay: 0.12s; }
.js .workflow > li:nth-child(3) { transition-delay: 0.24s; }
.js .workflow > li:nth-child(4) { transition-delay: 0.36s; }
.js .workflow > li:nth-child(5) { transition-delay: 0.48s; }
.js .workflow > li:nth-child(6) { transition-delay: 0.6s; }
.js .workflow > li:nth-child(7) { transition-delay: 0.72s; }
.js .workflow > li:nth-child(8) { transition-delay: 0.84s; }

.workflow h3 {
  font-size: 1.25rem;
  font-weight: 600;
}

.workflow p {
  margin: 0.35rem 0 0;
  max-width: 52ch;
}

.workflow p + p { margin-top: 0.75rem; }

.workflow code,
.rules code {
  color: var(--amber);
  background: rgba(255, 179, 71, 0.1);
  border: 1px solid rgba(255, 179, 71, 0.3);
  border-radius: 5px;
  padding: 0.05em 0.35em;
}

.rules-title {
  margin-top: 4rem;
  font-size: 1.25rem;
}

.rules {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem 2.5rem;
}

.rules li {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  border-top: 1px solid var(--hairline);
  padding-top: 1.1rem;
}

.rules svg,
.callout svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 0.15rem;
  fill: none;
  stroke: var(--amber);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rules p { margin: 0; }

.note {
  margin: 1.75rem 0 0;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.section > .note { max-width: var(--measure); }

/* Cloud / Beta */

.beta {
  display: inline-block;
  vertical-align: 0.35em;
  margin-left: 0.6rem;
  padding: 0.15rem 0.65rem;
  border: 1px solid rgba(255, 179, 71, 0.55);
  border-radius: 999px;
  color: var(--amber);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- Get started: the install console ----------
   The page's call to action. A panel (Panel Night) framed by one cyan neon
   line: it is drawn like a scene, because it is your computer. The line
   draws itself as the block scrolls in; copying sweeps the command. */

.section-start > h2,
.section-start > .section-lead { text-align: center; margin-inline: auto; }

.section-start > .section-lead { margin-bottom: 2.25rem; color: var(--ink); text-wrap: balance; }

/* land the hero button on the heading, not on the section's top padding */
main #get-started { scroll-margin-top: calc(0.5rem - clamp(5rem, 13vh, 8.5rem)); }

/* the three steps sit above the console they describe */
.section-start > .steps-title { margin-top: 0; text-align: center; }
.section-start > .steps { margin-bottom: 3.5rem; }

.console {
  position: relative;
  padding: clamp(1.25rem, 3.2vw, 2.5rem);
  border-radius: 24px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(24, 188, 242, 0.07), transparent 60%),
    var(--panel);
}

/* a little wider than the text column, so the command fits on one line */
@media (min-width: 1200px) {
  .console { width: 1120px; margin-inline: calc(50% - 560px); }
}

.console-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.scene.console-frame .d { stroke-width: 1.5; }

.js [data-reveal] .console-frame .d[pathLength] {
  transition-duration: 1.6s;
  transition-delay: 0.1s;
  transition-timing-function: var(--ease-rise);
}

.console-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-bottom: 1.75rem;
}

.console-side {
  margin: 0;
  color: var(--cyan);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* tabs only with JS; without it, all three commands are listed */
.os-tabs { display: none; }

.js .os-tabs {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
}

.os-tabs button {
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: 600 1rem/1 -apple-system, 'Helvetica Neue', 'Segoe UI', sans-serif;
  padding: 0.6rem 1.15rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.os-tabs button:hover { color: var(--ink); }

.os-tabs button[aria-selected="true"] {
  color: var(--ink);
  background: rgba(24, 188, 242, 0.14);
  border-color: rgba(24, 188, 242, 0.55);
}

.os-tabs button:focus-visible,
.copy-cmd:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.console-phone {
  margin: -0.75rem 0 1.75rem;
  color: var(--ink);
  font-size: 0.9375rem;
}
.console-phone p { margin: 0; }
.console-phone .cta-row { margin-top: 1rem; justify-content: flex-start; }

/* all panels share one grid cell, so switching never moves the page */
.js .os-panels { display: grid; }
.js .os-panel { grid-area: 1 / 1; }
.js .os-panel:not(.is-active) { visibility: hidden; }
.js .os-name { display: none; }

.os-panel + .os-panel { margin-top: 2rem; }
.js .os-panel + .os-panel { margin-top: 0; }

.os-name {
  margin: 0 0 0.25rem;
  font-size: 1.25rem;
}

.os-where {
  margin: 0 0 0.9rem;
  font-size: 1.0625rem;
}

.os-where strong { color: var(--ink); font-weight: 600; }

.cmd {
  position: relative;
  display: flex;
  gap: 0.75em;
  align-items: baseline;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: rgba(5, 18, 29, 0.55);
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: clamp(0.9375rem, 0.55rem + 0.75vw, 1.125rem);
  line-height: 1.55;
  overflow: hidden;
}

.cmd-prompt {
  flex: 0 0 auto;
  color: var(--cyan);
  user-select: none;
  -webkit-user-select: none;
}

.cmd pre {
  margin: 0;
  min-width: 0;
  font: inherit;
  /* the whole line stays visible: it wraps instead of hiding off the edge */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.cmd code {
  color: var(--ink);
  font: inherit;
}

.cmd ::selection { background: rgba(24, 188, 242, 0.35); color: var(--ink); }

.cmd-cursor {
  display: inline-block;
  width: 0.55em;
  height: 1.1em;
  margin-left: 0.35em;
  /* takes no line width, so it never wraps onto a line of its own */
  margin-right: -0.9em;
  vertical-align: -0.18em;
  background: rgba(24, 188, 242, 0.7);
}

/* the sweep: a band of cyan light runs over the copied line once */
.cmd::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(24, 188, 242, 0.22) 45%, rgba(24, 188, 242, 0.22) 55%, transparent);
  opacity: 0;
  transform: translateX(-100%);
  pointer-events: none;
}

/* copying needs JS; without it, the line can still be selected by hand */
.copy-cmd { display: none; }

.js .copy-cmd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-width: 10rem;
  margin-top: 1.25rem;
  padding: 0.85rem 1.9rem;
  border: 1px solid var(--cyan);
  border-radius: 999px;
  background: var(--cyan);
  color: #05121D;
  font: 600 1.0625rem/1.2 -apple-system, 'Helvetica Neue', 'Segoe UI', sans-serif;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.16s ease-out;
}

.copy-cmd:hover { background: #4FCDF6; border-color: #4FCDF6; }

.copy-cmd:active { transform: scale(0.97); }

.copy-cmd svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.copy-cmd .i-check { display: none; }

/* the script behind the one-liner, one click away */
.cmd-source {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 1.25rem 0 0;
  vertical-align: middle;
  font-size: 0.9375rem;
}
.js .cmd-source { margin-left: 1.25rem; }
.app-panels .cmd-source { margin-top: 0.75rem; }

/* copied: the line is now in your hands; amber like every "done" state */
.copy-cmd.copied {
  background: transparent;
  border-color: rgba(255, 179, 71, 0.55);
  color: var(--amber);
}

.copy-cmd.copied .i-copy { display: none; }
.copy-cmd.copied .i-check { display: inline; }

.console-next {
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
  color: var(--ink-soft);
  font-size: 1.0625rem;
}

.start-alt {
  margin: 1.5rem 0 0;
  text-align: center;
  font-size: 1rem;
}

.section-start > .start-alt + .more { margin-top: 2.5rem; }

@media (prefers-reduced-motion: no-preference) {
  .js .cmd-cursor { animation: blink 1.1s steps(1) infinite; }

  .copy-cmd.copied .i-check {
    stroke-dasharray: 1;
    animation: check-draw 0.45s var(--ease-rise) both;
  }

  .os-panel:has(.copied) .cmd::after {
    animation: sweep 0.9s var(--ease-rise) both;
  }
}

@keyframes check-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes sweep {
  0% { opacity: 1; transform: translateX(-100%); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateX(100%); }
}

.clients-label {
  margin: 3rem 0 0.75rem;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9375rem;
}

.clients {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.clients li {
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.35rem 1rem;
  font-size: 0.9375rem;
}

.preview {
  color: var(--cyan);
  font-size: 0.8125rem;
  margin-left: 0.3rem;
}

/* ---------- Demo page (demo/index.html) ---------- */

/* the shared-account warning: amber, because it guards the visitor */
.callout {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  max-width: 40rem;
  margin: 2.25rem auto 0;
  padding: 1.1rem 1.25rem;
  border: 1px solid rgba(255, 179, 71, 0.55);
  border-radius: 10px;
  background: rgba(255, 179, 71, 0.06);
  color: var(--ink);
  text-align: left;
}

.js .callout { animation: rise 1s var(--ease-rise) 0.31s both; }

.callout p { margin: 0; }

/* login + next reset, right under the demo buttons */
.js .hero .note {
  animation: rise 1s var(--ease-rise) 0.42s both;
}
.hero .note + .note { margin-top: 0.6rem; }
.note code { white-space: nowrap; }

.callout strong {
  display: block;
  color: var(--amber);
}

/* ---------- Try band, call rows, questions ---------- */

.section-try { text-align: center; }
.section-try h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem); }
.section-try .section-lead { margin: 0.9rem auto 0; text-wrap: balance; }

.cta-row {
  margin: 2rem 0 0;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.faq {
  margin: 2.25rem 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem 2.5rem;
}
.faq-item { border-top: 1px solid var(--hairline); padding-top: 1.1rem; }
.faq dt { color: var(--ink); font-weight: 600; font-size: 1.125rem; }
.faq dd { margin: 0.4rem 0 0; }
.faq code { white-space: nowrap; }

/* ---------- Footer: a small site map ---------- */

.footer {
  max-width: 1040px;
  margin: clamp(5rem, 13vh, 8rem) auto 0;
  padding: 2.5rem 1.5rem 3rem;
  /* one hairline on top, across the text column, not the gutters */
  background: linear-gradient(var(--hairline), var(--hairline)) 1.5rem 0 / calc(100% - 3rem) 1px no-repeat;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 3fr);
  gap: 2rem 2.5rem;
}

.footer-brand p { margin: 0.4rem 0 0; font-size: 0.9375rem; }

.footer-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem 2rem;
}

.footer-label {
  margin: 0.6rem 0 0.35rem;
  color: var(--ink-soft);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-map ul { margin: 0; padding: 0; list-style: none; }

.footer-map a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  text-decoration: none;
}
.footer-map a:hover { color: var(--ink); text-decoration: underline; }
.footer-map a[aria-current="page"] { color: var(--ink); }

/* ---------- Privacy page ---------- */

.legal {
  max-width: calc(var(--measure) + 3rem);
  margin: 0 auto;
  padding: clamp(3rem, 8vh, 5rem) 1.5rem 0;
}

.legal h1 {
  margin-top: 0;
  font-size: clamp(1.875rem, 1.3rem + 2.4vw, 2.75rem);
  letter-spacing: -0.02em;
}

.legal h2 {
  margin-top: 2.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hairline);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0;
}

.legal p { margin: 0.75rem 0 0; }

.legal strong { color: var(--ink); }

/* ---------- 404 ---------- */

.notfound { padding-bottom: 0; text-align: center; }
.notfound .hero-tagline { font-size: clamp(1.75rem, 1.1rem + 3vw, 3rem); }

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .rules, .faq { grid-template-columns: 1fr; gap: 1.25rem; }

  /* the bar keeps only what you need on a small screen */
  .topbar-wide { display: none; }
  .footer { grid-template-columns: 1fr; }

  /* the hero corner is too close to the text on small screens */
  .hero::before, .hero-constellation { display: none; }
}

@media (max-width: 720px) {
  :root { --bar: 52px; }
  .topbar-inner { padding: 0 1rem; gap: 0.5rem; }
  .topbar-links { gap: 0; }
  .topbar-links a:not(.btn) { padding: 0 0.55rem; }
  .topbar-gh { min-width: 44px; justify-content: center; }
  .topbar-gh .gh-word {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .topbar .btn { width: auto; max-width: none; }
  .topbar .btn-small { margin-left: 0.25rem; padding: 0.6rem 1rem; }
  .footer-map { grid-template-columns: 1fr 1fr; }
  .js .cmd-source { margin-left: 0; }

  .says-head { display: none; }

  .says-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 1.25rem 0;
  }

  .says-quote::before {
    content: "You say";
    display: block;
    color: var(--cyan);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.3rem;
  }

  .steps {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .steps .scene {
    max-width: 17rem;
  }

  .workflow > li { padding-left: 3.25rem; }

  .btn { width: 100%; max-width: 20rem; text-align: center; }

  .scene-wide text { display: none; }
  .scene-legend {
    display: grid;
    gap: 0.35rem 1rem;
    margin-top: 0.9rem;
    color: var(--ink);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
  }
  .scene-legend small { display: block; color: var(--ink-soft); font-size: 0.8125rem; font-weight: 400; }
  .legend-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center; }
  .legend-cloud { grid-template-columns: 1fr 1fr; }
  .legend-cloud span:nth-child(even) { text-align: right; }

  .safety-head, .section-head { flex-direction: column-reverse; align-items: flex-start; gap: 1.25rem; }
  .safety-emblem, .section-emblem { width: 76px; }

  .confirm-ways { gap: 0.9rem; }

  .copy-cmd { width: 100%; }
  .console-bar { margin-bottom: 1.25rem; }
  .js .os-tabs { display: flex; width: 100%; }
  .os-tabs button { flex: 1 1 0; min-height: 44px; padding-inline: 0.5rem; }
  .confirm-ways span { font-size: 0.9375rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .hero-star, .hero-brand, .hero-tagline, .hero-sub, .hero-ctas, .hero-try, .js .callout, .js .hero .note { animation: none; }

  html::before, html::after, body::before, body::after, main::before { animation: none; }

  .hero::before { animation: none; }

  .js .hero-constellation .cl { animation: none; stroke-dashoffset: 0; }

  .cursor { animation: none; }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js [data-reveal] .d[pathLength] {
    stroke-dashoffset: 0;
    transition: none;
  }

  .js .workflow::before {
    transform: none;
    transition: none;
  }
}

/* demo page: which app. Only the chosen panel shows (with JS), so a short one leaves no gap. */
.js .app-panels { display: block; }
.js .app-panels .os-panel:not(.is-active) { display: none; }
.app-tabs { flex-wrap: wrap; justify-content: center; }
.app-panels .steps { margin-top: 1.5rem; }
.app-step { margin: 1.75rem 0 0.75rem; font-size: 1.0625rem; }
.app-step strong { color: var(--ink); }
.app-panels .copy-cmd { margin-top: 0.75rem; }
.says-list { margin: 1rem 0 0; padding-left: 1.4rem; font-size: 1.0625rem; color: var(--ink); }
.says-list li + li { margin-top: 0.5rem; }
#try .console-bar { margin-top: 1.25rem; }
#try .callout { margin: 0 0 2.5rem; }
@media (prefers-reduced-motion: no-preference) {
  /* three commands in one panel: sweep only the one copied */
  .app-panels .os-panel:has(.copied) .cmd::after { animation: none; }
  .app-panels .cmd:has(+ .copy-cmd.copied)::after { animation: sweep 0.9s var(--ease-rise) both; }
}

/* the wordmark yields to the links on phones; the star stays */
@media (max-width: 440px) {
  .topbar .topbar-home span {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* demo page: a short hero, so the app picker and Add to Claude show on the first screen */
.hero-demo { padding-top: clamp(1.75rem, 6vh, 4rem); }
.hero-demo .hero-star { width: clamp(56px, 8vw, 96px); }
.hero-demo .hero-tagline { margin-top: 1rem; font-size: clamp(1.75rem, 1.1rem + 3vw, 3.25rem); }
.hero-demo .hero-sub { margin-top: 1rem; }
.hero-demo + .section { padding-top: 2.25rem; }
.hero-demo + .section > h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem); }
.add-claude { margin: 0 0 1rem; }
@media (max-width: 720px) {
  /* the bar already carries the star */
  .hero-demo { padding-top: 1.5rem; }
  .hero-demo .hero-star { display: none; }
  .hero-demo .hero-tagline { margin-top: 0; font-size: 1.75rem; }
  .hero-demo .hero-sub { margin-top: 0.6rem; font-size: 1rem; }
  .hero-demo + .section { padding-top: 1.25rem; }
  .hero-demo + .section > h2 { font-size: 1.375rem; }
  #try .callout { margin-bottom: 1.25rem; padding: 0.8rem 1rem; font-size: 0.875rem; line-height: 1.55; }
  #try .console-bar { margin-top: 0.75rem; }
  /* Get started: smaller step scenes, so the command comes sooner */
  .section-start .steps .scene { max-width: 12rem; }
}