/* sales1104: the sales pages in the article reading design (the /articles/how-to-boil-eggs/ model).
   Offer type (Opus, first of type): /offers/<slug>/ (src/offers/offer.njk) and the /offers/ hub (src/offers/hub.njk).
   Those pages carry body.pt-art (articles.css as-is: Fraunces headings, eyebrows, pill buttons, the article FAQ) plus body.pt-sale
   for the rules below, loaded after style.css, themes.css, offers.css, home-s.css and articles.css. Every rule is scoped by
   body.pt-sale. CSS only for the look: copy, prices, Payhip / notify links, sale-state classes (.of-when-sale / .of-when-reg),
   ?early=1, scripts, schema and the Christmas theme + garland are unchanged. No timers or scarcity were added. */

body.pt-sale main{color:var(--ink)}
body.pt-sale main [id]{scroll-margin-top:var(--pt-top)}

/* ---------- hero: article H1 scale, muted lede, article crumbs; the garland and red holiday accents stay ---------- */
body.pt-sale .of-hero{background:var(--cream);border-bottom:1px solid var(--line2);padding-bottom:clamp(32px,4vw,48px)}
body.pt-sale .of-hero .crumbs ol{font-size:13px;color:var(--mute);gap:6px;margin:0}
body.pt-sale .of-hero .crumbs li+li::before{content:"/";margin-right:6px;opacity:.45}
body.pt-sale .of-hero .crumbs a{color:var(--mute)}
body.pt-sale .of-hero .crumbs a:hover{color:var(--p,#1E5B43)}
body.pt-sale .of-top{gap:clamp(28px,4.5vw,64px);margin-top:18px}
body.pt-sale .of-hero h1{font-size:clamp(2.1rem,3.7vw,3.4rem);line-height:1.06;margin:12px 0 14px}
body.pt-sale .of-hub h1{max-width:44rem}
body.pt-sale .of-promise{font-family:var(--hs-serif);font-style:normal;font-weight:500;font-size:clamp(1.15rem,1.6vw,1.32rem);line-height:1.35;letter-spacing:-.01em;color:var(--p,#1E5B43);margin:0 0 12px}
body.pt-sale .of-sub{font-size:17px;line-height:1.6;color:var(--mute);max-width:36rem;margin:0 0 18px}
body.pt-sale .of-wins{gap:8px;margin-bottom:22px}
body.pt-sale .of-wins li{font-size:15.5px;line-height:1.55;color:#2A322E}
body.pt-sale .of-wins .ic{color:var(--p,#1E5B43)}
body.pt-sale .of-art img{border-radius:var(--pt-r);box-shadow:none;border:1px solid var(--line2)}

/* ---------- buy box: same price + red holiday button, article button shape ---------- */
body.pt-sale .of-price b{font-family:var(--hs-serif);font-weight:500;letter-spacing:-.02em}
body.pt-sale .of-tag{border-radius:999px;letter-spacing:.06em}
body.pt-sale main .of-cta{min-height:52px;font-size:16px;box-shadow:none}
body.pt-sale .of-trust,body.pt-sale .of-cd{font-size:14px;line-height:1.5}
body.pt-sale .of-notify input{min-height:48px;border:1px solid var(--line);border-radius:999px;font-size:15px}
body.pt-sale .of-notify input:focus{outline:2px solid var(--g);outline-offset:1px;border-color:var(--g)}
body.pt-sale .of-notify .notify-row{flex-wrap:wrap}
body.pt-sale .of-notify .notify-row input{flex:1 1 14rem}
body.pt-sale .of-notify .btn{flex:0 0 auto;max-width:100%;white-space:normal;line-height:1.25;text-align:center}
body.pt-sale .of-fb{font-size:14px;line-height:1.6}
body.pt-sale .of-fb a{color:var(--pt-link);text-decoration-color:var(--pt-ul)}

/* ---------- section rhythm + heads: the article's calm spacing and H2 scale ---------- */
body.pt-sale main .of-sec{padding-block:clamp(32px,4.5vw,56px)}
body.pt-sale main .of-sec-tight{padding-top:clamp(20px,2.5vw,32px)}
body.pt-sale main .of-head{margin-bottom:22px}
body.pt-sale main .of-head h2,body.pt-sale main .of-final h2{font-size:clamp(1.6rem,2.3vw,2.05rem);line-height:1.15;margin:.3em 0 0;max-width:40rem}
body.pt-sale main .of-final h2{margin-inline:auto}

/* ---------- cards: white, hairline, 20px radius, no shadow, no lift (the article / idea cards) ---------- */
body.pt-sale :where(.of-card,.of-rows,.of-total,.of-step,.of-free){border:1px solid var(--line);border-radius:var(--pt-r);box-shadow:none}
body.pt-sale .of-card{padding:clamp(20px,2.4vw,28px)}
body.pt-sale .of-card h2{font-size:clamp(1.22rem,1.6vw,1.38rem);line-height:1.3;letter-spacing:-.01em;margin:.35em 0 .5em}
body.pt-sale .of-card p:not(.eyebrow),body.pt-sale .of-fit li{font-size:16px;line-height:1.7;color:#2A322E}
body.pt-sale main .of-card .eyebrow{margin:0}
body.pt-sale .of-fit ul,body.pt-sale .of-fit ol{padding-left:1.3rem;margin:0 0 14px}
body.pt-sale .of-fit li{margin:6px 0}
body.pt-sale .of-fit li::marker{color:var(--pt-acc)}
body.pt-sale .of-card a:not(.btn){color:var(--pt-link);text-decoration-color:var(--pt-ul);text-decoration-thickness:1.5px}

/* "In short" = the article's short-answer box (.prose blockquote: cream, hairline, 3px green rule) */
body.pt-sale .of-card.of-short{background:var(--cream);border:1px solid var(--line2);border-left:3px solid var(--g);border-radius:0 var(--pt-r-sm) var(--pt-r-sm) 0;padding:18px 22px}
body.pt-sale .of-card.of-short p:last-child{margin-bottom:0}

/* what's inside: the article table look (hairline rows, cream totals panel) */
body.pt-sale .of-stack{gap:clamp(20px,3vw,40px)}
body.pt-sale .of-rows li{padding:12px 16px;font-size:15.5px;border-top-color:var(--line2)}
body.pt-sale .of-ic{background:var(--gl);color:var(--g)}
body.pt-sale .of-n small{font-size:13.5px;line-height:1.5;color:var(--mute)}
body.pt-sale .of-v{font-size:14.5px}
body.pt-sale .of-total{background:var(--cream);top:calc(var(--pt-top) + 8px);padding:22px}
body.pt-sale .of-today b{font-family:var(--hs-serif);font-weight:500;font-size:1.75rem}
body.pt-sale .of-note{font-size:14px;line-height:1.6}

/* look inside: a calm cream band instead of the dark green block */
body.pt-sale .of-band{background:var(--cream);color:var(--ink);border-block:1px solid var(--line2);padding-block:clamp(32px,4.5vw,56px)}
body.pt-sale .of-band .eyebrow{color:var(--pt-eye)}
body.pt-sale .of-band h2{color:var(--ink)}
body.pt-sale .of-gal{gap:16px}
body.pt-sale .of-gal img{border-radius:var(--pt-r);border:1px solid var(--line2);background:#fff}
body.pt-sale .of-cap{font-size:14.5px;line-height:1.6;color:var(--mute)}

/* founder note = the article author bio; guarantee + dates panels in cream */
body.pt-sale .of-why{background:var(--cream);border-color:var(--line)}
body.pt-sale .of-guar,body.pt-sale .of-dates{background:var(--cream)}
body.pt-sale .of-sig{font-size:14px;color:var(--mute)}
body.pt-sale .of-tl li{font-size:15px;line-height:1.55}

/* compare the sets: idea-card style ladder; "best" keeps its accent border, the current set stays tinted */
body.pt-sale .of-ladder{gap:16px}
body.pt-sale .of-step{background:#fff;transition:border-color .2s}
body.pt-sale .of-step:hover{transform:none;box-shadow:none;border-color:var(--g)}
body.pt-sale .of-step.is-best{border:2px solid var(--pt-acc)}
body.pt-sale .of-step.is-current{background:var(--cream)}
body.pt-sale .of-step img{border-bottom:1px solid var(--line2)}
body.pt-sale .of-step-b{padding:14px 16px 16px;gap:6px}
body.pt-sale .of-step-n{font-family:var(--hs-serif);font-weight:500;font-size:1.08rem;letter-spacing:-.01em}
body.pt-sale .of-step-p b{font-family:var(--hs-serif);font-weight:500}
body.pt-sale .of-step-d,body.pt-sale .of-step-l{font-size:14px;line-height:1.5}
body.pt-sale .of-step-l{color:var(--pt-link)}
body.pt-sale .of-flag{border-radius:999px}
body.pt-sale .of-free{background:var(--cream);border-style:solid}
body.pt-sale .of-free img{border-radius:var(--pt-r-sm);box-shadow:none;border:1px solid var(--line2)}

/* early-access sign-up banner: kept exactly as before (dark evergreen + gold, its own form look); only its text colours are
   restored over the article's main h2 / .eyebrow colours. The form, list tag and copy are unchanged. */
body.pt-sale main .of-early .eyebrow{color:#EEDFB5}
body.pt-sale main .of-early h2{color:#fff}
body.pt-sale main .of-early p:not(.eyebrow){color:#DCE7DF}
body.pt-sale main .of-early .of-early-small{color:#B9CCBF!important}

/* FAQ: the article FAQ (articles.css .faq-wrap rules apply via the faq-wrap class on the section) */
body.pt-sale .faq-wrap{margin-top:0}

/* closing CTA */
body.pt-sale .of-final{background:var(--cream);border-top:1px solid var(--line2);padding-block:clamp(40px,5vw,64px)}
body.pt-sale .of-up{font-size:15px;line-height:1.6}
body.pt-sale .of-up a{color:var(--pt-link);text-decoration-color:var(--pt-ul)}

@media (max-width:860px){
  body.pt-sale .of-art img{max-width:100%}
}
@media (max-width:560px){
  body.pt-sale .of-hero h1{font-size:2.1rem}
  body.pt-sale .of-sub{font-size:16px}
  body.pt-sale .of-rows li{padding:11px 12px;font-size:15px}
  body.pt-sale:where(:not(.pt-keep)) .faq-wrap .faq details p{padding:0 18px 20px 66px}
}

/* hub H1 accent ("plan it all, pay less"): same treatment as the pt-list pages (listing.css), in the hero's evergreen */
body.pt-sale main h1 .accent,body.pt-sale main h2 .accent{font-family:var(--hs-serif);font-weight:500;color:var(--p,#1E5B43)}

/* ================= shop + bundles (Opus, first of type = /shop/; same rules roll out to /shop/<category>/, /shop/type/<type>/
   and /bundles/, which share these classes): shop.css (pt1102 2c) already follows the article; this closes the last gaps:
   the article H1 + H2 scale, upright accents (as on the pt-list pages), the 17px muted lede and the article's 20px card radius.
   Product cards, prices, Buy / add-to-cart buttons, filters, search, the opt-in form and schema are unchanged. ================= */
body.pt-shop .shop-hero2 h1,body.pt-shop .page-hero h1{font-size:clamp(2.1rem,3.7vw,3.4rem);line-height:1.06}
body.pt-shop main h1 .accent,body.pt-shop main h2 .accent{font-style:normal}
body.pt-shop .shop-hero2 .lede,body.pt-shop .page-hero .lede{font-size:17px;line-height:1.6}
body.pt-shop .section-head h2,body.pt-shop .shop-sec .section-head h2,body.pt-shop .bundle-row h2,body.pt-shop .faq-teaser-intro h2,
body.pt-shop .optin h2{font-size:clamp(1.6rem,2.3vw,2.05rem);line-height:1.15}
body.pt-shop .section-head p:not(.eyebrow){font-size:16px;line-height:1.6}
body.pt-shop :is(.shop-hero2-feat .hx-card,.soon-in,.optin,.bundle-img,.empty-state){border-radius:20px}
@media (max-width:620px){
  body.pt-shop .shop-hero2 h1,body.pt-shop .page-hero h1{font-size:2.1rem}
  body.pt-shop .shop-hero2 .lede,body.pt-shop .page-hero .lede{font-size:16px}
}

/* ================= signup1104 (Phase D): the two opt-ins with their own layout (outside the shared style.css tiers) ================= */
/* home kit form (.hs-join, only on /): the name field took its intrinsic ~230px (flex 0 0 auto) and pushed "Get my free kit" 14px
   past the pill at 1440px; it now uses the shared name width (the full "First name (optional)" placeholder), email takes the rest */
/* offers early-access banner (.of-early, /offers/ + Command Center): name + email + "Email me first" did not fit the banner's right
   column at 1024-1440px (19-129px over). The fields share row one and the gold button takes row two, full width; same form, same look. */
body.pt-sale .of-early .capture-form:not(#_){flex-wrap:wrap}
body.pt-sale .of-early .capture-form:not(#_) :is(input[type=email],input.optin-name){flex:1 1 calc(10.5em + 2.6rem)}
body.pt-sale .of-early .capture-form:not(#_) .btn{flex:1 1 100%;justify-content:center}