/* The closing CTA section (.onboard) and the setup-assist form (.assist).
   Extracted from landing.html on 2026-08-30 so every page hosting the closing
   CTA shares one copy: the block itself is assembled from
   web/marketing/onboard.section.html, and a shared fragment whose styles
   live in one page's <style> is a fragment that only works on that page.
   Which store is promoted and whether the badges or /signup lead still
   live in /includes/install-cta.css. */

/* Onboard section: the closing CTA. One action, not a fork.
   It used to offer two, side by side: self-serve on the left, and on the right
   a concierge card eyebrowed "Studio & Business" -- a tier with no self-serve
   checkout behind it. That asked a visitor who had just read the whole page to
   make a decision before they could do anything, and named a plan they could
   not buy. Now the section asks for the same thing the hero asked for, and
   guided setup is one demoted line underneath: an alternative for the visitor
   who wants a person, not a gate everyone else has to pass first.
   Layout and palette live here. Which store is promoted, and whether the
   badges or /signup lead, are the shared state machine in
   /includes/install-cta.css -- so the page's two CTAs cannot disagree. */
.onboard { padding: 110px 0 130px; background: var(--surface); }
.onboard__head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.onboard__head .eyebrow { color: var(--brand); }
.onboard h2 { font-size: clamp(30px, 4vw, 44px); font-weight: 700; letter-spacing: -0.024em; line-height: 1.1; margin-top: 12px; }
.onboard h2 em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: var(--brand); }

/* The two steps between the headline and the CTA card: start free on Instagram
   and Facebook today, add the phone number (WhatsApp and phone calls, 30 days
   free) when ready. Two equal cards, deliberately quieter than the CTA card
   below them: they explain the offer, the card is the action. Logical
   properties throughout, because this renders in Hebrew and Arabic too. */
.onboard__steps {
  list-style: none; padding: 0;
  max-width: 720px; margin: 0 auto 28px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.onboard__step {
  position: relative; text-align: start;
  padding: 20px 22px; padding-inline-start: 62px;
  background: #fff; border: 1px solid var(--hairline); border-radius: 16px;
}
.onboard__step-n {
  position: absolute; top: 20px; inset-inline-start: 20px;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand); color: #fff; font-size: 14px; font-weight: 700;
}
.onboard__step h3 { font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.onboard__step p { font-size: 15px; color: var(--ink-2); line-height: 1.55; margin-top: 6px; }
@media (max-width: 640px) {
  .onboard__steps { grid-template-columns: 1fr; }
}

.onboard__card {
  max-width: 560px; margin: 0 auto;
  background: #fff;
  border: 1px solid rgba(7, 94, 84, 0.25);
  border-radius: 22px;
  box-shadow: 0 30px 60px -32px rgba(7,94,84,0.20);
  padding: 34px 30px 28px;
}

/* The hero's CTA markup, re-tokenised for a light card. Reusing the hero's
   classes rather than copying its rules is the whole point: .hero__cta is the
   hook /includes/install-cta.css orders the block from, so this card inherits
   the platform behaviour and cannot drift from the hero's. */
.onboard__card .hero__cta {
  --cta-ink: var(--ink);
  --cta-ink-2: var(--ink-2);
  --cta-ink-3: var(--ink-3);
  --cta-rule: var(--hairline);
  --cta-pill-bg: var(--brand);
  --cta-pill-fg: #fff;
  --cta-top: 0;
  align-items: center;
}
.onboard__card .hero__install,
.onboard__card .hero__badges,
.onboard__card .hero__web { justify-content: center; }

.onboard__footnote {
  margin: 16px 0 0;
  font-size: 12px; color: var(--ink-3); line-height: 1.45;
  text-align: center;
}

/* Setup-assist: one line under the CTA that opens a short form in place.
   Three states on the wrapper (closed / open / done) so there is no modal and
   no page move -- someone who wants a person should never lose their place to
   ask for one. It sits below a hairline rather than in a card of its own: the
   CTA above is what is being offered, and this is the way out for the visitor
   that offer does not suit. */
.assist {
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--hairline);
  text-align: center;
}
.assist__form, .assist__done { display: none; }
.assist[data-assist-state="open"] .assist__open { display: none; }
.assist[data-assist-state="open"] .assist__form { display: block; }
.assist[data-assist-state="done"] .assist__open { display: none; }
.assist[data-assist-state="done"] .assist__done { display: block; }

/* A text link, not a button. The form behind it is worth reaching; competing
   with the store badges eighty pixels above it is not. */
.assist__open {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0; border: 0; border-bottom: 1px solid transparent;
  background: none; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--brand);
}
.assist__open:hover { border-bottom-color: var(--brand); }
.assist__open:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.assist__open svg { width: 14px; height: 14px; flex: none; }
/* The arrow points at the next step, so in Hebrew and Arabic it points left. */
html[dir="rtl"] .assist__open svg { transform: scaleX(-1); }

/* The form is a form: its labels read from the start edge, even though the
   line that opened it is centred. */
.assist__form { text-align: start; }
/* No !important any more: the .onboard__path p rule these two fought with went
   with the two-card layout. */
.assist__lede { font-size: 13.5px; color: var(--ink-2); margin-bottom: 14px; }
.assist__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .assist__row { grid-template-columns: 1fr; } }

.assist__field { display: block; margin-bottom: 10px; }
.assist__field > span {
  display: block; font-size: 12px; font-weight: 600; color: var(--ink-2);
  margin-bottom: 5px;
}
.assist__field input {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px;
  font: inherit; font-size: 14.5px; color: var(--ink);
  background: var(--surface-2, #fbfbfa);
  border: 1px solid var(--hairline); border-radius: 11px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.assist__field input:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(7, 94, 84, 0.12);
}

.assist__consent {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.45; color: var(--ink-2);
  margin: 4px 0 16px;
}
.assist__consent input { margin-top: 2px; accent-color: var(--brand); flex: none; }

.assist__status { margin: 10px 0 0; font-size: 13px; line-height: 1.45; }

.assist__done {
  font-size: 14.5px; line-height: 1.55; color: var(--ink-2);
  margin: 0; padding: 18px 0 2px;
}
.assist__done strong { display: block; color: var(--ink); font-size: 17px; margin-bottom: 4px; }