/* E4/E5/E13/E14 only. The shared bridge stays LAST. All stronger selectors
   require the isolated build marker. Header, runtime and motion stay owned. */
@font-face {
  font-family: Newsreader; src: url("homepage-voices/fonts/newsreader.woff2") format("woff2");
  font-style: normal; font-weight: 200 800; font-display: swap;
}
@font-face {
  font-family: "Newsreader Fallback"; src: local("Georgia");
  size-adjust: 88.483570%; ascent-override: 83.066269%; descent-override: 29.949063%; line-gap-override: 0%;
}
body[data-public-body-brand] {
  --body-c-pad: clamp(20px, 4.4vw, 64px);
  --body-c-serif: "Newsreader", "Newsreader Fallback", Georgia, serif;
  --select: rgb(78 163 255 / 22%);
}
@media (prefers-color-scheme: dark) {
  body[data-public-body-brand] { --select: rgb(78 163 255 / 28%); }
}
/* Footer exception: reuse the exact original master letter geometry. The old
   decorative paths remain opaque source bytes but are never painted here.
   The only bar in this footer belongs to the wordmark, not a divider. */
body[data-public-body-brand] .product-footer.product-footer.column {
  --ink: #FFF7F0; --muted: #BFB2A9; --accent-ink: #FFF7F0;
  width: 100%; max-width: none; margin-inline: 0; padding: 40px max(var(--body-c-pad), calc((100% - 1152px) / 2));
  border: 0; background: #16110F; color: #BFB2A9;
  font: 400 15px/1.6 var(--display);
}
body[data-public-body-brand] .product-footer .footer-brand {
  display: inline-flex; align-items: flex-start; min-height: 44px; width: 100px;
  padding: 0; color: #FFF7F0; text-decoration: none; line-height: 0;
  background: var(--five) left 24px / 100px 4px no-repeat;
}
body[data-public-body-brand] .product-footer .footer-brand svg { display: block; width: 100px; height: 30px; }
body[data-public-body-brand] .product-footer .footer-brand svg path:not(:first-child) { display: none; }
body[data-public-body-brand] .product-footer .footer-description { max-width: 62ch; margin-top: 12px; }
body[data-public-body-brand] .product-footer nav { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 20px; }
body[data-public-body-brand] .product-footer nav a { min-height: 44px; color: #FFF7F0; }
body[data-public-body-brand] .product-footer a:focus-visible { outline-color: #FFF7F0; }
@media (min-width: 1100px) {
  body[data-public-body-brand] .product-footer .footer-brand { width: 120px; background-position: left 28px; background-size: 120px 4px; }
  body[data-public-body-brand] .product-footer .footer-brand svg { width: 120px; height: 36px; }
}
/* Existing audience grid, example prose and person-colour edges are retained.
   Remove the earlier repeated decorative text blocks: the example itself is
   the one sentence where person-colour word highlighting may appear. */
body[data-public-body-brand="audience"] .input-header b {
  background: transparent; color: var(--ink); padding-inline: 0;
}
body[data-public-body-brand="audience"] .values article h3 {
  background: transparent; color: var(--ink); padding-inline: 0; font-weight: 800;
}
body[data-public-body-brand="audience"] .values article::before { content: none; }
body[data-public-body-brand="audience"] .values article:nth-child(n) { border-top-color: var(--ink); }
body[data-public-body-brand="audience"] .steps li:nth-child(n) { border-top-color: var(--ink); }
body[data-public-body-brand="audience"] :is(.section-intro h2, .home-content > h2, .content-section > h2) { font-weight: 800; }
/* P17 B1/N6: workspace, closing heading/action and footer share the1152px
   column. Keep the full-width dark band and the current example highlights. */
body[data-public-body-brand="audience"] .review-workspace {
  width: min(1152px, calc(100% - 2 * var(--body-c-pad)));
}
body[data-public-body-brand="audience"] .closing.column {
  padding-inline: max(var(--body-c-pad), calc((100% - 1152px) / 2));
}
body[data-public-body-brand="audience"] .closing h2 { margin-inline: 0; }
/* Pricing body follows the settled C hierarchy without changing its native
   comparison table, responsive row semantics, plan copy or payment links. */
body[data-public-body-brand="pricing"] .hero.column {
  --ink: #FFF7F0; --prose: #FFF7F0; --muted: #BFB2A9; --accent-ink: #FFF7F0;
  --btn-bg: #FFF7F0; --btn-fg: #16110F;
  width: 100%; max-width: none; margin: 0; background: #16110F; color: #FFF7F0;
  padding: clamp(48px, 7vw, 96px) max(var(--body-c-pad), calc((100% - 1152px) / 2)) 64px;
}
body[data-public-body-brand="pricing"] .hero h1 {
  max-width: 1100px; font: 800 clamp(38px, 5.2vw, 60px)/1.06 var(--display);
  font-variation-settings: "wdth" 88; letter-spacing: -.02em; text-wrap: balance;
}
body[data-public-body-brand="pricing"] .hero .lead { max-width: 66ch; font-size: clamp(18px, 1.7vw, 21px); line-height: 1.5; }
body[data-public-body-brand="pricing"] .hero :focus-visible { outline-color: #FFF7F0; }
/* P17 N3: both locales use one treatment. The PL-only older motif sheet
   must not add a headline bar, outline or cream action to a paper section.
   Inherit each actual section's C button colours (cream on the dark hero). */
body[data-public-body-brand="pricing"] .hero h1::after { content: none; }
body[data-public-body-brand="pricing"] :is(.hero, .closing) .primary {
  --btn-bg: inherit; --btn-fg: inherit;
  border: 0; background: var(--five) left bottom / 100% 5px no-repeat, var(--btn-bg); color: var(--btn-fg);
}
body[data-public-body-brand="pricing"] :is(.content-section, .home-content, .closing) { margin-top: clamp(64px, 8vw, 112px); }
body[data-public-body-brand="pricing"] :is(.content-section, .home-content, .closing) h2 {
  font: 800 clamp(32px, 4.2vw, 60px)/1.02 var(--display);
  font-variation-settings: "wdth" 100; letter-spacing: -.028em; max-width: 18ch;
}
body[data-public-body-brand="pricing"] h2[data-copy="p.guests.heading"] {
  font-family: var(--body-c-serif); font-weight: 450; font-optical-sizing: auto;
  font-variation-settings: "opsz" 48; font-size: clamp(30px, 4vw, 48px); line-height: 1.16; letter-spacing: -.02em; max-width: 28ch;
}
body[data-public-body-brand="pricing"] .values > h3 { font: 800 22px/1.2 var(--display); }
body[data-public-body-brand="pricing"] .questions-list h3 { font: 800 20px/1.3 var(--display); }
body[data-public-body-brand="pricing"] .questions-list article + article { margin-top: 32px; }
body[data-public-body-brand="pricing"] .questions-list p { margin-top: 12px; }
body[data-public-body-brand="pricing"] .plans-table { width: min(1280px, calc(100% - 2 * var(--body-c-pad))); font: 400 16px/1.6 var(--display); }
body[data-public-body-brand="pricing"] .plans-table tbody th[scope="row"] { text-decoration: none; font-weight: 650; }
body[data-public-body-brand="pricing"] .plans-table thead th { font: 800 22px/1.2 var(--display); }
body[data-public-body-brand="pricing"] .plans-table thead th:last-child { background: var(--five) top / 100% 5px no-repeat, var(--panel); }
body[data-public-body-brand="pricing"] .plans-section > .column::before { content: none; }
body[data-public-body-brand="pricing"] .plans-table .plan-actions .primary { min-height: 52px; font: 760 17px/1.2 var(--display); font-variation-settings: "wdth" 104; }
/* Only Free has a barred table action. Premium's column already has its bar.
   Match the data-copy key, not the translated label or checkout fragment. */
body[data-public-body-brand="pricing"] .plans-table .plan-actions .primary[data-copy="p.plans.premiumAction"],
body[data-public-body-brand="pricing"] .plans-table .plan-actions .primary[data-copy="p.plans.premiumAction"]:hover:not(:disabled) {
  background: var(--btn-bg); color: var(--btn-fg); filter: none;
}
/* Keep both capability paths explicit on EN pricing too. The older scoped
   sheet already supplies these paths on the audience and PL pricing pages. */
@media (hover: hover) {
  body[data-public-body-brand="pricing"] .primary:not([data-copy="p.plans.premiumAction"]):hover:not(:disabled) {
    background-size: 100% 100%, auto; color: #16110F; filter: none;
  }
}
@media (hover: none) {
  body[data-public-body-brand="pricing"] .primary:not([data-copy="p.plans.premiumAction"]),
  body[data-public-body-brand="pricing"] .primary:not([data-copy="p.plans.premiumAction"]):hover:not(:disabled) {
    background: var(--five) left bottom / 100% 5px no-repeat, var(--btn-bg); color: var(--btn-fg); filter: none;
  }
}
@media (max-width: 760px) {
  body[data-public-body-brand="pricing"] .plans-table :is(th, td) { overflow-wrap: anywhere; }
  body[data-public-body-brand="pricing"] .plans-table td { font-size: 15px; }
  body[data-public-body-brand="pricing"] .plans-table .plan-actions .primary {
    padding-inline: 8px; font-size: 15px; font-variation-settings: "wdth" 96; white-space: nowrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-public-body-brand] .primary { transition: none; }
}
/* Availability keeps the existing native control state and plain surface.
   This specificity also wins over the last bridge and touch hover fallback. */
html[data-public-design="C"] body[data-public-body-brand] .primary.primary:is(:disabled, [aria-disabled="true"]) {
  background-image: none;
}