/* ==========================================================================
   apply.css — page rules for pitch.html
   Structure comes from styles.css + css/vc.css (.split, .form, .ap-field, .kv).
   ========================================================================== */

/* ---------- Hero ---------- */
.apply-hero .lead{max-width:56ch}
.hero-facts{display:flex;gap:24px;flex-wrap:wrap;margin-top:28px}
.hero-facts .hf{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;line-height:20px;color:var(--muted);
}
.hero-facts .hf .dot{width:6px;height:6px;border-radius:0;background:var(--accent);flex:none}

/* ---------- Split: form + sidebar ---------- */
.apply-split{border-bottom:1px solid var(--border)}
.apply-split > *{padding:48px 40px;min-width:0}

/* ---------- Single column: form, no sidebar (apply-simple.html) ----------
   Same padding and closing rule as .apply-split so the two pages agree, but
   without the 2fr/1fr grid and its dividing border, which have nothing left to
   divide. The measure is capped because a form field run edge to edge across a
   1440 frame puts 900px of input under a 12-word label. */
.apply-single{border-bottom:1px solid var(--border)}
.apply-single > *{padding:48px 40px;min-width:0;max-width:56rem}

/* a <select> is as wide as its widest option unless told otherwise */
.ap-field{min-width:0}

/* .form-row is display:grid and .field is display:flex, both of which beat the
   UA's [hidden]{display:none} — so a hidden field would otherwise stay on screen.
   Any conditional field on this form needs this. */
.form-row[hidden],.ap-field[hidden]{display:none}
.form input,.form select,.form textarea{min-width:0;max-width:100%}
.form-h{font-size:24px;line-height:30px;font-weight:600;margin:0 0 32px}
.form-intro{color:var(--muted);font-size:15px;line-height:24px;margin-top:10px;margin-bottom:32px;max-width:60ch}

/* ---------- Form extras ---------- */
.form select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23a6a09b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
.form select option{background:var(--surface);color:var(--text)}
.ap-field.bad input,.ap-field.bad textarea,.ap-field.bad select{box-shadow:inset 0 0 0 1px var(--accent)}
.ap-field.bad label{color:var(--accent)}
.form-actions{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding-top:24px;border-top:1px solid var(--hairline);margin-top:8px;
}
.form-actions .form-note{max-width:34ch}
.form-error{
  color:var(--accent);font-size:14px;line-height:20px;
  background:rgba(255,246,149,.08);border:1px solid rgba(255,246,149,.22);
  border-radius:0;padding:12px 14px;
}

/* ---------- Inline success state ---------- */
/* class-level display would otherwise beat the UA [hidden] rule */
.apply-done[hidden],.form[hidden],.form-error[hidden]{display:none}
.apply-done{
  border:1px solid var(--border-2);border-radius:0;background:var(--card);
  padding:32px;display:flex;flex-direction:column;
}
.done-mark{
  width:40px;height:40px;border-radius:0;flex:none;
  background:rgba(255,246,149,.10);color:var(--accent);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
}
.done-mark svg{width:22px;height:22px}
.apply-done h2{font-size:24px;line-height:30px;font-weight:600}
.done-lead{color:var(--muted);font-size:16px;line-height:24px;margin-top:10px;max-width:56ch}
.done-kv{margin-top:24px;border-top:1px solid var(--hairline);padding-top:4px}
.done-kv .v{font-family:var(--font-mono);font-size:13px}
/* The assigned partner is the one value on this card that goes anywhere, and
   the global reset strips every anchor back to inherited colour and no
   underline — so without this it reads as plain text and nobody clicks it. */
.done-kv .v a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--faint)}
.done-kv .v a:hover{text-decoration-color:var(--text)}
/* Portrait beside the name. Square with a hairline, same treatment as the
   article byline and the founder cluster — the rest of the row is right-aligned
   text, so this one value becomes a flex line to keep the two on a baseline. */
.done-kv .v.who{display:inline-flex;align-items:center;gap:10px}
.done-kv .v.who img{width:26px;height:26px;border-radius:0;object-fit:cover;flex:none;
  background:none;border:1px solid rgba(250,250,249,.22)}

/* The lead now carries a link out to the deal-analysis post. */
.done-lead a{color:var(--text);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--faint)}
.done-lead a:hover{text-decoration-color:var(--text)}
.done-note{color:var(--muted-2);font-size:13px;line-height:20px;margin-top:20px;max-width:60ch}
.done-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}

/* ---------- Sidebar ---------- */
.apply-side{display:flex;flex-direction:column;background:rgba(250,250,249,.012)}
.side-block + .side-block{margin-top:32px;padding-top:32px;border-top:1px solid var(--hairline)}
.side-h{font-size:16px;line-height:24px;font-weight:600;margin-bottom:16px}
.side-copy{color:var(--muted);font-size:14px;line-height:22px}
.side-fine{color:var(--muted-2);font-size:13px;line-height:20px;margin-top:14px}
.side-link{
  display:inline-block;margin-top:16px;font-size:14px;line-height:20px;font-weight:500;
  color:var(--text);transition:opacity .18s;
}
.side-link:hover{opacity:.75}
.sla-kv .row{padding:10px 0;flex-direction:column;align-items:flex-start;gap:3px}
.sla-kv .v{text-align:left}
/* .side-copy carries no margin of its own — it was written for one paragraph a
   block. Gaps are declared between siblings rather than on the element, so a
   block can run heading + copy + timeline in any combination. */
.side-copy + .side-copy{margin-top:12px}
.side-copy + .tl,.side-h + .tl{margin-top:20px}

/* The AI disclosure is boxed because it is the one block on the page that is
   telling the applicant something rather than selling them something, and it
   opens the sidebar, so it starts flush with the form beside it instead of
   carrying .cold-block's 32px lead-in.

   It is lit rather than merely bordered: First Light hairline over the 10%
   tint, which is the site's existing "look here" pair — .k-drop uses it on
   hover, .k-ch.card on select. The heading takes the accent too. Not a solid
   fill: at that size First Light would read as a warning, and this is a
   disclosure. */
.side-block.ai-block{
  margin-top:0;padding:24px;border:1px solid var(--accent);border-radius:0;
  background:var(--accent-bg);
}
.side-block.ai-block .side-h{font-size:15px;line-height:22px;color:var(--accent);margin-bottom:12px}
.side-block.ai-block .side-copy{color:var(--to-grey-300)}
.side-block.ai-block .side-link{color:var(--accent)}

.side-copy a,.side-fine a,.plain-list a{
  color:var(--text);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--faint);
}
.side-copy a:hover,.side-fine a:hover,.plain-list a:hover{text-decoration-color:var(--text)}

/* Compact 5 steps */
.mini-steps{display:flex;flex-direction:column;gap:14px;padding-left:0;list-style:none}
.mini-steps li{
  list-style:none;display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;
}
.mini-steps .mn{
  width:22px;height:22px;border-radius:0;border:1px solid var(--border-2);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:11px;color:var(--muted-2);
}
.mini-steps .mt{color:var(--muted);font-size:14px;line-height:21px}
.mini-steps .mt b{color:var(--text);font-weight:600}

/* Plain-english data list */
.plain-list{display:flex;flex-direction:column;gap:14px;padding-left:0;list-style:none}
.plain-list li{
  list-style:none;position:relative;padding-left:18px;
  color:var(--muted);font-size:14px;line-height:22px;
}
.plain-list li::before{
  content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:0;
  background:var(--faint);
}
.plain-list b{color:var(--text);font-weight:600}
.mono-inline{font-family:var(--font-mono);font-size:12.5px;color:var(--text)}

/* Ask trigger sits full width in the sidebar */
.apply-side .ask-trigger{width:100%;justify-content:center}

.side-block.cold-block{
  margin-top:32px;padding:24px;border:1px solid var(--border-2);border-radius:0;
  background:var(--card);
}

/* ---------- Footnote row ---------- */
.apply-foot{border-bottom:none}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.foot-cols > *{padding:0 32px;border-left:1px solid var(--hairline)}
.foot-cols > *:first-child{padding-left:0;border-left:none}
.foot-cols > *:last-child{padding-right:0}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .apply-split > *{padding:40px}
  .apply-split > *:first-child{padding:40px 40px 8px}
  .apply-single > *{padding:40px}
  .apply-side{background:none}
  .foot-cols{grid-template-columns:1fr;gap:28px}
  .foot-cols > *{padding:0;border-left:none}
  .foot-cols > * + *{padding-top:28px;border-top:1px solid var(--hairline)}
}
@media (max-width:620px){
  .pg-hero h1{font-size:30px;line-height:32px}
  .apply-split > *,
  .apply-split > *:first-child,
  .apply-single > *{padding:32px 24px}
  .hero-facts{gap:10px;flex-direction:column}
  .apply-done{padding:24px 20px}
  .form-actions{align-items:stretch}
  .form-actions .btn{width:100%}
  .done-actions .btn{width:100%}
}

/* ---- Attachment ------------------------------------------------------------
   .k-drop / .k-file come from kit.css. These are the page-level adjustments:
   the drop zone sits at field width, and a rejected file marks the field the
   same way a bad text input does. */
.ap-attach .k-drop{position:relative;margin-top:2px}
.ap-attach .k-file{margin-top:8px}
.ap-attach .hint{margin-top:8px}
.ap-attach .ap-file-msg{color:var(--accent)}
.ap-attach.bad .k-drop{border-color:var(--accent);background:var(--accent-bg)}

/* A deck that lives at a URL rather than on disk. The "or" is a rule with a
   word sitting in it, so the link field reads as the same question answered a
   second way rather than as a new field — the drop zone and this are one
   choice, and only one of them gets filled in. */
/* The input is a grandchild of .field rather than a direct one, so it misses the
   stretch a flex column hands its own children and falls back to the 20-character
   intrinsic width of a text input. */
.or-link{margin-top:16px}
.or-link input{width:100%}
.or-link .hint{margin-top:8px}
.or-link .or{
  display:flex;align-items:center;gap:12px;margin-bottom:10px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--faint);
}
.or-link .or::before,.or-link .or::after{content:"";height:1px;background:var(--hairline)}
.or-link .or::before{width:16px;flex:none}
.or-link .or::after{flex:1}


/* ---- Privacy acceptance -------------------------------------------------
   The consent checkbox is k-ch from kit.css; only the spacing and the policy
   link need saying here.

   The link matters more than it looks. .hint is --muted-2 and a bare <a>
   inherits it with no underline, so the policy link rendered in exactly the
   same grey as the sentence around it — invisible as a link on the one control
   that asks the reader to accept a document. Underlined and lifted to --muted,
   the same treatment fine-print links get elsewhere on the site.
   .ap-field.bad colours the LABEL, and this field's label is inside k-ch, so
   the failed state is carried by the checkbox and the hint instead. */
.ap-consent .k-choices{margin-top:2px}
.ap-consent .hint{margin-top:8px}
.ap-consent .hint a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.ap-consent .hint a:hover{color:var(--text)}
.ap-consent.bad .k-ch{color:var(--accent)}
.ap-consent.bad .k-ch input{box-shadow:inset 0 0 0 1px var(--accent)}