/* Mirrored for right-to-left pages from public/css/brand-v2.css by scripts/build-locales.mjs: do not edit. */
/* 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. */

/* The two fonts, each in two files (performance pass 2026-10-06). The "core" file holds every
   character the pages use today (English, the accents in the names we show, the usual
   punctuation) and is the one a page waits for: 29 KB of Inter instead of 48, 22 KB of
   Gabarito instead of 58. The "rest" file holds the remaining Latin characters and is fetched
   only by a page that shows one. Same drawings, all weights; the features the pages do not ask
   for (fractions, alternates) are left out. This sheet is linked last, so these rules win
   over a page's own declaration of Inter, which then is never fetched. 21 article pages
   named Inter without declaring it at all; their text was drawn with whatever sans-serif
   the device had, and is now in Inter like the rest of the site. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-core.woff2') format('woff2');
  unicode-range: U+0000-001F, U+0020-007E, U+00A0, U+00A9, U+00AB, U+00AE, U+00B0, U+00B7, U+00BB, U+00C0-00C1, U+00C7-00C9, U+00D3-00D4, U+00D7, U+00E0-00E2, U+00E7-00EB, U+00ED-00EF, U+00F1, U+00F3-00F4, U+00F6, U+00F9-00FC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-rest.woff2') format('woff2');
  unicode-range: U+00A1-00A8, U+00AA, U+00AC, U+00AF, U+00B1-00B6, U+00B8-00BA, U+00BC-00BF, U+00C2-00C6, U+00CA-00D2, U+00D5-00D6, U+00D8-00DF, U+00E3-00E6, U+00EC, U+00F0, U+00F2, U+00F5, U+00F7-00F8, U+00FD-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2002, U+2009, U+200B, U+2032-2033, U+2044, U+FEFF;
}
@font-face {
  font-family: 'Gabarito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/gabarito-core.woff2') format('woff2');
  unicode-range: U+0000-001F, U+0020-007E, U+00A0, U+00A9, U+00AB, U+00AE, U+00B0, U+00B7, U+00BB, U+00C0-00C1, U+00C7-00C9, U+00D3-00D4, U+00D7, U+00E0-00E2, U+00E7-00EB, U+00ED-00EF, U+00F1, U+00F3-00F4, U+00F6, U+00F9-00FC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2122, U+2190-2193, U+2212;
}
@font-face {
  font-family: 'Gabarito';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/gabarito-rest.woff2') format('woff2');
  unicode-range: U+00A1-00A8, U+00AA, U+00AC, U+00AF, U+00B1-00B6, U+00B8-00BA, U+00BC-00BF, U+00C2-00C6, U+00CA-00D2, U+00D5-00D6, U+00D8-00DF, U+00E3-00E6, U+00EC, U+00F0, U+00F2, U+00F5, U+00F7-00F8, U+00FD-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2000-200C, U+202F-2030, U+2044, U+205F;
}
/* Until Gabarito arrives a title is drawn with Inter, which runs 11% wider: the title could
   take one line more and then jump back, moving the page under the reader. This stand-in
   is Inter at Gabarito's width and line height, so the swap keeps every line where it is. */
@font-face {
  font-family: 'Gabarito Fallback';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-core.woff2') format('woff2');
  unicode-range: U+0000-001F, U+0020-007E, U+00A0, U+00A9, U+00AB, U+00AE, U+00B0, U+00B7, U+00BB, U+00C0-00C1, U+00C7-00C9, U+00D3-00D4, U+00D7, U+00E0-00E2, U+00E7-00EB, U+00ED-00EF, U+00F1, U+00F3-00F4, U+00F6, U+00F9-00FC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2122, U+2191, U+2193, U+2212;
  size-adjust: 90%;
  ascent-override: 94%;
  descent-override: 26%;
  line-gap-override: 0%;
}

:root {
  --brand-ink: #15121F;
  --brand-violet: #6A4BFF;
  --brand-orange: #FF6A3D;
  --font-display: 'Gabarito', 'Gabarito Fallback', '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', 'Gabarito Fallback', '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', 'Gabarito Fallback', '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-right: 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: #666B7A; 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: #666B7A; 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 { right: auto; left: 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; }
}

/* Pictures that wait for the first paint (performance pass 2026-10-06). A page that wants it
   adds img-hold to <html> from a script in its head and takes it off at the first paint (or
   after 1.5 s whatever happens), so these files are not fetched together with the styles and
   fonts the first paint needs. Each of them sits in a frame that keeps its own size, so
   nothing moves when it arrives. Without scripts the class is never set. */
.img-hold .bw-shot img, .img-hold .sc-wall img, .img-hold .ex-grid .thumb img { display: none; }

/* The footer's six round links are 320px wide with their 16px gaps. On phones narrower than
   360px the gaps tighten, so the row fits and the links stay round. The footer's own rule sits
   in five different stylesheets; this is the one file every page loads. */
@media (max-width: 359px) {
  footer .footer-social { gap: 8px; }
}

/* The language menu (founder 706 and 723 B, 2026-10-29; every language the setup screens speak,
   2026-11-02), in the header and the footer of every page that has translations.
   scripts/build-locales.mjs writes it: a <details> whose button shows a globe and the language the
   page is in, and the list of every language in its own words, the page's own marked with a check.
   It opens and closes without scripts; js/wpm-lang.js remembers the choice, closes it on Escape or a
   click outside, and on phones places the list under the header. Small and quiet like the links
   around it: grey, dark on hover and while open. In the header on tablets and phones only the globe
   shows, in the space left of Log in and outside the row's flow, so the header keeps its size; in
   the footer it sits on the logo's line, at the end of the column, also outside the flow, and its
   list opens upward. Logical properties throughout, so the right-to-left pages mirror it; the
   names keep their own direction (unicode-bidi: plaintext). */
.wpm-lang { position: relative; display: inline-block; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px; font-weight: 600; line-height: 1; }
.wpm-lang > summary { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 8px; color: #6B7080;
  cursor: pointer; list-style: none; white-space: nowrap; -webkit-user-select: none; user-select: none;
  transition: color .15s ease, background .15s ease; }
.wpm-lang > summary::-webkit-details-marker { display: none; }
.wpm-lang > summary::after { content: ""; width: 5px; height: 5px; margin: -3px 1px 0; border: solid currentColor;
  border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.wpm-lang[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.wpm-lang > summary:hover, .wpm-lang[open] > summary { color: #17181C; background: #EDEEF2; }
.wpm-lang > summary:focus-visible { outline: 2px solid #6A4BFF; outline-offset: 1px; }
.wpm-lang svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.3; }
details.wpm-lang > ul { position: absolute; z-index: 1100; top: calc(100% + 8px); inset-inline-end: 0; display: grid;
  grid-template-columns: repeat(3, minmax(9.5em, auto)); gap: 2px; width: max-content; max-width: calc(100vw - 24px);
  max-height: min(72vh, 560px); overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 8px; list-style: none;
  background: #FFFFFF; border: 1px solid #E2E4EA; border-radius: 14px; box-shadow: 0 24px 52px -18px rgba(23, 24, 28, .38);
  text-align: start; }
details.wpm-lang > ul > li { margin: 0; padding: 0; list-style: none; }
details.wpm-lang > ul > li > a { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 9px; color: #3D4250;
  font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0; text-decoration: none; white-space: nowrap;
  unicode-bidi: plaintext; }
details.wpm-lang > ul > li > a:hover { color: #17181C; background: #F4F3F8; }
details.wpm-lang > ul > li > a:focus-visible { outline: 2px solid #6A4BFF; outline-offset: -2px; }
details.wpm-lang > ul > li > a[aria-current] { color: #17181C; font-weight: 650; background: #F4F3F8; }
details.wpm-lang > ul > li > a[aria-current]::after { content: ""; flex: none; width: 4px; height: 8px; margin: -2px auto 0 2px;
  border: solid #6A4BFF; border-width: 0 2px 2px 0; transform: rotate(45deg); }
header .nav-right > .wpm-lang { margin-inline-end: 2px; }
@media (max-width: 1024px) {
  header .nav-right > .wpm-lang { position: absolute; inset-inline-end: 100%; top: 50%; margin-top: -14px; margin-inline-end: 4px; }
  header .nav-right > .wpm-lang > summary { padding: 5px; border: 1px solid #E2E4EA; background: rgba(255, 255, 255, .7); }
  header .nav-right > .wpm-lang > summary::after { display: none; }
  header .nav-right > .wpm-lang > summary > span { position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  header .nav-right > details.wpm-lang > ul { position: fixed; top: 72px; inset-inline: 12px; width: auto; max-width: none;
    grid-template-columns: repeat(auto-fill, minmax(10em, 1fr)); max-height: calc(100vh - 96px); }
}
@media (min-width: 560px) and (max-width: 1024px) {
  header .nav-right > details.wpm-lang > ul { inset-inline-start: auto; width: 520px; }
}
footer .footer-brand { position: relative; }
footer .footer-brand > .wpm-lang { position: absolute; top: -4px; inset-inline-end: 24px; }
footer .wpm-lang > summary { color: rgba(255, 255, 255, .6); }
footer .wpm-lang > summary:hover, footer .wpm-lang[open] > summary { color: #FFFFFF; background: rgba(255, 255, 255, .08); }
footer .wpm-lang > summary:focus-visible { outline-color: #FFFFFF; }
footer details.wpm-lang > ul { top: auto; bottom: calc(100% + 8px); grid-template-columns: repeat(2, minmax(9.5em, auto)); }
@media (max-width: 768px) {
  footer .footer-brand > .wpm-lang { inset-inline-end: 0; }
}
/* The 43 languages a model writes run longer than English in places (founder, 2026-11-02: every
   language of the setup screens). Every translated page was rendered at 390px; what ran out of its
   box is let wrap here, never cut: a long word breaks where it must (a German or Finnish compound,
   a Russian heading; in the small tiles and the FAQ's picture captions anywhere in it), headings
   and the idea cards' titles hyphenate where the language allows it,
   and the hero's start button, the idea cards' tags, the Everything included footnote's link and
   the billing switch may take two lines. English and French pages are not touched. */
html:not([lang="en"]):not([lang="fr"]) body { overflow-wrap: break-word; }
html:not([lang="en"]):not([lang="fr"]) :is(h1, h2, h3, .ideacard .hook, .hv-tile, .faq-answer-content) { -webkit-hyphens: auto; hyphens: auto; }
html:not([lang="en"]):not([lang="fr"]) :is(.hv-tile, .faq-visual figcaption) { overflow-wrap: anywhere; }
html:not([lang="en"]):not([lang="fr"]) .hero-submit.btn { white-space: normal; }
/* Japanese breaks a title between phrases, not inside a word ("説明するだ / け"). */
html[lang="ja"] :is(h1, h2, h3, h4) { word-break: auto-phrase; }
html:not([lang="en"]):not([lang="fr"]) .ideacard .chip { white-space: normal; max-width: calc(100% - 20px); }
html:not([lang="en"]):not([lang="fr"]) .evr-foot a { white-space: normal; }
@media (max-width: 600px) {
  html:not([lang="en"]):not([lang="fr"]) .billing-toggle { flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 100%; border-radius: 26px; }
  html:not([lang="en"]):not([lang="fr"]) .billing-toggle .billing-option { padding-left: 16px; padding-right: 16px; }
}
/* The role names drawn in the What your team does cards (an SVG <text> after the icon) are longer
   in some languages than the drawing's width: they run past it instead of being cut. */
.impact-card-logo svg { overflow: visible; }
/* The not-found page: its slim bar and its row of legal links. */
.nav > .wpm-lang { margin-inline-start: auto; }
footer.legal > .wpm-lang > summary { padding-top: 4px; padding-bottom: 4px; }