/* vk-startups.css - Vedika for Startups (/startups, /startup-program-terms, /startups-status).
 *
 * Loaded unlayered after css/vk-locked.css, so every rule is scoped under .su and never
 * touches the locked chrome (.nv, .mg, .vk-footer). Tokens come from css/vk-locked.css
 * (--ink, --muted, --paper, --display, --body, --mono); the few below are this page's own.
 *
 * Design: calm and editorial. Contrast comes from type scale and weight, not from boxes.
 * Tiers and steps are separated by 1px rules and whitespace. The accent colour is used for
 * text and thin rules only, never as a fill. No gradients, no shadows, light only.
 *
 * Art: the crayon and pencil drawings in /assets/startups come from scripts/web/build-startup-art.py,
 * the same pipeline as the Research and Bench pages. They are decorative (alt="" or CSS backgrounds),
 * always on white paper, and move with opacity and transform only, 150 to 200ms, ease-out.
 */
body.vk-locked { background: var(--paper); }
.su {
  --su-rule: rgba(12, 12, 14, .16);
  --su-rule-strong: rgba(12, 12, 14, .42);
  --su-accent: #4C1D95;          /* 10.6:1 on --paper; text and rules only */
  --su-danger: #9F1239;          /* 6.9:1 on --paper */
  --su-body: #3F4451;            /* 8.4:1 on --paper */
  --su-gutter: 28px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  color-scheme: light;
}
.su *, .su *::before, .su *::after { box-sizing: border-box; }
.su [hidden] { display: none !important; }
:where(.su) :is(p, ul, ol, dl, dd, figure) { margin: 0; padding: 0; }
:where(.su) :is(ul, ol) { list-style: none; }

.su-wrap { max-width: 1060px; margin: 0 auto; padding: 0 var(--su-gutter); }
.su-narrow { max-width: 720px; }

/* ── Type ─────────────────────────────────────────────────────────────── */
.su .eyebrow { margin: 0 0 22px; }
.su h1 {
  font-family: var(--display); font-weight: 300; font-size: clamp(38px, 5.4vw, 66px);
  line-height: 1.04; letter-spacing: -.025em; margin: 0 0 24px; max-width: 17ch; text-wrap: balance;
}
.su h2 {
  font-family: var(--display); font-weight: 300; font-size: clamp(28px, 3.3vw, 38px);
  line-height: 1.12; letter-spacing: -.02em; margin: 0 0 14px; max-width: 24ch; text-wrap: balance;
}
.su h3 { font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 1.2; letter-spacing: -.012em; margin: 0 0 8px; }
.su-lede { font-size: 18px; line-height: 1.6; color: var(--su-body); max-width: 56ch; margin: 0 0 32px; }
.su-copy { font-size: 16px; line-height: 1.7; color: var(--su-body); max-width: 62ch; }
.su-copy + .su-copy { margin-top: 14px; }
.su-copy strong, .su-lede strong { color: var(--ink); font-weight: 600; }
.su-link, .su-copy a, .su-faq a, .su-prose a {
  color: var(--su-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: rgba(76, 29, 149, .4);
  transition: text-decoration-color .15s ease-out, color .15s ease-out;
}
.su-link:hover, .su-copy a:hover, .su-faq a:hover, .su-prose a:hover { text-decoration-color: currentColor; }
.su a:focus-visible, .su button:focus-visible, .su summary:focus-visible, .su input:focus-visible, .su select:focus-visible, .su textarea:focus-visible {
  outline: 2px solid var(--su-accent); outline-offset: 3px; border-radius: 2px;
}

/* ── Sections ─────────────────────────────────────────────────────────── */
.su-hero { padding: 96px 0 56px; }
.su-sec { padding: 72px 0; border-top: 1px solid var(--su-rule); }
.su-sec[id] { scroll-margin-top: 72px; }
.su-sec__head { margin-bottom: 40px; }
.su-sec__head .su-copy { margin-top: 4px; }

.su-actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 32px; }
.su-cta {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 2px;
  font-size: 16px; font-weight: 600; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--ink);
  transition: color .15s ease-out, border-color .15s ease-out;
}
.su-cta::after { content: "\2192"; transition: transform .15s ease-out; }
.su-cta:hover { color: var(--su-accent); border-bottom-color: var(--su-accent); }
.su-cta:hover::after { transform: translateX(3px); }
.su-quiet { display: inline-flex; align-items: center; min-height: 48px; font-size: 15px; color: var(--su-body); text-decoration: none; }
.su-quiet:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ── Tiers: three columns divided by 1px rules ────────────────────────── */
.su-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.su-tier { padding: 0 36px; border-left: 1px solid var(--su-rule); display: flex; flex-direction: column; }
.su-tier:first-child { padding-left: 0; border-left: 0; }
.su-tier:last-child { padding-right: 0; }
.su-tier__name { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.su-tier__amount {
  font-family: var(--display); font-weight: 300; font-size: clamp(44px, 5vw, 60px); line-height: 1; letter-spacing: -.03em; margin-bottom: 6px;
}
.su-tier__amount small { font-family: var(--body); font-size: 14px; font-weight: 500; letter-spacing: .02em; color: var(--muted); margin-right: 8px; }
.su-tier__for { font-size: 15px; font-weight: 600; margin: 22px 0 8px; }
.su-tier__rule { font-size: 15px; line-height: 1.65; color: var(--su-body); }
.su-tier__rule + .su-tier__rule { margin-top: 10px; }
.su-tier__proof { margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.su-tier__apply { margin-top: auto; padding-top: 24px; }
.su-tier__apply a { min-height: 44px; display: inline-flex; align-items: center; font-size: 15px; font-weight: 600; color: var(--su-accent); text-decoration: none; border-bottom: 1px solid rgba(76, 29, 149, .4); transition: border-color .15s ease-out; }
.su-tier__apply a:hover { border-bottom-color: var(--su-accent); }

/* ── Definition rows (eligibility) and steps ──────────────────────────── */
.su-facts { border-top: 1px solid var(--su-rule); }
.su-facts > div { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 8px 40px; padding: 20px 0; border-bottom: 1px solid var(--su-rule); }
.su-facts dt { font-size: 15px; font-weight: 600; }
.su-facts dd { font-size: 15.5px; line-height: 1.65; color: var(--su-body); max-width: 62ch; }

.su-how { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: how; }
.su-how li { counter-increment: how; padding: 0 28px; border-left: 1px solid var(--su-rule); }
.su-how li:first-child { padding-left: 0; border-left: 0; }
.su-how li:last-child { padding-right: 0; }
.su-how li::before { content: ""; display: block; width: 48px; height: 61px; margin-bottom: 16px; background: no-repeat left top / contain; }
.su-how li:nth-child(1)::before { background-image: url("/assets/startups/step-1.svg"); }
.su-how li:nth-child(2)::before { background-image: url("/assets/startups/step-2.svg"); }
.su-how li:nth-child(3)::before { background-image: url("/assets/startups/step-3.svg"); }
.su-how li:nth-child(4)::before { background-image: url("/assets/startups/step-4.svg"); }
.su-how h3 { font-size: 19px; }
.su-how p { font-size: 15px; line-height: 1.65; color: var(--su-body); }

.su-window { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
.su-window ol { border-top: 1px solid var(--su-rule); }
.su-window li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--su-rule); font-size: 15px; line-height: 1.6; color: var(--su-body); }
.su-window li b { font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); padding-top: 3px; }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.su-faq { border-top: 1px solid var(--su-rule); max-width: 820px; }
.su-faq details { border-bottom: 1px solid var(--su-rule); }
.su-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; padding: 14px 0; cursor: pointer; list-style: none;
  font-family: var(--display); font-size: 20px; font-weight: 400; letter-spacing: -.01em; line-height: 1.3;
}
.su-faq summary::-webkit-details-marker { display: none; }
.su-faq summary::after { content: "+"; flex: none; font-family: var(--body); font-size: 22px; font-weight: 300; color: var(--muted); transition: transform .15s ease-out; }
.su-faq details[open] summary::after { transform: rotate(45deg); }
.su-faq details > div { padding: 0 0 22px; font-size: 15.5px; line-height: 1.7; color: var(--su-body); max-width: 64ch; }
.su-faq details > div p + p { margin-top: 10px; }

/* ── Application ──────────────────────────────────────────────────────── */
.su-apply { max-width: 720px; }
.su-noscript { font-size: 15px; line-height: 1.65; color: var(--su-body); padding: 20px 0; border-top: 1px solid var(--su-rule); }

.su-progress { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.su-progress__item { position: relative; padding-top: 14px; background: url("/assets/startups/pencil-step.svg") no-repeat 0 0 / 100% 8px; }
.su-progress__item.is-done { background-image: url("/assets/startups/pencil-step-done.svg"); }
.su-progress__item.is-current { background-image: url("/assets/startups/pencil-step-current.svg"); }
.su-progress__btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 44px; padding: 0; margin: 0; border: 0; background: none;
  font: inherit; color: var(--muted); text-align: left; cursor: default;
}
button.su-progress__btn { cursor: pointer; color: var(--ink); }
button.su-progress__btn:hover .su-progress__name { text-decoration: underline; text-underline-offset: 3px; }
.su-progress__n { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; }
.su-progress__name { font-size: 14px; font-weight: 500; }
.is-current > .su-progress__btn { color: var(--ink); }
.is-current .su-progress__name { font-weight: 700; }
.su-statusline { font-size: 14px; color: var(--muted); margin: 0 0 36px; }

.su-step__title { font-family: var(--display); font-weight: 300; font-size: clamp(26px, 3vw, 32px); letter-spacing: -.02em; margin: 0 0 28px; outline: none; }
.su-note { font-size: 14.5px; line-height: 1.65; color: var(--su-body); margin: 0 0 26px; max-width: 62ch; }
.su-note--rule { border-top: 1px solid var(--su-rule-strong); border-bottom: 1px solid var(--su-rule-strong); padding: 14px 0; color: var(--ink); }

.su-field { margin: 0 0 28px; }
.su-label, .su legend.su-label { display: block; padding: 0; margin: 0 0 6px; font-family: var(--body); font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: 0; text-transform: none; }
.su-label__opt { font-weight: 400; color: var(--muted); }
.su-help { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0 0 8px; max-width: 62ch; }
.su-field > .su-help:last-of-type { margin-top: 0; }
.su-count { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.su-err { font-size: 14px; line-height: 1.5; color: var(--su-danger); margin: 8px 0 0; font-weight: 500; }
.su-err:not([hidden])::before { content: "Problem: "; font-weight: 700; }

.su-input, .su select.su-input {
  display: block; width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid var(--su-rule-strong); border-radius: 3px; background: #fff;
  color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.4; appearance: none; -webkit-appearance: none;
  transition: border-color .15s ease-out;
}
.su-input:hover { border-color: var(--ink); }
.su-input:focus { outline: 2px solid var(--su-accent); outline-offset: 2px; border-color: var(--ink); }
.su select.su-input {
  padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%230C0C0E' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center;
}
.su textarea.su-input { min-height: 120px; resize: vertical; line-height: 1.6; }
.su-field.is-invalid .su-input { border-color: var(--su-danger); border-width: 2px; padding: 10px 13px; }
.su-input[type="date"] { min-width: 0; }

.su-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.su-choices { display: flex; flex-direction: column; border-top: 1px solid var(--su-rule); }
.su-group--checkboxes .su-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.su-choice { display: flex; align-items: flex-start; gap: 14px; min-height: 48px; padding: 12px 0; border-bottom: 1px solid var(--su-rule); cursor: pointer; }
.su-choice input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ink); cursor: pointer; }
.su-choice__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.su-choice__name { font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.su-choice__amount { font-family: var(--display); font-size: 24px; font-weight: 300; letter-spacing: -.02em; line-height: 1.2; }
.su-choice__hint { font-size: 14px; line-height: 1.5; color: var(--muted); }
.su-choice--single { border-bottom: 0; padding: 8px 0; }
.su-group--tier .su-choice__name { font-weight: 600; }
.su-field--tier .su-choice { padding: 16px 0; }
.su-field--checkbox { margin-bottom: 22px; }
.su-field.is-invalid .su-choices { border-top-color: var(--su-danger); }

.su-summary { font-size: 15px; font-weight: 600; color: var(--su-danger); margin: 0 0 20px; padding: 12px 0; border-top: 1px solid var(--su-danger); border-bottom: 1px solid var(--su-danger); }
.su-fail { margin: 0 0 24px; padding: 14px 0; border-top: 1px solid var(--su-danger); border-bottom: 1px solid var(--su-danger); outline: none; }
.su-fail__msg { font-size: 15px; line-height: 1.6; color: var(--ink); }
.su-fail__actions { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 6px; }
.su-fail__actions > * { min-height: 44px; display: inline-flex; align-items: center; }

.su-actions { display: flex; align-items: center; gap: 12px; margin: 36px 0 0; padding-top: 28px; border-top: 1px solid var(--su-rule); }
.su-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 148px; padding: 0 28px; border: 1px solid var(--ink); border-radius: 3px;
  background: var(--ink); color: #fff; font-family: var(--body); font-size: 16px; font-weight: 600; cursor: pointer;
  transition: background-color .15s ease-out, color .15s ease-out, opacity .15s ease-out;
}
.su-btn:hover { background: #2B2B33; border-color: #2B2B33; }
.su-btn:disabled, .su-btn[aria-busy="true"] { opacity: .55; cursor: progress; }
.su-btn--quiet { background: transparent; color: var(--ink); border-color: var(--su-rule-strong); }
.su-btn--quiet:hover { background: transparent; color: var(--ink); border-color: var(--ink); }
.su-actions .su-btn[data-action="next"], .su-actions .su-btn[data-action="submit"] { margin-left: auto; }
.su-linkbtn { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 500; color: var(--su-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(76, 29, 149, .4); cursor: pointer; transition: text-decoration-color .15s ease-out; }
.su-linkbtn:hover { text-decoration-color: currentColor; }
.su-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 20px; margin-top: 12px; }
.su-saved { font-size: 13.5px; color: var(--muted); min-height: 1em; }

/* ── Review ───────────────────────────────────────────────────────────── */
.su-review__lead { font-size: 16px; line-height: 1.65; color: var(--su-body); margin: 0 0 24px; max-width: 62ch; }
.su-review__group { border-top: 1px solid var(--su-rule-strong); padding: 6px 0 14px; margin: 0 0 8px; }
.su-review__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.su-review__head h3 { font-size: 20px; margin: 10px 0 0; }
.su-review__row { display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr); gap: 4px 28px; padding: 9px 0; border-top: 1px solid var(--su-rule); }
.su-review__row:first-child { border-top: 0; }
.su-review__row dt { font-size: 14px; color: var(--muted); }
.su-review__row dd { font-size: 15px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; white-space: pre-wrap; }
.su-consents { border: 0; padding: 0; margin: 32px 0 0; min-width: 0; }
.su-consents legend { margin-bottom: 10px; }
.su-consent .su-err { margin: 0 0 8px 34px; }

/* ── Success ──────────────────────────────────────────────────────────── */
.su-success { padding-top: 8px; }
.su-success__title { outline: none; max-width: 22ch; }
.su-success__id { font-size: 16px; color: var(--su-body); margin: 0 0 28px; }
.su-success__id strong { font-family: var(--mono); font-weight: 400; font-size: 15px; letter-spacing: .04em; color: var(--ink); }
.su-success__next { counter-reset: next; border-top: 1px solid var(--su-rule); margin: 0 0 36px; }
.su-success__next li { counter-increment: next; display: grid; grid-template-columns: 36px minmax(0, 1fr); padding: 14px 0; border-bottom: 1px solid var(--su-rule); font-size: 15.5px; line-height: 1.6; color: var(--su-body); }
.su-success__next li::before { content: counter(next); font-family: var(--mono); font-size: 12px; padding-top: 3px; color: var(--ink); }
.su-copyrow { display: flex; gap: 12px; }
.su-copyrow .su-input { flex: 1 1 auto; min-width: 0; font-family: var(--mono); font-size: 14px; }
.su-copyrow .su-btn { flex: none; min-width: 0; }
.su-success__open { margin-top: 14px; }
.su-copied { font-size: 14px; color: var(--muted); margin-top: 8px; min-height: 1em; }

/* ── Terms: reading page ──────────────────────────────────────────────── */
.su-doc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 72px; padding: 72px 0 96px; border-top: 1px solid var(--su-rule); }
.su-toc { position: sticky; top: 88px; align-self: start; }
.su-toc__title { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.su-toc ol { border-top: 1px solid var(--su-rule); }
.su-toc a { display: flex; gap: 10px; align-items: baseline; min-height: 40px; padding: 8px 0; border-bottom: 1px solid var(--su-rule); font-size: 14px; line-height: 1.35; color: var(--su-body); text-decoration: none; transition: color .15s ease-out; }
.su-toc a:hover { color: var(--ink); }
.su-toc a span:first-child { font-family: var(--mono); font-size: 11px; color: var(--muted); min-width: 1.6em; }
.su-prose section { padding: 0 0 36px; scroll-margin-top: 88px; }
.su-prose h2 { font-size: 24px; font-weight: 400; margin: 0 0 12px; max-width: none; letter-spacing: -.015em; }
.su-prose h2 span { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; color: var(--muted); margin-right: 12px; vertical-align: 2px; }
.su-prose p { font-size: 16px; line-height: 1.75; color: var(--su-body); max-width: 66ch; }
.su-prose p + p, .su-prose p + ul, .su-prose ul + p { margin-top: 12px; }
.su-prose ul { margin-top: 10px; padding-left: 20px; list-style: disc; max-width: 66ch; }
.su-prose li { font-size: 16px; line-height: 1.7; color: var(--su-body); padding-left: 4px; margin-bottom: 6px; }
.su-prose strong { color: var(--ink); font-weight: 600; }
.su-prose table { border-collapse: collapse; width: 100%; max-width: 66ch; margin-top: 12px; }
.su-prose th, .su-prose td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--su-rule); font-size: 15px; line-height: 1.5; color: var(--su-body); vertical-align: top; }
.su-prose th { font-weight: 600; color: var(--ink); border-bottom-color: var(--su-rule-strong); }
.su-meta { font-size: 14px; color: var(--muted); margin-top: 4px; }

/* ── Status page ──────────────────────────────────────────────────────── */
.su-status { max-width: 720px; padding-bottom: 96px; }
.su-state { padding: 28px 0; border-top: 1px solid var(--su-rule); }
.su-state h2 { font-size: 26px; }
.su-timeline { border-top: 1px solid var(--su-rule); margin: 8px 0 36px; }
.su-timeline li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 14px; padding: 18px 0; border-bottom: 1px solid var(--su-rule); }
.su-timeline__mark { width: 22px; height: 22px; margin-top: 1px; background: url("/assets/startups/mark-todo.svg") no-repeat center / contain; }
.su-timeline li.is-done .su-timeline__mark { background-image: url("/assets/startups/mark-done.svg"); }
.su-timeline li.is-current .su-timeline__mark { background-image: url("/assets/startups/mark-current.svg"); }
.su-timeline li.is-bad .su-timeline__mark { background-image: url("/assets/startups/mark-bad.svg"); }
.su-timeline__name { font-size: 16px; font-weight: 600; }
.su-timeline li:not(.is-done):not(.is-current) .su-timeline__name { color: var(--muted); font-weight: 400; }
.su-timeline__note { grid-column: 2; font-size: 14.5px; line-height: 1.6; color: var(--su-body); }
.su-kv { border-top: 1px solid var(--su-rule); margin: 0 0 36px; }
.su-kv > div { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 4px 24px; padding: 12px 0; border-bottom: 1px solid var(--su-rule); }
.su-kv dt { font-size: 14px; color: var(--muted); }
.su-kv dd { font-size: 16px; color: var(--ink); }
.su-dpiit h2 { font-size: 24px; }
.su-due { font-family: var(--display); font-size: 34px; font-weight: 300; letter-spacing: -.02em; margin: 6px 0 4px; }
.su-due--late { color: var(--su-danger); }

/* ── Crayon and pencil art ────────────────────────────────────────────── */
@keyframes su-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Hero: text on the left, a sheet of graph paper on the right. */
.su-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 40px 56px; align-items: center; }
.su-hero__grid h1 { font-size: clamp(36px, 4.6vw, 58px); }
.su-hero__art { margin: 0; border: 1px solid var(--su-rule); border-radius: 4px; overflow: hidden; background: #fff; color-scheme: light; animation: su-rise 200ms ease-out both; }
.su-hero__art img { display: block; width: 100%; height: auto; aspect-ratio: 640 / 520; }

/* A pencil line under every page title, a graphite one under section headings. */
.su-hero h1::after {
  content: ""; display: block; width: min(280px, 70%); height: 16px; margin-top: 12px;
  background: url("/assets/startups/crayon-underline.svg") no-repeat 0 0 / 100% 100%;
}
.su-sec__head h2::after {
  content: ""; display: block; width: min(200px, 60%); height: 10px; margin-top: 10px;
  background: url("/assets/startups/pencil-underline.svg") no-repeat 0 0 / 100% 100%;
}
.su-hero h1 { margin-bottom: 20px; }
.su-sec__head h2 { margin-bottom: 18px; }

/* Tier marks. */
.su-tier__mark { display: block; width: 72px; height: 72px; margin: 0 0 16px; transition: transform 150ms ease-out; }
.su-tier:hover .su-tier__mark { transform: translateY(-3px); }

/* Success. */
.su-success__mark { display: block; width: 72px; height: 72px; margin: 0 0 14px; color-scheme: light; animation: su-rise 200ms ease-out both; }

/* ── Small screens ────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .su-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .su-hero__art { max-width: 520px; }
  .su-tiers { grid-template-columns: minmax(0, 1fr); }
  .su-tier, .su-tier:first-child, .su-tier:last-child { padding: 36px 0; border-left: 0; border-top: 1px solid var(--su-rule); }
  .su-tier:first-child { border-top: 0; padding-top: 0; }
  .su-tier__apply { padding-top: 16px; }
  .su-how { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 40px; }
  .su-how li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .su-window { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .su-doc { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .su-toc { position: static; }
}
@media (max-width: 720px) {
  .su { --su-gutter: 20px; }
  .su-hero { padding: 56px 0 40px; }
  .su-hero__grid h1 { font-size: clamp(34px, 9.4vw, 44px); }
  .su-progress__item { padding-top: 12px; }
  .su-sec { padding: 52px 0; }
  .su-lede { font-size: 17px; }
  .su-facts > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .su-how { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .su-how li, .su-how li:first-child, .su-how li:last-child { padding: 28px 0; border-left: 0; border-top: 1px solid var(--su-rule); }
  .su-how li:first-child { border-top: 0; padding-top: 0; }
  .su-progress { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  .su-progress__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .su-progress__btn { min-height: 44px; }
  .su-group--checkboxes .su-choices { grid-template-columns: minmax(0, 1fr); }
  .su-review__row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .su-actions { flex-wrap: wrap; }
  .su-btn { min-width: 0; flex: 1 1 140px; }
  .su-copyrow { flex-direction: column; }
  .su-copyrow .su-btn { width: 100%; }
  .su-kv > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .su-window li { grid-template-columns: 72px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .su *, .su *::before, .su *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}