/* Kipago public site (landing + guide + the /connect bridge), panel-b redesign.

   Rules this file keeps:
   - No @font-face, no external font, no script, no image beyond the brand
     lockup + favicon. The page must open on a cheap Android over mobile data.
   - Every text size in rem, every box able to grow. The reader may run the
     system font at 200%; nothing may clip or scroll sideways.
   - Brand: Kipago Navy field, gold as a sparing accent, never a large fill.
     Green appears only as a small semantic "paid" cue, never as brand.
   - The Pix mark is deliberately NOT used anywhere. "Pix" is a word only.
   - The message mock-up is a plain quoted card, never WhatsApp chrome. */

:root {
  /* brand */
  --navy: #0b193a;
  --navy-deep: #071026;
  --gold: #eab657;
  --link: #1e3a6e;
  --navy-tint: #e9edf6;

  /* neutrals */
  --ink: #10182b;
  --muted: #667085;
  --border: #e4e7ee;
  --wash: #f6f7f9;
  --card: #ffffff;

  /* on-navy */
  --on-navy: #dfe4ee;
  --on-navy-muted: #aab4c9;
  --navy-hairline: rgba(255, 255, 255, 0.14);

  /* semantic paid/success green (#0b8a5b) is reserved for small cues only;
     no green renders on these two pages at all, deliberate */

  /* layout */
  --maxw: 68rem;
  --col: 44rem;
  --radius: 1rem;
  --radius-sm: 0.625rem;
  --shadow-card: 0 1px 2px rgba(11, 25, 58, 0.05), 0 8px 24px -12px rgba(11, 25, 58, 0.12);
  --shadow-pop: 0 2px 4px rgba(11, 25, 58, 0.06), 0 20px 44px -16px rgba(11, 25, 58, 0.28);
}

* { box-sizing: border-box; }
/* `hidden` must win over any display this file sets, or an element the script
   hides stays on screen: the connect button is display:block and was still
   painted after `btn.hidden = true`. */
[hidden] { display: none !important; }
/* No scroll-behavior:smooth on purpose: support answers cite deep anchors
   (#agendamentos etc.) and a cold load must land on them instantly, not
   animate 16000px on a slow phone. */
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: #fff;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 0.12em; }
b, strong { font-weight: 700; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.25rem;
}
.col {
  max-width: var(--col);
}
.col.center { margin-left: auto; margin-right: auto; }

/* ---------- shared type ---------- */

h1, h2, h3 { color: inherit; text-wrap: balance; }
h1 {
  font-size: 2.125rem;
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 800;
  margin: 0 0 1rem;
}
h2 {
  font-size: 1.625rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin: 0 0 0.75rem;
}
h3 {
  font-size: 1.125rem;
  line-height: 1.35;
  font-weight: 700;
  margin: 0 0 0.35rem;
}

.eyebrow {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--link);
  margin: 0 0 0.85rem;
}
/* The default --link blue is for a light section; on any navy field it is
   near-invisible, so every dark band that carries an eyebrow is listed here. */
.on-dark .eyebrow, .navy .eyebrow, .hero .eyebrow { color: var(--gold); }

.sub {
  font-size: 1.125rem;
  color: var(--muted);
  margin: 0 0 2.25rem;
  max-width: var(--col);
}
.navy .sub { color: var(--on-navy); }

.caption {
  color: var(--muted);
  font-size: 0.9375rem;
  margin: 1rem 0 0;
}
.navy .caption { color: var(--on-navy-muted); }

/* ---------- top bar ---------- */

.topbar {
  background: var(--navy);
  padding: 0.9rem 0;
  border-bottom: 3px solid var(--gold);
}
.topbar .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}
.topbar a { text-decoration: none; }
.lockup { display: block; height: 2rem; width: auto; }
.topbar .navlink {
  color: var(--gold);
  font-weight: 700;
  font-size: 0.9375rem;
  border: 1px solid rgba(234, 182, 87, 0.55);
  border-radius: 999px;
  padding: 0.45rem 1.05rem;
  transition: background 0.15s ease, color 0.15s ease;
}
.topbar .navlink:hover {
  background: var(--gold);
  color: var(--navy);
}

/* ---------- sections ---------- */

section { padding: 3.5rem 0; }
section.wash { background: var(--wash); }
section.navy { background: var(--navy); color: #fff; }
section.navy p { color: var(--on-navy); }
section.navy h2, section.navy h3 { color: #fff; }
/* A link on a navy field. The default --link blue is a light-section colour and
   is unreadable on navy; /forma-de-pagamento is the first page to put one there
   (G149), and the footer had already solved it the same way. */
section.navy p a { color: #fff; }

/* ---------- hero ---------- */

.hero {
  background:
    radial-gradient(52rem 30rem at 85% -18%, rgba(30, 58, 110, 0.85), rgba(30, 58, 110, 0) 62%),
    radial-gradient(40rem 24rem at -12% 110%, rgba(7, 16, 38, 0.9), rgba(7, 16, 38, 0) 60%),
    var(--navy);
  color: #fff;
  padding: 3.25rem 0 4rem;
  position: relative;
  overflow: hidden;
}
.hero .wrap { position: relative; }
.hero-art {
  position: absolute;
  right: -4rem;
  top: -3rem;
  width: 22rem;
  height: 22rem;
  pointer-events: none;
  opacity: 0.55;
}
.hero h1 {
  color: #fff;
  max-width: 24ch;
}
.hero-grid { display: grid; gap: 3rem; }
.hero-side {
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
  min-width: 0;
}
.hero-side .msg { box-shadow: var(--shadow-pop); }
.hero-side .caption { color: var(--on-navy-muted); }
.hero h1 .goldline { color: var(--gold); }
.hero .lead {
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--on-navy);
  margin: 0 0 1.75rem;
  max-width: 34rem;
}
.hero .lead strong { color: var(--gold); font-weight: 700; }

/* the negation list: one claim per line */
.nots {
  list-style: none;
  margin: 0 0 2.25rem;
  padding: 0;
  max-width: 30rem;
}
.nots li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--navy-hairline);
  color: var(--on-navy);
  font-weight: 500;
}
.nots li:first-child { border-top: 1px solid var(--navy-hairline); }
.nots .tick {
  flex: none;
  margin-top: 0.3rem;
  color: var(--gold);
}

/* ---------- call to action ---------- */

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.cta {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
  font-size: 1.0625rem;
  text-align: center;
  text-decoration: none;
  border-radius: 0.75rem;
  padding: 0.95rem 1.6rem;
  box-shadow: 0 2px 0 rgba(7, 16, 38, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 4px 10px rgba(7, 16, 38, 0.22);
}
/* Default is the light-background version. The dark override is listed
   explicitly, never as :not(). A dark section would otherwise get
   navy-on-navy text. */
.cta.ghost {
  background: transparent;
  color: var(--link);
  border: 1px solid #c8d0e0;
  box-shadow: none;
}
.cta.ghost:hover { border-color: var(--link); filter: none; }
.hero .cta.ghost,
section.navy .cta.ghost,
footer.site .cta.ghost {
  color: var(--gold);
  border-color: rgba(234, 182, 87, 0.6);
}
.hero .cta.ghost:hover,
section.navy .cta.ghost:hover { border-color: var(--gold); }
/* The connect bridge's call to action is a real <button> (it opens Meta's
   popup, it is not a link), so it needs the reset a UA stylesheet would
   otherwise impose, plus a waiting state while the Facebook SDK loads. */
button.cta {
  border: 0;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
}
button.cta[disabled],
button.cta[disabled]:hover {
  opacity: 0.5;
  cursor: default;
  transform: none;
  filter: none;
  box-shadow: 0 2px 0 rgba(7, 16, 38, 0.18);
}
@media (max-width: 30rem) {
  .cta-row .cta { flex: 1 1 100%; display: block; }
}

/* ---------- charge lifecycle flow ---------- */
/* A vertical rail on phones, a six-stop horizontal line on wide screens.
   Tag colors borrow the app's semantics: gold = the owner acts, claimed-blue
   = the customer acts, green = paid/done: small cues only, never fills. */

.flow {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.flow li {
  position: relative;
  padding: 0 0 1.6rem 3.25rem;
}
.flow li::before {
  content: "";
  position: absolute;
  left: 1.1rem;
  top: 2.4rem;
  bottom: -0.2rem;
  border-left: 2px solid var(--border);
}
.flow li:last-child::before { display: none; }
.flow-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--navy-tint);
  color: var(--link);
  display: flex;
  align-items: center;
  justify-content: center;
}
.flow li.done .flow-dot { background: #e7f5ee; color: #0b8a5b; }
.flow b { display: block; padding-top: 0.15rem; }
.flow-tag {
  display: inline-block;
  margin-top: 0.3rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--wash);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
}
.flow-tag.you { color: #7a5410; background: #fbf1de; border-color: #efd9ac; }
.flow-tag.cust { color: #1668c7; background: #e7f0fb; border-color: #c9def5; }

/* ---------- free vs premium table ---------- */

.plans-scroll { overflow-x: auto; }
.plans {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.plans th, .plans td {
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--border);
  text-align: center;
  vertical-align: middle;
}
.plans thead th { border-top: none; font-size: 1.0625rem; }
.plans tbody th {
  text-align: left;
  font-weight: 500;
  color: var(--ink);
}
.plans .prem { background: var(--navy-tint); }
.plans thead .prem { color: var(--navy); font-weight: 800; }
.plans .nope { color: var(--muted); font-weight: 600; }
/* A number, where the free tier has one. The free plan caps SENDING, not
   saving, so "até 5" is the true cell and a bare dash would read as "you get
   nothing" — which is not what the boundary says. */
.plans .lim { color: var(--muted); font-weight: 600; font-size: 0.9375rem; }
/* the check glyph, drawn in CSS so its color is one rule */
.ck {
  display: inline-block;
  width: 1.1rem;
  height: 0.6rem;
  border-left: 3px solid var(--muted);
  border-bottom: 3px solid var(--muted);
  transform: rotate(-45deg) translateY(-0.15rem);
}
.ck.green { border-color: #0b8a5b; }

/* ---------- the message mock-up ---------- */
/* Deliberately NOT dressed as WhatsApp: no green, no wallpaper, no logo.
   A plain quoted card, elevated so it reads as the exhibit of the page. */

.msg {
  background: var(--card);
  color: var(--ink); /* the card must not inherit on-navy white when it sits in the hero */
  border: 1px solid var(--border);
  border-top: 4px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  max-width: 26.5rem;
}
.msg-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--wash);
  border-bottom: 1px solid var(--border);
  padding: 0.7rem 1.1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
}
.msg-avatar {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The chat area: bubble-on-panel so it reads as a MESSAGE, while staying off
   WhatsApp's trade dress: brand-tinted panel (never green/beige wallpaper),
   no logo, no OS chrome. */
.msg-chat {
  background: var(--navy-tint);
  padding: 1rem 1rem 1.1rem 1.4rem;
}
.msg-bubble {
  position: relative;
  background: #fff;
  border-radius: 0.75rem;
  border-top-left-radius: 0.2rem;
  box-shadow: 0 1px 1.5px rgba(11, 25, 58, 0.14);
}
.msg-bubble::before {
  content: "";
  position: absolute;
  top: 0;
  left: -0.45rem;
  border-style: solid;
  border-color: transparent;
  border-width: 0 0.5rem 0.55rem 0;
  border-right-color: #fff;
}
.msg-body {
  padding: 0.85rem 1rem 0.2rem;
  margin: 0;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.55;
  white-space: pre-wrap;
}
.msg-body b { font-weight: 700; }
.msg-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 1rem 0.7rem;
  font-size: 0.8125rem;
  color: var(--muted);
}
.msg-time { font-size: 0.75rem; }
.msg-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.6rem;
}
.msg-buttons span {
  flex: 1 1 8rem;
  text-align: center;
  border-radius: 0.6rem;
  box-shadow: 0 1px 1.5px rgba(11, 25, 58, 0.14);
  padding: 0.55rem 0.75rem;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--link);
  background: #fff;
}

/* ---------- numbered steps ---------- */

ol.steps {
  list-style: none;
  counter-reset: step;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  gap: 1rem;
}
ol.steps > li {
  counter-increment: step;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.5rem 1.4rem 1.4rem;
  position: relative;
}
ol.steps > li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 0.9rem;
}
ol.steps p { margin: 0.3rem 0 0; color: var(--muted); }

/* ---------- promise cards (navy section) ---------- */

.blocks {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}
.blocks > li {
  border: 1px solid var(--navy-hairline);
  background: rgba(255, 255, 255, 0.045);
  border-radius: var(--radius);
  padding: 1.35rem 1.4rem;
}
.blocks .blk-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.9rem;
  background: rgba(234, 182, 87, 0.14);
  color: var(--gold);
}
.blocks p { margin: 0.3rem 0 0; color: var(--on-navy); font-size: 0.9875rem; }

/* light-section variant (costs) */
section:not(.navy) .blocks > li {
  background: var(--card);
  border-color: var(--border);
  box-shadow: var(--shadow-card);
}
section:not(.navy) .blocks .blk-icon {
  background: var(--navy-tint);
  color: var(--link);
}
section:not(.navy) .blocks p { color: var(--muted); }

/* ---------- callout ---------- */

.note {
  background: var(--navy-tint);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.25rem;
  margin: 1.75rem 0 0;
}
.note p { margin: 0; }
.note p + p { margin-top: 0.7rem; }
section.navy .note {
  background: rgba(255, 255, 255, 0.06);
  border-left-color: var(--gold);
}

/* ---------- audience pills ---------- */

.trades {
  list-style: none;
  margin: 1.25rem 0 1.5rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.trades { gap: 0.75rem; }
.trades li {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.65rem 1.25rem;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
  box-shadow: var(--shadow-card);
}

/* ---------- download panel ---------- */

.dl-panel { text-align: center; }
.dl-panel .sub { margin-left: auto; margin-right: auto; }
.dl-panel .cta { min-width: min(16rem, 100%); }
.dl-panel .cta-row { justify-content: center; }

/* ---------- footer ---------- */

footer.site {
  background: var(--navy-deep);
  color: var(--on-navy-muted);
  padding: 3rem 0 3.5rem;
  font-size: 0.9375rem;
  border-top: 3px solid var(--gold);
}
footer.site .lockup { height: 1.6rem; margin-bottom: 1.4rem; }
footer.site a { color: #fff; }
footer.site p { margin: 0 0 1rem; max-width: var(--col); }
footer.site .legal {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
}
footer.site .legal li { padding: 0.2rem 0; }
footer.site .fine { color: #8f99b0; font-size: 0.875rem; margin: 0; }

/* ---------- guide: header + table of contents ---------- */

/* Navy hero band; the index card below overlaps its seam. */
.guide-hero {
  background:
    radial-gradient(44rem 24rem at 90% -20%, rgba(234, 182, 87, 0.14), transparent 60%),
    linear-gradient(165deg, var(--navy) 10%, var(--navy-deep) 100%);
  color: #fff;
  padding: 2.75rem 0 5.5rem;
}
.guide-hero h1 { color: #fff; }
.guide-hero .sub { color: var(--on-navy-muted); margin-bottom: 0; }
.guide-hero .eyebrow { color: var(--gold); }
.guide-body { padding-top: 0; }

.toc-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.5rem 1.5rem 1.6rem;
  margin: -3.25rem 0 1.5rem;
  max-width: var(--col);
}
.toc-card > b {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.75rem;
}
.toc {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0 2.5rem;
}
.toc li { border-bottom: 1px solid var(--border); }
.toc li:last-child { border-bottom: none; }
.toc a {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.6rem 0.25rem;
  text-decoration: none;
  font-weight: 600;
  color: var(--ink);
  border-radius: 0.4rem;
  min-width: 0;
  overflow-wrap: anywhere;
}
.toc a:hover { background: var(--wash); }
.toc .n {
  flex: none;
  min-width: 1.5rem;
  text-align: right;
  font-weight: 800;
  font-size: 0.875rem;
  color: var(--gold);
}
.toc .t { flex: 1 1 0; min-width: 0; }

/* ---------- guide: sections ---------- */

.qa {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.75rem 1.4rem;
  margin: 0 0 1.5rem;
  scroll-margin-top: 1.25rem;
  max-width: var(--col);
}
.qa-head {
  display: flex;
  flex-wrap: wrap; /* at 200% font scale the title drops below the badge */
  align-items: flex-start;
  gap: 0.9rem;
  margin-bottom: 0.9rem;
}
.qa-head h2 {
  flex: 1 1 14rem;
  min-width: 0;
  overflow-wrap: anywhere;
}
.qa-num {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  margin-top: 0.05rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  font-weight: 800;
  font-size: 1rem;
}
.qa h2 {
  font-size: 1.375rem;
  margin: 0.15rem 0 0;
}
.qa h3 {
  font-size: 1rem;
  letter-spacing: 0.01em;
  color: var(--link);
  margin: 1.5rem 0 0.5rem;
}
.qa ul, .qa ol { padding-left: 1.35rem; margin: 0.75rem 0; }
.qa li { margin: 0.5rem 0; }
.qa li::marker { color: var(--link); font-weight: 700; }
.qa .after-msg { margin-top: 1.25rem; }
.qa .note { margin: 1.25rem 0; }
.qa .msg { margin: 1.25rem 0; box-shadow: var(--shadow-card); }

.qa .help {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.9375rem;
  color: var(--muted);
  background: var(--wash);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  margin: 1.5rem 0 0;
}
.qa .help .help-icon { flex: none; margin-top: 0.2rem; color: var(--link); }
/* the email address must be able to break at 200% font scale */
.qa .help > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.backtop {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--link);
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 999px;
  padding: 0.25rem 0.8rem;
}
.backtop:hover { border-color: var(--link); }

/* ---------- connect bridge (/connect) ---------- */

/* The Embedded Signup waypoint. It is the first Kipago web page a business
   ever sees and she is mid-flow: she taps "Conectar WhatsApp" on a navy app
   screen, lands here, and leaves into Meta's popup. So it borrows the app's
   field rather than the marketing site's white one, and it is deliberately one
   short screen. She is NEVER on a desktop here: this is an in-app browser on a
   phone, which is what the sizes below are tuned for. */

body.connect-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* dvh so the navy still reaches the bottom when the in-app browser's own bar
     is on screen; the vh above stays as the fallback */
  min-height: 100dvh;
  background: var(--navy);
}
body.connect-page main { flex: 1; display: flex; }
body.connect-page .topbar .wrap { justify-content: flex-start; }

/* Every size here is smaller than the landing hero's on purpose. The button is
   the whole point of the page and it has to be reachable without a scroll on a
   360x640 phone, which is the floor we design the app against. */
.hero.connect {
  flex: 1;
  padding: 1.75rem 0 2.5rem;
}
.hero.connect h1 {
  font-size: 1.75rem;
  margin-bottom: 0.75rem;
}
.hero.connect .lead {
  font-size: 1.0625rem;
  margin-bottom: 1.35rem;
}
.hero.connect .cta {
  display: block;
  width: 100%;
  max-width: 24rem;
}
/* The companion-client warning, under the button and no longer a tinted box.
   The box gave it the visual weight of a call to action, on the one page where
   there already is one and it is the whole point. Same fact, said in the
   quieter voice everything below the button speaks in. */
.hero.connect .warn {
  color: var(--on-navy-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 1.25rem 0 0;
}
/* G142 — the same four steps the app shows before the tap. Hidden on the way
   in, where the app said them thirty seconds ago; shown only on a retry
   (?retry=1), which is the landing she gets every time Meta's popup closes.
   The instructions are needed at minute 20, inside two other apps, and four
   lines read at minute 0 will not be remembered.
   Below the button, because on a retry the button still has to be on screen
   without a scroll and four numbered lines above it would guarantee it is not.
   Its own class, NOT the landing page's `ol.steps`: that one is a stack of big
   white cards for a calm marketing read, and this is a checklist on a navy
   screen she is about to leave. */
.hero.connect .connect-steps {
  margin: 1.25rem 0 0;
  padding: 0 0 0 1.35rem;
  color: var(--on-navy-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.hero.connect .connect-steps li { margin: 0 0 0.6rem; }
.hero.connect .connect-steps li:last-child { margin-bottom: 0; }
.hero.connect .connect-steps b { color: var(--on-navy); font-weight: 600; }

/* Waiting on Facebook's SDK. Without it the button is simply dead for a second
   or two on a slow connection, which reads as a broken page. */
.hero.connect .hint {
  color: var(--on-navy-muted);
  font-size: 0.9375rem;
  margin: 0.75rem 0 0;
}
.hero.connect .err {
  color: #ffd7d7;
  background: rgba(150, 26, 34, 0.42);
  border: 1px solid rgba(255, 150, 150, 0.45);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  margin: 1rem 0 0;
}
.hero.connect .fine {
  color: var(--on-navy-muted);
  font-size: 0.875rem;
  margin: 1.25rem 0 0;
}

/* ---------- wider screens ---------- */

@media (min-width: 48rem) {
  section { padding: 5rem 0; }
  .hero { padding: 5rem 0 5.5rem; }
  h1 { font-size: 2.75rem; }
  h2 { font-size: 2rem; }
  .hero .lead { font-size: 1.3125rem; }

  .hero-grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 3.5rem;
    align-items: center;
  }
  .hero-side { margin: 0; justify-self: end; }
  .flow {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
  }
  .flow li { padding: 3.1rem 0.25rem 0; text-align: center; }
  .flow li::before {
    left: 50%;
    right: auto;
    top: 1.05rem;
    bottom: auto;
    width: 100%;
    border-left: none;
    border-top: 2px solid var(--border);
  }
  .flow-dot { left: 50%; transform: translateX(-50%); z-index: 1; }
  .flow b { font-size: 0.9875rem; }

  ol.steps { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
  .blocks { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }

  .toc { grid-template-columns: 1fr 1fr; }

  .qa { padding: 2.25rem 2.25rem; margin-bottom: 1.75rem; }

  footer.site .legal { gap: 0.4rem 2rem; }
}

@media (min-width: 64rem) {
  h1 { font-size: 3.25rem; }
  .hero { padding: 6rem 0 6.5rem; }
}