/* TruHue editorial layer — facelift part 3 (Nov 2026): lead magnets, guides and season pages.
   Pages (body class te-g + one page class):
     te-guide   /free-color-guide/, /olive-guide/        te-quiz    /quiz/
     te-teen    /teen/                                   te-hub     /seasons/
     te-chart   /color-chart/                            te-season  /<season>/ (12 root season pages)
     te-sarticle /seasons/<season>/ (article template — also loads article-editorial.css)
   Requires /css/truhue-editorial.css first; loaded AFTER each page's own <style>; no markup changes.
   Palette swatches, season colors, olive spectrum and best/avoid color cues are deliberately untouched. */

/* ================= Shared baseline ================= */
body.te-g { background: var(--te-ivory) !important; font-family: var(--te-sans) !important; color: var(--te-body) !important; }
.te-g h1, .te-g .page-title, .te-g .post-title { font-family: var(--te-serif) !important; font-optical-sizing: auto; font-weight: 500 !important; color: var(--te-ink) !important; letter-spacing: -0.015em; line-height: 1.06 !important; text-wrap: balance; }
.te-g h2, .te-g .section-title { font-family: var(--te-serif) !important; font-weight: 500 !important; color: var(--te-ink) !important; line-height: 1.15; text-wrap: balance; }
.te-g h3 { color: var(--te-ink) !important; }
.te-g h1 em, .te-g h2 em { font-weight: 400 !important; }
.te-g p { color: var(--te-body); }

/* Mastheads in the four styles these pages use */
.te-g nav:not(.breadcrumb):not(.crumb), .te-g .sticky-nav { background: rgba(250, 246, 240, 0.96) !important; border-bottom: 1px solid var(--te-rule) !important; box-shadow: none !important; }
.te-g .logo, .te-g .nav-logo, .te-g header .brand, .te-g .brand { font-family: var(--te-serif) !important; font-weight: 500 !important; color: var(--te-ink) !important; }
.te-g nav .nav-link, .te-g .sticky-nav .nav-link { color: var(--te-ink) !important; }
.te-g nav .nav-link:hover, .te-g .sticky-nav .nav-link:hover { color: var(--te-rose) !important; }
.te-g .top-bar { background: var(--te-ivory) !important; border-bottom: 1px solid var(--te-rule-2); }
.te-g .top-bar a { color: var(--te-ink) !important; font-size: 0.9rem !important; }
.te-g .top-bar a:hover { color: var(--te-rose) !important; }
.te-g .top-bar .tb-auth { background: transparent !important; border: 1px solid var(--te-ink); border-radius: var(--te-radius) !important; padding: 0.35rem 0.9rem !important; }
.te-g .top-bar .tb-auth:hover { background: var(--te-ink) !important; color: var(--te-ivory) !important; }
.te-g header { border-bottom: 1px solid var(--te-rule) !important; background: transparent !important; }
.te-g .brand-bar { background: var(--te-ivory) !important; border-bottom: 1px solid var(--te-rule) !important; }
.te-g .brand-bar a { color: var(--te-ink) !important; font-family: var(--te-serif) !important; font-weight: 500 !important; }
.te-g .brand-bar .tagline { color: var(--te-muted) !important; }
.te-g .breadcrumb, .te-g .breadcrumb .sep { color: var(--te-muted) !important; }
.te-g .breadcrumb a { color: var(--te-ink) !important; }

/* Labels / eyebrows */
.te-g .hero-label, .te-g .page-eyebrow, .te-g .page-category, .te-g .section-label, .te-g .family-label, .te-g .season-family-label, .te-g .hero-badge {
  font-family: var(--te-sans) !important; font-size: var(--te-size-label) !important; font-weight: 600 !important; letter-spacing: 0.16em !important; text-transform: uppercase; color: var(--te-rose) !important; background: transparent !important; }
.te-g .hero-badge { border: 1px solid var(--te-rose); border-radius: var(--te-radius) !important; padding: 0.3rem 0.7rem !important; }

/* Hero / page header: left-aligned */
.te-g .hero, .te-g .page-header, .te-g .page-meta { text-align: left !important; background: transparent !important; }
.te-g .hero h1, .te-g .page-title { font-size: clamp(2.3rem, 5vw, 3.6rem) !important; }
.te-g .hero-body, .te-g .hero p, .te-g .hero .subtitle, .te-g .page-subtitle, .te-g .page-tagline { margin-left: 0 !important; color: var(--te-body) !important; font-size: var(--te-size-lede) !important; }
.te-g .hero-bullets { margin-left: 0 !important; }

/* Buttons → ink rectangles */
.te-g .btn-primary, .te-g .download-btn, .te-g .cta-btn, .te-g .quiz-cta button, .te-g .app-cta a.btn, .te-g .bottom-cta a, .te-g .post-cta a, .te-g .cta-section a, .te-g .lead-magnet button, .te-g .cheat-sheet-cta a.dl-btn, .te-g .form-card button {
  background: var(--te-ink) !important; color: var(--te-ivory) !important; border: 1px solid var(--te-ink) !important; border-radius: var(--te-radius) !important; box-shadow: none !important; transform: none !important; font-family: var(--te-sans) !important; font-weight: 600 !important; text-decoration: none !important; }
.te-g .btn-primary:hover:not(:disabled), .te-g .download-btn:hover, .te-g .cta-btn:hover, .te-g .quiz-cta button:hover, .te-g .app-cta a.btn:hover, .te-g .bottom-cta a:hover, .te-g .post-cta a:hover, .te-g .cta-section a:hover, .te-g .lead-magnet button:hover, .te-g .cheat-sheet-cta a.dl-btn:hover, .te-g .form-card button:hover {
  background: var(--te-rose) !important; border-color: var(--te-rose) !important; color: #fff !important; }
.te-g .btn-primary:disabled { background: var(--te-rule) !important; border-color: var(--te-rule) !important; color: var(--te-muted) !important; }

/* Inputs */
.te-g input[type="email"], .te-g input[type="text"], .te-g select { border-radius: var(--te-radius) !important; border: 1px solid var(--te-rule) !important; background-color: var(--te-paper) !important; font-family: var(--te-sans) !important; color: var(--te-ink); }
.te-g input[type="email"]:focus, .te-g input[type="text"]:focus, .te-g select:focus { border-color: var(--te-ink) !important; box-shadow: 0 0 0 3px var(--te-rose-soft) !important; outline: none; }
.te-g label { color: var(--te-ink) !important; }

/* Form cards / lead magnets: paper panel, thin rule */
.te-g .form-card, .te-g .quiz-cta, .te-g .lead-magnet, .te-g .cheat-sheet-cta { background: var(--te-paper) !important; border: 1px solid var(--te-rule) !important; border-radius: var(--te-radius) !important; box-shadow: none !important; }
.te-g .form-card h2, .te-g .quiz-cta h2, .te-g .lead-magnet h2, .te-g .cheat-sheet-cta h3 { font-family: var(--te-serif) !important; font-weight: 500 !important; color: var(--te-ink) !important; }
.te-g .form-note, .te-g .social-proof, .te-g .lm-note, .te-g .note { color: var(--te-muted) !important; }
.te-g .social-proof strong { color: var(--te-ink) !important; }
.te-g .success-message, .te-g .success-msg { background: transparent !important; }

/* Feature/benefit/info cards → ruled entries, emoji icons hidden */
.te-g .benefits, .te-g .traits-grid, .te-g .tools-row, .te-g .card-grid, .te-g .related-grid, .te-g .celeb-grid { gap: 0 2rem !important; border-top: 1px solid var(--te-ink); }
.te-g .benefit, .te-g .trait-card, .te-g .tool-link, .te-g .hub-card, .te-g .related-card, .te-g .celeb-card {
  background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--te-rule) !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; padding: 1.15rem 0 !important; text-align: left !important; }
.te-g .benefit-icon, .te-g .trait-card .trait-icon, .te-g .tool-link .tl-icon { display: none !important; }
.te-g .benefit h3, .te-g .trait-card h3, .te-g .tool-link h3, .te-g .hub-card .card-title, .te-g .related-card strong, .te-g .celeb-card strong { font-family: var(--te-serif) !important; font-weight: 500 !important; font-size: 1.15rem !important; color: var(--te-ink) !important; }
.te-g .tool-link:hover h3, .te-g .hub-card:hover .card-title, .te-g .related-card:hover strong { color: var(--te-rose) !important; }
.te-g .benefit p, .te-g .trait-card p, .te-g .tool-link p, .te-g .hub-card .card-desc, .te-g .related-card span, .te-g .celeb-card p { color: var(--te-body) !important; }
.te-g .whats-inside h2, .te-g .section h2, .te-g .hub-section h2, .te-g .faq-section h2, .te-g .best-colors-section > h2, .te-g .related-section h2 { text-align: left !important; }
.te-g .section-sub { text-align: left !important; margin-left: 0 !important; color: var(--te-body) !important; }

/* Numbered steps */
.te-g .step-num { background: transparent !important; color: var(--te-rose) !important; font-family: var(--te-serif) !important; font-style: italic; font-weight: 400 !important; border: 0 !important; width: auto !important; height: auto !important; font-size: 1.6rem !important; line-height: 1 !important; }
.te-g .step { text-align: left !important; border-top: 1px solid var(--te-rule); padding-top: 0.9rem; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; }
.te-g .step h3 { font-family: var(--te-sans) !important; color: var(--te-ink) !important; }

/* FAQ → ruled list */
.te-g .faq-item { background: transparent !important; border: 0 !important; border-top: 1px solid var(--te-rule) !important; border-radius: 0 !important; margin: 0 !important; box-shadow: none !important; }
.te-g .faq-item:last-of-type { border-bottom: 1px solid var(--te-rule) !important; }
.te-g .faq-item summary { background: transparent !important; font-family: var(--te-serif) !important; font-weight: 500 !important; color: var(--te-ink) !important; padding-left: 0 !important; padding-right: 0 !important; }
.te-g .faq-item summary::after { color: var(--te-rose) !important; }
.te-g .faq-answer, .te-g .faq-item p { color: var(--te-body) !important; padding-left: 0 !important; padding-right: 0 !important; }

/* Promo bands (app CTA, bottom CTA, post CTA) → flat band between rules */
.te-g .app-cta, .te-g .bottom-cta, .te-g .post-cta, .te-g .cta-section, .te-g .mid-cta, .te-g .cta-secondary {
  background: var(--te-ivory-2) !important; border: 0 !important; border-top: 1px solid var(--te-rule) !important; border-bottom: 1px solid var(--te-rule) !important; border-radius: 0 !important; box-shadow: none !important; }
.te-g .app-cta h2, .te-g .bottom-cta h3, .te-g .post-cta h3, .te-g .cta-section h2 { font-family: var(--te-serif) !important; font-weight: 500 !important; color: var(--te-ink) !important; }
.te-g .mid-cta a, .te-g .cta-secondary a { color: var(--te-ink) !important; text-decoration: underline; text-decoration-color: var(--te-rose); }

/* Link lists */
.te-g .internal-links, .te-g .further-reading, .te-g .also-section { background: transparent !important; border: 0 !important; border-top: 1px solid var(--te-rule) !important; border-radius: 0 !important; box-shadow: none !important; }
.te-g .internal-links h3, .te-g .further-reading h3 { font-family: var(--te-serif) !important; font-weight: 500 !important; color: var(--te-ink) !important; }
.te-g .internal-links a, .te-g .further-reading a, .te-g .also-section a { color: var(--te-ink) !important; }
.te-g .internal-links a:hover, .te-g .further-reading a:hover, .te-g .also-section a:hover { color: var(--te-rose) !important; }

/* Site-wide "More Free Tools" strip */
.te-g .ftc-strip { text-align: left !important; }
.te-g .ftc-strip h2 { text-align: left !important; }
.te-g .ftc-grid { gap: 0 2rem !important; border-top: 1px solid var(--te-ink); }
.te-g .ftc-card { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--te-rule) !important; border-radius: 0 !important; box-shadow: none !important; padding: 1.1rem 0 !important; }
.te-g .ftc-icon { display: none !important; }
.te-g .ftc-card h3 { font-family: var(--te-serif) !important; font-weight: 500 !important; font-size: 1.15rem !important; color: var(--te-ink) !important; }
.te-g .ftc-card:hover h3 { color: var(--te-rose) !important; }
.te-g .ftc-card p { color: var(--te-body) !important; }

/* Footers */
.te-g footer { background: var(--te-ivory-2) !important; border-top: 1px solid var(--te-rule) !important; color: var(--te-body) !important; }
.te-g footer a { color: var(--te-ink) !important; }
.te-g footer a:hover { color: var(--te-rose) !important; }
.te-g footer p, .te-g footer .copy { color: var(--te-body) !important; }
.te-g .affiliate-note { color: var(--te-muted) !important; }

/* Bottom "Know before you buy" app box injected on several pages (inline-styled) */
.te-g > div[style*="#FFF1F4"] { background: var(--te-ivory-2) !important; border: 0 !important; border-top: 1px solid var(--te-rule) !important; border-bottom: 1px solid var(--te-rule) !important; border-radius: 0 !important; }
.te-g > div[style*="#FFF1F4"] > div { color: var(--te-rose) !important; font-weight: 600 !important; letter-spacing: 0.16em !important; }
.te-g > div[style*="#FFF1F4"] h2 { font-family: var(--te-serif) !important; font-weight: 500 !important; color: var(--te-ink) !important; }
.te-g > div[style*="#FFF1F4"] p { color: var(--te-body) !important; }
.te-g > div[style*="#FFF1F4"] a { background: var(--te-ink) !important; border-radius: var(--te-radius) !important; }
.te-g > div[style*="#FFF1F4"] a:hover { background: var(--te-rose) !important; }

/* ================= Page specifics ================= */
/* /quiz/ season list */
.te-quiz .season-group { background: transparent !important; border: 0 !important; border-top: 1px solid var(--te-ink) !important; border-radius: 0 !important; box-shadow: none !important; }
.te-quiz .season-group h3 { font-family: var(--te-serif) !important; font-weight: 500 !important; }
.te-quiz .season-name { font-family: var(--te-serif) !important; font-weight: 500 !important; color: var(--te-ink) !important; }
.te-quiz .tool-link { border-bottom: 1px solid var(--te-rule) !important; }

/* /teen/ */
.te-teen .product-strip a { border-radius: var(--te-radius) !important; border-color: var(--te-rule) !important; background: var(--te-paper) !important; box-shadow: none !important; }
.te-teen .shop-retailers { background: transparent !important; border: 0 !important; border-top: 1px solid var(--te-rule) !important; border-radius: 0 !important; }
.te-teen .shop-retailers .shop-btns a { background: transparent !important; color: var(--te-ink) !important; border: 1px solid var(--te-ink) !important; border-radius: var(--te-radius) !important; }
.te-teen .shop-retailers .shop-btns a:hover { background: var(--te-ink) !important; color: var(--te-ivory) !important; }

/* /seasons/ hub + /color-chart/: season cards stay paper (their swatches carry the color) */
.te-hub .season-card, .te-chart .season-card { background: var(--te-paper) !important; border: 1px solid var(--te-rule) !important; border-radius: var(--te-radius) !important; box-shadow: none !important; transform: none !important; }
.te-hub .season-card:hover, .te-chart .season-card:hover { border-color: var(--te-ink) !important; }
.te-hub .season-name, .te-chart .card-season-name, .te-chart .col-header h2 { font-family: var(--te-serif) !important; font-weight: 500 !important; color: var(--te-ink) !important; }
.te-chart .filter-btn { border-radius: var(--te-radius) !important; font-family: var(--te-sans) !important; }
.te-chart .filter-btn.active { background: var(--te-ink) !important; border-color: var(--te-ink) !important; color: var(--te-ivory) !important; }
.te-chart .best-color-group { border-radius: 0 !important; border: 0 !important; border-top: 1px solid var(--te-rule) !important; background: transparent !important; }
.te-chart .best-color-group summary { font-family: var(--te-serif) !important; color: var(--te-ink) !important; }
.te-chart .tag { border-radius: var(--te-radius) !important; }
.te-chart .toast { background: var(--te-ink) !important; border-radius: var(--te-radius) !important; }

/* 12 root season pages */
.te-season .palette-section, .te-season .colors-box, .te-season .makeup-look, .te-season .outfit-card, .te-season .comparison-card, .te-season .product-card, .te-season .trait {
  background: var(--te-paper) !important; border: 1px solid var(--te-rule) !important; border-radius: var(--te-radius) !important; box-shadow: none !important; }
.te-season .palette-section h2, .te-season .makeup-look h3, .te-season .outfit-card h3, .te-season .comparison-card h3 { font-family: var(--te-serif) !important; font-weight: 500 !important; }
.te-season .trait-label, .te-season .product-category { color: var(--te-rose) !important; font-family: var(--te-sans) !important; letter-spacing: 0.12em; }
.te-season .trait-value, .te-season .product-name { color: var(--te-ink) !important; }
.te-season .comparison-card a { color: var(--te-ink) !important; text-decoration-color: var(--te-rose) !important; }

/* /seasons/<season>/ article template (article-editorial.css does the base) */
.te-sarticle .cheat-sheet-cta { text-align: left !important; }

@media (max-width: 640px) {
  .te-g .benefits, .te-g .traits-grid, .te-g .card-grid, .te-g .related-grid, .te-g .celeb-grid, .te-g .ftc-grid { gap: 0 !important; }
}
.te-g .steps { justify-content: flex-start !important; }
.te-g .step { margin-left: 0 !important; }