/* Brand v2 (2026-10-05): the new WPMaven logo, its violet and orange, Gabarito for titles,
   violet and orange glows on the hero. Text stays in Inter, and rings, bars and the buttons'
   border keep the pastel gradient, as before brand v2 (founder, 2026-10-05).
   Linked last on every page, so it wins over the page styles it overrides. */

@font-face {
  font-family: 'Gabarito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/gabarito.woff2') format('woff2');
}

:root {
  --brand-ink: #15121F;
  --brand-violet: #6A4BFF;
  --brand-orange: #FF6A3D;
  --font-display: 'Gabarito', 'Inter', system-ui, -apple-system, sans-serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Rings, bars and icon fills: the pastel gradient of the call-to-action border, as before
     brand v2 (founder, 2026-10-05: the pricing cards had the border of the black buttons) */
  --grad-brand: linear-gradient(135deg, #47C8D8, #5B9BD5, #8E85C2, #D08EC8, #E8919F, #F2AA84);
  --grad-line: linear-gradient(90deg, #47C8D8, #5B9BD5 25%, #8E85C2 50%, #D08EC8 72%, #F2AA84);
  --grad-brand-h: linear-gradient(90deg, #47C8D8, #5B9BD5 25%, #8E85C2 50%, #D08EC8 72%, #F2AA84);
  /* the call-to-action border, unchanged */
  --grad-cta: linear-gradient(135deg, #47C8D8, #5B9BD5, #8E85C2, #D08EC8, #E8919F, #F2AA84);
  --grad-cta-h: linear-gradient(90deg, #47C8D8, #5B9BD5 25%, #8E85C2 50%, #D08EC8 72%, #F2AA84);
}
/* The pricing pages keep the serif display face they had before brand v2: titles and prices in
   Instrument Serif (founder, 2026-10-05: the pricing page read worse than the day before) */
:root:has(.pricing-hero) {
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
}

/* Form controls take the page's typeface (browsers give them a system face otherwise);
   the call-to-action classes below are more specific, so they keep Inter. */
button, input, select, textarea {
  font-family: inherit;
}

/* The buttons keep the gradient border and the typeface they had. */
.btn, .cta-button, .nav-cta, .nav-btn, .nav-btn-primary, .nav-btn-dark, .final-cta-btn, .final-cta-btn-primary,
.final-cta-btn-secondary, .btn-primary, .btn-secondary, .btn-ink, .btn-white, .submit-button, .submit-btn,
.modal-submit-btn, .pricing-card-cta, .audience-cta-button, .ideas-cta-btn, .founder-banner-cta, .track-cta,
.track-cta-quiet, .apply-button, .contact-button, .download-button, .view-all-button, .doc-button, .mid-cta a,
.hero-film-skip, button[type="submit"] {
  --grad-brand: var(--grad-cta);
  --grad-line: var(--grad-cta-h);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Text: Inter, as before brand v2. Set in Gabarito, grey text read faint (founder, 2026-10-05);
   Gabarito is for titles. */
body, .pricing-cards, .ld-banner small {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Text size: anything still set in Gabarito below title size is drawn with Inter's x-height
   (Gabarito's lowercase is about 11% shorter at the same font size). No effect on Inter. */
:where(:root:not(:has(.pricing-hero))) body {
  font-size-adjust: 0.545;
}

/* Titles that were set in the serif: Gabarito ExtraBold, like the logo's name */
h1, h2, .ai-title, .cmp-body h2, .cmp-hero h1, .faq-header h2, .founder-banner .founder-banner-title,
.guarantees-title, .ideas-breadth .ideas-title, .ld-h, .nm-card-title, .pricing-card-price, .pricing-hero h1,
.section-title, .comparison-header h2, .final-cta-section h2, .start-title, .trust-title {
  font-size-adjust: none;
}
/* (not on the pricing pages, which keep their serif titles) */
:where(:root:not(:has(.pricing-hero))) h1,
:where(:root:not(:has(.pricing-hero))) h2,
:where(:root:not(:has(.pricing-hero))) .ai-title,
:where(:root:not(:has(.pricing-hero))) .cmp-body h2,
:where(:root:not(:has(.pricing-hero))) .cmp-hero h1,
:where(:root:not(:has(.pricing-hero))) .faq-header h2,
:where(:root:not(:has(.pricing-hero))) .founder-banner .founder-banner-title,
:where(:root:not(:has(.pricing-hero))) .guarantees-title,
:where(:root:not(:has(.pricing-hero))) .ideas-breadth .ideas-title,
:where(:root:not(:has(.pricing-hero))) .ld-h,
:where(:root:not(:has(.pricing-hero))) .nm-card-title,
:where(:root:not(:has(.pricing-hero))) .pricing-card-price,
:where(:root:not(:has(.pricing-hero))) .pricing-hero h1,
:where(:root:not(:has(.pricing-hero))) .section-title,
:where(:root:not(:has(.pricing-hero))) .comparison-header h2,
:where(:root:not(:has(.pricing-hero))) .final-cta-section h2,
:where(:root:not(:has(.pricing-hero))) .start-title,
:where(:root:not(:has(.pricing-hero))) .trust-title {
  font-family: 'Gabarito', 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.stat-item h3 {
  font-size-adjust: none;
}
.comparison-group-row, .ld-banner, .ld-sk-brand, .ld-sk-hero p, .ld-w .ld-media {
  font-family: 'Gabarito', 'Inter', system-ui, -apple-system, sans-serif;
}

/* The logo: the outlined lockup (header) and its light version (footer) */
.logo img.logo-lockup {
  display: inline-block;
  width: auto;
  max-width: none;
  height: 28px;
  border-radius: 0;
  object-fit: contain;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* The header keeps a standard size on tablets and phones too; its menu had dropped to 12px there
   and its button to 10px */
@media (max-width: 1024px) {
  .nav-center a, .nav-login, .nav-btn { font-size: 14px; }
}
@media (max-width: 768px) {
  .nav-btn { font-size: 13px; padding: 8px 12px; }
}
@media (max-width: 400px) {
  .nav-center a { padding-left: 8px; padding-right: 8px; }
  .nav-login { font-size: 13px; padding-left: 4px; padding-right: 4px; }
  .nav-btn { padding-left: 10px; padding-right: 10px; }
}

/* Highlighted words: the logo's violet into its orange, left to right, as agreed with the founder
   (the home hero's "AI team"). Each line of a wrapped highlight gets the whole gradient. */
.hero h1 .highlight, span.highlight, .cmp-hero h1 .highlight, .ideas-closer .grad, .grad, .grad-text,
.success-metric, .code {
  background: linear-gradient(90deg, #6A4BFF, #8C74FF 55%, #FF6A3D) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #6A4BFF !important;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* On the dark stats band the kit's dark-theme violet and orange, which read on ink
   (the light violet start sat at 3.4:1 there) */
.stat-item h3 {
  background: linear-gradient(90deg, #8C74FF, #A48FFF 55%, #FF7A50) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: #8C74FF !important;
}
/* Whole titles are ink; the pricing title had picked up the gradient as a painted box */
.pricing-hero h1, .two-audiences-title {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--n-900, #17181C) !important;
}

/* The hero's ground, as the brand kit's onboarding card: the kit's light grey with a soft violet
   glow from the top right and a soft orange one from the bottom left (founder, 2026-10-05) */
.hero::before {
  background:
    radial-gradient(72% 92% at 104% -8%, rgba(106, 75, 255, 0.16), transparent 70%),
    radial-gradient(72% 92% at -6% 100%, rgba(255, 106, 61, 0.13), transparent 70%),
    #F5F6F8;
}

/* Design system buttons (webmaven_ui Button). The primary is ink with the 2px pastel ring;
   on dark grounds it is white with the same ring; hovering only brightens it. These buttons
   were plain ink or plain white without the ring. */
.nav-btn-primary,
.nav-btn:not(.nav-btn-light):not(.nav-btn-text):not(.nav-btn-dark):not(.nav-btn-ghost),
.ideas-cta-btn,
.doc-button:not(.secondary),
.btn.btn-primary {
  border: 2px solid transparent !important;
  background: linear-gradient(#17181C, #17181C) padding-box, var(--grad-cta) border-box !important;
  color: #fff !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  text-decoration: none !important;
}
.nav-btn-primary:hover,
.nav-btn:not(.nav-btn-light):not(.nav-btn-text):not(.nav-btn-dark):not(.nav-btn-ghost):hover,
.ideas-cta-btn:hover,
.doc-button:not(.secondary):hover,
.btn.btn-primary:hover {
  background: linear-gradient(#17181C, #17181C) padding-box, var(--grad-cta) border-box !important;
  filter: brightness(1.12);
}
.btn-white {
  border: 2px solid transparent !important;
  background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, var(--grad-cta) border-box !important;
  color: #17181C !important;
}
.btn-white:hover {
  background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, var(--grad-cta) border-box !important;
  filter: brightness(0.96);
}

/* Cards keep their own borders and rings (the pastel ring on featured cards, as on the buttons) */

/* Small violet labels on home read clearly: a size up, in the deeper violet (founder, 2026-10-05:
   the purple texts were barely visible) */
.evr-kicker, .evr-eyebrow, .wa-eyebrow, .ai-eyebrow { font-size: 12.5px; color: #5A3FE0; }
.ld-eyebrow, .nm-eyebrow { color: #5A3FE0; }
.ld-tab .ld-num { font-size: 12px; color: #5A3FE0; background: #E9E5FF; }
.ld-tab[aria-selected="true"] .ld-num { color: #fff; background: rgba(255, 255, 255, .16); }
.evr-opt em, .evr-change-top em { font-size: 10.5px; }

/* The six operator cards on the home page: paper headers with orange chips, an ink hover,
   instead of one old palette color per card */
.impact-card { --card-color: #15121F !important; }
.impact-card-header { background-color: #F4F3F8 !important; }
.impact-card-logo svg rect { fill: #FF6A3D !important; }

/* The home page chart: the revenue line in violet, not the old six-color ocean */
#mrrStroke stop, #mrrFill stop { stop-color: #6A4BFF !important; }
.k-mrr { background: #6A4BFF !important; }

/* Investors track record: violet years and the current one in orange, on the dark ground */
.tl-bar { background: #8C74FF !important; }
.tl-year.now .tl-bar { background: #FF7A50 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 48px rgba(255, 122, 80, .5) !important; }
.tl-year.now .tl-label { color: #FF7A50 !important; }
.track .eyebrow { color: #8C74FF !important; }

/* Grounds: the kit's neutral greys, not lavender washes */
:where(:root:not(:has(.pricing-hero))) .ai-ready { background: #F5F6F8 !important; }
.ld-section { background: #FFFFFF !important; }
.nm-scen { background: #F5F6F8 !important; }
.evr-rep-sum { background: #F4F3F8 !important; }

/* Pricing cards: every text a step larger, so each plan reads at a glance (founder, 2026-10-05:
   the texts inside the pricing cards were too small) */
.pricing-card .pricing-card-name { font-size: 17px; }
.pricing-card .pricing-card-outcome { font-size: 15px; }
.pricing-card .pricing-card-description, .pricing-card .pricing-card-offer { font-size: 15px; }
.pricing-card .pricing-card-per-action { font-size: 14.5px; }
.pricing-card .price-period { font-size: 16px; }
.pricing-card .pricing-card-pace { font-size: 16px; line-height: 1.45; }
.pricing-card .pricing-card-features li { font-size: 16px; line-height: 1.5; }
.pricing-card .pricing-card-note { font-size: 14px; }
.pricing-card .pricing-card-cta { font-size: 16px; }
.pricing-card .pricing-card-buynow, .pricing-card .pricing-card-buynow a { font-size: 15px; }
.pricing-card .plan-tag { font-size: 12px; }
.track-grid:not(.track-breadth) .track-card .track-eyebrow { font-size: 12.5px; }
.track-grid:not(.track-breadth) .track-card h3 { font-size: 20px; }
.track-grid:not(.track-breadth) .track-card p { font-size: 16px; }
.track-grid:not(.track-breadth) .track-card li { font-size: 16px; line-height: 1.5; }

/* Readable text on every page (founder, 2026-10-05: "check if there are other pages with similar
   font issues"). From a scan of all pages for text under 15px: running text in cards at least
   15.5px, supporting text 15px, notes and captions 14px, chips and small labels 12px and up.
   Product mock-ups (phones, dashboards, browser bars, slides, print sheets) keep their scale. */
.track-card li, .integration-item p, .nm-steps p, .video-menu-rules li, .tier p, .kpis dd, .cred dt,
.security-card p, .ex-grid .card p, .category-grid .category-card p {
  font-size: 15.5px;
  line-height: 1.55;
}
.about-note p, .cta-card .cta-help, #contact-form .form-group label, .apply-form .form-group label, .comparison-table-row .comparison-value,
.asset-body p, .ladder-note, .cmp-hero-cta p, .cmp-others p, .cmp-others a, .aw figcaption .aw-note, .awards-strip li,
.service-what, .section-note, .faq-answer-content .faq-chips li, .wa-caption, .dl .meta p, .related-article-content .read-more,
.article-card-footer .read-more {
  font-size: 15px;
}
.fine.frame-note, .fine.hero-note, .comparison-footnotes p, .tl-items li, .shot-cap, .cb-label, .cb-count,
.cb-legend, .bw-meta span, .wrap > .notice, .form-group .help-text, .ugc-note, .nm-fine, .nm-note, .ld-note,
.comparison-feature-note, .bf-label, .review cite, .evr-foot, .chart-caption, .faq-answer-content .faq-visual-note,
.faq-shot figcaption, .faq-visual figcaption, .hero-awards-lead, .trust-badge span:not(.trust-icon), .priority-card p,
.ugc-card span, .nm-plan li, .template-meta, .swatch-body {
  font-size: 14px;
}
.nm-tiles span { font-size: 13.5px; }
.ideacard .pitch { font-size: 13.5px; }
.evr-ai-list li { font-size: 13.5px; }
.hv2-chip { font-size: 14.5px; }
.related-article-category, .ex-grid .tag, .card .tag, .roi-label, .role .team, .evr-cap { font-size: 12.5px; }
.ideacard .chip, .track-live, .evr-nets-note { font-size: 12px; }

/* The footer's legal links wrap on phones instead of pushing the page sideways */
.footer-bottom-links { flex-wrap: wrap; row-gap: 8px; }

/* Article breadcrumbs wrap on phones instead of running off the side */
.breadcrumb { flex-wrap: wrap; row-gap: 4px; }

/* Pricing menu: the three audiences under Pricing in the header. With a mouse it opens on hover or
   keyboard focus and Pricing itself opens the page for your own business; on touch screens and
   phones a tap opens them in a sheet (below). */
.nav-pricing { position: relative; }
.nav-pricing > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-3px) rotate(45deg);
  opacity: .75; transition: transform .2s ease; }
.nav-pricing:hover > a::after, .nav-pricing:focus-within > a::after { transform: translateY(1px) rotate(225deg); }
.nav-center .nav-pricing-menu { position: absolute; left: 50%; top: 100%; width: 344px; margin-top: 12px; padding: 8px; z-index: 60;
  background: #FFFFFF; border: 1px solid #E2E4EA; border-radius: 16px; box-shadow: 0 22px 48px -18px rgba(23, 24, 28, .32);
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px); transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s; }
.nav-center .nav-pricing-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-pricing:hover .nav-pricing-menu, .nav-pricing:focus-within .nav-pricing-menu {
  opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .15s ease, transform .15s ease; }
.nav-center .nav-pricing-menu a { display: block; padding: 12px 14px; border-radius: 11px; background: none; color: #17181C;
  text-decoration: none; white-space: normal; font-size: 15px; line-height: 1.35; }
.nav-center .nav-pricing-menu a:hover, .nav-center .nav-pricing-menu a:focus-visible { background: #F4F3F8; color: #17181C; }
.nav-center .nav-pricing-menu b { display: block; font-weight: 650; }
.nav-center .nav-pricing-menu span { display: block; font-size: 13.5px; color: #6E7382; margin-top: 3px; }
@media (hover: none), (max-width: 768px) {
  .nav-center .nav-pricing-menu { display: none; }
}
/* On touch screens and phones, a tap on Pricing opens the same three choices in a sheet under
   the header (js/nav-pricing.js) */
.nav-pricing-sheet { position: fixed; left: 12px; right: 12px; z-index: 10000; padding: 8px; background: #FFFFFF;
  border: 1px solid #E2E4EA; border-radius: 16px; box-shadow: 0 24px 52px -18px rgba(23, 24, 28, .38);
  animation: nav-sheet-in .16s ease-out; }
.nav-pricing-sheet a { display: block; padding: 13px 14px; border-radius: 11px; text-decoration: none; color: #17181C;
  font-size: 16px; line-height: 1.35; }
.nav-pricing-sheet a:hover, .nav-pricing-sheet a:active, .nav-pricing-sheet a:focus-visible { background: #F4F3F8; }
.nav-pricing-sheet b { display: block; font-weight: 650; }
.nav-pricing-sheet span { display: block; font-size: 14px; color: #6E7382; margin-top: 3px; }
@keyframes nav-sheet-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (min-width: 560px) { .nav-pricing-sheet { left: auto; right: 16px; width: 380px; } }
@media (prefers-reduced-motion: reduce) { .nav-pricing-sheet { animation: none; } }

/* Monthly / Annual on the pricing page reads as a switch (founder, 2026-10-05: it did not look
   like one): a white track with a visible edge, and the chosen period filled ink. The 2 months
   free badge stays on Annual. */
.billing-toggle { gap: 4px; padding: 5px; background: #FFFFFF; border: 1px solid #CDD0DA;
  box-shadow: 0 6px 18px -10px rgba(23, 24, 28, .25); }
.billing-toggle .billing-option { display: inline-flex; align-items: center; padding: 11px 24px; font-size: 16px; color: #4A4E5A;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.billing-toggle .billing-option:hover { color: #17181C; background: #F4F3F8; }
.billing-toggle .billing-option.active { background: #17181C; color: #FFFFFF; box-shadow: 0 3px 8px -3px rgba(23, 24, 28, .45); }
.billing-toggle .billing-option:focus-visible { outline: 2px solid #6A4BFF; outline-offset: 2px; }
@media (max-width: 420px) { .billing-toggle .billing-option { padding: 10px 16px; font-size: 15px; } }

/* The header menu row on phones fades in with borderAppear, which only style.css defined; the
   pricing and comparison pages do not load it, so their row stayed invisible (and was hidden at
   640px). Same keyframes as style.css. */
@keyframes borderAppear { 0% { opacity: 0; transform: scaleX(0.85); } 100% { opacity: 1; transform: scaleX(1); } }

/* Phones: the header keeps to two rows, the logo and its buttons, then the menu. The pricing and
   comparison pages' header ended 16px from the edge and wrapped by a pixel at 360; on the
   agencies page the second text link (Talk to us) moves out of the header on phones, as every
   White label card carries its own Talk to us. */
@media (max-width: 480px) {
  .nav-right { margin-right: 6px; }
  .nav-right .nav-login + .nav-login { display: none; }
}