/* /start/ — the intake brief. One page uses this, so it stays out of the base
   stylesheet (see the shared-primitives note in README).

   There are no form controls anywhere else on this site, so they are defined
   here from scratch rather than overridden. */

.start{ padding:clamp(46px,7vw,84px) 0 clamp(72px,10vw,120px); }

.start__top{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:18px clamp(20px,5vw,40px);
  border-bottom:1px solid var(--line);
}
.start__brand{ display:flex; align-items:center; gap:11px; font-size:16px; font-weight:600; }
.start__mark{ width:26px; height:26px; filter:drop-shadow(0 0 10px rgba(45,130,255,.65)); }

.start__grid{
  display:grid; gap:clamp(38px,5vw,64px); align-items:start;
  grid-template-columns:1fr;
}
@media (min-width:1000px){ .start__grid{ grid-template-columns:1.25fr .85fr; } }

.start__head{ max-width:660px; margin:0 0 clamp(32px,4vw,46px); }
.start__head h1{
  font-size:clamp(34px,4.6vw,56px); letter-spacing:-.04em; margin:18px 0 0;
  text-wrap:balance;
}
.start__head h1 em{
  font-family:var(--serif); font-style:italic; font-weight:400; color:var(--sapph-lt);
}

/* ---------------- the form ---------------- */
.brief{ display:grid; gap:22px; }
.brief__row{ display:grid; gap:22px; grid-template-columns:1fr; }
@media (min-width:640px){ .brief__row{ grid-template-columns:1fr 1fr; } }

.field{ display:flex; flex-direction:column; gap:8px; }
.field > label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--fg-mute);
}
.field__hint{ font-size:12.5px; color:var(--fg-mute); margin:0; }

.field input,
.field select,
.field textarea{
  width:100%; font:inherit; font-size:15px; color:var(--fg);
  background:rgba(10,18,36,.72);
  border:1px solid var(--line-2); border-radius:2px;
  padding:13px 14px;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.field textarea{ min-height:132px; resize:vertical; line-height:1.6; }
.field input::placeholder,
.field textarea::placeholder{ color:#5b6f8f; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none; border-color:var(--sapph-lt); background:rgba(14,26,52,.9);
  box-shadow:0 0 0 3px rgba(45,130,255,.20);
}
/* The native arrow is invisible on this background in several browsers, so the
   control carries its own. background-image is same-origin data:, which the
   CSP allows under img-src. */
.field select{
  appearance:none; -webkit-appearance:none;
  padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236db4ff' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.field select option{ background:#0a1224; color:#e8f0ff; }

.brief__send{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:4px; }
/* Never disabled: with scripting off this link is the whole feature, so it has
   to work at full strength. is-waiting is added by start.js only, and only once
   JS is there to fill the brief in — it must not be in the shipped markup. */
.btn.is-waiting{ opacity:.55; }

.linkish{
  appearance:none; background:none; border:0; padding:0; cursor:pointer;
  font:inherit; font-size:13.5px; color:var(--fg-dim);
  text-decoration:underline; text-underline-offset:4px;
  text-decoration-color:var(--line-2);
}
.linkish:hover{ color:var(--sapph-lt); }

.preview{
  margin:20px 0 0; padding:18px 18px 20px;
  border:1px solid var(--line); border-radius:2px;
  background:rgba(4,9,20,.8);
  font-family:var(--mono); font-size:12px; line-height:1.75; color:var(--fg-dim);
  white-space:pre-wrap; word-break:break-word;
  max-height:340px; overflow:auto;
}

.brief__fine{
  margin:22px 0 0; max-width:60ch;
  font-family:var(--mono); font-size:11px; line-height:1.85;
  letter-spacing:.04em; color:var(--fg-mute);
}

/* ---------------- the aside ---------------- */
.aside{ display:grid; gap:26px; }
.aside__card{
  --cut:20px;
  padding:1px; border-radius:2px;
  background:linear-gradient(150deg,rgba(120,190,255,.34),rgba(31,111,255,.08) 52%,rgba(255,255,255,.04));
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}
.aside__in{
  background:linear-gradient(168deg,rgba(9,17,34,.96),rgba(3,6,14,.96));
  padding:26px 24px 24px;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
}
.aside__in h2{ font-size:19px; letter-spacing:-.02em; margin:0 0 14px; }

.steps{ list-style:none; padding:0; margin:0; counter-reset:s; }
.steps li{
  counter-increment:s; position:relative; padding:0 0 16px 34px;
  font-size:14.5px; color:var(--fg-dim); line-height:1.65;
}
.steps li:last-child{ padding-bottom:0; }
.steps li::before{
  content:counter(s,decimal-leading-zero);
  position:absolute; left:0; top:1px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  color:var(--sapph-lt);
}

.direct{ margin:0; font-size:14.5px; color:var(--fg-dim); line-height:1.7; }
.direct a{ color:var(--sapph-lt); text-underline-offset:4px; }