/* /plan: the offer page, and the only page on the site that asks the
   reader for anything. Layers on top of base.css.

   Section order matches src/views/plan.ejs. The deliverables box
   (.deliver) is shared with the homepage and lives in base.css. */

/* ── The offer, and the form ────────────────────────────────────── */

.offer { padding: 66px 0 78px; }

/* The form column is sized to the form rather than to a ratio. HubSpot
   lays the consent text and the reCAPTCHA badge out side by side inside
   its iframe, and below roughly 520px of frame width the badge runs past
   the edge of the card. 600px leaves that row comfortable. Nothing in
   this stylesheet can fix it from the outside: the form is a
   cross-origin iframe. */
.offer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 600px;
  gap: 56px;
  align-items: start;
}
/* Stacked well before the copy column gets squeezed, because the form
   column does not give way. */
@media (max-width: 1200px) {
  .offer-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .form-card { max-width: 620px; }
}

.offer h1 { max-width: 9em; }
.offer .lede { margin-bottom: 38px; }

/* ── The form card ──────────────────────────────────────────────── */

/* Sticky so the form stays in reach while the offer copy scrolls past
   it. Only above the breakpoint: stacked, a sticky card would pin
   itself over the content below. 76px clears the 60px sticky header. */
.form-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 30px 32px 32px;
  position: sticky;
  top: 76px;
}
@media (max-width: 1200px) {
  .form-card { position: static; }
}
@media (max-width: 700px) {
  .form-card { padding: 24px 20px 26px; }
}

.form-title {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.2;
}
.form-intro {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--body);
}

.form-note,
.form-fallback {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* ── The HubSpot embed ──────────────────────────────────────────── */

/* HubSpot renders the form inside a cross-origin iframe served from
   js.hsforms.net, so nothing in this stylesheet can reach the fields.
   The form's own type, colors and button are set in HubSpot, under
   the form's Style options. Do not add rules for .hs-input, .hs-button
   and friends here: they will never match, and they read as if the
   form is styled from the repo when it is not.

   What is left to us is the box the iframe sits in. HubSpot posts the
   rendered height back to the parent and sets it on the iframe, so no
   fixed height belongs here either. */

.hs-form-frame { margin-top: 24px; }
.hs-form-frame iframe {
  width: 100%;
  border: 0;
  display: block;
}

/* ── What happens next ──────────────────────────────────────────── */

/* .steps, .step, .step-num moved to base.css on 2026-09-21, where
   /how-we-work-together shares them. This page had the same component
   written out in full, and the two copies had quietly drifted apart.
   Nothing is left to say here: the page uses the shared rules as they
   come. */

/* ── The sample plan ────────────────────────────────────────────── */

.sample-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 48px;
}
@media (max-width: 860px) {
  .sample-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
}

.sample h2 { max-width: 12em; }
.sample .actions { flex: none; }