/* The end of the page: the list, the road to version 1, the three systems it is coming to and the
   questions, on the same ground as the rest. The mark keeps its violet but no glow: a haze behind it was a second ground. The headline
   is the one set larger than every scene's: it is the page's last word, not another scene. */
/* Spaced by the window's height as well, so a short window reached by the nav's Join the list still
   has the mark, the headline, the road and the form close together. The top clears the nav's 64 px,
   which is back over the section when it is reached going up, from the foot's links. */
.get { padding: clamp(64px, 11vh, 160px) var(--gutter) clamp(64px, 10vh, 112px); text-align: center; overflow: clip; }
/* Reached going down (the nav's Join the list, the foot's), the nav tucks
   away as the page jumps, so the 72 px base.css keeps for it would be an empty band over the
   mark: on a 500 px window it was what left the buttons 16 px off the foot. */
#get { scroll-margin-top: -72px; }
.get h2 { font-size: clamp(52px, min(8vw, 13vh), 124px); }

/* ── the road: alpha, beta, version 1, version 2 ── */
/* The stops on one line, each a column (--n of them), so stop k stands at (2k - 1) / 2n of its
   width. The road is drawn solid in the mark's violet up to the stop that is next (--reach, in
   2n-ths) and dashed beyond it, since what is ahead is not drawn yet: ISO 128-2's dashed line, type
   02, dashes 12 line widths long with gaps of 3, the line the app rules a hidden edge with. */
.road { --n: 4; --reach: 1; position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); max-width: 940px; margin: clamp(30px, 5.4vh, 52px) auto 0; padding: 0; list-style: none; }
.road:has(> :nth-child(2).now) { --reach: 3; }
.road:has(> :nth-child(3).now) { --reach: 5; }
.road:has(> :nth-child(4).now) { --reach: 7; }
.road::before, .road::after { content: ""; position: absolute; top: 7px; height: 1px; }
.road::before { left: 0; width: calc(100% * var(--reach) / (2 * var(--n))); background: linear-gradient(90deg, transparent, var(--mark) 40%); transform-origin: left; }
.road::after {
  left: calc(100% * var(--reach) / (2 * var(--n))); right: 0;
  background: repeating-linear-gradient(90deg, var(--fg-3) 0 12px, transparent 12px 15px);
  -webkit-mask: linear-gradient(90deg, #000 80%, transparent); mask: linear-gradient(90deg, #000 80%, transparent);
}
.road li { --k: 0; padding: 0 12px; }
.road li:nth-child(2) { --k: 1; }
.road li:nth-child(3) { --k: 2; }
.road li:nth-child(4) { --k: 3; }
/* A stop: a ring on the road, filled in the mark's violet when it is the one coming next, with one
   crisp ring going out from it every few seconds, a line and not a haze (nothing on the page glows
   but the hero's backlight). */
.road i { position: relative; z-index: 1; display: block; width: 15px; height: 15px; margin: 0 auto 18px; border-radius: 50%; background: var(--ground); box-shadow: inset 0 0 0 1.5px var(--fg-3); }
.road .now i { background: var(--mark); box-shadow: none; }
.road .now i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1px var(--mark); animation: road-ping 2.6s var(--ease) 2s infinite; opacity: 0; }
@keyframes road-ping { 0% { transform: scale(1); opacity: 0.9; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
.road b { display: block; font: 600 clamp(21px, 2vw, 26px)/1.1 var(--display); letter-spacing: -0.025em; color: var(--fg); }
.road-when { display: block; margin-top: 7px; font: 500 13px/1.4 var(--mono); color: var(--fg-2); }
.road .now .road-when { color: var(--mark); }
.road-what { display: block; max-width: 23ch; margin: 9px auto 0; font-size: 15px; line-height: 1.45; color: var(--fg-3); text-wrap: balance; }

/* Drawn as it arrives: the violet stretch first, then the dashes run out ahead, and each stop is set
   on the road as the line reaches it, its words a beat behind. */
.road::before { transform: scaleX(0); transition: transform 0.7s var(--ease) 0.25s; }
.road::after { clip-path: inset(0 100% 0 0); transition: clip-path 1.5s var(--ease-io) 0.6s; }
.road i { transform: scale(0); transition: transform 0.55s cubic-bezier(0.3, 1.5, 0.5, 1) calc(0.55s + var(--k) * 0.45s); }
.road li > :not(i) { opacity: 0; transform: translateY(6px); transition: opacity 0.7s var(--ease), transform 0.8s var(--ease); transition-delay: calc(0.7s + var(--k) * 0.45s); }
.road.in::before { transform: none; }
.road.in::after { clip-path: inset(0); }
.road.in i, .road.in li > :not(i) { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .road::before, .road::after, .road i, .road li > * { transition: none !important; }
  .road .now i::after { animation: none; }
}
/* On a phone the road stands upright, the stops down its left side and their words beside them. */
@media (max-width: 640px) {
  .road { grid-template-columns: 1fr; gap: 26px; max-width: 340px; text-align: left; }
  .road li { position: relative; padding: 0 0 0 36px; }
  .road i { position: absolute; left: 0; top: 5px; margin: 0; }
  .road-what { max-width: none; margin-left: 0; }
  .road::before { top: -14px; left: 7px; width: 1px; height: 19px; background: linear-gradient(transparent, var(--mark)); transform-origin: top; }
  .road::before { transform: scaleY(0); }
  .road.in::before { transform: none; }
  .road::after {
    top: 20px; bottom: 0; left: 7px; right: auto; width: 1px; height: auto;
    background: repeating-linear-gradient(180deg, var(--fg-3) 0 12px, transparent 12px 15px);
    -webkit-mask: linear-gradient(#000 80%, transparent); mask: linear-gradient(#000 80%, transparent);
    clip-path: inset(0 0 100% 0);
  }
  .road.in::after { clip-path: inset(0); }
}

/* The form's label is for a screen reader alone: the button and the field's example say the rest. */
.signup .unseen { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* The three systems, each with its mark, at full strength: a list of what is coming, not buttons
   that do nothing (his word, 26 September 2026). The day a build is up, js/download.js makes its
   entry a link, and the link fills the pill. */
.platforms { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: clamp(24px, 4.4vh, 40px) 0 0; padding: 0; list-style: none; }
.platforms li, .platforms .get-build { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 18px 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hair-2); font: 500 15px/1 var(--sans); letter-spacing: -0.01em; color: var(--fg); }
.platforms li:has(.get-build) { padding: 0; box-shadow: none; }
.platforms svg { width: 17px; height: 17px; fill: currentColor; }

/* The mark, set out and then finished (js/mark.js plays it). It arrives as a drafter would draw it:
   the circle the petals stand on and their five axes as centre lines, in the grey of a drawing's
   thin lines, the petals struck one after another in the mark's own violet, then the one
   dimension, blue like every dimension on the page. Then it is inked: the head fills, the
   construction and the dimension go, and the icon's sheet comes up under the head. What stands is
   the app's icon as it ships, sized like an app's icon on a download page. */
.get-mark { display: block; width: clamp(100px, min(17vh, 30vw), 156px); height: auto; margin: 0 auto clamp(14px, 3vh, 30px); overflow: visible; }
/* Set out half as large again, since a construction of hairlines 100 px across is a detail nobody
   reads, and settled to the icon's size as it is inked: the drawing becomes the icon rather than
   being swapped for it. At this size the construction still stops short of the headline. */
.get-mark { transform: scale(1.5); }
.get-mark.resolved { transform: none; transition: transform 0.7s var(--ease-io); }
/* ISO 128-2's long-dash dotted line, as the app rules a centre line (ISO_LINE_PATTERNS.centre in
   its theme.ts): a dash 24 pen widths long, a gap of 3, a dot of 1, a gap of 3. The pen is the
   thin one the dimension is drawn with too; tools/mark.mts holds the pattern to the app's. */
.gm-build { fill: none; stroke: var(--fg-3); stroke-width: 0.13; stroke-dasharray: 3.12 0.39 0.13 0.39; }
/* The petals are the thing drawn, so they take the wide line, twice the thin one, the pair ISO
   128-2 draws outlines and their construction in. */
.gm-strike { fill: none; stroke: var(--mark); stroke-width: 0.26; }
.gm-dim path { fill: none; stroke: var(--blue); stroke-width: 0.13; }
.gm-dim .gm-head { fill: var(--blue); stroke: none; }
.gm-dim text { fill: var(--blue); font: 500 1.9px var(--mono); }

/* Before js/mark.js plays it, nothing of the construction shows. A line is drawn by its dash: as
   long as the line, with a gap twice as long, so hidden the gap covers the whole line with room to
   spare, where a gap only as long as the line left a sliver of the next dash at its end. */
.get-mark .gm-strike > *, .get-mark .gm-arc { stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.get-mark .gm-build > *, .get-mark .gm-head, .get-mark text { opacity: 0; }

/* Inked: the outlines go at once, before the fill is up, so the petals' overlaps never show through
   it; the construction and the dimension go while the mark settles to its size; and the sheet comes
   up under the head as it lands, never at the size the construction was drawn at. Each part carries
   its own timing here, since a transition takes the timing of the state it is going to. */
.get-mark .mark-head, .get-mark .mark-sheet { opacity: 0; }
.get-mark .mark-sheet { transform-origin: 512px 512px; transform: scale(0.94); }
/* It is over in three quarters of a second, so a reader who keeps scrolling still sees it stand. */
.get-mark.resolved .gm-strike { opacity: 0; transition: opacity 0.25s var(--ease); }
.get-mark.resolved .mark-head { opacity: 1; transition: opacity 0.4s var(--ease) 0.1s; }
.get-mark.resolved .gm-build, .get-mark.resolved .gm-dim { opacity: 0; transition: opacity 0.4s var(--ease); }
.get-mark.resolved .mark-sheet { opacity: 1; transform: none; transition: opacity 0.45s var(--ease) 0.3s, transform 0.5s var(--ease) 0.3s; }
@media (prefers-reduced-motion: reduce) {
  .get-mark, .get-mark *, .get-mark.resolved, .get-mark.resolved * { transition: none !important; }
  .get-mark { transform: none; }
}
.get .join { max-width: 480px; margin: clamp(28px, 5vh, 44px) auto 0; }

.faq { max-width: 760px; margin: clamp(56px, 10vh, 104px) auto 0; text-align: left; }
.faq details { border-top: 1px solid var(--hair); }
.faq details:last-child { border-bottom: 1px solid var(--hair); }
.faq summary { display: flex; justify-content: space-between; gap: 18px; padding: 20px 0; cursor: pointer; list-style: none; font: 500 17px/1.35 var(--sans); letter-spacing: -0.01em; color: var(--fg); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 300 22px/1 var(--sans); color: var(--fg-3); transition: transform 0.3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: -6px 0 22px; max-width: 600px; color: var(--fg-2); line-height: 1.6; }
/* What a computer needs, one row a system: its mark and name, then what it takes. */
.faq .needs { display: grid; grid-template-columns: max-content 1fr; gap: 12px 28px; margin: -2px 0 24px; line-height: 1.5; }
.faq .needs dt { display: flex; align-items: center; gap: 10px; color: var(--fg); font-weight: 500; }
.faq .needs svg { width: 16px; height: 16px; fill: currentColor; }
.faq .needs dd { margin: 0; color: var(--fg-2); }