/* Custom solutions (/custom-solutions) — the page layer of the design repo's
 * `site/Site - Custom Solutions.html`, its `cu-page` style block, as
 * `b427825` built it on the clean pattern set when it moved the section off
 * /sell onto a page of its own.
 *
 * The page is built from the clean pattern set in css/sx-home.css, which the
 * shell bundle carries: `.hm-sec`, `.hm-head`, `.hm-eb`, `.hm-sub` and
 * `.hm-alt`. This sheet holds only what the prototype adds, every name `cu-`
 * (tests/test_page_stylesheet_class_collisions.py).
 *
 * Inverted from the prototype the usual way: it authors at
 * data-theme="dark" on its `.sx` div, so every value here is a token that
 * each theme already resolves. Its `.sx` prefixes are gone: they lifted its
 * rules past its own `.sx p` / `.sx h2` / `.sx button` / `.sx a` resets,
 * which here are `:where(.sx) …` at (0,0,1), so a class wins alone. Its
 * one-column tracks are `minmax(0, 1fr)`, never its bare `1fr`. Its controls
 * under 44px opt out of css/responsive.css's floor and take it back under a
 * coarse pointer, at the foot. Error words take `--sx-danger-text`, the ink,
 * where the prototype paints the `--sx-danger` fill. */

/* Anchored sections clear the sticky top bar. */
.cu-page section[id], .cu-page #how, .cu-page #start { scroll-margin-top: 84px; }

/* ---------- Hero ----------
   `.sx-hero` with nothing below it: the next section's margin is the gap. The
   wayfinder decides the top and the gap above the title. */
.cu-hero { padding-bottom: 0; }
.cu-top {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  grid-template-areas: "intro form" "how form";
  column-gap: 64px; row-gap: 36px;
  align-items: start;
}
.cu-intro { grid-area: intro; }
.cu-how { grid-area: how; }
.cu-form { grid-area: form; }
.cu-hero h1 { font-size: 50px; line-height: 1.05; max-width: none; text-wrap: balance; }
.cu-hero .lede { margin-top: 22px; font-size: 17px; line-height: 1.55; max-width: 56ch; }

.cu-steps { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--sx-line); }
.cu-steps li {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--sx-line);
}
.cu-steps .n {
  padding-top: 3px;
  font-family: var(--sx-font-mono); font-size: 11px; color: var(--sx-text-3);
  font-variant-numeric: tabular-nums;
}
.cu-steps b { font-size: 15px; font-weight: 600; color: var(--sx-text); }
.cu-steps p { margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--sx-text-2); text-wrap: pretty; }
.cu-fit { margin-top: 18px; font-size: 13.5px; line-height: 1.55; color: var(--sx-text-3); text-wrap: pretty; }
/* A link inside a sentence is underlined here, as `.hm-sub a` is: the
   prototype's is told from its sentence by weight and a shade alone. */
.cu-fit a {
  color: var(--sx-text-2); font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--sx-line-2);
  text-underline-offset: 3px;
}
.cu-fit a:hover { color: var(--sx-text); text-decoration-color: currentColor; }

/* ---------- The form ---------- */
.cu-form {
  padding: 24px;
  border-radius: var(--sx-r-lg);
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}
.cu-form-body { display: grid; gap: 18px; }
.cu-form h2 { margin-top: 8px; font-size: 20px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.cu-fs { margin: 0; padding: 0; border: 0; min-width: 0; }
.cu-f { display: block; min-width: 0; }
.cu-lbl { display: block; margin-bottom: 8px; padding: 0; font-size: 13px; font-weight: 500; color: var(--sx-text); }
.cu-lbl .o { margin-left: 4px; font-weight: 400; color: var(--sx-text-3); }
.cu-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.cu-pick button {
  display: inline-flex; align-items: center;
  height: 30px; min-height: 0; padding: 0 12px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  font-size: 13px; font-weight: 500; color: var(--sx-text-2);
  transition: color .12s, box-shadow .12s, background .12s;
}
.cu-pick button:hover { color: var(--sx-text); box-shadow: 0 0 0 1px var(--sx-line-2) inset; }
.cu-pick button[aria-pressed="true"] {
  background: var(--sx-bg); color: var(--sx-text);
  box-shadow: 0 0 0 1px var(--sx-line-2) inset;
}
.cu-in {
  display: block; width: 100%; height: 40px; min-height: 0; padding: 0 12px;
  border: 0; border-radius: var(--sx-r-md);
  background: var(--sx-bg);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  color: var(--sx-text); font-family: inherit; font-size: 14px;
  transition: box-shadow .12s;
}
.cu-ta { height: auto; min-height: 112px; padding: 10px 12px; line-height: 1.55; resize: vertical; }
.cu-in::placeholder { color: var(--sx-text-3); }
.cu-in:hover { box-shadow: 0 0 0 1px var(--sx-line-2) inset; }
.cu-in:focus {
  outline: none;
  box-shadow: 0 0 0 1px var(--sx-line-2) inset, 0 0 0 3px color-mix(in oklab, var(--sx-brand-3) 32%, transparent);
}
.cu-in[aria-invalid="true"] { box-shadow: 0 0 0 1px var(--sx-danger) inset; }
.cu-err { display: block; margin-top: 6px; font-size: 12.5px; color: var(--sx-danger-text); }
.cu-form-err { margin-top: 0; }
.cu-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
/* The consent box the intake requires (`data_consent`), not in the prototype. */
.cu-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; color: var(--sx-text-2); cursor: pointer; }
.cu-consent input { flex: none; width: 16px; height: 16px; min-height: 0; margin: 2px 0 0; accent-color: var(--sx-brand); }
.cu-act { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 4px; }
.cu-note { font-size: 12.5px; line-height: 1.5; color: var(--sx-text-3); }
.cu-sent { display: grid; gap: 12px; justify-items: start; }
.cu-sent h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
/* The paragraphs are named rather than reached as `.cu-sent p`: the eyebrows
   here are `<p>`s, where the prototype's are `<div>`s its paragraph rules
   never reach, and a descendant `p` rule outranks the eyebrow's 11px. */
.cu-sent-p { font-size: 14px; line-height: 1.6; color: var(--sx-text-2); text-wrap: pretty; }
.cu-sent-p b { color: var(--sx-text); font-weight: 500; }
.cu-sent .hm-alt { min-height: 0; }

/* ---------- Example ---------- */
.cu-case { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.cu-case-c {
  display: flex; flex-direction: column;
  padding: 22px;
  border-radius: var(--sx-r-lg);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}
.cu-case-c--out { background: var(--sx-surface); }
.cu-asked { list-style: none; margin: 14px 0 0; padding: 0; }
.cu-asked li {
  padding: 11px 0; border-top: 1px solid var(--sx-line);
  font-family: var(--sx-font-mono); font-size: 13px; line-height: 1.5; color: var(--sx-text);
}
.cu-asked li:last-child { border-bottom: 1px solid var(--sx-line); }
.cu-case-p { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--sx-text-2); text-wrap: pretty; }
.cu-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: auto; padding-top: 20px; }

/* ---------- Narrower ----------
   The form comes up under the pitch, ahead of how it works. */
@media (max-width: 960px) {
  .cu-top { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "form" "how"; }
}
@media (max-width: 720px) {
  .cu-hero h1 { font-size: 36px; }
  .cu-case { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .cu-row2 { grid-template-columns: minmax(0, 1fr); }
  .cu-form { padding: 20px; }
}

/* ---------- Under a thumb ----------
   The 44px floor comes back for the controls above that opted out of it,
   declared after them so it wins under a coarse pointer. Not on the
   textarea, whose own floor is higher. */
@media (pointer: coarse) {
  .cu-pick button, .cu-in:not(.cu-ta), .cu-sent .hm-alt { min-height: 44px; }
}