/* ============================================================
   poster-theme.css  —  "Poster"  (site-wide roll-out of v4)
   ------------------------------------------------------------
   Token overrides + consequences. Load AFTER design-system.css.
   Delete the one <link> to revert any page.
   Palette and type taken from home-variants/v4-poster.html.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,600&display=swap');

:root {
  --color-primary:        #ff7a59;   /* signal  */
  --color-primary-dark:   #e35a33;
  --color-primary-light:  #ffa48b;
  --color-accent:         #ff7a59;
  --color-accent-light:   #ffeae4;

  --gradient-primary:   #ff7a59;
  --gradient-hero:      #14120f;
  --gradient-hero-mesh: none;
  --gradient-dark:      #14120f;
  --gradient-card:      #ffffff;
  --gradient-text:      #ff7a59;
  --gradient-cta:       #ff7a59;
  --gradient-soft:      #e9e0c9;

  --color-white:    #ffffff;
  --color-gray-50:  #f4efe2;   /* paper  */
  --color-gray-100: #e9e0c9;   /* paper2 */
  --color-gray-200: #d8cfb6;
  --color-gray-300: #bdb49b;
  --color-gray-400: #8a8272;
  --color-gray-500: #5a5346;   /* muted on paper */
  --color-gray-600: #3f3a30;
  --color-gray-700: #2b2820;
  --color-gray-800: #221f19;   /* ink2 */
  --color-gray-900: #14120f;   /* ink  */

  --bg-primary:    #f4efe2;
  --bg-secondary:  #e9e0c9;
  --bg-dark:       #14120f;
  --bg-darker:     #0d0b09;
  --bg-glass:      rgba(244, 239, 226, 0.95);
  --bg-glass-dark: rgba(20, 18, 15, 0.9);

  --font-primary: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-heading: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --radius-sm: 0; --radius-md: 0; --radius-lg: 0;
  --radius-xl: 0; --radius-2xl: 0; --radius-full: 0;

  /* Hard offset shadows, no blur. */
  --shadow-sm:      4px 4px 0 #14120f;
  --shadow-md:      6px 6px 0 #14120f;
  --shadow-lg:      8px 8px 0 #14120f;
  --shadow-xl:      10px 10px 0 #14120f;
  --shadow-glow:    6px 6px 0 #14120f;
  --shadow-glow-sm: 4px 4px 0 #14120f;
  --shadow-colored: 6px 6px 0 #ff7a59;

  --transition-fast: all 0.1s ease;
  --transition-base: all 0.14s ease;
  --transition-slow: all 0.18s ease;
  --transition-spring: all 0.18s ease;
}

html { font-size: 16px; }
body { background: #f4efe2; color: #14120f; font-family: var(--font-primary); }

h1, h2, h3,
.large-text-heading, .section-heading, .features-intro-title,
.usecase-title, .pfeat-title, .section-title, .plan-heading, .demo-large-text {
  font-family: var(--font-primary) !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  text-transform: none;
}

/* Signal colour is used as a FILL, not as text on paper —
   #ff7a59 on #f4efe2 fails AA at body sizes. */
.gradient-text, .hero-highlight, .gradiant-text {
  background: #ff7a59 !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  padding: 0 .12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Decoration built for the purple canvas. */
.hero-bg-grid, .hero-orb, .hero-orb-1, .hero-orb-2, .hero-visual-glow { display: none !important; }

/* Full-bleed blocks: ink stays ink, paper stays paper. */
.header-banner-section, .usecase-section { background: #14120f !important; }
.features-stack, .pfeat-section { background: #f4efe2 !important; }
.usecase-section::before, .pfeat-section::before { display: none !important; }

.large-text-heading, .usecase-title, .usecase-card-title { color: #ffffff !important; }
.hero-tagline, .usecase-lede, .usecase-card-text, .usecase-note { color: #cdc6b4 !important; }
.hero-tagline strong { color: #ffffff !important; }
.pfeat-title, .features-intro-title, .section-heading { color: #14120f !important; }
.pfeat-lede, .pfeat-item p, .data-info { color: #5a5346 !important; }

.hero-badge, .section-eyebrow, .section-eyebrow--light, .plan-status, .feature-card-label {
  background: #ff7a59 !important; color: #ffffff !important;
  border: none !important; border-radius: 0 !important;
  padding: 4px 10px !important; letter-spacing: .1em !important;
  text-transform: uppercase !important; font-weight: 800 !important;
  backdrop-filter: none !important; display: inline-block !important;
}

/* Cards: square, black rule, hard offset. */
.plan, .pfeat-item, .feature-card, .home-faq-item {
  background: #ffffff !important; border: 2px solid #14120f !important;
  border-radius: 0 !important; box-shadow: 4px 4px 0 #14120f !important;
}
.usecase-card, .hero-feature-item {
  background: #221f19 !important; border: 2px solid #4a4438 !important;
  border-radius: 0 !important; box-shadow: none !important;
}
.pfeat-item::before, .active-plan::before { display: none !important; }
.pfeat-item:hover, .plan:hover { transform: none !important; box-shadow: 6px 6px 0 #ff7a59 !important; }
.usecase-card:hover, .hero-feature-item:hover { transform: none !important; border-color: #ff7a59 !important; }

.active-plan { background: #ff7a59 !important; border-color: #14120f !important; }
.active-plan .plan-heading, .active-plan .plan-pricing, .active-plan .plan-pricing-amount,
.active-plan .checkmark-list li { color: #ffffff !important; }
.active-plan .no-of-titles, .active-plan .plan-effective { color: #ffeae4 !important; }
.active-plan .plan-status { background: #14120f !important; }

.pfeat-icon { background: #f4efe2 !important; border: 2px solid #14120f !important; border-radius: 0 !important; box-shadow: none !important; }
.pfeat-icon svg { stroke: #14120f !important; }
.usecase-icon, .hero-feature-icon { background: #14120f !important; border: 2px solid #4a4438 !important; border-radius: 0 !important; box-shadow: none !important; }
.usecase-icon svg, .hero-feature-icon svg { stroke: #ffffff !important; }

/* Buttons: square, signal fill, hard shadow, no lift. */
.hero-btn-primary, .get-start-btn-active, .pfeat-more-link, .demo-button,
.plan-btn.selected, .try-free-btn, .signup-btn, #home-signup-btn {
  background: #ff7a59 !important; border: 2px solid #14120f !important;
  color: #ffffff !important; border-radius: 0 !important;
  box-shadow: 4px 4px 0 #14120f !important; font-weight: 800 !important;
}
.hero-btn-primary:hover, .get-start-btn-active:hover, .pfeat-more-link:hover,
.demo-button:hover, .plan-btn.selected:hover, .try-free-btn:hover,
.signup-btn:hover, #home-signup-btn:hover {
  background: #e35a33 !important; color: #ffffff !important;
  transform: none !important; box-shadow: 2px 2px 0 #14120f !important;
}
.get-start-btn, .login-button, #home-signin-btn {
  background: #ffffff !important; border: 2px solid #14120f !important;
  color: #14120f !important; border-radius: 0 !important; box-shadow: none !important;
}
.hero-btn-secondary { background: transparent !important; border: 2px solid #ffffff !important; color: #ffffff !important; border-radius: 0 !important; }
.get-start-btn:hover, .login-button:hover, #home-signin-btn:hover {
  background: #14120f !important; color: #ffffff !important; transform: none !important;
}
.plan-toggle-btn { background: #ffffff !important; border: 2px solid #14120f !important; border-radius: 0 !important; box-shadow: none !important; }
.plan-btn { border-radius: 0 !important; color: #5a5346 !important; font-weight: 800 !important; }

a, .web-link { color: #e35a33; }
a:hover, .web-link:hover { color: #14120f; }
.example-card__cta, .example-card__cta:hover { color: #ffffff !important; }

.year-plan-note, .plan-bottom, .plan-bottom-yearly, .full-Width-section {
  background: #14120f !important; color: #f4efe2 !important; border: none !important; border-radius: 0 !important;
}
.plan-enterprise-cta__text, .web-link-white, .signup-section-text { color: #f4efe2 !important; }
.plan-enterprise-cta__badge, .offer-text { background: #ff7a59 !important; color: #ffffff !important; }

.feature-spotlight-card__media, .example-card__media, .example-card-media { background: #e9e0c9 !important; }

.sticky-header, .showToolbar {
  background: #f4efe2 !important; border-bottom: 3px solid #14120f !important;
  backdrop-filter: none !important; box-shadow: none !important;
}
.menu-items a, .example-link { color: #14120f !important; font-weight: 700 !important; }
.menu-items a:hover, .active-link-decoration { color: #e35a33 !important; }
/* header.css inverts the logo to white for the dark header. */
.logo, .sticky-header .logo, .sticky-header:not(.transparent-background) .logo,
body:not(.inner-page) .sticky-header:not(.transparent-background) .logo,
body.inner-page .sticky-header .logo,
body.inner-page .sticky-header.transparent-background .logo { filter: none !important; }

.footer { background: #14120f !important; border-top: 6px solid #ff7a59 !important; }
.footer h4, .footer .copyright-text, .footer .left-footer, .footer .right-footer { color: #ffffff !important; }
.footer-links, .footer a { color: #cdc6b4 !important; }
.footer-links:hover, .footer a:hover { color: #ff7a59 !important; }
.footer-social-icons { background: transparent !important; border: 2px solid #4a4438 !important; border-radius: 0 !important; }
.footer-social-icons svg path { fill: #ffffff !important; }

.hero-features, .hr-style { border-color: #4a4438 !important; }
.plan hr { border-color: #d8cfb6 !important; }
.checkmark-list li, .pfeat-item p { line-height: 1.6 !important; }


/* ---- Coral variant ----
   #ff7a59 is a light fill: white on it is 2.6:1 and fails.
   Ink on it is 7.3:1. v4 and HubSpot both pair it with dark text,
   so the inner pages follow suit. */
.hero-badge, .section-eyebrow, .section-eyebrow--light,
.plan-status, .feature-card-label,
.plan-enterprise-cta__badge, .offer-text,
.gradient-text, .hero-highlight, .gradiant-text {
  color: #14120f !important;
  -webkit-text-fill-color: #14120f !important;
}

.hero-btn-primary, .get-start-btn-active, .pfeat-more-link, .demo-button,
.plan-btn.selected, .try-free-btn, .signup-btn, #home-signup-btn {
  color: #14120f !important;
}
.hero-btn-primary:hover, .get-start-btn-active:hover, .pfeat-more-link:hover,
.demo-button:hover, .plan-btn.selected:hover, .try-free-btn:hover,
.signup-btn:hover, #home-signup-btn:hover { color: #14120f !important; }

.active-plan .plan-heading, .active-plan .plan-pricing,
.active-plan .plan-pricing-amount, .active-plan .checkmark-list li { color: #14120f !important; }
.active-plan .no-of-titles, .active-plan .plan-effective { color: #4a3f38 !important; }
.active-plan .plan-status { background: #14120f !important; color: #ff7a59 !important; }

/* ============================================================
   DARK-SECTION TEXT
   ------------------------------------------------------------
   Several wrappers resolve to ink via --gradient-dark /
   --gradient-hero (.pricing-section, .inner-page-hero, the home
   bands, the footer). Their headings and body copy still resolve
   to --color-gray-900, which is the SAME ink -> invisible text.
   Scope paper-coloured type inside every dark container.
   ============================================================ */

.pricing-section,
.inner-page-hero,
.header-banner-section,
.usecase-section,
.req-demo-home-section--dark,
.feature-block--dark,
.example-showcase,
.footer {
  color: #f4efe2;
}

.pricing-section h1, .pricing-section h2, .pricing-section h3,
.pricing-section .section-heading, .pricing-section .section-title,
.pricing-section .year-plan-note, .pricing-section p,
.inner-page-hero h1, .inner-page-hero h2, .inner-page-hero h3,
.inner-page-hero p, .inner-page-hero .inner-page-hero-desc,
.header-banner-section h1, .header-banner-section h2,
.usecase-section h2, .usecase-section h3, .usecase-section p,
.req-demo-home-section--dark h2, .req-demo-home-section--dark h3,
.feature-block--dark .large-text, .feature-block--dark .data-info {
  color: #f4efe2 !important;
}

.example-showcase .example-showcase__title {
  color: #14120f !important;
}

/* Links inside dark sections. */
.pricing-section a:not(.get-start-btn):not(.get-start-btn-active),
.inner-page-hero a,
.usecase-section a,
.req-demo-home-section--dark a {
  color: #ff7a59 !important;
}

/* Cards sit on paper INSIDE the dark band, so their own type
   must stay ink - re-assert it after the sweep above. */
.pricing-section .plan h1, .pricing-section .plan h2,
.pricing-section .plan h3, .pricing-section .plan p,
.plan .plan-heading, .plan .plan-pricing, .plan .plan-pricing-amount,
.plan .checkmark-list li, .plan .no-of-titles, .plan .plan-effective {
  color: #14120f !important;
}
.plan .no-of-titles, .plan .plan-effective { color: #5a5346 !important; }

/* Featured plan is a coral fill -> ink type on it. */
.active-plan .plan-heading, .active-plan .plan-pricing,
.active-plan .plan-pricing-amount, .active-plan .checkmark-list li { color: #14120f !important; }
.active-plan .no-of-titles, .active-plan .plan-effective { color: #4a3f38 !important; }

/* "Most popular" flag: ink chip, coral text — was ink on ink. */
.plan-status { background: #ff7a59 !important; color: #14120f !important; }
.active-plan .plan-status { background: #14120f !important; color: #ff7a59 !important; }

/* The billing-cycle note bar. */
.year-plan-note { background: #14120f !important; color: #f4efe2 !important; }
.year-plan-note .offer-text { background: #ff7a59 !important; color: #14120f !important; }

/* ---- "Most popular" flag on the featured plan ----
   An earlier rule sets -webkit-text-fill-color:#14120f on
   .plan-status (needed for the coral chips elsewhere).
   -webkit-text-fill-color beats `color` in Blink/WebKit, so the
   ink chip on the featured card rendered ink-on-ink. Set the
   fill colour explicitly here, not just `color`. */
.active-plan .plan-status,
.plan.active-plan .plan-status {
  background: #14120f !important;
  color: #ff7a59 !important;
  -webkit-text-fill-color: #ff7a59 !important;
}