/* the start page, /clockwork/. layout only: colours, type and every component come from clockwork.css (see DESIGN.md). */

/* the hero: words and the report box on the left, client zero's log window on the right, as on gmerald.xyz */
.start-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: center; }
.start-hero .hero-inner { max-width: none; gap: 18px; }
.start-hero h1.display { max-width: 15ch; }
.start-hero .assure { align-self: flex-start; }
.start-hero .cta { margin-top: 4px; }
.start-hero .help { max-width: 62ch; }
.start-hero .err { margin-top: -8px; }
.start-term .term__log { padding: 16px 18px; gap: 10px; font-size: 13px; }
.start-term .term__log b { font-weight: 600; color: var(--paper); font-variant-numeric: tabular-nums; }
.term__foot { display: block; padding: 12px 18px; border-top: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--muted); text-decoration: none; }
.term__foot:hover { color: var(--em); }

/* the split: presets shown side by side, as information. nothing here is chosen, so nothing looks pressed */
.preset--info { cursor: default; }
.preset--info:hover { border-color: var(--line); }
.f45 { flex: 45 1 0; } .f225 { flex: 22.5 1 0; } .f10 { flex: 10 1 0; }
.legs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.legs h3 { display: flex; align-items: center; gap: 10px; }
.legs h3 i { width: 10px; height: 10px; flex: none; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(238,243,240,.14); }
.legs p { font-size: 13px; }

/* the price */
.price-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.price-figs .stat { padding: 18px 20px; }
.price-figs .stat .big { font-weight: 800; font-size: clamp(28px, 3.4vw, 40px); line-height: 1; margin: 12px 0 8px; }
.price-detail { margin-top: 14px; }
.price-detail .kv b { font-weight: 500; }
.price-detail .kv > div:last-child b { font-weight: 600; }

/* how it starts */
.start-steps { list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.start-steps .step p { color: var(--muted); }
.start-more { margin-top: 16px; font-size: 13px; }

/* the machines table: names read as names, links stay findable */
.start .who .name a { color: var(--paper); }
.start .who .name a:hover { color: var(--em); }
.start .who .meta a { white-space: nowrap; }
.start .row .sub { margin-top: 2px; }

/* the closing report box */
.start-cta { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr); gap: 28px; align-items: center; padding: 34px; }
.start-cta h2 { margin: 8px 0 10px; font-size: clamp(24px, 3.4vw, 38px); }
.start-cta .sub { font-size: 14px; max-width: 52ch; }
.start-cta .err { margin-top: 10px; }
.start-holders { margin-top: 18px; font-size: 13px; }

@media (max-width: 960px) {
  .start-hero { grid-template-columns: 1fr; gap: 28px; }
  .start-hero h1.display { max-width: 17ch; }
  .legs, .start-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .start-cta { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 760px) {
  .legs, .start-steps { grid-template-columns: 1fr; }
  .start-cta { padding: 24px; }
}
@media (max-width: 560px) {
  /* the machines table on a phone: the name takes its own line, the two figures sit under their labels */
  .start .table .row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; padding: 14px 16px; }
  .start .table .row .who { grid-column: 1 / -1; }
  .start .table .row.head > div:first-child { display: none; }
  .price-figs { grid-template-columns: 1fr; }
  .price-detail .kv > div { flex-wrap: wrap; gap: 2px 12px; }
  .start-cta { padding: 18px; }
}