/* Jeff Unbreakable Black — shared components */

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 1.5rem; }
.container--narrow { max-width: var(--container-narrow); }

.section { padding: var(--space-lg) 0; }
.section--tight { padding: var(--space-md) 0; }
@media (min-width: 850px) { .section { padding: var(--space-xl) 0; } }

/* Wordmark */
.wordmark { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.2em; text-transform: uppercase; }

/* Eyebrow (small uppercase label above a heading) */
.eyebrow { font-family: var(--font-body); font-size: var(--fs-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--brand-red); margin-bottom: 0.6rem; display: block; }

/* Rule (short red bar separator) */
.rule { display: block; width: 48px; height: 3px; background: var(--brand-red); margin: 1rem 0 1.25rem; }

/* Heading sizes */
.head-hero { font-size: var(--fs-hero); }
.head-section { font-size: var(--fs-section); }

/* Button */
.btn { display: inline-block; padding: 0.85rem 1.75rem; font-family: var(--font-body); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; background: var(--brand-red); color: #fff; border: 1px solid var(--brand-red); cursor: pointer; transition: background .15s, transform .15s; }
.btn:hover { background: var(--brand-red-hover); color: #fff; transform: translateY(-1px); }
.btn:focus-visible { outline: 3px solid var(--brand-red); outline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--brand-red); outline-offset: 2px; }
.btn--ghost { background: transparent; color: var(--brand-red); }
.btn--ghost:hover { background: var(--brand-red); color: #fff; }
.btn--lg { padding: 1.1rem 2.25rem; font-size: 1rem; }

/* FAQ accordion (vanilla details/summary, styled) */
.faq { border-top: 1px solid rgba(0,0,0,.1); }
.faq__item { border-bottom: 1px solid rgba(0,0,0,.1); }
.faq__item summary { padding: 1.1rem 0; cursor: pointer; font-family: var(--font-display); font-size: 1.15rem; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: '+'; font-family: var(--font-body); font-size: 1.5rem; opacity: 0.4; transition: transform .2s; }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { padding: 0 0 1.1rem; line-height: 1.6; }

/* Pricing pill */
.price { display: inline-flex; align-items: baseline; gap: 0.5rem; font-family: var(--font-display); font-size: 2.5rem; }
.price__suffix { font-size: 1rem; opacity: 0.7; }

/* Trust strip */
.trust-strip { display: flex; gap: 2rem; align-items: center; justify-content: center; flex-wrap: wrap; opacity: 0.7; }
.trust-strip img { max-height: 32px; width: auto; }

/* Section divider — short red rule centered */
.divider-rule { display: block; width: 36px; height: 2px; background: var(--brand-red); margin: 0 auto 1.5rem; }

/* 3-step grid (for "How a session works") */
.steps { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step__num { font-family: var(--font-display); font-size: 2.5rem; color: var(--brand-red); }
.step__title { font-family: var(--font-display); font-size: 1.3rem; margin: 0.25rem 0 0.4rem; }
.step__body { font-size: 0.95rem; opacity: 0.8; }

/* Tier comparison cards */
.tier-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-top: 1.5rem; }
@media (min-width: 700px) { .tier-grid { grid-template-columns: 1fr 1fr; } }
.tier { padding: 1.75rem 1.5rem; border: 1px solid rgba(0,0,0,.12); border-radius: 4px; background: var(--light-bg-soft); }
.tier--featured { border-color: var(--brand-red); border-width: 2px; position: relative; }
.tier--featured::before { content: 'Most popular'; position: absolute; top: -0.7rem; left: 1.25rem; background: var(--brand-red); color: #fff; font-size: 0.7rem; padding: 0.2rem 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; }
.tier__name { font-family: var(--font-display); font-size: 1.4rem; }
.tier__price { font-family: var(--font-display); font-size: 2rem; color: var(--brand-red); margin: 0.4rem 0 1rem; }
.tier__features { list-style: none; padding: 0; }
.tier__features li { padding: 0.4rem 0; border-top: 1px solid rgba(0,0,0,.08); font-size: 0.95rem; }