/* Guide advertorial v3. One layer on the landing stack (base, landing, site, controls).
   Same article as the approved guide, fewer things per gap. */
.article { --col: 580px; }
.article .col { width: var(--col); max-width: calc(100% - 48px); margin: 0 auto; }
.article section { padding: 0; }
.article p { font-size: 20px; line-height: 1.65; }
.article p + p { margin-top: 18px; }

/* top of page */
.top { padding: 80px 0 0 !important; }
.top h1 { font-size: 54px; line-height: 1.04; margin: 22px 0 22px; }
.dek { font-size: 21px !important; line-height: 1.55 !important; color: var(--body); }
.byline { display: flex; align-items: center; gap: 12px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14.5px; font-weight: 600; color: var(--muted); }
.byline .m49 { width: 28px; height: 28px; border-radius: 6px; }
.opening { margin-top: 40px; }
.opening p { color: var(--ink); }
.opening .signed { font-weight: 600; }

/* each gap: number, title, story, fix, texts, what we install */
.gapsec { padding: 96px 0 0 !important; }
.gapsec .n { font-family: var(--display); font-weight: 700; font-size: 44px; line-height: 1; color: var(--orange); }
.gapsec h2 { font-size: 46px; margin: 10px 0 16px; }
.story { font-size: 21px !important; line-height: 1.6 !important; color: var(--ink) !important; }

.fixit { margin: 40px 0 16px; font-size: 20px; font-weight: 700; color: var(--ink); }
.steps { list-style: none; counter-reset: s; }
.steps li { counter-increment: s; position: relative; padding-left: 48px; font-size: 18.5px; line-height: 1.65; color: var(--body); }
.steps li + li { margin-top: 16px; }
.steps li b { color: var(--ink); }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 31px; height: 31px; border-radius: 50%; background: var(--navy); color: var(--cream); font-family: var(--display); font-weight: 700; font-size: 18px; line-height: 31px; text-align: center; }

/* the texts: one quiet panel per gap, each message the landing's reply bubble */
.texts { margin-top: 36px; padding: 22px 22px 24px; border-radius: 20px; background: var(--sand); }
.texts .consent { font-size: 15.5px !important; line-height: 1.5 !important; font-weight: 600; color: var(--body); margin: 0 0 16px; }
.msg + .msg { margin-top: 22px; }
.msg figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.msg .lbl { font-size: 15.5px; font-weight: 700; color: var(--ink); }
.copy { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 14.5px; font-weight: 700; flex: none; }
.copy svg { width: 16px; height: 16px; }
.copy.done { background: var(--ink); color: var(--cream); }
.copy.done svg { color: #F4A57F; }
.bubble { background: var(--navy); color: #fff; border-radius: 18px 18px 4px 18px; padding: 17px 20px; font-size: 18px; line-height: 1.6; }
.tok { color: #F8B898; font-weight: 600; white-space: nowrap; }

/* what we install: one line, not a card */
.installs { margin-top: 36px; font-size: 19px !important; padding-left: 20px; border-left: 3px solid var(--orange); color: var(--body); }
.installs b { color: var(--orange-ink); }
.installs strong { color: var(--ink); }

/* inline ask: native to the article, rules above and below */
.ask { margin-top: 64px; padding: 34px 0 36px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ask .bridge { font-family: var(--display); font-weight: 600; font-size: 32px !important; line-height: 1.1 !important; color: var(--ink); text-wrap: balance; }
.ask .go { margin-top: 22px; display: flex; align-items: center; gap: 24px; }
.ask .micro { margin-top: 0; }

/* close */
.closing { padding: 112px 0 112px !important; }
.closing .col { border-top: 3px solid var(--ink); padding-top: 44px; }
.closing h2 { font-size: 46px; margin-bottom: 22px; }
.closing p { color: var(--ink); }
.closing .pay-line { margin-top: 30px; font-family: var(--display); font-weight: 600; font-size: 32px; line-height: 1.12; color: var(--ink); text-wrap: balance; }

/* Visibility is controlled by the intro and Q1 observers. */
body { padding-bottom: 0 !important; }

@media (max-width: 600px) {
  .article .col { max-width: calc(100% - 40px); }
  .article p { font-size: 18px; line-height: 1.65; }
  .top { padding: 40px 0 0 !important; }
  .top h1 { font-size: 40px; line-height: 1.04; margin: 16px 0 16px; }
  .dek { font-size: 19px !important; }
  .byline { margin-top: 22px; padding-top: 16px; font-size: 13.5px; gap: 10px; }
  .byline .m49 { width: 24px; height: 24px; border-radius: 5px; }
  .opening { margin-top: 30px; }
  .gapsec { padding-top: 72px !important; }
  .gapsec .n { font-size: 38px; }
  .gapsec h2 { font-size: 36px; margin: 8px 0 14px; }
  .story { font-size: 19px !important; }
  .fixit { margin: 32px 0 14px; font-size: 19px; }
  .steps li { padding-left: 44px; font-size: 18px; }
  .steps li::before { width: 29px; height: 29px; line-height: 29px; font-size: 17px; }
  .texts { margin: 30px -8px 0; padding: 18px 14px 20px; border-radius: 18px; }
  .texts .consent { font-size: 15px !important; margin-bottom: 14px; }
  .msg + .msg { margin-top: 20px; }
  .msg .lbl { font-size: 15px; }
  .copy { height: 38px; padding: 0 14px; font-size: 14px; }
  .bubble { padding: 15px 16px; font-size: 17px; }
  .installs { margin-top: 30px; padding-left: 16px; font-size: 17.5px !important; }
  .ask { margin-top: 52px; padding: 28px 0 30px; }
  .ask .bridge { font-size: 28px !important; }
  .ask .go { flex-direction: column; align-items: stretch; gap: 0; margin-top: 20px; }
  .ask .micro { margin-top: 12px; }
  .closing { padding: 88px 0 88px !important; }
  .closing .col { padding-top: 34px; }
  .closing h2 { font-size: 36px; }
  .closing .pay-line { font-size: 28px; margin-top: 26px; }

  .sticky:not([hidden]) { display: block; position: fixed; top: auto; bottom: 0; }
}