/* English look layer: every English page follows /es/pricing (Vytas, 2026-10-31).
   Rules and numbers: tasks/design-system/BRIEF-es-pricing.md. Measured from /es/pricing at 1512 and 390.
   Loaded only on English pages through res.locals.cfLookSheets, so the 12 locales cannot change.
   Selectors in family files start with `html body` to beat the older sheets. */
:root {
  --lk-black: #000000;
  --lk-lime: #d1fe17;
  --lk-paper: #ffffff;
  --lk-frame: #f4f4f5;
  --lk-text-2: #6b7280;
  --lk-on-black-2: #a1a1aa;
  --lk-h1: 58px;
  --lk-h2: 44px;
  --lk-h3: 24px;
  --lk-lead: 19px;
  --lk-sub: 18px;
  --lk-section-y: 36px;
  --lk-hero-pad: 128px 24px 56px;
  --lk-frame-pad: 16px;
  --lk-gap: 12px;
  --lk-width: 1288px;
}
@media (max-width: 767px) {
  :root {
    --lk-h1: 36px;
    --lk-h2: 30px;
    --lk-section-y: 24px;
    --lk-hero-pad: 92px 18px 36px;
  }
}

/* Vytas ruled these out on English on 2026-10-30, and the older templates still carry them. */
html body :is(.cf-fg__pause, .uc9-pro, .cf-uc-platform__card-tags, .cf-grow__card-plan) { display: none !important; }

/* Closing section, same as /es/pricing on every page. Numbers from pricing-redesign-2026-07.css, which most pages do not load. */
html body .cf-final-cta { padding: var(--lk-section-y) 0 !important; background: var(--lk-paper) !important; }
html body:not(#_) .cf-final-cta__inner { width: min(var(--lk-width), calc(100% - 32px)) !important; max-width: none !important; margin-inline: auto !important; }
html body .cf-final-cta__card { display: block !important; max-width: none !important; padding: clamp(36px, 3.6vw, 52px) 24px !important; border-radius: 24px !important; }
html body :is(.cf-final-cta__visual, .hp9-close) { display: none !important; }
html body .cf-final-cta__content { display: flex !important; flex-direction: column; align-items: center !important; max-width: 600px !important; margin: 0 auto !important; text-align: center !important; }
html body section h2.cf-final-cta__title { font-size: clamp(30px, 3.1vw, 44px) !important; line-height: 1.05 !important; text-align: center !important; }
html body .cf-final-cta__subtitle { margin: 12px auto 20px !important; color: var(--lk-on-black-2) !important; text-align: center !important; }
html body a.cf-final-cta__button { height: 48px !important; min-height: 0 !important; padding: 0 24px !important; border-radius: 8px !important; font-size: 16px !important; }

/* The header button is lime at every width. Some older phone rules paint it white. */
html body #navbar .nav-actions .btn-primary { background: var(--lk-lime) !important; border: 0 !important; color: #000 !important; }
html body #navbar .nav-actions .btn-primary * { color: #000 !important; }

/* One header on every English page: the /es/pricing sizes. Some older sheets change the button and the bar height. */
@media (min-width: 1100px) {
  html body #navbar.navbar { height: 76px !important; }
  html body #navbar .nav-actions .btn { height: 40px !important; min-height: 0 !important; font-size: 16px !important; font-weight: 600 !important; border-radius: 8px !important; }
  html body #navbar .nav-actions .btn-primary { padding: 0 20px !important; background: var(--lk-lime) !important; border: 0 !important; color: #000 !important; }
  html body #navbar .nav-actions .btn-secondary { background: transparent !important; color: var(--lk-paper) !important; }
}

/* Vytas, 2026-10-31: related links are one line of text, not a section. */
html body:not(#_) .cf-also { width: min(820px, calc(100% - 32px)); margin: 8px auto 28px; color: var(--lk-text-2); font-size: 15px; font-weight: 400; line-height: 1.5; text-align: center; }
html body:not(#_) .cf-also a { color: var(--lk-black); text-decoration: underline; text-underline-offset: 2px; }
html body:not(#_) :is(.related-pages-section, .guide-related, .related-examples, .help-keep-reading) { padding: 4px 0 20px !important; background: var(--lk-paper) !important; text-align: center !important; }
html body:not(#_) :is(.related-pages-section, .guide-related, .related-examples, .help-keep-reading) > * { display: block !important; width: min(820px, calc(100% - 32px)) !important; margin-inline: auto !important; padding: 0 !important; text-align: center !important; }
html body:not(#_) :is(.related-pages-section, .guide-related, .related-examples, .help-keep-reading) :is(h2, .section-title, .section-title-center, .related-title, .help-keep-reading__title) { display: inline !important; margin: 0 !important; color: var(--lk-text-2) !important; font-size: 15px !important; font-weight: 400 !important; letter-spacing: 0 !important; line-height: 1.5 !important; }
html body:not(#_) :is(.related-pages-section, .guide-related, .related-examples, .help-keep-reading) :is(h2, .section-title, .section-title-center, .related-title, .help-keep-reading__title)::after { content: ": "; }
html body:not(#_) :is(.related-pages-grid, .related-grid, .related-examples-grid, .help-keep-reading__grid, .help-kr-list) { display: inline !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border-radius: 0 !important; }
html body:not(#_) :is(.related-page-card, .related-card, .related-example-card, .help-kr-card) { display: inline !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--lk-black) !important; font-size: 15px !important; font-weight: 400 !important; text-decoration: underline !important; text-underline-offset: 2px; }
html body:not(#_) :is(.related-page-card, .related-card, .related-example-card, .help-kr-card) * { display: inline !important; margin: 0 !important; padding: 0 !important; color: inherit !important; font: inherit !important; letter-spacing: 0 !important; }
html body:not(#_) :is(.related-page-card, .related-card, .related-example-card, .help-kr-card) :is(img, svg, picture, .iconify, p, .related-card__image, .related-card__arrow, .related-page-arrow, [class*="arrow"], [class*="desc"]) { display: none !important; }
html body:not(#_) :is(.related-page-card, .related-card, .related-example-card, .help-kr-card):not(:last-child)::after { content: ", "; display: inline; color: var(--lk-text-2); }
html body:not(#_) :is(.related-page-card, .related-card, .related-example-card, .help-kr-card):last-child::after { content: "."; display: inline; color: var(--lk-text-2); }

/* Close: tighter, one short line, no arrow. The words come from routes/modules/close-copy.js. */
html body:not(#_) .cf-final-cta { padding: 12px 0 var(--lk-section-y) !important; }
html body:not(#_) .cf-final-cta__card { padding: 40px 24px !important; }
html body:not(#_) .cf-final-cta__content { max-width: 760px !important; }
html body:not(#_) section h2.cf-final-cta__title { margin: 0 !important; font-size: clamp(28px, 2.8vw, 40px) !important; line-height: 1.1 !important; letter-spacing: -.03em !important; text-wrap: balance; }
html body:not(#_) .cf-final-cta__subtitle { max-width: 600px !important; margin: 10px auto 18px !important; font-size: 16px !important; line-height: 1.45 !important; text-wrap: balance; }
html body:not(#_) a.cf-final-cta__button { gap: 0 !important; }
html body:not(#_) a.cf-final-cta__button svg { display: none !important; }

/* Dropdowns: one design for every page and language lives in common/navigation_sitemap.pug (2026-11-04). */
html body:not(#_):not(#_) #navbar .nav-menu > .nav-item.has-dropdown:hover > a,
html body:not(#_):not(#_) #navbar .nav-menu > .nav-item.has-dropdown.active > a { color: #fff !important; opacity: 1 !important; }
/* Phone menu: same rows and words, 44px tall. */
html body:not(#_):not(#_) .mobile-menu-fullscreen .mobile-menu-link { min-height: 44px; }
html body:not(#_):not(#_) .mobile-menu-fullscreen .mobile-section-label { font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; color: #a1a1aa !important; }
html body:not(#_):not(#_) .mobile-menu-fullscreen .mobile-menu-footer { gap: 10px; }

/* Footer wordmark: same words, size and weight as the header, white on the black footer. */
html body:not(#_):not(#_) .footer-modern .footer-logo-text { font-size: 1.05rem; font-weight: 700; letter-spacing: 0; line-height: 1; white-space: nowrap; color: #fff; }
@media (max-width: 767px) {
  html body:not(#_):not(#_) .footer-modern .footer-logo-text { font-size: .9rem; }
}

/* English pages on phones (2026-10-31). Reasons and the check: tasks/todo-mobile-2026-10-31.md, scripts/ds/mobile-audit.js.
   Hit areas are 44px. Text links grow with padding and a matching negative margin, so the layout does not move. */
@media (max-width: 767px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  /* Header: one button size on every page (it was 95x32, 108x40 or 138x48). */
  html body:not(#_):not(#_):not(#_) #navbar .nav-actions .btn-primary { height: 40px !important; min-height: 0 !important; padding: 0 14px !important; font-size: 14px !important; line-height: 1 !important; border-radius: 8px !important; }
  html body:not(#_):not(#_):not(#_) #mobile-menu-btn { display: inline-flex !important; align-items: center; justify-content: center; width: 44px !important; height: 44px !important; margin: -4px -6px -4px 0 !important; }

  /* Under 16px, iPhones zoom the page when a field gets focus. */
  html body:not(#_):not(#_):not(#_) :is(input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=hidden], [type=file]), select, textarea) { font-size: 16px !important; }

  /* A sticky heading sat on top of the questions under it. */
  html body#tv9:not(#_) .tool-faq h2, html body:not(#_):not(#_) h2.faq-title { position: static !important; }
  html body#tv9:not(#_) .btn--secondary:has(> svg) { display: flex; align-items: center; justify-content: center; gap: 8px; }

  /* Buttons and chips people press. */
  html body:not(#_):not(#_) :is(.fp-copy, .co-copy, .ix-copy, .k-ex__copy, .skill-copy, .hw-seek, .hw-link, .hw-rail__row, .ix-links a, .ix-links__all, .cft-chip, .hub-chip, .skills-filter, .tool-tab, .cft-picks__link, .mg-mini-btn, .cg-mini-btn, .mg-ghost-btn, .cg-ghost-btn, .mg-download-btn, .cg-download-btn, .filter-btn, .sz-chip, .sz-size, .month-nav-btn, .device-btn, .bg-color-btn, .color-btn, .align-btn, .preview-nav-btn, .prompt-card__copy, .prompt-card__expand, .preview-action-btn, .suggestion-chip, .package-remove, .comparison-cta, .roi-btn, #roiAccountsDown, #roiAccountsUp, .glossary-alphabet__letter, .cf-sol-social-proof__cta-secondary) { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; box-sizing: border-box; }
  html body:not(#_):not(#_) .tool-tab { justify-content: center; }
  html body:not(#_):not(#_) summary:is(details.cf-small > *) { display: flex; align-items: center; min-height: 44px; }
  html body:not(#_):not(#_):not(#_) a.cf-final-cta__button { height: 48px !important; }

  /* Text links that stand alone. */
  html body:not(#_):not(#_) :is(.fp-links a, .fp-band__link, .fp-tp, .k-facts__more a, .k-proof__rate a, .mca-more a, .mca-textlink, .mca-card p > a:only-child, .mca-needs__tools a, .ix-link, .co-link, .co-crumb a, .hw-crumb a, .co-route a, .co-triggers a, .co-card h3 a, .tv-value__free, .tool-related__directory a, .hub-band__link, .hub-plans__compare, .cft-band__link, .rv-story__who, .tools-seo__list a, .skill-card__link, .glossary-term-card__link, .sitemap-section__link, .roi-planbox__secondary, .hx-uc__all, .hx-tp, .hx-plans__all, .breadcrumb-link, .author-link, figcaption span > a, dd > a, .v3-src__list a) { display: inline-block; padding-block: 12px; margin-block: -12px; }
  html body:not(#_):not(#_) .co-toc a { display: block; padding-block: 8px; margin-block: -2px; }

  /* Headings and sentences that ran 8px from the screen edge. */
  html body:not(#_):not(#_) :is(.hw-head, .cf-hp-faq__header, .fp-links, .k-facts__more, .k-proof__rate, .k-steps__test p, .cft-section .cft-w > :is(h2, .cft-answer), .skills-directory__intro, .guide-section__text, .guide-section__title, .mca-wrap > :is(.mca-eyebrow, h2, .mca-lead), .comparison-table-section .container > :is(.mca-eyebrow, .section-title, .mca-lead, .section-subtitle), .faq-section .section-title-center, h2.a-h-l) { padding-inline: 8px !important; box-sizing: border-box; }

  /* Grids that pushed cards past the edge on 320 and 360 screens. */
  html body:not(#_):not(#_) :is(.ix-steps, .ix-know, .ix-proof, .ix-ba) { grid-template-columns: minmax(0, 1fr); }
  html body:not(#_):not(#_) :is(.ix-ui__row, .ix-ui__line) { flex-wrap: wrap; }
  html body:not(#_):not(#_) .tool-tabs__container { max-width: 100%; padding-inline: 12px; box-sizing: border-box; }

  /* Bottom button: lime on every page, and gone when the footer arrives. The footer's own text sat under it. */
  html body:not(#_):not(#_) .cf-ds-sticky .cf-ds-btn { background: var(--lk-lime) !important; color: #000 !important; }
  html.cf-at-footer body:not(#_):not(#_) :is(.v3-sticky, .ix-sticky, .cf-ds-sticky, .cf-home-sticky, .hm-sticky, .hx-sticky, .hub-bar) { transform: translateY(110%) !important; visibility: hidden; }

  /* Footer: groups open and close, so it is one screen and a half instead of three. Without JavaScript every link shows. */
  html body:not(#_):not(#_) .footer-modern.is-acc .footer-content { display: block; }
  html body:not(#_):not(#_) .footer-modern.is-acc .footer-column { margin: 0; padding: 0; border-bottom: 1px solid #27272a; }
  html body:not(#_):not(#_) .footer-modern.is-acc .footer-column-title { margin: 0; padding: 0; }
  html body:not(#_):not(#_) .footer-modern.is-acc .footer-acc { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; padding: 0; background: none; border: 0; color: #fff; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; cursor: pointer; }
  html body:not(#_):not(#_) .footer-modern.is-acc .footer-acc::after { content: "+"; font-size: 20px; font-weight: 400; line-height: 1; }
  html body:not(#_):not(#_) .footer-modern.is-acc .footer-column.is-open .footer-acc::after { content: "\2212"; }
  html body:not(#_):not(#_) .footer-modern.is-acc .footer-column:not(.is-open) > :not(.footer-column-title) { display: none; }
  html body:not(#_):not(#_) .footer-modern.is-acc .footer-column.is-open { padding-bottom: 8px; }
  html body:not(#_):not(#_) .footer-modern .footer-link { display: flex; align-items: center; min-height: 44px; padding-block: 0; font-size: 15px; line-height: 1.25; }
  html body:not(#_):not(#_) .footer-modern .social-link { width: 44px; height: 44px; }
  html body:not(#_):not(#_) .footer-modern .cf-lang-trigger { min-height: 44px; }
  html body:not(#_):not(#_) .footer-modern .footer-logo-link { display: inline-flex; align-items: center; min-height: 44px; }
  html body:not(#_):not(#_) .footer-modern .footer-legal-link { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; color: #a1a1aa; font-size: 13px; }
  html body:not(#_):not(#_) .footer-modern :is(.footer-description, .footer-copyright, .footer-company-info, .footer-disclaimer-text) { font-size: 13px !important; }

  /* Legal tables: one card per row. Five columns in 358px broke words in the middle. */
  html body:not(#_):not(#_) .legal-table:has(th:nth-child(5)) thead { display: none; }
  html body:not(#_):not(#_) .legal-table:has(th:nth-child(5)), html body:not(#_):not(#_) .legal-table:has(th:nth-child(5)) :is(tbody, tr, td) { display: block; width: 100%; box-sizing: border-box; }
  html body:not(#_):not(#_) .legal-table:has(th:nth-child(5)) tr { padding: 12px 14px; border-bottom: 1px solid #e4e4e7; }
  html body:not(#_):not(#_) .legal-table:has(th:nth-child(5)) td { padding: 2px 0; border: 0; font-size: 14px !important; line-height: 1.45; word-break: normal; overflow-wrap: break-word; }
  html body:not(#_):not(#_) .legal-table:has(th:nth-child(5)) td:first-child { font-weight: 600; color: #000; }
  html body:not(#_):not(#_) .legal-table:has(th:nth-child(5)) td:nth-child(n + 2)::before { color: #6b7280; }
  html body:not(#_):not(#_) .legal-table:has(th:nth-child(5)) td:nth-child(2)::before { content: "Provider: "; }
  html body:not(#_):not(#_) .legal-table:has(th:nth-child(5)) td:nth-child(3)::before { content: "Purpose: "; }
  html body:not(#_):not(#_) .legal-table:has(th:nth-child(5)) td:nth-child(4)::before { content: "Type: "; }
  html body:not(#_):not(#_) .legal-table:has(th:nth-child(5)) td:nth-child(5)::before { content: "Duration: "; }
  html body:not(#_):not(#_) .legal-toc__link { display: block; padding-block: 10px; font-size: 14px; }

  /* Small parts that read badly on one page or template. */
  html body:not(#_):not(#_) .sitemap-hero__stats { color: #000 !important; }
  html body:not(#_):not(#_) .sitemap-section { min-width: 0; }
  html body:not(#_):not(#_) .sitemap-section__title { font-size: 20px !important; }
  html body:not(#_):not(#_) .sitemap-section__links { min-width: 0; grid-template-columns: minmax(0, 1fr) !important; }
  html body:not(#_):not(#_) .cf-home-hero__trust-bar { flex-direction: column; gap: 8px; padding: 12px 16px; border-radius: 20px; }
  html body:not(#_):not(#_) .cf-home-hero__trust-divider { display: none; }
  html body:not(#_):not(#_) .fp-conn__row em { font-size: 13px !important; }
  /* Calendar: two letters and dots said nothing, so each holiday is a colour block. Tap it for the name and hashtags. */
  html body:not(#_):not(#_) .holiday-tag { display: block; width: 100%; height: 22px; padding: 0; font-size: 0; }
}
/* A phone turned sideways after load keeps the footer's buttons, so they must read as plain titles above 767. */
html body:not(#_):not(#_) .footer-modern .footer-acc { padding: 0; background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; }
/* Sideways phones: both menu buttons on one row leave room for the links. */
@media (max-height: 480px) {
  html body:not(#_):not(#_) .mobile-menu-fullscreen .mobile-menu-footer { flex-direction: row; }
  html body:not(#_):not(#_) .mobile-menu-fullscreen .mobile-menu-footer a { flex: 1; }
}