/* ==========================================================================
   The guide offer — /omnichannel-guide/
   One page, one ask: take the free PDF, then come and see the software. No
   form: the PDF is a plain download, in the hero and again at the foot,
   with the product tour, a demo and the trial beside it. It stands on
   home.css for the shared section heads, the questions list and the
   reversed closing band, and adds the hero with the guide's cover, the
   chapter list, the page previews, the "who it's for" band and the
   download panel.
   The pictures of the guide are drawn by scripts/omnichannel_guide.py from
   the same source as the PDF.
   ========================================================================== */

/* ---------- Hero: the promise on the left, the guide itself on the right ---------- */
/* Held tighter at the top than the other heroes, so the download button is
   on screen on a laptop without scrolling. */
.offer-hero { padding-block: var(--sp-8) var(--section); }
.offer-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--sp-8) clamp(40px, 6vw, 104px);
  align-items: center;
}
.offer-hero h1 {
  font-weight: 300; font-size: var(--d-1);
  line-height: 1.03; letter-spacing: -0.027em;
  max-width: 17ch; margin-bottom: var(--sp-6);
}
/* The audience, a step down from the title, so "for High-Consideration" holds
   one line beside the cover instead of three ragged ones. */
.offer-hero h1 em { display: block; margin-top: 0.14em; font-size: 0.8em; line-height: 1.1; color: var(--thread); font-weight: 300; }
.offer-hero h1 .keep { white-space: nowrap; }   /* never "High-" / "Consideration" */
.offer-sub {
  font-size: var(--fs-lg); line-height: 1.55; color: var(--ink-soft);
  max-width: 52ch; margin-bottom: var(--sp-6);
}

/* The stitch dash the rest of the site uses for its lists, leading each line. */
.offer-points,
.offer-ticks { list-style: none; display: grid; gap: var(--sp-3); }
.offer-points { margin-top: var(--sp-7); }
.offer-points li,
.offer-ticks li {
  position: relative; padding-left: 28px;
  font-size: var(--fs-base); line-height: 1.55; color: var(--ink-soft);
  max-width: 54ch; text-wrap: pretty;
}
.offer-points li::before,
.offer-ticks li::before {
  content: ''; position: absolute; left: 0; top: 0.78em;
  width: 16px; height: 1.5px; background: var(--thread);
}
.offer-points strong,
.offer-ticks strong { font-weight: 500; color: var(--ink); }

/* The cover, a page of the guide fanned out behind it. */
.offer-book {
  position: relative; margin: 0;
  width: 100%; max-width: 430px; justify-self: center;
  padding: 2% 9% 4% 0;
}
.offer-page img { display: block; width: 100%; height: auto; border-radius: 4px; }
.offer-page--cover { position: relative; z-index: 1; display: block; transform: rotate(-2.5deg); }
.offer-page--cover img {
  box-shadow: 0 34px 70px rgba(17, 17, 16, 0.28), 0 6px 18px rgba(17, 17, 16, 0.12),
              0 0 0 1px rgba(17, 17, 16, 0.06);
}
.offer-page--behind {
  position: absolute; z-index: 0; top: 6%; right: 0; width: 84%;
  transform: rotate(5deg);
}
.offer-page--behind img { box-shadow: 0 20px 44px rgba(17, 17, 16, 0.16), 0 0 0 1px var(--line); }

/* ---------- Inside: twelve chapters, then four of its pages ---------- */
.offer-inside { padding-block: var(--section); }
.chapters {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-7) clamp(24px, 3.4vw, 56px);
}
.chapters li { border-top: 1px solid var(--line); padding-top: var(--sp-5); }
.ch-no { font-family: var(--font-serif); font-weight: 300; font-size: var(--fs-lg); color: var(--thread); }
.chapters h3 {
  font-weight: 400; font-size: var(--fs-xl); line-height: 1.18; letter-spacing: -0.014em;
  margin: var(--sp-2) 0 var(--sp-3);
}
.chapters p { font-size: var(--fs-base); line-height: 1.6; color: var(--ink-soft); max-width: 40ch; }
.chapters-plus {
  margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--line);
  font-size: var(--fs-base); line-height: 1.6; color: var(--ink-soft);
}
.chapters-plus strong { font-weight: 500; color: var(--ink); }
/* Chapter 11 is about Stitchwork: the tour shows it on screen. */
.chapters-tour {
  margin-top: var(--sp-5); max-width: 62ch;
  font-size: var(--fs-base); line-height: 1.6; color: var(--ink-soft);
}
.chapters-tour a,
.offer-hero .hero-assure a {
  color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--thread); text-decoration-thickness: 1px; text-underline-offset: 4px;
}
@media (hover: hover) and (pointer: fine) {
  .chapters-tour a:hover,
  .offer-hero .hero-assure a:hover { color: var(--thread); }
}

.peek { margin-top: var(--sp-9); }
.peek-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 40px); }
.peek-grid figure { margin: 0; }
.peek-grid img {
  display: block; width: 100%; height: auto; border-radius: 3px; background: #fff;
  box-shadow: 0 16px 36px rgba(17, 17, 16, 0.12), 0 0 0 1px var(--line);
}
.peek-grid figcaption {
  margin-top: var(--sp-4);
  font-family: var(--font-serif); font-style: italic; font-size: var(--fs-sm); line-height: 1.5;
  color: var(--ink-faint);
}

/* ---------- Who it's for ---------- */
.offer-for { padding-block: var(--section); background: var(--paper-warm); }
.offer-for-grid {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: var(--sp-8) clamp(40px, 6vw, 104px); align-items: center;
}
.offer-for h2 {
  font-weight: 300; font-size: var(--d-2); line-height: 1.06; letter-spacing: -0.022em;
  margin-bottom: var(--sp-6);
}
.offer-for h2 em { color: var(--thread); }
.offer-for-copy > p { font-size: var(--fs-lg); line-height: 1.55; color: var(--ink-soft); max-width: 52ch; }
.offer-ticks { margin-block: var(--sp-6); }
.offer-verticals { font-size: var(--fs-sm); line-height: 1.7; color: var(--ink-faint); max-width: 60ch; }
.offer-quote { margin-top: var(--sp-7); padding-left: var(--sp-5); border-left: 1.5px solid var(--thread); }
.offer-quote p {
  font-family: var(--font-serif); font-style: italic; font-weight: 300;
  font-size: var(--fs-xl); line-height: 1.32; letter-spacing: -0.01em; color: var(--ink);
  max-width: 34ch;
}
.offer-quote cite {
  display: block; margin-top: var(--sp-3); font-style: normal;
  font-size: var(--fs-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-faint);
}
.offer-photo { margin: 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3 / 4; }
.offer-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }

/* ---------- Get it: the reversed band, the download and what comes next ---------- */
.offer-get-grid {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--sp-8) clamp(40px, 6vw, 104px); align-items: start;
}
.offer-get .lead { margin-top: 0; }
.offer-get-cover { display: block; width: min(220px, 58%); margin-top: var(--sp-2); }
.offer-get-cover img {
  display: block; width: 100%; height: auto; border-radius: 3px; transform: rotate(-3deg);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(244, 241, 234, 0.08);
}

/* The panel the form used to fill: the download, in the thread colour so it
   is the first thing on the band, then the three ways to see the software. */
.offer-next { max-width: 34rem; }
.closing .lf-intro { margin-bottom: var(--sp-5); }
.closing .offer-download { background: var(--thread); border-color: var(--thread); color: var(--paper); }
@media (hover: hover) and (pointer: fine) {
  .closing .offer-download:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
}
.closing .offer-next-label {
  margin: var(--sp-7) 0 var(--sp-2); padding-top: var(--sp-6); border-top: 1px solid var(--line-dark);
  font-size: var(--fs-xs); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--paper-faint);
}
.offer-next-list { list-style: none; }
.offer-next-list a {
  display: block; position: relative; padding: var(--sp-4) var(--sp-7) var(--sp-4) 0;
  border-bottom: 1px solid var(--line-dark); text-decoration: none;
}
.offer-next-list li:last-child a { border-bottom: 0; padding-bottom: 0; }
.offer-next-list strong { display: block; font-weight: 500; font-size: var(--fs-md); color: var(--paper); }
.offer-next-list span { display: block; margin-top: 2px; font-size: var(--fs-sm); line-height: 1.5; color: var(--paper-faint); }
.offer-next-list a::after {
  content: '→'; position: absolute; right: 0; top: var(--sp-4);
  color: var(--thread); font-size: var(--fs-md); transition: transform .18s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .offer-next-list a:hover strong { color: #e07a4a; }
  .offer-next-list a:hover::after { transform: translateX(4px); }
}

/* ---------- The responsive ladder (tokens.css) ---------- */
@media (max-width: 1000px) {
  .offer-hero-grid,
  .offer-for-grid,
  .offer-get-grid { grid-template-columns: minmax(0, 1fr); }
  .offer-book { max-width: 340px; justify-self: start; }
  .chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offer-photo { aspect-ratio: 16 / 10; }
  .offer-get-cover { display: none; }
}
@media (max-width: 860px) {
  .peek-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .offer-hero { padding-top: var(--sp-8); }
  .chapters { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .offer-book { max-width: 280px; }
  .hero-cta .btn { flex: 1 1 100%; text-align: center; }
}