/* ==========================================================================
   ORRERY — home page sections.
   Depends on css/base.css for tokens and primitives.
   ========================================================================== */

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: min(94vh, 900px);
  display: flex;
  align-items: center;
  padding: clamp(52px, 8vw, 104px) 0 clamp(40px, 6vw, 78px);
  overflow: hidden;
  isolation: isolate;
}

#orrery {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  /* The instrument is the background; the text has to stay legible over it.
     Fading the right-hand third rather than the whole field keeps the outer
     arms visible where nothing is written. */
  -webkit-mask-image: radial-gradient(78% 96% at 72% 50%, #000 46%, rgba(0,0,0,.62) 76%, transparent 100%);
          mask-image: radial-gradient(78% 96% at 72% 50%, #000 46%, rgba(0,0,0,.62) 76%, transparent 100%);
}

/* A wash under the copy column only. Without it the headline sits on whatever
   orbit happens to pass behind it. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
    var(--sky) 0%,
    color-mix(in srgb, var(--sky) 88%, transparent) 32%,
    color-mix(in srgb, var(--sky) 30%, transparent) 50%,
    transparent 62%);
  pointer-events: none;
}

.hero-inner { max-width: 40rem; position: relative; }

.hero h1 { margin-bottom: .34em; }
.hero h1 span { display: block; }
.hero h1 span:last-child { color: var(--ink-3); }

.hero .lede { margin-top: 1.15rem; }

.hero-cta {
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin-top: 1.9rem;
}

/* The readout. An instrument prints its own state. */
.readout {
  margin-top: clamp(30px, 4vw, 46px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--plate) 88%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
}
.readout > div { padding: .85rem 1rem; border-right: 1px solid var(--line); min-width: 0; }
.readout > div:last-child { border-right: 0; }
.readout dt {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--faint); margin: 0 0 .3rem;
}
.readout dd {
  margin: 0; font-family: var(--mono); font-size: .84rem; color: var(--ink);
  overflow-wrap: anywhere;
}
.readout dd small { display: block; color: var(--faint); font-size: .68rem; letter-spacing: .02em; margin-top: .12rem; }
/* Below the two-column breakpoint the copy sits UNDER the instrument rather
   than beside it, so the wash has to run vertically. Written as a separate
   rule after the base one — a media query adds no specificity, so the order
   is what decides, and a sibling site shipped this pair the wrong way round
   and the affordance never rendered at any width. */
@media (max-width: 900px) {
  .hero::before {
    background: linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb, var(--sky) 55%, transparent) 14%,
      var(--sky) 30%);
  }
  #orrery {
    -webkit-mask-image: radial-gradient(92% 46% at 74% 13%, #000 40%, rgba(0,0,0,.5) 72%, transparent 100%);
            mask-image: radial-gradient(92% 46% at 74% 13%, #000 40%, rgba(0,0,0,.5) 72%, transparent 100%);
  }
  .hero { min-height: auto; padding-top: clamp(120px, 30vw, 190px); }
}

@media (max-width: 700px) {
  .readout { grid-template-columns: minmax(0, 1fr); }
  .readout > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .readout > div:last-child { border-bottom: 0; }
}

.hero-note {
  margin-top: .9rem;
  font-size: .76rem;
  color: var(--faint);
  max-width: 56ch;
}
.hero-note a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; }
.hero-note a:hover { color: var(--ink); }

/* ==========================================================================
   Before / after
   ========================================================================== */

.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
@media (max-width: 800px) { .compare { grid-template-columns: minmax(0, 1fr); } }

.compare .plate { padding: 0; overflow: hidden; }
.compare-head {
  padding: 1rem clamp(16px, 2vw, 24px);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: .6rem;
  min-width: 0;
}
.compare-head h3 { margin: 0; font-size: 1.02rem; }
.compare-head .mk { flex: none; width: 18px; height: 18px; }
.compare li {
  list-style: none;
  padding: 1rem clamp(16px, 2vw, 24px);
  border-bottom: 1px solid var(--line);
}
.compare ul { margin: 0; padding: 0; }
.compare li:last-child { border-bottom: 0; }
.compare li b { display: block; color: var(--ink); font-size: .95rem; margin-bottom: .18rem; font-weight: 600; }
.compare li span { font-size: .89rem; color: var(--ink-3); }
.compare .now li b { color: var(--ink-2); }

/* ==========================================================================
   Rails
   ========================================================================== */

.rails { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.7vw, 20px); }
@media (max-width: 940px) { .rails { grid-template-columns: minmax(0, 1fr); } }

a.rail {
  display: flex; flex-direction: column;
  background: var(--plate);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(20px, 2.3vw, 28px);
  color: inherit;
  box-shadow: inset 0 1px 0 var(--edge);
  transition: border-color .18s, background .18s, transform .18s;
  position: relative;
  overflow: hidden;
}
a.rail:hover { border-color: var(--line-3); background: var(--plate-2); transform: translateY(-2px); }
/* The rail's own arc, tinted by its star. Repeats the eyebrow ornament at
   figure scale so the page has one shape in it rather than four. */
a.rail::after {
  content: '';
  position: absolute;
  right: -58px; top: -74px;
  width: 190px; height: 190px;
  border: 1px solid var(--rail-c, var(--line-2));
  border-radius: 50%;
  opacity: .3;
  pointer-events: none;
}
.rail-kind {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--faint); margin-bottom: .8rem;
}
.rail h3 { font-size: 1.5rem; margin-bottom: .12rem; font-family: var(--display); font-weight: 500; letter-spacing: -0.01em; }
.rail .line { color: var(--rail-c, var(--hot)); font-size: .92rem; font-weight: 600; margin-bottom: .8rem; }
.rail p { font-size: .9rem; color: var(--ink-3); }
.rail ul { list-style: none; margin: 1rem 0 1.3rem; padding: 0; display: grid; gap: .42rem; }
.rail ul li { font-size: .84rem; color: var(--ink-3); padding-left: 1.05rem; position: relative; }
.rail ul li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--rail-c, var(--hot));
  opacity: .8;
}
.rail .arrow-link { margin-top: auto; color: var(--rail-c, var(--hot)); }

/* ==========================================================================
   Flow — four stages on an arc
   ========================================================================== */

.flow-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 3.4vw, 52px); align-items: center; }
@media (max-width: 900px) { .flow-wrap { grid-template-columns: minmax(0, 1fr); } }

#flow-figure { width: 100%; }
#flow-figure svg { width: 100%; height: auto; display: block; }

.stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.stages li {
  background: var(--plate);
  border: 1px solid var(--line);
  padding: .95rem 1.1rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .2rem .95rem;
  align-items: baseline;
  transition: background .2s, border-color .2s;
}
.stages li:first-child { border-radius: var(--r) var(--r) 0 0; }
.stages li:last-child  { border-radius: 0 0 var(--r) var(--r); }
.stages li.on { background: var(--plate-2); border-color: var(--line-3); }
.stages .n { font-family: var(--mono); font-size: .74rem; color: var(--faint); grid-row: span 2; }
.stages b { color: var(--ink); font-size: .98rem; font-weight: 600; }
.stages .idn {
  font-family: var(--mono); font-size: .74rem; color: var(--hot);
  margin-left: .6rem; white-space: nowrap;
}
.stages p { grid-column: 2; font-size: .87rem; color: var(--ink-3); margin: .3rem 0 0; }

/* ==========================================================================
   Parallax — the decomposition
   ========================================================================== */

.parallax-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(22px, 3vw, 44px); align-items: start; }
@media (max-width: 900px) { .parallax-grid { grid-template-columns: minmax(0, 1fr); } }

.px-rows { display: grid; gap: 1px; }
.px-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.6rem;
  gap: .3rem 1rem;
  padding: .82rem 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.px-row:last-child { border-bottom: 0; }
.px-row b { color: var(--ink); font-weight: 600; font-size: .95rem; display: flex; align-items: center; gap: .5rem; min-width: 0; }
.px-row b i {
  flex: none; width: 8px; height: 8px; border-radius: 2px;
  background: var(--px-c, var(--ink-3));
  opacity: var(--px-o, 1);
}
.px-row .v { font-family: var(--mono); text-align: right; font-size: .95rem; color: var(--ink); }
.px-row .v.neg { color: var(--cool); }
.px-row p { grid-column: 1 / -1; margin: 0; font-size: .82rem; color: var(--faint); }

.px-bar { display: grid; gap: .55rem; }
.px-bar .track {
  position: relative; height: 26px;
  background: var(--plate-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.px-bar .track i { position: absolute; top: 0; bottom: 0; display: block; }
.px-bar .lbl {
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .05em;
  color: var(--faint); text-transform: uppercase;
}
.px-bar .lbl .n { color: var(--ink); letter-spacing: 0; }

.px-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; margin-bottom: 1.4rem; }
.px-summary > div { background: var(--plate-2); border: 1px solid var(--line); padding: 1rem 1.15rem; }
.px-summary > div:first-child { border-radius: var(--r) 0 0 var(--r); }
.px-summary > div:last-child  { border-radius: 0 var(--r) var(--r) 0; }
.px-summary dt { font-family: var(--mono); font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--faint); }
.px-summary dd { margin: .3rem 0 0; font-family: var(--display); font-variation-settings: 'opsz' 48, 'SOFT' 0, 'WONK' 0; font-size: 2.1rem; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.px-summary .keep dd { color: var(--hot-fill); }
@media (max-width: 520px) {
  .px-summary { grid-template-columns: minmax(0, 1fr); }
  .px-summary > div:first-child { border-radius: var(--r) var(--r) 0 0; }
  .px-summary > div:last-child  { border-radius: 0 0 var(--r) var(--r); }
}

.footnote { font-size: .78rem; color: var(--faint); margin-top: 1.1rem; }

/* ==========================================================================
   Steps
   ========================================================================== */

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.7vw, 22px); counter-reset: s; }
@media (max-width: 900px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.step { position: relative; padding-top: 2.6rem; }
.step .n {
  position: absolute; top: 0; left: 0;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; color: var(--faint);
}
.step::before {
  content: ''; position: absolute; top: 1.55rem; left: 0; right: 0;
  height: 1px; background: var(--line-2);
}
.step h3 { margin-bottom: .35rem; }
.step p { font-size: .89rem; color: var(--ink-3); }

/* ==========================================================================
   Guarantees / gaps
   ========================================================================== */

.gg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
@media (max-width: 860px) { .gg { grid-template-columns: minmax(0, 1fr); } }
.gg ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.gg li { padding: .95rem 0; border-bottom: 1px solid var(--line); }
.gg li:last-child { border-bottom: 0; }
.gg li b { display: flex; gap: .55rem; align-items: baseline; color: var(--ink); font-size: .95rem; font-weight: 600; margin-bottom: .2rem; }
.gg li b::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--hot); transform: translateY(-1px); }
.gg .gaps li b::before { background: var(--cool); }
.gg li span { font-size: .88rem; color: var(--ink-3); }

/* ==========================================================================
   Integrations — the empty row
   ========================================================================== */

.needs { display: grid; gap: 1px; }
.needs div {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: .3rem 1.2rem; align-items: baseline;
  padding: 1rem 0; border-bottom: 1px solid var(--line);
}
.needs div:last-child { border-bottom: 0; }
.needs b { color: var(--ink); font-weight: 600; font-size: .95rem; }
/* `:not(.state)`, because the bare element selector was also claiming the
   status chip: it put it in column 1, where the 1fr track stretched a
   two-word label into a dashed box the full width of the section. Twelve of
   them, four on the home page, in the section whose whole argument is that a
   deliberately empty state is information. */
.needs span:not(.state) { font-size: .86rem; color: var(--ink-3); grid-column: 1; }
.needs .state {
  grid-column: 2; grid-row: 1 / span 2; justify-self: end; align-self: center;
  font-family: var(--mono); font-size: .69rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
  border: 1px dashed var(--line-2); border-radius: 3px; padding: .12rem .5rem;
  white-space: nowrap;
}

/* ==========================================================================
   Bento
   ========================================================================== */

.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.5vw, 18px); }
@media (max-width: 900px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .bento { grid-template-columns: minmax(0, 1fr); } }
.bento .cell {
  background: var(--plate);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(18px, 2.1vw, 26px);
  box-shadow: inset 0 1px 0 var(--edge);
  display: flex; flex-direction: column; gap: .5rem;
}
.bento .cell.wide { grid-column: span 2; }
@media (max-width: 560px) { .bento .cell.wide { grid-column: span 1; } }
.bento .stat-v {
  font-family: var(--display);
  font-variation-settings: 'opsz' 90, 'SOFT' 0, 'WONK' 0;
  font-size: clamp(2.3rem, 5vw, 3.4rem); line-height: .96; color: var(--ink);
}
.bento .cell.zero .stat-v { color: var(--cool-fill); }
.bento .stat-l { font-family: var(--mono); font-size: .69rem; letter-spacing: .13em; text-transform: uppercase; color: var(--faint); }
.bento p { font-size: .87rem; color: var(--ink-3); margin: 0; }

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq { display: grid; gap: 2px; }
.faq details {
  background: var(--plate);
  border: 1px solid var(--line);
}
.faq details:first-of-type { border-radius: var(--r) var(--r) 0 0; }
.faq details:last-of-type  { border-radius: 0 0 var(--r) var(--r); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.05rem clamp(16px, 2vw, 22px);
  display: flex; align-items: baseline; gap: 1rem;
  color: var(--ink); font-weight: 600; font-size: .98rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  margin-left: auto; flex: none;
  width: 9px; height: 9px;
  border-right: 1px solid var(--ink-3);
  border-bottom: 1px solid var(--ink-3);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.faq summary:hover { background: var(--plate-2); }
.faq .a { padding: 0 clamp(16px, 2vw, 22px) 1.2rem; font-size: .91rem; color: var(--ink-3); max-width: 78ch; }
.faq-group-label {
  font-family: var(--mono); font-size: .69rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--faint);
  margin: 2.1rem 0 .7rem;
}
.faq-group-label:first-child { margin-top: 0; }

/* ==========================================================================
   CTA band
   ========================================================================== */

.cta-band {
  padding: clamp(56px, 8vw, 104px) 0;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(90% 140% at 50% 0%, color-mix(in srgb, var(--hot) 12%, transparent), transparent 62%),
    var(--sky);
  text-align: center;
}
.cta-band h2 { margin-bottom: .5rem; }
.cta-band .lede { margin-inline: auto; }
.cta-band .hero-cta { justify-content: center; margin-top: 1.7rem; }

/* A button that reads as a link — the readout's "reset to now". */
.linklike {
  background: none; border: 0; padding: 0;
  color: var(--ink-3); font: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.linklike:hover { color: var(--ink); }