/* Rolling Fun — How to Invest. Uses tokens and components from site.css.
   One screen of intent (head + the availability readout, the one place the
   signal colour leads), then a paper term sheet, then the application. */

/* ---------- Head ---------- */

.hti-head { padding-top: calc(var(--nav-h) + clamp(40px, 7vw, 112px)); padding-bottom: 0; }
.phead__crumb span[aria-current] { color: var(--ink); }
.hti-head__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 28px;
  align-items: end;
}
.hti-head__title { grid-column: 1 / span 7; min-height: 2.4em; } /* two lines + the word-mask padding: the split can't reflow the row */
.hti-head__title .tone { display: block; }
.hti-head__aside { grid-column: 9 / -1; padding-bottom: 0.35em; }
.phead .hti-head__aside .lede { margin-top: 0; max-width: 22em; }
.hti-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .hti-head__title { grid-column: 1 / span 6; }
  .hti-head__aside { grid-column: 8 / -1; }
}
@media (max-width: 1023px) {
  .hti-head__title, .hti-head__aside { grid-column: 1 / -1; }
  .hti-head__aside { padding-bottom: 0; }
}

/* ---------- Readout: current LP availability ---------- */

:root { --hti-led: var(--signal); } /* resolved at :root, so it stays lime inside paper chapters */

.readout { margin-top: clamp(56px, 7vw, 104px); padding-bottom: clamp(40px, 4vw, 64px); }
/* Hairlines drawn in by [data-line] (site.css) instead of static borders. */
.hti-rule { display: block; height: 1px; background: var(--line); }
.hti-rule--strong { background: var(--line-2); }

.readout__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 450;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--muted);
}
.readout > .hti-rule { background: var(--line-2); }
.readout__label { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.readout__led { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 16%, transparent); }
.motion .readout__led { animation: hti-led 2.8s var(--ease-io) infinite; }
@keyframes hti-led { 0%, 100% { opacity: 1; transform: none; } 50% { opacity: 0.45; transform: scale(0.8); } }

.readout__fig {
  display: flex;
  align-items: flex-end;
  margin: clamp(10px, 1.6vw, 28px) 0 clamp(28px, 3vw, 44px) -0.04em; /* optical: the $ left bearing */
  font-family: var(--sans);
  font-size: min(15.6vw, 244px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--signal);
  white-space: nowrap;
  max-width: 100%;
}
@media (min-width: 761px) { .readout__fig { font-size: min(16.4vw, 236px); } }
.readout__num { display: block; }
.readout__num .c { display: inline-block; margin: 0 -0.02em; } /* server-rendered commas match the odometer's */
.readout__num .odo > span:not(.odo__d) { display: inline-block; height: 1em; line-height: 1; }
.readout__num .odo > span:not(.odo__d):not(:first-child) { margin: 0 -0.02em; } /* commas sit tight */
.readout__unit {
  flex: none;
  margin: 0 0 0.1em 0.14em;
  font-family: var(--sans);
  font-weight: 400;
  font-size: max(14px, 0.1em);
  letter-spacing: -0.01em;
  color: var(--muted);
}

.readout__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.readout__meta dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; font-size: 16px; line-height: 1.45; max-width: 22em; }
.readout__q {
  display: inline-block;
  padding: 2px 6px;
  border-radius: var(--r-xs);
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-size: 13px;
  color: var(--muted);
}
.readout__q:empty { display: none; }
@media (max-width: 600px) {
  .readout__bar > span:last-child { display: none; }
}
@media (max-width: 760px) {
  .readout__meta { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .readout__meta > div + div { padding-top: 16px; border-top: 1px solid var(--line); }
}

/* ---------- § 01 — The term sheet (paper) ---------- */

.sheet__letterhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding-bottom: 18px;
}
.sheet__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.sheet__brand .mark { width: 24px; }
.sheet__title { max-width: 14em; margin-top: clamp(48px, 6vw, 96px); }

.clauses__rule { margin-top: clamp(56px, 7vw, 112px); }
.clauses {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.clause { display: flex; flex-direction: column; padding: 18px var(--gap) 8px 0; }
.clause + .clause { padding-left: var(--gap); border-left: 1px solid var(--line); }
.clause__fig {
  margin-top: clamp(36px, 5vw, 80px);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(56px, 6vw, 100px);
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
}
.clause__fig small {
  margin-left: 0.14em;
  font-family: var(--sans);
  font-weight: 400;
  font-size: max(15px, 0.2em);
  letter-spacing: -0.01em;
  color: var(--muted);
}
.clause__txt { margin-top: 18px; max-width: 24em; font-size: 16px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
@media (max-width: 860px) {
  .clauses { grid-template-columns: minmax(0, 1fr); }
  .clause, .clause + .clause { padding: 18px 0 32px; border-left: 0; border-top: 1px solid var(--line-2); }
  .clause:first-child { border-top: 0; }
  .clause__fig { margin-top: 28px; }
}

/* Fig. 1 — twenty quarters, the first four filled: the minimum. */
.tape { margin-top: clamp(72px, 9vw, 144px); }
.tape__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 14px 0 22px;
}
.tape__title { font-size: 16px; font-weight: 450; letter-spacing: -0.01em; color: var(--ink); }
.tape__legend { display: inline-flex; align-items: center; gap: 8px; }
.tape__key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line-2); }
.tape__key + * , .tape__legend .tape__key:not(:first-child) { margin-left: 10px; }
.tape__key--min { background: var(--ink); box-shadow: none; }

.tape__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.tape__cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.tape__lbl { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }

.q {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  height: clamp(72px, 6.2vw, 92px);
  padding: 8px 8px 7px;
  overflow: hidden;
  border-radius: var(--r-xs);
  font-family: var(--sans);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 13px;
  font-weight: 450;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--muted);
}
.q::before,
.q::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.q::after { box-shadow: inset 0 0 0 1px var(--line-2); }
.q b, .q em { position: relative; z-index: 1; font-weight: 450; font-style: normal; letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.q b i { display: block; font-style: normal; opacity: 0.72; } /* the year sits under the quarter, so narrow cells never clip it */
.q--min { color: var(--bg); }
.q--min::before { background: var(--ink); transform-origin: 50% 100%; }
.q--min::after { box-shadow: none; }
.q--min em { font-size: 15px; font-weight: 400; letter-spacing: -0.02em; }
/* The current quarter: a lime cell marker, outside the clipped label. */
.q--now::after { inset: 9px 9px auto auto; width: 6px; height: 6px; border-radius: 50%; background: var(--hti-led); }

/* Scroll-scrubbed: invest.js fills one quarter per step of scroll, so the
   reader drives the commitment — the minimum fills bottom-up, the rest draw in. */
.motion .tape.is-scrub .q::before { transform: scaleY(0); transition: transform 0.55s var(--ease); }
.motion .tape.is-scrub .q.is-on::before { transform: none; }
.motion .tape.is-scrub .q::after,
.motion .tape.is-scrub .q b,
.motion .tape.is-scrub .q em { opacity: 0; transition: opacity 0.4s ease; }
.motion .tape.is-scrub .q.is-on::after,
.motion .tape.is-scrub .q.is-on b,
.motion .tape.is-scrub .q.is-on em { opacity: 1; }
.motion .tape.is-scrub .q--min:not(.q--now)::after { opacity: 0; }
.motion .tape.is-scrub .tape__lbl { opacity: 0.35; transition: opacity 0.5s ease; }
.motion .tape.is-scrub .tape__yr.is-on .tape__lbl { opacity: 1; }


@media (max-width: 760px) {
  .tape__grid { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .tape__yr { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 10px; }
  .tape__yr .tape__lbl { order: -1; margin: 0; padding: 0; border: 0; }
  .q { height: 52px; padding: 6px 6px 5px; font-size: 12px; }
  .q b i { display: inline; margin-left: 0.4em; }
  .q--now::after { inset: 7px 7px auto auto; }
  .q--min em { font-size: 13px; }
}

/* Terms: leader-dotted rows, as on a printed sheet. */
.terms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 64px) var(--gap);
  margin-top: clamp(72px, 9vw, 144px);
}
.terms__h { padding-bottom: 12px; border-bottom: 1px solid var(--line-2); }
.terms__row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.terms__row dt { flex: none; font-size: 16px; }
.terms__row::after { content: none; }
.terms__row dd {
  display: flex;
  flex: 1 1 auto;
  align-items: baseline;
  gap: 12px;
  font-size: 16px;
  text-align: right;
  white-space: nowrap;
}
.terms__row dd::before {
  content: "";
  flex: 1 1 auto;
  min-width: 16px;
  border-bottom: 1px dotted var(--line-2);
  transform: translateY(-4px);
}
.terms__row dd.num { font-size: 16px; font-weight: 400; }
.motion .terms__row dd::before { transform: translateY(-4px) scaleX(0); transform-origin: 0 50%; transition: transform 0.9s var(--ease) 0.2s; }
.motion .terms__col.is-in .terms__row dd::before { transform: translateY(-4px); }
.motion .terms__col.is-in .terms__row:nth-child(2) dd::before { transition-delay: 0.27s; }
.motion .terms__col.is-in .terms__row:nth-child(3) dd::before { transition-delay: 0.34s; }
.terms__p { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.5; text-wrap: pretty; }
@media (max-width: 1023px) {
  .terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .terms__col--wide { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .terms { grid-template-columns: minmax(0, 1fr); }
}

/* Carry share: a footnote clause. */
.carry {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 14px;
  margin-top: clamp(72px, 9vw, 144px);
  padding-top: 18px;
  border-top: 1px solid var(--line-2);
}
.carry > .eyebrow { grid-column: 1 / span 4; }
.carry__body { grid-column: 5 / -1; }
.carry__body .body { margin-top: 12px; max-width: 34em; }
.carry__more { margin-top: 18px; font-size: 15px; }
.carry__more .link::after { content: ""; position: absolute; inset: -12px -4px; } /* 44px touch target */
@media (max-width: 860px) {
  .carry > .eyebrow, .carry__body { grid-column: 1 / -1; }
}

/* Sheet foot: the mark, and one real SHA-256 of the terms (truncated; full value in title). */
.fp { margin-top: clamp(64px, 8vw, 120px); }
.fp__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; }
.fp__row .mark { width: 18px; opacity: 0.7; }
.fp__hash { font-size: 13px; white-space: nowrap; }

/* ---------- § 02 — Apply ---------- */

.hti-cta {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 56px;
}
.hti-cta__main { grid-column: 1 / span 7; display: flex; flex-direction: column; }
.hti-cta__title { margin-top: 20px; max-width: 12em; }
.hti-cta__url { overflow-wrap: anywhere; }
.hti-cta__note { margin-top: 18px; }
.hti-cta__admin { grid-column: 9 / -1; }
.hti-cta__dl { margin-top: clamp(28px, 3vw, 40px); }
.hti-cta__dl .dl__row dd { color: var(--ink); }
@media (max-width: 1023px) {
  .hti-cta__main, .hti-cta__admin { grid-column: 1 / -1; }
}

/* AngelList's own logo file, recoloured to bone: invest.js turns its dark
   pixels into a mask. Without that, a filtered copy of the original shows. */
.al { position: relative; display: block; width: clamp(180px, 16vw, 236px); aspect-ratio: 4 / 1; margin-top: 20px; color: var(--ink); } /* the final (cropped) box from the start: no size swap */
.al__img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: invert(1) grayscale(1) brightness(0.93); mix-blend-mode: screen; }
.al.is-masked { aspect-ratio: var(--al-ratio, 4); background-color: currentColor; -webkit-mask: var(--al-mask) center / contain no-repeat; mask: var(--al-mask) center / contain no-repeat; }
.al.is-masked .al__img { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0; }

@media (max-width: 479px) {
  .hti-actions .btn, .hti-cta .cta__actions .btn { flex: 1 1 auto; }
}

/* ---------- Choreography (motion only; transform / opacity / clip-path) ---------- */

/* Head: the headline rises first, then the lede, then the buttons; then the readout
   draws its rule, prints its label, lifts the figure (which rolls one turn) and its notes. */
.motion .hti-head__aside .lede { --d: 0.28s; }
.motion .hti-actions { --d: 0.4s; }
.motion .readout > .hti-rule { transition-delay: 0.48s; }
.motion .readout__bar { --d: 0.6s; transform: translate3d(0, 10px, 0); }
.motion .readout__fig { --d: 0.68s; transform: translate3d(0, 0.18em, 0); transition-duration: 1s, 1.3s; }
.motion .readout__meta { --d: 0.86s; }
.motion .readout__meta > div { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity 0.7s ease, transform 0.9s var(--ease); }
.motion .readout__meta.is-in > div { opacity: 1; transform: none; }
.motion .readout__meta.is-in > div:nth-child(1) { transition-delay: 0.86s; }
.motion .readout__meta.is-in > div:nth-child(2) { transition-delay: 0.94s; }
.motion .readout__meta.is-in > div:nth-child(3) { transition-delay: 1.02s; }

/* Blocks arrive as a whole: the rule draws, then the entries print in order, 70ms apart. */
.motion .clause { --d: 0.12s; }
.motion .clause:nth-child(2) { --d: 0.19s; }
.motion .clause:nth-child(3) { --d: 0.26s; }
.motion .terms__col:nth-child(2) { --d: 0.08s; }
.motion .terms__col:nth-child(3) { --d: 0.16s; }
.motion .terms__col .terms__row,
.motion .terms__col .terms__p { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity 0.6s ease, transform 0.8s var(--ease); }
.motion .terms__col.is-in .terms__row,
.motion .terms__col.is-in .terms__p { opacity: 1; transform: none; transition-delay: calc(var(--d, 0s) + 0.14s); }
.motion .terms__col.is-in > :nth-child(2) > :nth-child(2),
.motion .terms__col.is-in .terms__p:nth-of-type(2) { transition-delay: calc(var(--d, 0s) + 0.21s); }
.motion .terms__col.is-in > :nth-child(2) > :nth-child(3) { transition-delay: calc(var(--d, 0s) + 0.28s); }
.motion .fp .hti-rule { transition-delay: 0.1s; }
.motion .hti-cta__url { --d: 0.1s; }
.motion .clause__fig .w__i { transition-delay: calc(0.12s + var(--i, 0) * 0.05s); }
.motion .clause:nth-child(2) .clause__fig .w__i { transition-delay: calc(0.2s + var(--i, 0) * 0.05s); }
.motion .clause:nth-child(3) .clause__fig .w__i { transition-delay: calc(0.28s + var(--i, 0) * 0.05s); }
.motion .hti-cta__main .cta__actions { --d: 0.3s; }
.motion .hti-cta__note { --d: 0.4s; }
.motion .hti-cta__admin { --d: 0.2s; }
.motion .hti-cta__admin .al { clip-path: inset(0 100% 0 0); transition: clip-path 1s var(--ease-wipe) 0.25s; }
.motion .hti-cta__admin.is-in .al { clip-path: inset(0); }
/* Split figures keep their unit on the baseline (the word masks are top-aligned by default). */
.clause__fig .w { vertical-align: baseline; }