/* ============================================================================
   intake.css — the end of the investor journey.

   Two surfaces share this file because they are the same object at two
   temperatures: contact.html (a message to a person) and request-access.html
   (the one intake). Before this, neither transmitted anything and contact.html
   had no form at all: nine mailto links and a phone number were the last step
   of "come to this website and invest in a deal".

   Every custom property here is --ik-* prefixed, so it cannot collide with
   site.css (--navy-950 …), cockpit.css (--navy …) or chrome.css (--ck-* …).
   Colour, radius and type otherwise come from cockpit.css tokens, which both
   pages load, so these pages sit inside the existing system rather than beside
   it.

   Bar held here, measured at 1440 and 390 rather than read off the source:
   nothing under 11px, no overflow at 390, every control at least 40px tall.
   ========================================================================== */
:root{
  /* The only new colours. Danger has no token in cockpit.css and inventing a
     brand hue for it would be worse than naming it once, here. 5.9:1 on white. */
  --ik-danger:#b3261e;
  --ik-danger-soft:#fdf3f2;
  /* Gold reads at 2.1:1 on white, so it is a border/marker colour only. This
     is the darkened gold the rest of the site already uses for gold-coloured
     text on light ground (7f5000 in invest.css). 8.0:1 on white. */
  --ik-gold-text:#7f5000;
}

.ik-page{padding:18px 0 34px}

/* ------------------------------------------------------------------ hero -- */
/* Solid navy, no photograph. contact.html previously ran a two-column hero
   whose image column is display:none site-wide (site.css `main > .page-hero
   .page-hero__media`), so half the band was dead space on every render. */
.ik-hero{
  background:var(--panel);color:#fff;border-radius:var(--r-xl);
  padding:34px 40px 30px;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(270px,.85fr);
  gap:40px;align-items:start;
}
.ik-hero__eyebrow{
  display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-soft);font-weight:700;margin:0 0 13px;
}
.ik-hero h1{
  font-size:clamp(30px,4vw,48px);line-height:1.05;letter-spacing:-.035em;
  font-weight:800;color:#fff;margin:0;
}
.ik-hero h1 .g{color:var(--gold-bright)}
.ik-hero__lede{
  font-size:15.5px;line-height:1.65;color:var(--on-dark);margin:15px 0 0;max-width:560px;
}

/* The direct line, in the hero rather than at the bottom of the page. Someone
   who wants to call should not have to scroll past a form to find the number. */
.ik-direct{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.ik-direct__t{
  display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-soft);font-weight:700;margin:0 0 4px;
}
/* ---------------------------------------------------------------------------
   LINK COLOUR AND SPECIFICITY. cockpit.css declares `body.cockpit a{color:
   inherit}` at (0,1,2), which outranks a plain `.ik-thing a` at (0,1,1). Every
   link colour below is therefore written as `.cockpit .ik-thing a` (0,2,1) so
   it actually applies. Found on screen, not in source: "Or call (212) 651-4000"
   and every link in the error summary rendered flat black.
   ------------------------------------------------------------------------- */
/* min-width:0 + overflow-wrap on the label: investorrelations@capstaq.com is a
   28-character unbreakable string. Its min-content width (274px) sized the
   aside's implicit grid track and pushed both cards 6px past a 320px viewport.
   The address now breaks rather than setting the width of the column. */
.ik-direct a{
  display:flex;align-items:center;gap:11px;min-height:46px;padding:0 14px;
  min-width:0;overflow-wrap:anywhere;
  border:1px solid rgba(255,255,255,.2);border-radius:var(--r-lg);
  font-size:14px;font-weight:600;transition:border-color .15s,background .15s;
}
.cockpit .ik-direct a{color:#fff}
.ik-direct a:hover,.ik-direct a:focus-visible{border-color:var(--gold);background:rgba(255,255,255,.06)}
.ik-direct svg{flex:none;color:var(--gold-bright)}
.ik-direct__note{
  margin:4px 0 0;font-size:11.5px;line-height:1.5;color:var(--on-dark-mut);
}

/* trust lines (their copy, unchanged) */
.ik-assure{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.ik-assure li{
  display:grid;grid-template-columns:18px minmax(0,1fr);gap:11px;align-items:start;
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,.12);
  font-size:13.5px;line-height:1.45;color:var(--on-dark);
}
.ik-assure li:first-child{border-top:1px solid rgba(255,255,255,.12)}
.ik-assure svg{margin-top:2px;color:var(--gold-bright)}

/* ---------------------------------------------------------------- layout -- */
.ik-layout{
  display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.8fr);
  gap:14px;margin-top:14px;align-items:start;
}
.ik-layout--wide{grid-template-columns:minmax(0,1fr)}

/* --------------------------------------------------------- carried context */
/* What the investor already told this site, shown back before they are asked
   for anything. Hidden until there is something real to put in it. */
.ik-carry[hidden]{display:none}
.ik-carry{
  background:#fff;border:1px solid var(--gold);border-radius:var(--r-xl);
  box-shadow:var(--shadow-card);padding:16px 18px;margin-bottom:14px;
}
.ik-carry__t{
  display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ik-gold-text);font-weight:700;margin:0 0 4px;
}
.ik-carry strong{display:block;font-size:15px;letter-spacing:-.015em;margin:0 0 10px;color:var(--ink)}
/* auto-fit, not a fixed two columns: arriving from a deal page there is often
   exactly one carried row, and a fixed grid left it stranded at half width
   under a half-width rule. */
.ik-carry dl{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px, 100%),1fr));gap:8px 20px}
.ik-carry dl>div{border-top:1px solid var(--line);padding-top:7px}
.ik-carry dt{font-size:11px;line-height:1.4;color:var(--muted)}
.ik-carry dd{margin:2px 0 0;font-size:13px;line-height:1.4;font-weight:700;color:var(--ink)}
.ik-carry__note{margin:11px 0 0;font-size:11.5px;line-height:1.5;color:var(--muted)}

/* ------------------------------------------------------------------ form -- */
.ik-form{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--shadow-card);padding:22px 24px 24px;
}
.ik-form__head{border-bottom:2px solid var(--gold);padding-bottom:12px;margin-bottom:6px}
.ik-form__head h2{font-size:22px;letter-spacing:-.025em;margin:0;color:var(--ink)}
.ik-form__head h2 .g{color:var(--ik-gold-text)}
.ik-form__head p{margin:7px 0 0;font-size:13.5px;line-height:1.55;color:var(--muted)}

/* Margin, not padding. A fieldset's block-start padding renders BELOW its
   legend as well as above it, so `padding-top` opened a second 20px gap
   between every legend and its options that the <div> groups did not have. */
.ik-group{border:0;margin:20px 0 0;padding:0;min-width:0}
.ik-group>legend,.ik-group__t{
  display:block;padding:0;font-size:14.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink);
}
.ik-group__hint{margin:5px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}
.ik-group__body{margin-top:11px}
.ik-opt-note{
  display:inline-block;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);font-weight:700;margin-left:8px;
}
.ik-req{color:var(--ik-gold-text);font-weight:800}

/* -- choice cards (radio and checkbox share one shape) --------------------- */
.ik-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.ik-choices--three{grid-template-columns:repeat(3,minmax(0,1fr))}
.ik-choice{
  position:relative;display:grid;grid-template-columns:18px minmax(0,1fr);gap:11px;
  align-items:start;min-height:52px;padding:13px 14px;
  border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;cursor:pointer;
  transition:border-color .15s,background .15s,box-shadow .15s;
}
.ik-choice:hover{border-color:var(--gold);background:var(--card-2)}
.ik-choice input{
  appearance:none;-webkit-appearance:none;margin:1px 0 0;width:18px;height:18px;flex:none;
  border:1.5px solid #9aa3ab;border-radius:50%;background:#fff;cursor:pointer;
  transition:border-color .15s,box-shadow .15s;
}
.ik-choice input[type="checkbox"]{border-radius:4px}
.ik-choice input:checked{border-color:var(--gold-deep);box-shadow:inset 0 0 0 4px var(--gold)}
.ik-choice input[type="checkbox"]:checked{box-shadow:inset 0 0 0 3px var(--gold)}
.ik-choice b{display:block;font-size:13.5px;font-weight:700;line-height:1.3;color:var(--ink)}
.ik-choice small{display:block;font-size:11.5px;line-height:1.45;color:var(--muted);margin-top:4px}
.ik-choice:has(input:checked){
  border-color:var(--gold);background:#fffdf7;box-shadow:inset 0 0 0 1px var(--gold);
}
/* The focusable element is an 18px radio, so the default focus ring lands on a
   dot in the corner of a 52px card. Put the ring on the card the keyboard user
   is actually reading. */
.ik-choice:has(input:focus-visible){
  border-color:var(--gold);box-shadow:0 0 0 3px rgba(217,155,27,.35);
}
/* :has() is well supported now, but the ring is the only affordance that would
   be lost without it, so the input's own fill carries the state on its own. */

/* -- text fields ----------------------------------------------------------- */
.ik-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
/* The wrapper is a div and the label is explicit, not a <label> wrapped around
   the whole thing. A wrapping label folds the error text into the field's
   accessible name, so a screen reader would read "Email required Enter an email
   address we can reply to" as the name of the input. */
.ik-field{display:block}
.ik-field--full{grid-column:1/-1}
.ik-field>label{
  display:block;font-size:12.5px;font-weight:700;color:var(--ink);margin:0 0 6px;
}
.ik-field input,.ik-field select,.ik-field textarea{
  display:block;width:100%;font:400 14px/1.4 var(--font-sans);color:var(--ink);
  background:#fff;border:1px solid #b9bfc4;border-radius:var(--r-lg);
  padding:0 12px;height:44px;transition:border-color .15s,box-shadow .15s;
}
.ik-field textarea{height:auto;min-height:104px;padding:11px 12px;resize:vertical}
.ik-field select{
  appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23626b73' stroke-width='2'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
.ik-field input:focus,.ik-field select:focus,.ik-field textarea:focus{
  outline:0;border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(217,155,27,.24);
}
.ik-field input::placeholder,.ik-field textarea::placeholder{color:#8b939a}

/* -- validation ------------------------------------------------------------ */
.ik-err{
  display:none;margin:6px 0 0;font-size:12px;line-height:1.45;font-weight:600;color:var(--ik-danger);
}
.ik-err::before{content:"";display:inline-block;vertical-align:-2px;width:13px;height:13px;margin-right:6px;
  background:var(--ik-danger);border-radius:50%;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2 1 21h22L12 2Zm0 6 1 7h-2l1-7Zm0 9.2a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2 1 21h22L12 2Zm0 6 1 7h-2l1-7Zm0 9.2a1.2 1.2 0 1 1 0 2.4 1.2 1.2 0 0 1 0-2.4Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.is-invalid .ik-err{display:block}
.ik-field.is-invalid input,.ik-field.is-invalid select,.ik-field.is-invalid textarea{
  border-color:var(--ik-danger);background:var(--ik-danger-soft);
}
.ik-group.is-invalid>.ik-group__body .ik-choice{border-color:#e3b6b2}

/* The summary that appears above the button when a submit is refused. */
.ik-alert{
  display:none;margin:18px 0 0;padding:13px 15px;border-radius:var(--r-lg);
  border:1px solid var(--ik-danger);background:var(--ik-danger-soft);
}
.ik-alert.is-on{display:block}
.ik-alert b{display:block;font-size:13.5px;color:var(--ik-danger);margin-bottom:5px}
.ik-alert ul{margin:0;padding-left:18px}
.ik-alert li{font-size:12.5px;line-height:1.55;color:var(--ink)}
.ik-alert a{font-weight:700}
.cockpit .ik-alert a{color:var(--ik-danger);text-decoration:underline;text-underline-offset:2px}

/* -- submit ---------------------------------------------------------------- */
.ik-submit{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
/* Said before the click, not after it. The page has no endpoint; a button that
   implies otherwise is the defect this whole rebuild exists to remove. */
.ik-truth{
  margin:0 0 14px;padding:11px 13px;border-radius:var(--r-lg);
  background:var(--card-2);border:1px solid var(--line);
  font-size:12px;line-height:1.55;color:var(--muted);
}
.ik-truth b{color:var(--ink)}
.ik-submit__row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ik-submit__row .ck-btn{min-height:46px;height:46px;padding:0 22px;font-size:14.5px}
.ik-submit__row a{
  display:inline-flex;align-items:center;min-height:40px;
  font-size:13px;font-weight:700;
}
.cockpit .ik-submit__row a{color:var(--ik-gold-text);text-decoration:underline;text-underline-offset:3px}

/* -- confirmation ---------------------------------------------------------- */
.ik-done[hidden]{display:none}
.ik-done{
  margin-top:18px;border:1px solid var(--gold);border-radius:var(--r-xl);
  background:#fffdf7;box-shadow:var(--shadow-card);padding:20px 22px;
}
.ik-done__t{
  display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ik-gold-text);font-weight:700;margin:0 0 6px;
}
.ik-done h3{font-size:19px;letter-spacing:-.02em;margin:0 0 8px;color:var(--ink)}
.ik-done p{margin:0 0 12px;font-size:13.5px;line-height:1.6;color:var(--ink)}
.ik-done__sum{
  margin:0 0 14px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;
  padding:14px 16px;display:grid;gap:7px;
}
.ik-done__sum div{display:grid;grid-template-columns:minmax(120px,.42fr) minmax(0,1fr);gap:14px;
  border-top:1px solid var(--line);padding-top:7px}
.ik-done__sum div:first-child{border-top:0;padding-top:0}
.ik-done__sum dt{font-size:11.5px;line-height:1.45;color:var(--muted)}
.ik-done__sum dd{margin:0;font-size:13px;line-height:1.45;font-weight:600;color:var(--ink);word-break:break-word}
.ik-done__acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ik-done__acts .ck-btn{min-height:44px;height:44px}
/* chrome.css ships gold / ghost-on-dark / dark. This is the missing outline
   variant for a secondary action on light ground; it borrows chrome.css's own
   metrics so the two buttons line up exactly. */
.ck-btn.ik-btn-line{
  color:var(--ink);background:#fff;border:1px solid var(--line);
}
.ck-btn.ik-btn-line:hover{border-color:var(--gold);background:var(--card-2)}
.ik-copied{font-size:12px;font-weight:700;color:var(--ik-gold-text)}
.ik-copied[hidden]{display:none}
.ik-done__next{
  margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);
  display:flex;gap:16px;flex-wrap:wrap;
}
.ik-done__next a{
  display:inline-flex;align-items:center;min-height:40px;font-size:12.5px;font-weight:700;
}
.cockpit .ik-done__next a{color:var(--ik-gold-text);text-decoration:underline;text-underline-offset:3px}

/* ----------------------------------------------------------------- aside -- */
/* Sticky, because the form is roughly twice the height of this column and a
   static aside leaves a 300px well of empty canvas beside the second half of
   the form. Sticky also keeps the phone number reachable at every scroll
   position, which is the point of putting it here. */
.ik-aside{display:grid;gap:14px;align-content:start;align-self:start;position:sticky;top:78px}
.ik-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:20px;
}
.ik-card--dark{background:var(--panel);border-color:var(--panel);color:#fff}
.ik-card__t{
  display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ik-gold-text);font-weight:700;margin:0 0 7px;
}
.ik-card--dark .ik-card__t{color:var(--gold-soft)}
.ik-card h2{font-size:20px;line-height:1.12;letter-spacing:-.025em;margin:0 0 10px;color:var(--ink)}
.ik-card--dark h2{color:#fff}
.ik-card h2 .g{color:var(--ik-gold-text)}
.ik-card--dark h2 .g{color:var(--gold-bright)}
.ik-card>p{margin:0 0 14px;font-size:13.5px;line-height:1.6;color:var(--muted)}
.ik-card--dark>p{color:var(--on-dark-mut)}
.ik-list{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.ik-list li{
  display:grid;grid-template-columns:18px minmax(0,1fr);gap:11px;align-items:start;
  padding:10px 0;border-bottom:1px solid var(--line);
  font-size:13px;line-height:1.5;color:var(--ink);
}
.ik-list li:first-child{border-top:1px solid var(--line)}
.ik-list li:last-child{border-bottom:0}
.ik-list svg{margin-top:2px;color:var(--ik-gold-text);flex:none}
.ik-card--dark .ik-list li{color:var(--on-dark);border-bottom-color:rgba(255,255,255,.12)}
.ik-card--dark .ik-list li:first-child{border-top-color:rgba(255,255,255,.12)}
.ik-card--dark .ik-list svg{color:var(--gold-bright)}

.ik-routes{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.ik-routes a{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;
  min-height:52px;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:#fff;color:var(--ink);transition:border-color .15s,background .15s;
}
.ik-routes a:hover,.ik-routes a:focus-visible{border-color:var(--gold);background:var(--card-2)}
.ik-routes b{display:block;font-size:13px;line-height:1.25;color:var(--ink)}
.ik-routes small{display:block;font-size:11.5px;line-height:1.4;color:var(--muted);margin-top:3px}
/* Only the trailing arrow, not the wrapper span around the title and the
   description. The unqualified `.ik-routes span` was hitting both, so every
   route title inherited the arrow's gold and its 15px/800. */
.ik-routes a>span:last-child{color:var(--ik-gold-text);font-weight:800;font-size:15px;line-height:1}

/* ------------------------------------------------------------- forwarder -- */
/* investor-profile.html. Fourteen pages we do not own link to that URL, so it
   cannot be deleted; it forwards to the one intake and carries the deal or
   route context in the hash with it. */
.ik-fwd{
  max-width:640px;margin:60px auto;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--shadow-card);padding:30px 32px;text-align:left;
}
.ik-fwd h1{font-size:26px;letter-spacing:-.03em;margin:8px 0 10px;color:var(--ink)}
.ik-fwd p{margin:0 0 16px;font-size:14px;line-height:1.6;color:var(--muted)}
.ik-fwd .ck-btn{height:46px;padding:0 22px;font-size:14.5px}

/* ------------------------------------------------------------ responsive -- */
@media (max-width:1000px){
  .ik-layout{grid-template-columns:minmax(0,1fr)}
  .ik-aside{position:static}
}
@media (max-width:860px){
  .ik-hero{grid-template-columns:1fr;gap:24px;padding:28px 24px 26px}
  .ik-choices--three{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .ik-page{padding:12px 0 26px}
  .ik-hero{padding:24px 18px 22px;border-radius:12px}
  .ik-form{padding:18px 16px 20px;border-radius:12px}
  .ik-card{padding:17px 16px}
  .ik-choices,.ik-choices--three{grid-template-columns:1fr}
  .ik-rows{grid-template-columns:1fr}
  .ik-done__sum div{grid-template-columns:1fr;gap:2px}
  .ik-submit__row{display:grid}
  .ik-submit__row .ck-btn{width:100%}
  .ik-done__acts .ck-btn{width:100%}
  .ik-fwd{margin:34px 16px;padding:24px 20px}
}
@media (max-width:400px){
  .ik-hero{padding:20px 15px 18px}
  .ik-hero__lede{font-size:14.5px}
}
@media (prefers-reduced-motion:reduce){
  .ik-choice,.ik-routes a,.ik-direct a,.ik-field input,.ik-field select,.ik-field textarea{transition:none !important}
}