:root{--pc-deep:#151320;--pc-action:#5B3BD6;--pc-accent:#9B3FD1;--pc-ink:#1A1824;--pc-ink-soft:#545064;--pc-paper:#FFFFFF;--pc-cream:#FFFFFF;--pc-tint:#F4F1FF;--pc-line:#E7E4F0;--pc-alert:#B42318;--pc-urgent:#9B3FD1;--pc-urgent-text:#ffffff;--pc-urgent-label:#aa5cd8;--pc-head:'Schibsted Grotesk',Georgia,serif;--pc-body:'DM Sans',-apple-system,'Segoe UI',Arial,sans-serif;--pc-radius:16px;--pc-radius-img:14px;--pc-radius-btn:12px;--pc-icon-radius:50%;--pc-shadow:0 1px 3px rgba(0,0,0,.08);--pc-btn-shadow:0 8px 22px rgba(0,0,0,.2);--pc-btn-case:none;--pc-em-style:italic;--pc-em-weight:inherit;--pc-head-case:none;--pc-head-tracking:-.005em;--pc-ornament-display:block;--pc-ornament-width:54px;--pc-ornament:radial-gradient(circle at center, var(--pc-accent) 0 3px, transparent 3.5px) left center / 18px 10px repeat-x;--pc-divider-height:0;--pc-divider:none;}
/* The finish layer, loaded last on every generated page. Tree Method sets the bar for how carefully a page is laid out and
   detailed. It does not set the look: colors, fonts, corners, shadows, dividers and emphasis all come from the brand's own
   --pc-* variables (brand/palette.json and brand/style.json). Nothing in this file may name a look of its own. */

/* ---- Type: readable body size and one display face. Nothing goes small. ---- */
body { background: var(--pc-cream); color: var(--pc-ink); font-family: var(--pc-body); font-size: 19px; line-height: 1.6; }
h1, h2, h3, .headline, .proof-heading, .guide-heading { font-family: var(--pc-head); color: var(--pc-deep); letter-spacing: var(--pc-head-tracking); text-transform: var(--pc-head-case); }
h1 em, h2 em, .headline em { font-style: var(--pc-em-style); font-weight: var(--pc-em-weight); color: var(--pc-action); }
.hero-subtitle, .proof-subtitle, .tg-lede, .guide-body p, .model-subtitle, .seasons-subtitle, .testimonials-subtitle,
.week-subtitle, .modules-subtitle, .final-cta-subtitle, .gallery-subtitle, .article-content p, .faq-answer-inner { font-size: max(1em, 18px); line-height: 1.6; }

/* ---- Eyebrows and ornaments: small marks that make a page feel edited. Which marks is the brand's call ---- */
.section-label, .proof-label, .guide-label, .seasons-label, .tg-eyebrow, .fb-section-label, .pricing-label, .category-pill {
  color: var(--pc-action); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 13px; }
.category-pill, .proof-label, .section-label, .guide-label { background: transparent; border: 0; padding: 0; box-shadow: none; }
/* Labels on the dark bands take the urgent color (accent when a brand sets none), which check_palette holds to 4.5 on deep. */
.seasons-section .seasons-label, .seasons-section .section-label, .final-cta-section .section-label, .tg-card .tg-eyebrow, .tg-card em { color: var(--pc-urgent-label); }
.tg-card .tg-eyebrow { background: transparent; border-color: var(--pc-urgent); }
.proof-heading::before, .guide-heading::before, .modules-section > h2:first-child::before, .week-section > h2:first-child::before,
.testimonials-section > h2:first-child::before, .faq-section > h2:first-child::before {
  content: ''; display: var(--pc-ornament-display); width: var(--pc-ornament-width); height: 10px; margin: 0 auto 18px;
  background: var(--pc-ornament); }

/* ---- Bands: alternating paper, cream and tint, with the deep color for statements ---- */
.announce-bar, .sticky-bar { background: var(--pc-deep); }
.announce-bar { border-bottom: var(--pc-divider-height) solid var(--pc-accent); }
.hero { background: linear-gradient(180deg, var(--pc-cream) 0%, #fff 100%); }
.stats-bar { position: relative; background: var(--pc-paper); border-top: 0; }
.stats-bar::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: var(--pc-divider-height);
  background: var(--pc-divider); }
/* The band is light now, so its labels and dividers can't keep their light-on-dark shades. */
.stats-bar .stat-item-label { color: var(--pc-ink-soft); }
.stats-bar .stat-item + .stat-item::before { background: var(--pc-line); }
.proof-section { background: var(--pc-cream); }
.gallery-section { background: var(--pc-paper); }
.timing-section { background: var(--pc-tint); }
.tg-card { background: var(--pc-deep); box-shadow: 0 18px 44px rgba(0,0,0,.18); }
.guide-section, .week-section, .faq-section { background: var(--pc-paper); }
.model-section, .modules-section, .testimonials-section { background: var(--pc-cream); }
.seasons-section, .final-cta-section { background: var(--pc-deep); }
.seasons-section h2, .final-cta-section h2, .tg-card h2 { color: #fff; }
.seasons-section h2 em, .final-cta-section h2 em, .tg-card h2 em { color: var(--pc-urgent-label); }

/* ---- Cards: one radius, one border, one shadow, everywhere ---- */
.model-card, .testimonial-card, .proof-card, .proof-stat, .module-card, .pricing-card, .midbuy-card, .faq-item, .week-day, .comment-card, .bundle-card {
  border-radius: var(--pc-radius); border: 1px solid var(--pc-line); box-shadow: var(--pc-shadow); }
.seasons-section .season-card, .seasons-section .bundle-card { border-color: rgba(255,255,255,.14); box-shadow: none; }
.proof-stat-value, .stat-item-number, .guide-stat-value { font-family: var(--pc-head); color: var(--pc-action); }
.gallery-item, .bundle-photo, .module-photo { border-radius: var(--pc-radius-img); }
.article-image, .hero-image, .guide-image-wrap img, .hero-image-wrap img { border-radius: var(--pc-radius-img); box-shadow: var(--pc-shadow); }
.testimonial-stars, .hero-trust-stars { color: var(--pc-accent); }
.testimonial-quote { font-family: var(--pc-body); }

/* ---- Timeline: a numbered line for any step-by-step section ---- */
.week-timeline { position: relative; }
.week-day-label { font-family: var(--pc-head); color: var(--pc-action); }

/* ---- Buttons: one strong button, with weight underneath ---- */
a[href*="checkout"]:not(.footer-links a), .pricing-cta, .button-primary, .button-urgent, .quiz-cta {
  border-radius: var(--pc-radius-btn); font-family: var(--pc-body); font-weight: 700; box-shadow: var(--pc-btn-shadow); text-transform: var(--pc-btn-case); }
a[href*="checkout"]:not(.footer-links a):active, .pricing-cta:active, .button-primary:active, .button-urgent:active {
  transform: translateY(1px); }
/* Warm buttons, pills and badges: one role, text color chosen by contrast (recolor.urgent_text). The page's own rules are more specific. */
html body .button-urgent, html body .st-now, html body .tg-cal-m, html body .module-flag, html body .module-number, html body .bonus-badge, html body .addon-flag {
  background: var(--pc-urgent) !important; background-image: none !important; color: var(--pc-urgent-text) !important; border-color: var(--pc-urgent) !important; }
html body .button-urgent *, html body .st-now *, html body .addon-flag *, html body .bonus-badge * { color: var(--pc-urgent-text) !important; }
/* The sticky bar sits on the dark band: its price is white (designer's patch), the same rule as all text on deep. */
html body .sticky-bar .sticky-bar-price { color: #fff !important; }

/* ---- Added by skin/treatments.json ---- */
.pc-logo-bar { background: var(--pc-paper); padding: 8px 16px; text-align: center; }
.pc-logo-bar img { height: 36px; width: auto; margin: 0 auto; display: inline-block; vertical-align: middle; }
.pc-band { margin: 0; padding: 0; line-height: 0; }
.pc-band img { display: block; width: 100%; height: clamp(220px, 34vw, 420px); object-fit: cover; }
.pc-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 1080px; margin: 0 auto; padding: 28px 16px; background: transparent; line-height: 0; }
.pc-duo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--pc-radius-img); box-shadow: var(--pc-shadow); }
.pc-ico { display: inline-flex; vertical-align: -.16em; width: 1.15em; height: 1.15em; color: var(--pc-action); }
.pc-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.model-card-icon, .bundle-card-icon { background: var(--pc-deep); border-radius: var(--pc-icon-radius); }
.model-card-icon .pc-ico, .bundle-card-icon .pc-ico { color: #fff; }
.season-icon .pc-ico, .seasons-section .pc-ico { color: var(--pc-urgent); }

/* ---- Honest labels ---- */
/* The earnings disclaimer link must be clear and conspicuous: secondary text at 4.5 on the light sections it sits in. */
.disclaimer-link, .ht-disclaimer a, .hero-math a, .proof-foot a { color: var(--pc-ink-soft); }
.pc-image-note { font-size: 13px; color: var(--pc-ink-soft); text-align: center; padding: 8px 16px 0; }

/* The fixed bar must never cover the last line of the footer on a phone. */
@media (max-width: 640px) { body { padding-bottom: 76px; } .pc-duo { padding: 20px 16px; gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .pricing-cta:active { transform: none; } }

/* A price and a tag side by side must wrap on a phone, whatever the brand's tag says. */
.fb-top{flex-wrap:wrap}
.fb-tag{white-space:normal}

/* The upsell pages leave some links on the browser's default blue. No weight of its own, so every styled link keeps its color. */
:where(a:not([class])) { color: var(--pc-deep); }

/* ---- 19px body on a phone: grid and flex items may shrink below their longest word, so nothing pushes the page sideways ---- */
.season-cards > *, .module-grid > *, .modules > * { min-width: 0; overflow-wrap: break-word; }
.season-revenue-value { white-space: normal; }
@media (max-width: 560px) { .season-revenue-value { font-size: 1rem; line-height: 1.25; } }
.checkout-header-inner { flex-wrap: wrap; gap: 6px 12px; }
.checkout-header-inner > *, .checkout-main > * { min-width: 0; }
/* The template keeps a one-word headline emphasis on one line; a longer one may wrap on a phone, or it runs off the screen. */
@media (max-width: 560px) { .hero h1 em { white-space: normal; } }

/* ---- The advertorial's byline row: the read time stays whole; on a phone it moves to its own line under the icons ---- */
.engagement-bar { flex-wrap: wrap; row-gap: 6px; }
.engagement-bar .read-time { white-space: nowrap; }
@media (max-width: 480px) { .engagement-bar .read-time { order: 3; flex-basis: 100%; margin-left: 0; } }

/* ---- The sticky bar sits on the dark band, so its words are white like every other text on deep ---- */
html body .sticky-bar .sticky-bar-text { color: #fff; }

/* ==== Round 4 (project-hundo page reviews, 2026-11-05): what the reviewers measured at 390px and 1280px ==== */
/* Legal pages: the title sits on the dark band, so it is white like every heading on deep. */
html body .legal-header h1 { color: #fff; }
/* Member headings: the brand's display face, never a fallback serif. */
html body .dl-group h3 { font-family: var(--pc-head); }
/* Tap targets: every footer and legal link, the exit page's copy button and the upsell decline are at least 44px tall. */
html body footer a, html body .footer-links a, html body .legal-links a, html body .legal-footer a {
  display: inline-block; min-height: 44px; padding: 12px 4px; line-height: 20px; box-sizing: border-box; }
html body .fb-copy, html body .no-thanks, html body .no-thanks-btn { min-height: 44px; }
/* Footers: the disclaimer and copyright are part of the deal, so they are read at 14px or more, at 4.5:1 or more. */
html body .site-footer .footer-disclaimer, html body .site-footer .footer-copy { color: rgba(255,255,255,.82); font-size: 14px; line-height: 1.5; }
html body .site-footer .copyright, html body .site-footer .disclaimer, html body .site-footer .disclaimer em, html body .site-footer .footer-links a { font-size: 14px; line-height: 1.5; }
/* Checkout: the guarantee's condition shows at every width. */
html body .guarantee-pill .hide-mobile { display: inline !important; }
/* Sales: phase cards and FAQ rows keep their text off the card border. */
html body .week-day { padding-left: 16px; padding-right: 16px; }
html body .faq-question-btn, html body .faq-answer-inner { padding-left: 16px; padding-right: 16px; }
/* Sales headline: a long emphasis wraps with the words around it at every width ("Film" never sits alone on line one). */
html body .hero h1 em { white-space: normal; }
/* Top bar: balanced lines, never one word alone on the second. */
html body .announce-bar { text-wrap: balance; }
/* Small labels a reader needs: the video-format tile labels and the stat band's labels read at 13px. */
html body .gallery-earnings-period, html body .stats-bar .stat-item-label { font-size: 13px; letter-spacing: .04em; }
/* Quiz: the sticky Back/next bar is solid edge to edge and sits on the bottom, so no card text shows beside or under it. */
html body .q-actions.q-sticky { bottom: 0; margin-left: -16px; margin-right: -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--pc-cream); }
/* Upsell 1: the one-click banner is news, not an error: the brand's dark band, not alert red. */
html body .urgency-banner { background: var(--pc-deep); }
/* Every page with a fixed bottom bar keeps its last lines above it. */
html body:has(.sticky-bar) { padding-bottom: 80px; }
/* One colour for every buy button: the brand's action colour. Warm pills and badges keep the urgent role. */
html body .button-urgent { background: var(--pc-action) !important; border-color: var(--pc-action) !important; color: #fff !important; }
html body .button-urgent * { color: #fff !important; }
/* The advertorial's "Advertisement" line (tools/switch_dress.py gives it this class): body size, readable. */
.pc-ad-label { display: block; background: var(--pc-tint); color: var(--pc-ink); font: 600 16px/1.4 var(--pc-body); letter-spacing: .06em;
  text-align: center; text-transform: uppercase; padding: 8px 16px; }
/* Narration the template set as a pull quote reads as plain text (tools/switch_dress.py). */
.pc-narration { margin: 0 0 var(--spacing-md, 18px); }
.pc-narration p { font-style: normal; }
/* The byline shows the brand mark until the founder's own photo exists. */
.author-avatar.pc-mark { object-fit: contain; background: var(--pc-paper); border: 1px solid var(--pc-line); padding: 4px; box-sizing: border-box; }
/* The writer's guarantee line is longer than the template's, and it now shows in full on phones: let the pill wrap. */
html body .guarantee-pill { white-space: normal; max-width: 100%; flex-wrap: wrap; }