/* =====================================================================
   SkyHotelier — marketing page refinement (v3.2)
   Compact IBM Plex type scale, quieter colour, readable small text.
   Loaded last on index.html so it wins over the inline styles.
   ===================================================================== */

/* ---- type scale: tighter headlines, no body text under 12.5px ---- */
html body .hero-title { font-size: clamp(30px, 3.3vw, 44px) !important; line-height: 1.1 !important; letter-spacing: -0.022em !important; font-weight: 600 !important; }
html body .hero-subtitle { font-size: 15px !important; line-height: 1.6 !important; color: #5C4E40 !important; max-width: 56ch; }
html body h2, html body .section-title, html body [class$="-title"]:is(h2) { font-size: clamp(24px, 2.3vw, 30px) !important; line-height: 1.18 !important; letter-spacing: -0.018em !important; font-weight: 600 !important; text-wrap: balance; }
html body .section-subtitle, html body [class$="-subtitle"]:is(p) { font-size: 14.5px !important; line-height: 1.6 !important; color: #5C4E40 !important; }
html body h3 { letter-spacing: -0.01em !important; }
html body p { text-wrap: pretty; }

/* small copy in cards, lists and tables: legible size and ink */
html body :is(.feature-desc, .feature-list-item, .why-card-features li, .support-features li, .faq-answer, .faq-answer p) { font-size: 12.5px !important; }
html body :is(p, li, span, td, small, div)[style*="font-size:10px"],
html body :is(p, li, span, td, small, div)[style*="font-size: 10px"],
html body :is(p, li, span, td, small, div)[style*="font-size:9px"] { font-size: 11px !important; }
html body :is(p, li, td)[style*="font-size:11px"] { font-size: 12px !important; }

/* uppercase eyebrows / badges: calmer */
html body [class*="badge"], html body [class*="eyebrow"], html body [class*="-tag"] { letter-spacing: 0.06em !important; font-weight: 600 !important; }

/* ---- rhythm: sections were 90–100px tall at each end ---- */
html body :is(.global-section, .hr-docs-section, .payroll-section, .roles-section, .paperless-section, .features, .hod-showcase, .support-section, .about-section, .children-section, .comm-section, .pricing, .pricing-section, .faq-section, .contact-section, .compare-section, .comparison-section) { padding-top: 68px !important; padding-bottom: 68px !important; }
html body .why-section { padding-top: 72px !important; padding-bottom: 72px !important; }
html body :is(.section-header, .section-head) { margin-bottom: 36px !important; }

/* ---- quieter surfaces: one neutral for tinted bands ---- */
html body :is(.global-section, .paperless-section, .hod-showcase) { background: #FAF7F2 !important; }
html body :is(.hr-docs-section, .roles-section, .payroll-section) { background: #FAF7F2 !important; }
html body :is(.support-section, .features) { background: #FFFFFF !important; }

/* cards: hairline border, soft shadow, no heavy 2px strokes */
html body :is(.feature-card, .why-card, .support-card, .role-card, .pricing-card, .plan-card, .contact-card, .faq-item) { border-width: 1px !important; box-shadow: 0 1px 2px rgba(14, 34, 64, .04) !important; }
html body :is(.feature-card, .support-card, .role-card, .pricing-card, .plan-card):hover { box-shadow: 0 6px 20px rgba(14, 34, 64, .08) !important; }

/* ---- buttons: consistent, not shouty ---- */
html body .btn { font-weight: 500 !important; letter-spacing: 0 !important; }
html body .btn-primary { background: #7D5F22 !important; border-color: #7D5F22 !important; color: #fff !important; box-shadow: none !important; }
html body .btn-primary:hover { background: #5E4718 !important; border-color: #5E4718 !important; }

/* ---- dark band: readable secondary text ---- */
html body .why-section :is(p, li, .why-card-desc, .section-subtitle) { color: rgba(226, 234, 245, .82) !important; }
html body .why-section .why-card { background: rgba(255, 255, 255, .035) !important; border-color: rgba(210,174,109, .18) !important; }

/* gradient headline accents → one calm accent */
html body :is(h1, h2) :is(span, em)[style*="gradient"], html body :is(h1, h2) .gradient-text, html body :is(h1, h2) .highlight { background: none !important; -webkit-text-fill-color: currentColor !important; color: #7D5F22 !important; }

/* ---- contrast fixes found by audit (WCAG AA 4.5:1 for small text) ---- */
html body :is(.children-policy-section, #communication-hub) { padding-top: 68px !important; padding-bottom: 68px !important; }
html body .trusted-logo { opacity: 1 !important; color: #6E6052 !important; }
html body .trusted-logo:hover { color: #0E2240 !important; }
html body .trusted-logo i { color: #D2AE6D !important; }
html body .hod-submit-btn { background: #7D5F22 !important; color: #fff !important; }
html body #compare th .notranslate, html body #compare thead .notranslate { color: #fff !important; }
html body #paperless [style*="#7D5F22"], html body #paperless [style*="#7D5F22"] { color: #E0C88A !important; }
html body :is(.hero-metric-label, .hero-dashboard-title, #global .english) { color: #BCA684 !important; }
html body #children-policy [style*="#8E806E"], html body #children-policy [style*="#8E806E"] { color: #C7B393 !important; }
html body #communication-hub [style*="rgba(255,255,255,0.8)"], html body #communication-hub [style*="rgba(255, 255, 255, 0.8)"] { color: rgba(255, 255, 255, .94) !important; }
html body [class*="lang"] .code { color: #E5DACA !important; }

/* one accent for the second line of every headline (was green / gold / purple / blue) */
html body :is(h1, h2) span:not(.notranslate):not([class*="badge"]) { color: #7D5F22 !important; -webkit-text-fill-color: #7D5F22 !important; background: none !important; }
html body :is(.why-section, .hero-dashboard, [class*="dark"]) :is(h1, h2) span:not(.notranslate) { color: #D2AE6D !important; -webkit-text-fill-color: #D2AE6D !important; }
html body .hero { padding-top: 26px !important; }