/* The generic product page reuses landing.css; these are its few additions. */
.home-cta{margin:28px 0 0}
.cta-final .home-cta{margin:20px 0 0}
[hidden]{display:none!important}

/* Step 3: the loop as a numbered rail */
.home-loop{justify-content:center}
.home-loop ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.home-loop li{position:relative;display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:center;padding:11px 0}
.home-loop li:not(:last-child)::after{content:"";position:absolute;left:16px;top:calc(50% + 17px);bottom:calc(-50% + 17px);width:2px;background:var(--line-2)}
.home-loop b{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:700 14px var(--mono);background:var(--accent);color:var(--on-accent)}
.home-loop span{font-size:16.5px;font-weight:650;line-height:1.3;color:var(--ink)}

/* The three example pieces. Class names avoid "ad"/"ads" on purpose: ad blockers hide elements named
   like adverts, which removed one card for visitors who use one. Self-contained: nothing here depends
   on the .ad rules of landing.css. All three are the same size and nothing is cropped
   (version A: three 2:3 pieces; version B: three 9:16 ones). */
.samples{display:grid;grid-template-columns:repeat(3,minmax(0,290px));justify-content:center;align-items:stretch;gap:22px;width:100%}
.sample{margin:0;min-width:0;display:flex;flex-direction:column;background:#fff;color:#16140F;border-radius:18px;overflow:hidden;text-align:left;border:1px solid rgba(19,42,27,.08);box-shadow:0 2px 6px rgba(19,42,27,.08),0 30px 60px -28px rgba(19,42,27,.45)}
.sample figcaption{display:flex;align-items:center;gap:8px;padding:11px 13px}
.sample figcaption b{font-size:13.5px}
.sample figcaption small{margin-left:auto;font-size:11px;color:#6B665D}
.sample img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover}
.samples.real .sample img{aspect-ratio:9/16}
.sample p{flex:1;margin:0;padding:11px 13px 13px;font-size:13px;line-height:1.4;color:#45413A;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(2 * 1.4em + 24px)}
.dot{width:26px;height:26px;border-radius:50%;flex:none}
.dot-green{background:#1F5130}.dot-blue{background:linear-gradient(135deg,#2B5C8A,#F2A65A)}.dot-coral{background:#FF6F59}
.stage-caption.unaffiliated{max-width:60ch}
@media(max-width:1000px){.samples{gap:14px}}
/* Narrow windows and tablets: still the three, centred, each a third of the width. */
@media(max-width:760px){
  .samples{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .sample figcaption small{display:none}
  .sample p{font-size:12px}
}
/* Phones: a sideways scroller that starts at the first piece, with the next one peeking in. */
@media(max-width:520px){
  .samples{display:flex;justify-content:flex-start;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:16px;padding:10px 16px 26px;margin:0 -16px;width:calc(100% + 32px);scrollbar-width:none}
  .sample{flex:none;width:64%;scroll-snap-align:start}
  .samples.real .sample{width:58%}
  .sample figcaption small{display:inline}
  .sample p{font-size:13px}
}