/* RealityTry editorial design system: shared by every public page. */
:root {
  color-scheme: light;
  --rt-ivory: #f7f3ea;
  --rt-paper: #fffdf8;
  --rt-espresso: #2a1e1a;
  --rt-muted: #756a61;
  --rt-line: rgba(42, 30, 26, .12);
  --rt-teal: #3e8e8e;
  --rt-gold: #c9a24b;
  --rt-gradient: linear-gradient(110deg, #3e8e8e 0%, #70a193 48%, #c9a24b 100%);
  --rt-serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --rt-sans: "DM Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rt-radius: 22px;
  --rt-shadow: 0 18px 48px rgba(42, 30, 26, .08);
  --bg-deep: var(--rt-ivory);
  --bg-surface: var(--rt-paper);
  --bg-card: var(--rt-paper);
  --glass: rgba(42,30,26,.025);
  --glass-border: var(--rt-line);
  --glass-hover: rgba(42,30,26,.055);
  --text-primary: var(--rt-espresso);
  --text-secondary: var(--rt-muted);
  --text-muted: var(--rt-muted);
  --neon-purple: var(--rt-teal);
  --neon-blue: var(--rt-teal);
  --neon-cyan: var(--rt-teal);
  --neon-pink: var(--rt-gold);
  --grad-hero: var(--rt-gradient);
  --grad-btn: var(--rt-gradient);
  --font: var(--rt-sans);
  --ink: var(--rt-espresso);
  --muted: var(--rt-muted);
  --paper: var(--rt-ivory);
  --card: var(--rt-paper);
  --accent: var(--rt-teal);
  --border: var(--rt-line);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--rt-ivory); }
body {
  background: var(--rt-ivory) !important;
  color: var(--rt-espresso) !important;
  font-family: var(--rt-sans) !important;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
body::before, .grid-bg, .glow-orb { display: none !important; }
h1, h2, h3, h4, .section-title, .page-title, .hero-title {
  color: var(--rt-espresso) !important;
  font-family: var(--rt-serif) !important;
  font-weight: 500 !important;
  letter-spacing: -.025em;
  line-height: 1.04 !important;
}
h1 { font-size: clamp(2.8rem, 6.5vw, 6rem) !important; }
h2, .section-title { font-size: clamp(2.15rem, 4.2vw, 4rem) !important; }
h3 { font-size: clamp(1.4rem, 2.2vw, 2rem) !important; }
p, li, label, input, textarea, select, button { font-family: var(--rt-sans); }
p, li { color: inherit; }
a { color: inherit; }
img { height: auto; }
main > section, .page-section, section:not(.hero) { scroll-margin-top: 92px; }
body:not(:has(.hero-mockup-browser)) main, body:not(:has(.hero-mockup-browser)) .page-container, body:not(:has(.hero-mockup-browser)) .container {
  color: var(--rt-espresso);
}
body:not(:has(.hero-mockup-browser)):not(:has(.navbar)):not(:has(.site-header)) main { padding-top: clamp(2rem, 6vw, 5rem); }
.navbar, header.navbar, .site-header, .main-header {
  color: var(--rt-espresso) !important;
  background: rgba(247, 243, 234, .94) !important;
  border-bottom: 1px solid var(--rt-line) !important;
  box-shadow: 0 4px 20px rgba(42,30,26,.035) !important;
  backdrop-filter: blur(14px);
}
.navbar a, header a, .site-header a { color: var(--rt-espresso); }
.hero ~ .navbar, .navbar:has(+ main .hero) { background: transparent !important; box-shadow: none !important; border-color: transparent !important; }
.btn, button.btn, a.button, button[type="submit"], .cta-button, .primary-button {
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--rt-gradient) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(62,142,142,.18) !important;
  font-weight: 600 !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn:hover, button[type="submit"]:hover, .cta-button:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(62,142,142,.24) !important; }
.btn-secondary, .button-secondary, a.btn-outline {
  color: var(--rt-espresso) !important;
  background: transparent !important;
  border: 1px solid rgba(42,30,26,.35) !important;
  box-shadow: none !important;
}
.text-gradient, .text-gradient *, .gradient-text {
  background: var(--rt-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.section-tag, .eyebrow, .section-kicker { color: var(--rt-teal) !important; letter-spacing: .16em; text-transform: uppercase; }
.card, .feature-card, .pricing-card, .testimonial-card, .faq-item, .blog-card, .article-card,
.calculator-card, .form-card, .demo-card, .product-card, .content-card {
  color: var(--rt-espresso) !important;
  background: var(--rt-paper) !important;
  border: 1px solid var(--rt-line) !important;
  border-radius: var(--rt-radius) !important;
  box-shadow: 0 8px 28px rgba(42,30,26,.045) !important;
}
.pricing-card.featured, .pricing-card.popular, .recommended-plan {
  border: 1px solid rgba(62,142,142,.45) !important;
  box-shadow: 0 16px 40px rgba(62,142,142,.12) !important;
}
.pricing-badge { background: var(--rt-gradient) !important; color: #fff !important; border-radius: 999px !important; }
input, textarea, select {
  color: var(--rt-espresso) !important;
  background: #fffefa !important;
  border: 1px solid rgba(42,30,26,.2) !important;
  border-radius: 12px !important;
}
input::placeholder, textarea::placeholder { color: #94877c !important; }
footer, .footer {
  color: #f7f3ea !important;
  background: #2a1e1a !important;
  border: 0 !important;
}
footer p, footer a, .footer p, .footer a, footer h3, .footer h3 { color: #f7f3ea !important; }
/* Home: image-led editorial cover and readable text. */
body:has(.hero-mockup-browser) .navbar, body:has(.hero-mockup-browser) header.navbar {
  position: fixed !important; inset: 0 0 auto; z-index: 20;
  background: linear-gradient(180deg, rgba(22,19,16,.45), transparent) !important;
  border: 0 !important; box-shadow: none !important;
}
body:has(.hero-mockup-browser) .navbar a, body:has(.hero-mockup-browser) header.navbar a, body:has(.hero-mockup-browser) .navbar .logo { color: #fff !important; }
body:has(.hero-mockup-browser) .navbar.navbar--scrolled, body:has(.hero-mockup-browser) header.navbar.navbar--scrolled {
  background: rgba(247,243,234,.96) !important; border-bottom: 1px solid var(--rt-line) !important;
  box-shadow: 0 6px 24px rgba(42,30,26,.06) !important;
}
body:has(.hero-mockup-browser) .navbar.navbar--scrolled a, body:has(.hero-mockup-browser) header.navbar.navbar--scrolled a { color: var(--rt-espresso) !important; }
body:has(.hero-mockup-browser) .hero {
  position: relative; min-height: max(760px, 100svh); margin: 0 !important;
  padding: 150px clamp(1.3rem, 7vw, 7.5rem) 6vh !important;
  display: flex; align-items: end; overflow: hidden;
  background: #76685a url('/static/images/realitytry-home-hero.webp') center 42% / cover no-repeat !important;
}
body:has(.hero-mockup-browser) .hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(24,20,17,.78) 0%, rgba(24,20,17,.5) 43%, rgba(24,20,17,.08) 78%), linear-gradient(0deg, rgba(24,20,17,.36), transparent 48%);
}
body:has(.hero-mockup-browser) .hero-split { position: relative; z-index: 1; width: min(100%, 1240px); margin: auto; display: block !important; }
body:has(.hero-mockup-browser) .hero-left { width: min(740px, 100%); text-align: left !important; }
body:has(.hero-mockup-browser) .hero-subtitle { color: #e8c778 !important; font-size: .78rem !important; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
body:has(.hero-mockup-browser) .hero-left h1 { max-width: 760px; color: #fff !important; text-shadow: 0 2px 24px rgba(0,0,0,.28); font-size: clamp(3rem, 7vw, 6.8rem) !important; }
body:has(.hero-mockup-browser) .hero-left h1 .text-gradient {
  background: var(--rt-gradient) !important; background-clip: text !important;
  -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
body:has(.hero-mockup-browser) .hero-description { max-width: 580px; color: rgba(255,255,255,.9) !important; font-size: clamp(1rem,1.4vw,1.16rem); text-shadow: 0 1px 12px rgba(0,0,0,.24); }
body:has(.hero-mockup-browser) .hero-stats { display: none !important; }
body:has(.hero-mockup-browser) .hero-right { display: none !important; }
body:has(.hero-mockup-browser) .hero-cta { margin-top: 1.7rem; }
body:has(.hero-mockup-browser) .hero-cta .btn-secondary { color: #fff !important; border-color: rgba(255,255,255,.78) !important; }
/* Calm down the original dark tech palette across the homepage sections. */
body:has(.hero-mockup-browser) main section:not(.hero), body:has(.hero-mockup-browser) .pricing, body:has(.hero-mockup-browser) .features,
body:has(.hero-mockup-browser) .stats-section, body:has(.hero-mockup-browser) .faq-section, body:has(.hero-mockup-browser) .cta {
  color: var(--rt-espresso) !important; background: var(--rt-ivory) !important;
  border-color: var(--rt-line) !important;
}
body:has(.hero-mockup-browser) .section-description, body:has(.hero-mockup-browser) .feature-card p, body:has(.hero-mockup-browser) .testimonial-card p,
body:has(.hero-mockup-browser) .faq-answer, body:has(.hero-mockup-browser) .pricing-card li { color: var(--rt-muted) !important; }
body:has(.hero-mockup-browser) .feature-card, body:has(.hero-mockup-browser) .testimonial-card, body:has(.hero-mockup-browser) .pricing-card { background: var(--rt-paper) !important; }
/* Blog/article reading rhythm and responsive spacing. */
.article-content, .blog-content, article.prose { max-width: 760px; margin-inline: auto; line-height: 1.85; }
.blog-grid, .posts-grid { gap: clamp(1rem,2vw,2rem); }
.blog-card { overflow: hidden; padding: 0 0 1.4rem !important; }
.blog-card-image { display: block; width: 100%; aspect-ratio: 8 / 5; object-fit: cover; margin-bottom: 1.15rem; }
.blog-card > :not(.blog-card-image) { margin-left: 1.35rem; margin-right: 1.35rem; }
.blog-card .pill { background: transparent !important; padding-left: 0; color: var(--rt-teal) !important; }
.article-content h2, .blog-content h2 { margin-top: 2.6em; }
@media (max-width: 720px) {
  body:has(.hero-mockup-browser) .hero { min-height: 88svh; padding: 125px 1.25rem 2.6rem !important; background-position: 75% center !important; }
  body:has(.hero-mockup-browser) .hero::before { background: linear-gradient(0deg, rgba(24,20,17,.84) 0%, rgba(24,20,17,.5) 52%, rgba(24,20,17,.13) 100%); }
  body:has(.hero-mockup-browser) .hero-left h1 { font-size: clamp(2.65rem, 13vw, 4rem) !important; }
  .container { padding-inline: 1.1rem !important; }
  main:not(:has(.hero-mockup-browser)) { padding-top: 1.5rem; }
}
/* Keep utility-heavy calculator pages within the shared light palette. */
body:has(.leak-visualizer) .text-white, body:has(.cart-visualizer) .text-white,
body:has(.roi-calc-card) .text-white { color: var(--rt-espresso) !important; }
body:has(.leak-visualizer) .bg-slate-900, body:has(.leak-visualizer) .bg-gray-900,
body:has(.leak-visualizer) .bg-indigo-950, body:has(.leak-visualizer) .bg-blue-950,
body:has(.leak-visualizer) .bg-slate-950, body:has(.leak-visualizer) .bg-gray-950,
body:has(.cart-visualizer) .bg-slate-900, body:has(.cart-visualizer) .bg-gray-900,
body:has(.cart-visualizer) .bg-indigo-950, body:has(.cart-visualizer) .bg-blue-950,
body:has(.cart-visualizer) .bg-slate-950, body:has(.cart-visualizer) .bg-gray-950 {
  background-color: var(--rt-ivory) !important;
}
body:has(.leak-visualizer) .text-slate-100, body:has(.leak-visualizer) .text-slate-200,
body:has(.leak-visualizer) .text-gray-100, body:has(.leak-visualizer) .text-white,
body:has(.cart-visualizer) .text-slate-100, body:has(.cart-visualizer) .text-slate-200,
body:has(.cart-visualizer) .text-gray-100, body:has(.cart-visualizer) .text-white { color: var(--rt-espresso) !important; }
body:has(.leak-visualizer) [class*="bg-[#0"], body:has(.leak-visualizer) [class*="bg-[#1"],
body:has(.leak-visualizer) [class*="bg-[#2"] {
  background-color: var(--rt-paper) !important;
  border-color: var(--rt-line) !important;
}
body:has(.leak-visualizer) [style*="background: #0"], body:has(.leak-visualizer) [style*="background:#0"],
body:has(.leak-visualizer) [style*="background-color: #0"], body:has(.leak-visualizer) [style*="background-color:#0"],
body:has(.leak-visualizer) [style*="background: rgba(6,6,14"], body:has(.leak-visualizer) [style*="background:rgba(6,6,14"] {
  background: var(--rt-paper) !important;
  border-color: var(--rt-line) !important;
}
.roi-calc-card, .roi-result-card, #calculator-gate { background: var(--rt-paper) !important; border-color: var(--rt-line) !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Shared refinements for pages with their own structural styles. */
:where(.btn-primary, .button, .cta-gradient, .generate-btn) {
  border-radius: 999px !important;
  background: var(--rt-gradient) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(62,142,142,.18) !important;
}
.text-emerald-400, .text-emerald-500, .text-emerald-600, .text-green-500,
.text-teal-400, .text-teal-500 { color: var(--rt-teal) !important; }
.bg-emerald-50, .bg-emerald-500\/10, .bg-green-50, .bg-teal-50 { background-color: rgba(62,142,142,.09) !important; }
.border-emerald-200, .border-emerald-500\/20, .border-green-200 { border-color: rgba(62,142,142,.28) !important; }

/* Try-on demo: warm studio canvas with clear upload and result panels. */
.try-page { min-height: 100vh; padding-top: 86px !important; color: var(--rt-espresso) !important; background: var(--rt-ivory) !important; }
.try-container { max-width: 1180px !important; padding: clamp(1.25rem, 4vw, 3rem) !important; }
.try-header { margin-bottom: clamp(2rem, 5vw, 3.5rem) !important; }
.try-header h1 {
  max-width: 850px; margin-inline: auto; background: var(--rt-gradient) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; font-size: clamp(2.5rem, 5.8vw, 4.7rem) !important;
}
.try-header p { color: var(--rt-muted) !important; }
.credits-badge, .free-credits { color: var(--rt-espresso) !important; background: rgba(62,142,142,.09) !important; border: 1px solid rgba(62,142,142,.24) !important; }
.credits-badge .credits-count { color: var(--rt-teal) !important; }
.upload-grid { gap: clamp(1rem, 3vw, 2rem) !important; }
.upload-box {
  color: var(--rt-espresso) !important; background: rgba(255,253,248,.88) !important;
  border: 1px dashed rgba(42,30,26,.26) !important; border-radius: var(--rt-radius) !important;
  box-shadow: 0 12px 36px rgba(42,30,26,.045);
}
.upload-box:hover, .upload-box.has-image { border-color: var(--rt-teal) !important; }
.upload-hint { color: var(--rt-muted) !important; }
.upload-icon, .arrow-icon { color: var(--rt-teal) !important; }
.upload-change-btn { color: #fff !important; background: var(--rt-gradient) !important; border-radius: 999px !important; }
.pro-tip, .result-section, .result-image-container, .login-card {
  color: var(--rt-espresso) !important; background: var(--rt-paper) !important;
  border: 1px solid var(--rt-line) !important; border-radius: var(--rt-radius) !important; box-shadow: var(--rt-shadow) !important;
}
.result-section { padding: clamp(1rem, 3vw, 2rem); }
.error-message { color: #8d3d32 !important; background: #fff3ef !important; border-color: rgba(141,61,50,.24) !important; }
.loading-overlay { color: var(--rt-espresso) !important; background: rgba(247,243,234,.94) !important; }
.loading-spinner { border-color: rgba(62,142,142,.2) !important; border-top-color: var(--rt-teal) !important; }
.login-modal { background: rgba(42,30,26,.48) !important; }
.login-card h2 { background: var(--rt-gradient) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; }
.login-card p { color: var(--rt-muted) !important; }
.google-btn { color: var(--rt-espresso) !important; background: #fff !important; border: 1px solid var(--rt-line) !important; }
.login-close { color: var(--rt-muted) !important; }

/* Accent consistency for the two utility-style revenue calculators. */
body:has(.leak-visualizer) .text-gray-300, body:has(.leak-visualizer) .text-gray-400,
body:has(.leak-visualizer) .text-gray-500, body:has(.leak-visualizer) .text-slate-400,
body:has(.leak-visualizer) .text-slate-500,
body:has(.cart-visualizer) .text-gray-300, body:has(.cart-visualizer) .text-gray-400,
body:has(.cart-visualizer) .text-gray-500, body:has(.cart-visualizer) .text-slate-400,
body:has(.cart-visualizer) .text-slate-500 { color: var(--rt-muted) !important; }
body:has(.leak-visualizer) [class*="text-[#ff"], body:has(.leak-visualizer) .text-red-400,
body:has(.leak-visualizer) .text-red-300 { color: var(--rt-teal) !important; }
body:has(.leak-visualizer) .leak-visualizer { filter: saturate(.62); }
body:has(.cart-visualizer) .cta-gradient { background: var(--rt-gradient) !important; }
body:has(.cart-visualizer) .pulse-ring { border-color: var(--rt-teal) !important; }
body:has(.cart-visualizer) .hovering-cash { filter: drop-shadow(0 12px 18px rgba(62,142,142,.2)); }

/* Dynamic cart and checkout screens use the same storefront palette. */
body:has(.wrap) { min-height: 100vh; background: var(--rt-ivory) !important; color: var(--rt-espresso) !important; }
.wrap { padding: clamp(1.25rem, 5vw, 3.5rem) 1.25rem !important; }
.wrap > .card { background: var(--rt-paper) !important; border-color: var(--rt-line) !important; border-radius: var(--rt-radius) !important; box-shadow: var(--rt-shadow) !important; }
.wrap .muted { color: var(--rt-muted) !important; }
.wrap .line, .wrap .line img { border-color: var(--rt-line) !important; }
.wrap .btn { border-radius: 999px !important; }
.wrap .btn.primary { background: var(--rt-gradient) !important; border: 0 !important; color: #fff !important; }
@media (max-width: 720px) {
  .try-container { padding-inline: 1rem !important; }
  .try-header { margin-bottom: 1.75rem !important; }
  .upload-box { min-height: 270px !important; }
}