/*
 * /start only: the ad landing page (docs/plans/intent-first-funnel.md, Phase 1).
 *
 * Its own file so the shared stylesheet's ?v= key, repeated on every page, does not move for one
 * page. Everything here is built from styles.css's tokens and components (the prompt card, the phone
 * field, the plan card, the work-page kicker); nothing new is a colour. Loaded after styles.css.
 */

/* Hero: the sky wash of .page-hero, with room for two doors. */
.start-hero {
  position: relative;
  padding: 72px 0 48px;
  overflow: hidden;
}
.start-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-sky);
  opacity: 0.4;
  pointer-events: none;
}
.start-hero .container { position: relative; }
.start-hero h1 { margin: 14px 0 18px; max-width: 18ch; }
.start-lede { font-size: 18px; line-height: 1.55; color: var(--color-graphite); max-width: 60ch; }

.start-doors { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 20px; margin-top: 32px; }
.start-door { display: flex; flex-direction: column; gap: 8px; }
/* The Start now button keeps its own width with its note beneath; a note longer than its button must
   not stretch the button (phones stretch it on purpose, below). Scoped to the second door so this file
   can ship without the Start now pages and never move the live "Talk to us first" button mid-test. */
#start-second-door { align-items: flex-start; }
.start-door-note { font-size: 14px; color: var(--color-muted-text); margin: 0; }
/* The second door's note is filled only for a visitor in India (pricing.js); elsewhere it is empty and
   takes no room. Its two short sentences wrap under the button rather than stretching the row. */
.start-door-note:empty { display: none; }
#start-second-door .start-door-note { max-width: 36ch; text-wrap: balance; }

/* The sites we run: a grid of cards, each with the live site's screenshot. */
.start-sites {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}
.start-site {
  min-width: 0;
  background: var(--color-card-white);
  border: 1px solid var(--color-soft-border);
  border-radius: 20px;
  padding: 20px 20px 24px;
}
.start-shot { display: block; margin-bottom: 18px; }
.start-shot img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-cards);
  border: 1px solid var(--color-soft-border);
}
.start-site h3 { font-size: 22px; margin-bottom: 8px; }
.start-site p { color: var(--color-graphite); font-size: 15.5px; line-height: 1.5; }
.start-site .work-live { margin-top: 14px; }

/* The three founders, by name and face: a row of three, each photo above its words. */
.start-faces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.start-face { margin: 0; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.start-face img {
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--color-soft-border);
}
.start-face h3 { font-size: 22px; margin-bottom: 2px; }
.start-role { font-size: 13px; color: var(--color-muted-text); margin: 0 0 10px; }
.start-face p { color: var(--color-graphite); font-size: 15.5px; line-height: 1.5; }

/* The callback form: the capture card's look, with its own labels. */
.start-talk-grid h2 span { display: block; }
.start-talk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.start-card { max-width: none; margin-top: 0; padding: 28px; }
.cb-label { display: block; font-weight: 700; font-size: 14px; margin: 18px 0 8px; padding: 0; }
#cb-form > .cb-label:first-of-type { margin-top: 0; }
.cb-label .muted { font-weight: 400; color: var(--color-muted-text); }
.start-card .prompt-input2 { width: 100%; }
.start-card .phone-field { flex: none; }

.cb-times { border: 0; padding: 0; margin: 18px 0 0; min-width: 0; }
.cb-times legend.cb-label { margin: 0 0 8px; }
.cb-time-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cb-time { position: relative; }
.cb-time input { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* The capture card's chip, drawn on a radio so the choice is native to keyboards and screen readers. */
.cb-time span {
  display: inline-block;
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  background: var(--color-card-white);
}
.cb-time span:hover { border-color: var(--color-graphite); }
.cb-time input:checked + span { background: var(--color-lime-wash); border-color: var(--color-lime-ui); }
.cb-time input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.cb-wa { display: flex; gap: 10px; align-items: flex-start; margin: 20px 0 4px; cursor: pointer; }
.cb-wa input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--color-ink-black); }
.cb-wa span { font-size: 13.5px; line-height: 1.45; color: var(--color-graphite); }

.start-card .prompt-turnstile { margin-top: 16px; }
.cb-error { color: var(--color-error-text); font-size: 14px; margin: 12px 0 0; }
.cb-submit { width: 100%; justify-content: center; margin-top: 16px; }
.start-card .fine { font-size: 13px; color: var(--color-muted-text); margin-top: 10px; text-align: center; }
.cb-done h3 { font-size: 25px; margin-bottom: 10px; }
.cb-done p { color: var(--color-graphite); font-size: 16px; line-height: 1.5; }
.cb-done:focus { outline: none; }

/* The light footer: the legal line only. */
.start-page .footer .footer-bottom { margin-top: 0; border-top: 0; padding-top: 0; }

@media (max-width: 960px) {
  .start-talk-grid { grid-template-columns: 1fr; gap: 24px; }
  .start-faces { grid-template-columns: 1fr; gap: 28px; }
  .start-face { flex-direction: row; gap: 20px; }
}
@media (max-width: 640px) {
  .start-hero { padding: 40px 0 32px; }
  .start-lede { font-size: 16.5px; }
  .start-doors { flex-direction: column; align-items: stretch; }
  #start-second-door { align-items: stretch; }
  .start-door .btn { justify-content: center; }
  .start-sites { grid-template-columns: 1fr; }
  .start-face img { width: 88px; height: 88px; }
  .start-card { padding: 20px; }
  .start-card .phone-field { display: flex; }
}
/* The shared stylesheet hides the header's button on phones and lets the burger menu carry it; this
   page has no burger, so its one button stays. */
@media (max-width: 640px) {
  .start-page .nav .btn { display: inline-flex; }
}