/**
 * ScaleCraft Start Here page - page-scoped layout
 * Version: 1.0 (draft) | 2026-09-01
 *
 * Depends on: bureau-tokens.css (tokens, .sc-* utilities, shared motion
 * utilities). Loaded site-wide, scoped to .sc-sh, inert elsewhere.
 *
 * A terminal page: one action (the intake questionnaire), no outbound
 * links, no secondary CTA, and no final Graphite CTA block. The copy
 * asks for "low theater", so this page is deliberately the quietest on
 * the site: a Pine opener with no mark motif, then plain Chalk.
 */

.sc-sh {
  box-sizing: border-box;
  width: 100%;
  padding: var(--sc-space-6) var(--sc-grid-margin);   /* 89 / 88 */
  background-color: var(--sc-chalk);
  color: var(--sc-graphite);
}

.sc-sh * { box-sizing: border-box; }
.sc-sh :where(h1, h2, h3, p, blockquote, figure, figcaption, cite, span) { color: inherit; }
.sc-sh :where(h1, h2, h3, p, blockquote, figure) { margin: 0; }

.sc-sh__inner { max-width: var(--sc-grid-max-width); margin: 0 auto; }

.sc-sh__label {
  display: block;
  font-family: var(--sc-font-mono);
  font-size: var(--sc-type-l1-size);
  letter-spacing: var(--sc-type-l1-tracking);
  text-transform: uppercase;
  color: var(--sc-pine);
  margin-bottom: var(--sc-space-3);
}


/* ================================================================
   1 - OPENER   (Pine field, no mark - reset the stakes)
   ================================================================ */

.sc-sh--opener {
  background-color: var(--sc-pine);
  color: var(--sc-chalk);
}

.sc-sh__opener-copy { max-width: 54ch; }

.sc-sh__headline { max-width: 16ch; }

.sc-sh__subhead {
  margin-top: var(--sc-space-3);
  max-width: 34ch;
}

.sc-sh__opener-body { margin-top: var(--sc-space-4); }
.sc-sh__opener-body .sc-b2 {
  margin-top: var(--sc-space-3);
  color: var(--sc-chalk-68);
}
.sc-sh__opener-body .sc-b2:first-child { margin-top: 0; }

.sc-sh__opener-kicker {
  margin-top: var(--sc-space-4);
  color: var(--sc-chalk);
}


/* ================================================================
   2 - BEFORE THE CALL / WHAT THE CALL IS   (Chalk)
   ================================================================ */

.sc-sh__body { max-width: 62ch; }
.sc-sh__body p { margin-top: var(--sc-space-3); }
.sc-sh__body p:first-child { margin-top: 0; }
.sc-sh__body + .sc-sh__body { margin-top: var(--sc-space-4); }


/* ================================================================
   3 - THE QUESTIONNAIRE   (contained block - the page's one anchor)
   ================================================================ */

.sc-sh__form {
  border: 1px solid var(--sc-stone);
  padding: var(--sc-space-5);
  max-width: 52rem;
}

.sc-sh__form-prompt {
  max-width: 58ch;
  margin-bottom: var(--sc-space-5);
}

/* Real embed: a Typeform / Tally iframe dropped straight in here. */
.sc-sh__embed iframe {
  display: block;
  width: 100%;
  border: 0;
  min-height: 620px;
}

/* Placeholder until the embed URL exists. Dashed so it never reads as
   finished UI. */
.sc-sh__embed-placeholder {
  border: 1px dashed var(--sc-stone);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sc-space-2);
  padding: var(--sc-space-4);
  text-align: center;
  color: rgba(27, 31, 35, .55);
}
.sc-sh__embed-placeholder .sc-l1 { color: rgba(27, 31, 35, .55); }
.sc-sh__embed-placeholder p {
  font-size: var(--sc-type-b3-size);
  line-height: var(--sc-type-b3-line-height);
  max-width: 40ch;
}


/* ================================================================
   4 - SUPPORTING PROOF   (restrained reassurance, not a pitch)
   ================================================================ */

.sc-sh__proof {
  max-width: 62ch;
  margin-top: var(--sc-space-6);
  padding-top: var(--sc-space-5);
  border-top: 1px solid var(--sc-stone);
}

.sc-sh__proof-quote {
  font-family: var(--sc-font-display);
  font-weight: 400;
  font-size: var(--sc-type-d4-size);
  line-height: var(--sc-type-d4-line-height);
  letter-spacing: var(--sc-type-d4-tracking);
  border-left: var(--sc-border-accent);   /* 2px Copper - the one signal on the page */
  padding-left: var(--sc-space-3);
}
.sc-sh__proof-attr {
  margin-top: var(--sc-space-2);
  padding-left: var(--sc-space-3);
  font-family: var(--sc-font-body);
  font-size: var(--sc-type-b3-size);
  color: rgba(27, 31, 35, .6);
}
.sc-sh__proof-note {
  margin-top: var(--sc-space-4);
  font-size: var(--sc-type-b3-size);
  line-height: var(--sc-type-b3-line-height);
  color: rgba(27, 31, 35, .6);
}


/* ================================================================
   RESPONSIVE - section padding
   ================================================================ */

@media (max-width: 1024px) {
  .sc-sh { padding-left: var(--sc-space-5); padding-right: var(--sc-space-5); }
}
@media (max-width: 600px) {
  .sc-sh {
    padding-top: var(--sc-space-5);
    padding-bottom: var(--sc-space-5);
    padding-left: var(--sc-space-3);
    padding-right: var(--sc-space-3);
  }
  .sc-sh__form { padding: var(--sc-space-4); }
}