/*
 * REQUITY coffee landing-page theme.
 *
 * Palette supplied by REQUITY:
 * Cream    #fff7e8
 * Latte    #e1c19b
 * Caramel  #bd925f
 * Espresso #805b2f
 * Mocha    #7a3500
 * Roast    #341100
 *
 * Navy remains an intentional REQUITY brand accent.
 * This stylesheet is scoped to public landing-page presentation. It changes
 * pattern colors but does not change any triangle/circle animation behavior.
 */

:root {
  --rq-cream: #fff7e8;
  --rq-latte: #e1c19b;
  --rq-caramel: #bd925f;
  --rq-espresso: #805b2f;
  --rq-mocha: #7a3500;
  --rq-roast: #341100;
  --rq-navy: #07366e;
  --rq-navy-bright: #1e3f7a;
  --rq-coffee-border: rgba(128, 91, 47, 0.24);
  --rq-coffee-shadow: 0 18px 44px rgba(52, 17, 0, 0.08);
}

/* Overall public landing surfaces */
body {
  background: var(--rq-cream);
  color: var(--rq-roast);
}

.sticky-nav,
#header {
  background: rgba(255, 247, 232, 0.96) !important;
  border-color: rgba(128, 91, 47, 0.18) !important;
  backdrop-filter: blur(14px);
}

.hero,
.hero-section {
  background-color: var(--rq-cream) !important;
}

.bg-soft-blue,
.bg-soft,
.bg-light {
  background-color: #f8ead7 !important;
}

.section:not(.hero):not(.hero-section):not(.bg-soft-blue):not(.bg-soft):not(.bg-light):not(.market-hero):not(.market-local) {
  background-color: var(--rq-cream);
}

.hero-headline,
.hero-title,
.section-title,
.section-header h2,
.card-title,
.journey-title,
h1,
h2,
h3,
h4 {
  color: var(--rq-roast);
}

.hero-subheadline,
.support-copy,
.section-header p,
.card-copy,
.card p,
.soft-card p,
.j-item,
.jf-node span {
  color: var(--rq-espresso);
}

/* REQUITY navy is the sharp contrast accent, coffee tones carry warmth. */
.btn-primary,
.nav-cta {
  background: var(--rq-navy) !important;
  border-color: var(--rq-navy) !important;
  color: var(--rq-cream) !important;
  box-shadow: 0 9px 22px rgba(7, 54, 110, 0.16) !important;
}

.btn-primary:hover,
.nav-cta:hover {
  background: #052b58 !important;
  border-color: #052b58 !important;
}

.btn-secondary,
.btn-text {
  color: var(--rq-navy) !important;
}

.btn-secondary {
  border-color: rgba(7, 54, 110, 0.26) !important;
}

.btn-secondary:hover,
.btn-text:hover {
  color: var(--rq-mocha) !important;
  border-color: var(--rq-caramel) !important;
}

.clean-card,
.journey-card,
.mockup-card,
.waiting-card,
.trust-card,
.card,
.soft-card,
.demo-card,
.faq-item,
.founder-video-frame video {
  background: #fffaf1 !important;
  border-color: var(--rq-coffee-border) !important;
  box-shadow: var(--rq-coffee-shadow) !important;
}

.clean-card:hover,
.trust-card:hover,
.card:hover,
.soft-card:hover {
  border-color: rgba(189, 146, 95, 0.58) !important;
}

.fake-input,
.demo-input,
input,
select,
textarea,
.mock-form,
.mock-assessment,
.mock-review {
  background-color: #fffaf1 !important;
  border-color: var(--rq-coffee-border) !important;
  color: var(--rq-roast) !important;
}

input:focus,
select:focus,
textarea:focus,
.fake-input:focus {
  border-color: var(--rq-caramel) !important;
  box-shadow: 0 0 0 3px rgba(189, 146, 95, 0.18) !important;
}

.hero-trust-pills .trust-pill,
.trust-pill,
.badge,
.market-badge {
  background: rgba(225, 193, 155, 0.38) !important;
  border-color: rgba(128, 91, 47, 0.2) !important;
  color: var(--rq-navy) !important;
}

.card-icon,
.soft-card-icon,
.jf-node svg,
.j-item svg,
.waiting-icon {
  color: var(--rq-navy) !important;
}

.j-item.active,
.jf-node.active,
.jf-node.highlight-node.active,
.jf-node.highlight-node.active span {
  color: var(--rq-mocha) !important;
}

.progress-bar,
.steps-progress,
.rt-line::after,
.jf-connector::after {
  background: var(--rq-caramel) !important;
}

/* Smoooth-derived duotone icon assets */
.rq-duotone-icon,
.card-icon.rq-duotone-icon,
.soft-card-icon img,
.card-icon img {
  width: 30px;
  height: 30px;
  display: block;
}

.rq-duotone-icon-wrap,
.card-icon:has(.rq-duotone-icon),
.soft-card-icon:has(.rq-duotone-icon) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1rem;
  border: 1px solid rgba(128, 91, 47, 0.18);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(225,193,155,.48), rgba(255,247,232,.82));
}


/* The hero review card already uses pictograms. The later REQUITY Review
   section uses numbered milestones instead so the page does not repeat the
   same icon language twice. The existing journey animation and connectors are
   untouched; only the node artwork changes. */
#animated-journey .jf-node > svg,
#animated-journey .jf-node > img,
#animated-journey .jf-node > .rq-duotone-icon {
  display: none !important;
}

#animated-journey .jf-node::before {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  border: 1px solid rgba(7, 54, 110, 0.22);
  border-radius: 14px;
  background: #fffaf1;
  color: var(--rq-navy);
  box-shadow: 0 8px 18px rgba(52, 17, 0, 0.07);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

#animated-journey #jf-1::before { content: "01"; }
#animated-journey #jf-2::before { content: "02"; }
#animated-journey #jf-3::before { content: "03"; }
#animated-journey #jf-4::before { content: "04"; }
#animated-journey #jf-5::before { content: "05"; }

#animated-journey .jf-node.active::before {
  border-color: var(--rq-navy);
  background: var(--rq-navy);
  color: var(--rq-cream);
  box-shadow: 0 10px 24px rgba(7, 54, 110, 0.16);
}

/* Client animated triangles: preserve the existing transforms/timing, recolor only. */
.rq-triangle-pattern {
  opacity: 0.19 !important;
}

.rq-pattern-section.bg-soft-blue .rq-triangle-pattern {
  opacity: 0.18 !important;
}

.rq-bg-triangle path {
  stroke: var(--rq-navy) !important;
}

@keyframes rqPatternStrokeShift {
  0%, 100% { stroke: var(--rq-navy); }
  45%, 55% { stroke: var(--rq-caramel); }
}

/* Agent animated circles: same animation states, coffee/navy stroke cycle. */
.circle-pattern {
  opacity: 0.17 !important;
}

.circle-pattern::after {
  background: linear-gradient(90deg, rgba(255,247,232,.64), rgba(225,193,155,.18)) !important;
}

.bg-light .circle-pattern::after,
.bg-soft .circle-pattern::after {
  background: linear-gradient(90deg, rgba(248,234,215,.66), rgba(225,193,155,.18)) !important;
}

.patterned-circle circle {
  stroke: var(--rq-navy) !important;
}

@keyframes patternedStrokeShift {
  0%, 100% { stroke: var(--rq-navy); }
  45%, 55% { stroke: var(--rq-caramel); }
}

/* Market landing pages keep their skyline/functionality but share the palette. */
body[class*="market-theme-"] {
  --market-accent: var(--rq-caramel) !important;
  --market-soft: var(--rq-cream) !important;
  --market-deep: var(--rq-navy) !important;
  --market-overlay: rgba(255, 247, 232, 0.87) !important;
}

.market-hero {
  background-color: var(--rq-cream) !important;
}

.market-local {
  background-color: #f4e3cf !important;
}

.market-badge {
  background: var(--rq-navy) !important;
  color: var(--rq-cream) !important;
}

.market-bullets li {
  color: var(--rq-espresso) !important;
}

.market-bullets li::before {
  background: var(--rq-caramel) !important;
}

.site-footer,
.footer {
  background: var(--rq-roast) !important;
}

.site-footer,
.site-footer h4,
.site-footer a,
.footer,
.footer h4,
.footer a {
  color: var(--rq-cream);
}

.site-footer p,
.footer p,
.footer-bottom {
  color: rgba(255,247,232,.72) !important;
}

@media (prefers-reduced-motion: reduce) {
  .rq-bg-triangle path { stroke: var(--rq-navy) !important; }
  .patterned-circle circle { stroke: var(--rq-navy) !important; }
}


/* Keep Smoooth duotone icon sizing consistent in the animated journey UI. */
.j-item .rq-duotone-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

.jf-node .rq-duotone-icon {
  width: 32px;
  height: 32px;
}

.waiting-card .rq-duotone-icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 1rem;
}

@media (max-width: 768px) {
  .market-hero {
    background-image:
      linear-gradient(180deg, rgba(255,247,232,.95) 0%, rgba(255,247,232,.84) 55%, rgba(255,247,232,.96) 100%),
      var(--market-skyline, none) !important;
  }
}