/* /infidelity/: the infidelity course letter in the new design. Components and sizes follow the approved letter
   /smm-new/style.css (hero, paper letter, numbered parts, learn grid, package cards, price box, navy dashed order box,
   sign-off, FAQ, phone buy bar). Tokens and shared parts in /smm-kit/css/smm-base.css. */

/* Hero */
.hero { background: linear-gradient(180deg, #fff 0%, var(--smm-sky) 100%); border-bottom: 1px solid #dde5f0; padding: 46px 0 50px; }
.hero-in { display: grid; grid-template-columns: 1.25fr .9fr; gap: 40px; align-items: center; }
.hero-warn { margin: 0 0 16px; font-size: 16.5px; color: var(--smm-text); border-left: 4px solid var(--smm-red); padding: 2px 0 2px 14px; }
.hero h1 { margin: 0 0 16px; font-size: clamp(32px, 4.6vw, 50px); font-weight: 900; letter-spacing: -.01em; }
.hero-sub { margin: 0 0 24px; font: italic 700 clamp(19px, 2.2vw, 23px)/1.4 var(--smm-sans); color: var(--smm-ink); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.ghost { font: 500 16px/1.3 var(--smm-sans); color: var(--smm-blue); }
.hero-g { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font: 500 16px/1.4 var(--smm-sans); color: var(--smm-muted); }
.hero-g .ic { width: 20px; height: 20px; }
.hero-art { text-align: center; }
.hero-art > img { width: 200px; filter: drop-shadow(0 18px 24px rgba(24, 40, 73, .22)); }
.hero-by { display: flex; align-items: center; gap: 14px; text-align: left; margin: 16px auto 0; max-width: 360px; background: #fff; border: 1px solid var(--smm-line); border-radius: 50px 12px 12px 50px; padding: 8px 16px 8px 8px; box-shadow: var(--smm-shadow); }
.hero-by img { width: 64px; height: 64px; object-fit: cover; object-position: top; border-radius: 50%; }
.hero-by p { margin: 0; font: 16px/1.35 var(--smm-sans); color: var(--smm-muted); }
.hero-by b { display: block; color: var(--smm-ink); font-size: 16px; }
@media (max-width: 860px) { .hero-in { grid-template-columns: minmax(0, 1fr); gap: 26px; } .hero-art { order: -1; } .hero-art > img { width: 150px; } .hero-by { display: none; } }

/* The letter */
.paper { max-width: 780px; margin: 0 auto; background: #fff; border: 1px solid #e3e3e3; border-radius: 10px; padding: 46px 52px; box-shadow: var(--smm-shadow); }
.band:not(.grey):not(.sky) .paper { box-shadow: none; border: 0; padding: 0; }
.from { font: 16px/1.4 var(--smm-sans); color: var(--smm-muted); }
.dear { font-weight: 700; }
.lead { font: 700 22px/1.5 var(--smm-sans); color: var(--smm-ink); }
.hook { background: #fff8e1; border-left: 4px solid var(--smm-btn-3); padding: 14px 18px; border-radius: 0 8px 8px 0; font-style: italic; }
.cliff { margin: 34px 0 14px; font-size: clamp(24px, 3vw, 30px); font-weight: 900; }
.callout { margin: 24px 0; padding: 20px 24px; background: var(--smm-sky); border-left: 5px solid var(--smm-blue); border-radius: 0 10px 10px 0; font: italic 700 20px/1.5 var(--smm-sans); color: var(--smm-navy); }
.callout p { margin: 0 !important; }
.callout cite { display: block; margin-top: 8px; font: normal 500 16px/1.4 var(--smm-sans); color: var(--smm-muted); }
@media (max-width: 640px) { .paper { padding: 26px 20px; } }

/* The panel: Richard and Amy (cards as on the approved letter) */
.authors { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.author-card { display: grid; grid-template-columns: 120px 1fr; gap: 20px; background: var(--smm-grey); border: 1px solid var(--smm-rule); border-radius: 10px; padding: 24px; }
.author-card img { width: 120px; border-radius: 8px; }
.author-card h3 { margin: 0 0 8px; font-size: 21px; }
.author-card p { margin: 0 0 .8em; font-size: 17px; }
.author-card p:last-child { margin-bottom: 0; }
@media (max-width: 860px) { .authors { grid-template-columns: minmax(0, 1fr); } .author-card { grid-template-columns: 90px 1fr; } .author-card img { width: 90px; } }
@media (max-width: 520px) { .author-card { grid-template-columns: minmax(0, 1fr); } }

/* The three programs */
.parts-top { display: grid; grid-template-columns: 1fr 250px; gap: 30px; align-items: center; max-width: 860px; margin: 0 auto 26px; }
.parts-top .sec-head { margin: 0; text-align: left; }
.still { margin: 0; text-align: center; }
.still img { display: block; width: 250px; border-radius: 8px; border: 4px solid #fff; box-shadow: var(--smm-shadow); }
.still figcaption { margin-top: 8px; font: 16px/1.4 var(--smm-sans); color: var(--smm-muted); }
@media (max-width: 760px) { .parts-top { grid-template-columns: minmax(0, 1fr); } .parts-top .sec-head { text-align: center; } .still img { margin: 0 auto; max-width: 100%; } }
.three { list-style: none; margin: 0 auto; padding: 0; max-width: 860px; display: grid; gap: 14px; }
.three li { display: grid; grid-template-columns: 52px 1fr; gap: 16px; background: #fff; border: 1px solid #e2e2e2; border-radius: 10px; padding: 20px; }
.three h3 { margin: 4px 0 4px; font-size: 21px; color: var(--smm-ink); }
.three .len { margin: 0 0 8px; font: 500 16px/1.3 var(--smm-sans); color: var(--smm-blue); }
.three p { margin: 0; }
.num { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--smm-blue); color: #fff; font: 900 22px/1 var(--smm-sans); box-shadow: 0 3px 0 var(--smm-navy); }
.parts-note { max-width: 860px; margin: 18px auto 0; text-align: center; font-size: 17px; }
@media (max-width: 640px) { .three li { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

/* What the course teaches */
.learn-head { max-width: 820px; margin: 0 auto 30px; text-align: center; }
.learn-grid { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.learn-grid li { background: #fff; border: 1px solid #e0e5ec; border-radius: 10px; padding: 18px 20px; display: grid; grid-template-columns: 26px 1fr; gap: 6px 14px; align-content: start; }
.learn-grid p { margin: 0; font-size: 17px; line-height: 1.6; }
.learn-grid b { color: var(--smm-ink); }
.ref { grid-column: 2; display: flex; gap: 6px; align-items: center; font: 500 16px/1.35 var(--smm-sans); color: var(--smm-blue); }
.ref svg { width: 16px; flex: none; }
@media (max-width: 760px) { .learn-grid { grid-template-columns: minmax(0, 1fr); } }

/* Price */
.price-box { max-width: 520px; margin: 30px auto 0; text-align: center; background: #fff; border: 6px dashed var(--smm-order); border-radius: 6px; padding: 28px 22px; }
.price-was { margin: 0; font: 500 16px/1.4 var(--smm-sans); color: var(--smm-muted); }
.price-now { margin: 4px 0 18px; font: 900 60px/1 var(--smm-sans); color: var(--smm-red-deep); }
.price-now span { display: block; margin-top: 6px; font: 500 16px/1.2 var(--smm-sans); color: var(--smm-muted); }
.pay-note { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 14px 0 0; font: 16px/1.45 var(--smm-sans); color: var(--smm-muted); text-align: left; }
.pay-note svg { width: 18px; flex: none; color: var(--smm-blue); }
@media (max-width: 480px) { .price-box { padding: 24px 14px; border-width: 5px; } .price-now { font-size: 50px; } }

/* Package */
.pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 34px; }
.pkg { background: #fff; border: 1px solid #ddd; border-radius: 12px; padding: 24px; text-align: center; box-shadow: var(--smm-shadow); }
.pkg-img { height: 170px; display: grid; place-items: center; margin-bottom: 12px; }
.pkg-img img { max-height: 170px; width: auto; }
.pkg h3 { margin: 0 0 8px; font-size: 20px; }
.pkg p { margin: 0; font-size: 16.5px; }
@media (max-width: 820px) { .pkg-grid { grid-template-columns: minmax(0, 1fr); } }
.ex-h { margin: 0 0 14px; font-size: 22px; text-align: center; }
.ex-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ex-list li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; background: #fff; border: 1px solid #e0e5ec; border-radius: 10px; padding: 14px 18px; font-size: 17px; }
.ex-list .ic { margin-top: 4px; }
.ex-list b { color: var(--smm-ink); }

/* Guarantee (the approved guarantee panel, with this course's own 8-week seal) */
.inf-guarantee { display: grid; grid-template-columns: 130px 1fr; gap: 24px; align-items: center; background: #fff; border: 3px solid var(--smm-blue); border-radius: 12px; padding: 22px; box-shadow: var(--smm-shadow); margin: 0 0 22px; }
.inf-guarantee img { width: 108px; margin: 0 auto; display: block; }
.inf-guarantee h3 { margin: 0 0 8px; font-size: 23px; }
.inf-guarantee p { margin: 0 0 .8em; }
.inf-guarantee p:last-child { margin-bottom: 0; }
@media (max-width: 680px) { .inf-guarantee { grid-template-columns: minmax(0, 1fr); text-align: center; } }

/* Order box (navy dashed, as on the live letter) */
.order-box { max-width: 760px; margin: 0 auto 40px; background: var(--smm-grey); border: 8px dashed var(--smm-order); border-radius: 6px; padding: 32px 34px; text-align: center; }
.order-yes { display: flex; gap: 12px; align-items: flex-start; text-align: left; margin: 0 0 16px; font: 900 22px/1.35 var(--smm-sans); color: var(--smm-blue); }
.box-tick { flex: none; width: 30px; height: 30px; margin-top: 2px; border: 2px solid var(--smm-blue); border-radius: 4px; background: #fff url(/smm-kit/img/check-blue-gloss-001.png) center / 34px no-repeat; }
.order-box .ticks { text-align: left; font-size: 17px; }
.order-pack img { width: 160px; margin: 10px auto; display: block; }
.order-price { font: 700 20px/1.4 var(--smm-sans); color: var(--smm-ink); }
.order-price b { color: var(--smm-red-deep); font-size: 26px; }
.order-note { margin: 14px 0 0; font: 16px/1.4 var(--smm-sans); color: var(--smm-muted); }
@media (max-width: 560px) { .order-box { padding: 24px 16px; border-width: 5px; } .order-yes { font-size: 19px; } }

/* Sign-off */
.signoff .sig-row { display: flex; gap: 20px; align-items: center; margin: 20px 0 24px; }
.sig-face { width: 110px; border-radius: 8px; }
.sig-row p { margin: 0; }
.sig { width: 150px; display: block; margin: 4px 0; }
.sig-name { font: 700 18px/1.3 var(--smm-sans); color: var(--smm-ink); }
.sig-role { font: 16px/1.3 var(--smm-sans); color: var(--smm-muted); }
.ps { background: var(--smm-grey); border-radius: 8px; padding: 16px 20px; }
.cta-row { text-align: center; margin-top: 26px; }
.final-link { margin: 26px auto 0; max-width: 680px; text-align: center; font: 700 19px/1.45 var(--smm-sans); }
@media (max-width: 420px) { .signoff .sig-row { gap: 14px; } .sig-face { width: 84px; } }

/* FAQ */
.faq details { background: var(--smm-grey); border: 1px solid #e0e0e0; border-radius: 10px; margin-bottom: 10px; }
.faq summary { cursor: pointer; padding: 16px 20px; font: 700 18px/1.4 var(--smm-sans); color: var(--smm-blue); }
.faq details p { margin: 0; padding: 0 20px 18px; }

/* This course's own pages (the old page's header and footer links) */
.inf-links { background: var(--smm-grey); border-top: 1px solid #e4e4e4; padding: 18px 0; }
.inf-links-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 4px; font: 500 16px/1.4 var(--smm-sans); }
.inf-links-in b { width: 100%; text-align: center; color: var(--smm-navy); margin-bottom: 2px; }
.inf-links-in a { color: var(--smm-blue); text-decoration: none; padding: 4px 10px; border-radius: 20px; }
.inf-links-in a:hover { background: #fff; text-decoration: underline; }

/* Phone buy bar */
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: rgba(24, 40, 73, .97); transform: translateY(110%); transition: transform .25s ease; display: none; }
.buybar.show { transform: none; }
.buybar-in { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
.buybar p { margin: 0; color: #fff; font: 16px/1.3 var(--smm-sans); min-width: 0; }
.buybar p b { display: block; }
.buybar s { color: #aab6c9; }
.buybar .smm-buy { padding: 10px 18px; font-size: 16px; margin-left: auto; white-space: nowrap; }
@media (max-width: 760px) { .buybar { display: block; } }