/*
 * Cross-page consistency for the public refresh (PUBLIC_UI_REFRESH=true).
 *
 * Owner rule: every page consistent with every other page. The per-group overlays
 * (public-refresh-pr6-fixes.css, -pr6-g1..g4.css, -pages-a.css, -pages-b.css, -post.css,
 * -chrome.css) each fixed their own pages; this file holds the ONE system every refreshed page
 * type follows, measured across all published pages, the listings, articles and the 404 at
 * 390, 768, 1440, 1728 and 2000px (.review/cons/, MATRIX.md before and after).
 *
 * Linked LAST on every refreshed page: site and legal pages (PageArticle), articles
 * (PostArticle), listings (ListingPage); also from the layout for pages without those
 * templates (404). Presentation only: never copy, links, forms or anchors. Colours only from
 * the --fn-* tokens of public-refresh.css / public-refresh-pr6-fixes.css.
 *
 * Specificity: `html body.fn-public-refresh main...` prefixes are deliberate, so these rules win
 * over the per-group rules (which reach up to seven classes) without editing those files.
 *
 * Section rhythm (from live freename.com, measured 24 Sep with .review/cons/live-gaps.mjs):
 *   /royalties/ (same type scale as the CMS pages) puts 84 to 90px between the content of two
 *   sections at 768 to 1728px and 62 to 64px on a 390px phone; /home/ puts 138 to 180px (a
 *   marketing page built of tinted bands), 78 to 105px on phones. The owner flagged our 112 to
 *   248px gaps as too big, and the review bar is "no empty gap over 80px", so the standard is
 *   the royalties rhythm held to that bar: every section pads 40px top and bottom (80px
 *   between two sections), 32px on phones (64px, live royalties 62 to 64px). Tinted bands use
 *   the same padding, so a band edge never adds a second, bigger gap. Heroes and the editorial
 *   templates start 84px under the header (the PR #6 hero padding; 40px on phones).
 */

/* ---------------------------------------------------------------------------------------
 * 0. Tokens. "Phone" is 767px and below everywhere in this file.
 * ------------------------------------------------------------------------------------- */
body.fn-public-refresh {
  --fn-gutter: 24px;
  --fn-content: 1296px;
  --fn-section-y: 40px;
  --fn-page-top: 84px;
  --fn-stack: 48px;
  --fn-heading-gap: 40px;
  --fn-card-pad: 32px;
  --fn-callout-pad: 48px;
  --fn-radius: 24px;
  --fn-card-gap: 24px;
  --fn-button-h: 52px;
  --fn-card-title: clamp(22px, 1.8vw, 26px);
}
@media (max-width: 767px) {
  body.fn-public-refresh {
    --fn-section-y: 32px;
    --fn-page-top: 40px;
    --fn-card-pad: 24px;
    --fn-stack: 32px;
    --fn-heading-gap: 32px;
    --fn-callout-pad: 24px;
    --fn-card-gap: 16px;
  }
}

/* ---------------------------------------------------------------------------------------
 * 1. Container: header, page and footer share one edge (1344px incl. 24px gutters).
 *    The chrome kept the live v2-fe widths (16px phone gutter, a 950px bar from 900 to
 *    1199px, a 48px footer inset): its content sat 8px outside the page gutter on phones
 *    ("Subscribe" ended at x=374 on a 390px phone) and 24px outside it on desktop.
 * ------------------------------------------------------------------------------------- */
html body.fn-public-refresh .fn-chrome-header,
html body.fn-public-refresh .fn-chrome-footer {
  --fn-chrome-max: 1344px;
}
html body.fn-public-refresh .fn-chrome-bar {
  padding-left: var(--fn-gutter);
  padding-right: var(--fn-gutter);
}
html body.fn-public-refresh .fn-chrome-search-row,
html body.fn-public-refresh .fn-chrome-drawer-auth {
  padding-left: var(--fn-gutter);
  padding-right: var(--fn-gutter);
}
html body.fn-public-refresh .fn-chrome-drawer-top {
  padding-left: var(--fn-gutter);
  padding-right: calc(var(--fn-gutter) - 8px);
}
html body.fn-public-refresh .fn-chrome-drawer-body {
  padding-left: calc(var(--fn-gutter) - 10px);
  padding-right: calc(var(--fn-gutter) - 10px);
}
html body.fn-public-refresh .fn-chrome-footer {
  padding-left: max(var(--fn-gutter), calc((100% - var(--fn-content)) / 2));
  padding-right: max(var(--fn-gutter), calc((100% - var(--fn-content)) / 2));
}
html body.fn-public-refresh .fn-chrome-footer-main,
html body.fn-public-refresh .fn-chrome-footer-bottom {
  max-width: none;
}

/* Legacy .page-center kept a 16px (phone) / 40px (tablet) side margin inside the section
 * gutter (fixed for groups 2, 3, 4 and WP3 only). :where() keeps this below the centred
 * timeline and the about-us intro, which centre their own narrower column. */
.fn-refreshed-page :where(.dnd-section) .page-center {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* The website builder callout sits on the page container like every section. */
html body.fn-public-refresh main.fn-refreshed-page .fn-builder-callout {
  box-sizing: border-box;
  width: calc(100% - 2 * var(--fn-gutter));
  max-width: var(--fn-content);
  margin: var(--fn-section-y) auto var(--fn-section-y) !important;
  padding: var(--fn-callout-pad);
  border-radius: var(--fn-radius);
}

/* ---------------------------------------------------------------------------------------
 * 2. Section rhythm (site and legal pages).
 * ------------------------------------------------------------------------------------- */
html body.fn-public-refresh main.fn-refreshed-page .dnd-section:not(.fn-about-intro) {
  padding-top: var(--fn-section-y) !important;
  padding-bottom: var(--fn-section-y) !important;
}
/* The page starts one step under the header, whatever the page type. */
html body.fn-public-refresh main.fn-refreshed-page .dnd-section.fn-refresh-hero,
html body.fn-public-refresh main.fn-refreshed-page .dnd-section.fn-legal-hero,
html body.fn-public-refresh main.fn-refreshed-page .fn-refresh-hero,
html body.fn-public-refresh main.fn-refreshed-page .fn-legal-hero {
  padding-top: var(--fn-page-top) !important;
  padding-bottom: var(--fn-section-y) !important;
}
/* One hero rhythm (every refreshed site page with an illustration, from 901px): the art takes
 * exactly the height of the copy block beside it (eyebrow line to last line or button), shown
 * whole, on the container's right edge. Under the shared centring a 3:2 illustration taller
 * than short copy rose above the eyebrow and ran below the lead (careers at 1728: eyebrow 185,
 * art 149), and on long copy it floated in the middle. The art box adds no height to the row
 * (height 0, min-height 100%), so the copy alone sets it; when the column is too narrow for the
 * picture at that height it keeps its ratio and its top stays on the eyebrow line. About us
 * keeps its own rule (public-refresh-pr6-g3.css), which this matches. */
@media (min-width: 901px) {
  html body.fn-public-refresh main.fn-refreshed-page .fn-refresh-hero:not(:has(+ .fn-about-intro)) > .fn-hero-art {
    align-self: stretch !important;
    height: 0;
    /* Floor for a hero whose copy is only an eyebrow and a title (contact us: 116px): the art
     * stays a readable picture, top on the eyebrow line. */
    min-height: max(100%, 240px);
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    background: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-end !important;
    justify-self: stretch !important;
  }
  html body.fn-public-refresh main.fn-refreshed-page .fn-refresh-hero:not(:has(+ .fn-about-intro)):has(> .fn-hero-art) {
    align-items: start !important;
  }
  /* The copy block ends on its last line: the last copy row's trailing paragraph margin (up
   * to 25px) would otherwise let the art run below the lead. */
  html body.fn-public-refresh main.fn-refreshed-page .fn-refresh-hero .fn-hero-copy .dnd-column > .dnd-row:nth-last-child(1 of .dnd-row:not(:has(.pwr-sec-steps, .fn-box-container, .dev-box-container)))
    :is(:last-child, .pwr-mini-cta, .pwr-cta),
  html body.fn-public-refresh main.fn-refreshed-page .fn-refresh-hero .fn-hero-copy .dnd-row:not(:has(.pwr-sec-steps, .fn-box-container, .dev-box-container)) :is(.pwr-rich-text, .pwr-sec-txt__content) :is(p, ul, ol):last-child {
    margin-bottom: 0 !important;
  }
  /* Heroes that carry feature cards (shared G7): the art spans every copy row, the cards row
   * comes after all of them (the art spanned two rows, so on careers, trademark and website
   * builder it ended 80 to 160px above the last copy line). */
  html body.fn-public-refresh main.fn-refreshed-page .fn-refresh-hero:has(> .fn-hero-copy :is(.pwr-sec-steps, .fn-box-container, .dev-box-container)):not(:has(+ .fn-about-intro)) > .fn-hero-art {
    grid-row: 1 / 20 !important;
    min-height: 100%; /* no floor: it would spread over the empty rows between copy and cards */
  }
  html body.fn-public-refresh main.fn-refreshed-page .fn-refresh-hero:has(> .fn-hero-copy :is(.pwr-sec-steps, .fn-box-container, .dev-box-container)) .dnd-column > .dnd-row:has(.pwr-sec-steps, .fn-box-container, .dev-box-container) {
    grid-row: 20 !important;
  }
  html body.fn-public-refresh main.fn-refreshed-page .fn-refresh-hero:not(:has(+ .fn-about-intro)) > .fn-hero-art :is(img, picture, span, div) {
    margin: 0 !important;
  }
  html body.fn-public-refresh main.fn-refreshed-page .fn-refresh-hero:not(:has(+ .fn-about-intro)) > .fn-hero-art img {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    border-radius: 32px !important;
  }
  /* Hotspot hero (web3-dns): the illustrated hotspot is the art column. The shared grid centred
   * the copy against a taller hotspot (hotspot 149 to 555, copy 181 to 522 at 1440). The copy
   * rows now start at the top and the hotspot takes the copy height, keeping its 3:2 box so
   * its chips stay on their spots. */
  html body.fn-public-refresh main.fn-refreshed-page .fn-refresh-hero > .fn-hero-copy > .row-fluid > .dnd-column:has(> .dnd-row > .row-fluid > .dnd-module .hotspot-container) {
    grid-template-rows: 0 auto auto auto 1fr !important;
    align-items: start !important;
  }
  html body.fn-public-refresh main.fn-refreshed-page .fn-refresh-hero > .fn-hero-copy > .row-fluid > .dnd-column > .dnd-row:has(> .row-fluid > .dnd-module .hotspot-container) {
    align-self: stretch !important;
    height: 0;
    min-height: 100%;
    container-type: size;
  }
  html body.fn-public-refresh main.fn-refreshed-page .fn-refresh-hero > .fn-hero-copy > .row-fluid > .dnd-column > .dnd-row:has(> .row-fluid > .dnd-module .hotspot-container) :is(.row-fluid, .dnd-column, .dnd-module, .hs_cos_wrapper) {
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: flex-end;
    align-items: flex-start;
  }
  html body.fn-public-refresh main.fn-refreshed-page .fn-refresh-hero .hotspot-container:has(> img) {
    width: min(100cqw, 150cqh) !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 2;
    margin: 0 !important;
    flex: none;
  }
  html body.fn-public-refresh main.fn-refreshed-page .fn-refresh-hero .hotspot-container > img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
  }
  /* Landing heroes (secure-web3-domain, web3-or-extinct): the stored campaign image is the art
   * column of a grid (pages-b); same rule, it spans the copy rows only. The picture is placed
   * in the row's box (absolute), so it can never add height or float past the copy. */
  html body.fn-public-refresh main.fn-refreshed-page .fn-refresh-hero .dnd-column > .dnd-row:has(.widget_1770886641745-hidden) {
    align-self: stretch !important;
    height: 0;
    min-height: 100%;
    position: relative;
  }
  html body.fn-public-refresh main.fn-refreshed-page .fn-refresh-hero .dnd-column > .dnd-row:has(.widget_1770886641745-hidden) *:not(img) {
    position: static !important;
  }
  html body.fn-public-refresh main.fn-refreshed-page .fn-refresh-hero .widget_1770886641745-hidden img {
    position: absolute !important;
    top: 0;
    right: 0;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }
}

/* Kept from the overlays (restated, since the rule above is stronger): a heading-only section
 * belongs to the cards after it, a section holding only a closed pop-up takes no space, and
 * two bands in a row read as one band. */
html body.fn-public-refresh main.fn-refreshed-page .dnd-section.fn-lead-in.fn-lead-in {
  padding-bottom: 0 !important;
}
html body.fn-public-refresh main.fn-refreshed-page .dnd-section.fn-lead-in + .dnd-section.dnd-section {
  padding-top: 0 !important;
}
html body.fn-public-refresh main.fn-refreshed-page .dnd-section.fn-collapsed.fn-collapsed {
  padding: 0 !important;
}
html body.fn-public-refresh main.fn-refreshed-page .dnd-section.fn-band + .dnd-section.fn-band.fn-band {
  padding-top: 0 !important;
}
/* Sections that continue the hero (moved out of it by the group 3 transform): one stack step
 * under the hero, like the feature cards other heroes carry. */
html body.fn-public-refresh main.fn-refreshed-page .dnd-section.fn-hero-rest.fn-hero-rest {
  padding-top: 0 !important;
}
/* Help center categories: several stored sections that read as one card grid. The rows sit one
 * card gap apart; the last row closes the block with the section padding. */
html body.fn-public-refresh main.fn-refreshed-page .dnd-section.fn-help-cats.fn-help-cats {
  padding-top: calc(var(--fn-card-gap) / 2) !important;
  padding-bottom: calc(var(--fn-card-gap) / 2) !important;
}
html body.fn-public-refresh main.fn-refreshed-page .dnd-section.fn-help-cats-m.fn-help-cats-m {
  padding-top: 0 !important;
  padding-bottom: var(--fn-card-gap) !important;
}
html body.fn-public-refresh main.fn-refreshed-page .dnd-section.fn-help-cats.fn-help-cats:not(:has(~ .fn-help-cats)),
html body.fn-public-refresh main.fn-refreshed-page .dnd-section.fn-help-cats-m.fn-help-cats-m:not(:has(~ .fn-help-cats-m)) {
  padding-bottom: var(--fn-section-y) !important;
}
/* Price list: the hero is only the title of the table below it (heading to content). */
html body.fn-public-refresh main.fn-page-domains-domain-names-price-list .dnd-section.fn-refresh-hero {
  padding-bottom: 0 !important;
}
html body.fn-public-refresh main.fn-page-domains-domain-names-price-list .fn-refresh-hero ~ .dnd-section.fn-refresh-section {
  padding-top: var(--fn-heading-gap) !important;
}
/* The last section ends one section gap above the footer; a band runs into the footer. */
html body.fn-public-refresh main.fn-refreshed-page {
  padding-bottom: var(--fn-section-y);
}
html body.fn-public-refresh main.fn-refreshed-page:has(.dnd-section.fn-band:last-child):not(:has(.fn-builder-callout)) {
  padding-bottom: 0;
}

/* Inside a section: one stack step between a card grid and the block after it (56px in the
 * overlay, 40 or 56px on the WP3 pages), and between a hero's copy and its feature cards. */
html body.fn-public-refresh main.fn-refreshed-page
  .fn-refresh-section
  .dnd-row:has(.pwr-bento-grid, .pwr-adc, .pwr-steps, .fn-box-container, .grid-container, .dev-box-container)
  + .dnd-row {
  margin-top: var(--fn-stack) !important;
}
html body.fn-public-refresh main.fn-pages-a .fn-refresh-section .dnd-row:has(.pwr-mini-cta) + .dnd-row,
html body.fn-public-refresh main.fn-pages-a .fn-refresh-section .dnd-row + .dnd-row:has(.pwr-sec__intro-sec) {
  margin-top: var(--fn-stack) !important;
}
/* Shared G7: the hero's cards row got a 56px margin, and its selector also matched the nested
 * row, so it applied twice (132px under the hero button on careers and website builder). */
html body.fn-public-refresh main.fn-refreshed-page.fn-refreshed-page
  .fn-refresh-hero.fn-refresh-hero
  .dnd-column
  > .dnd-row.dnd-row.dnd-row:has(.pwr-sec-steps, .fn-box-container, .dev-box-container) {
  margin-top: var(--fn-stack) !important;
}
html body.fn-public-refresh main.fn-refreshed-page.fn-refreshed-page
  .fn-refresh-hero.fn-refresh-hero
  .dnd-row
  .dnd-column
  > .dnd-row.dnd-row.dnd-row:has(.pwr-sec-steps, .fn-box-container, .dev-box-container) {
  margin-top: 0 !important;
}
/* The legacy bento module pads itself 24px inside the section (160px between two blocks). */
html body.fn-public-refresh main.fn-refreshed-page .pwr-bento-grid {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Module wrappers (text, steps, accordion, posts, advanced content) pad themselves 24px. Between
 * two rows of one section that is the 48px stack step, but at the section's top and bottom edge
 * it added 24px to the section padding (120 to 180px between sections on the WP3 pages). The
 * section owns its edges. */
html body.fn-public-refresh main.fn-refreshed-page .dnd-section
  :is(.pwr-adc, .pwr-sec-txt, .pwr-sec-simple, .pwr-sec-steps, .pwr-sec-accordion, .pwr-sec-posts):not(.dnd-section .dnd-row ~ .dnd-row *) {
  padding-top: 0 !important;
}
html body.fn-public-refresh main.fn-refreshed-page .dnd-section
  :is(.pwr-adc, .pwr-sec-txt, .pwr-sec-simple, .pwr-sec-steps, .pwr-sec-accordion, .pwr-sec-posts):not(.dnd-section .dnd-row:has(~ .dnd-row) *) {
  padding-bottom: 0 !important;
}
/* Partner and press logo rows: the legacy module added 16px padding and a 32px margin above
 * and below (fixed on about us only). */
html body.fn-public-refresh main.fn-refreshed-page .logo-gallery {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Heading block to its content: one step everywhere. */
html body.fn-public-refresh main.fn-refreshed-page .fn-refresh-section .pwr-sec__intro-sec {
  margin-bottom: var(--fn-heading-gap) !important;
}

/* ---------------------------------------------------------------------------------------
 * 3. Listings and articles: the same page top, stack and section gaps.
 * ------------------------------------------------------------------------------------- */
html body.fn-public-refresh .fn-editorial {
  padding-top: var(--fn-page-top);
  padding-bottom: calc(2 * var(--fn-section-y));
}
html body.fn-public-refresh .fn-editorial-hero {
  margin-bottom: var(--fn-stack);
}
html body.fn-public-refresh .fn-editorial > nav > .fn-tag-tabs,
html body.fn-public-refresh .fn-editorial > .fn-tag-tabs {
  margin-bottom: var(--fn-stack);
}
html body.fn-public-refresh .fn-pagination {
  margin-top: var(--fn-stack);
}
html body.fn-public-refresh .fn-post-grid,
html body.fn-public-refresh .fn-pages-a .pwr-sec-posts__container {
  gap: var(--fn-card-gap);
}
html body.fn-public-refresh main.fn-article-page .fn-article.fn-editorial {
  padding-top: var(--fn-page-top);
  padding-bottom: 0;
}
html body.fn-public-refresh main.fn-article-page .fn-article-figure {
  margin-top: var(--fn-stack);
}
html body.fn-public-refresh main.fn-article-page .fn-article-layout {
  margin-top: var(--fn-stack);
}
html body.fn-public-refresh main.fn-article-page .fn-article-tags {
  margin-top: var(--fn-stack) !important;
}
html body.fn-public-refresh main.fn-article-page .fn-article-cta {
  margin-top: calc(2 * var(--fn-section-y));
}
html body.fn-public-refresh main.fn-article-page .fn-article-related.fn-editorial {
  padding-top: calc(2 * var(--fn-section-y));
}
html body.fn-public-refresh main.fn-article-page .fn-article-related h2 {
  margin-bottom: var(--fn-heading-gap) !important;
}

/* ---------------------------------------------------------------------------------------
 * 4. Type scale.
 * ------------------------------------------------------------------------------------- */
/* H1: one size on every page type (legal was capped at 64px, articles at 56px). */
html body.fn-public-refresh main .fn-refresh-hero h1,
html body.fn-public-refresh main.fn-refreshed-page.fn-legal .fn-legal-hero h1,
html body.fn-public-refresh main.fn-article-page .fn-article-header h1,
html body.fn-public-refresh .fn-editorial-hero h1 {
  font-size: clamp(40px, 4.8vw, 68px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.045em !important;
}
/* Eyebrow: 12px uppercase label; 14px on phones (owner rule: no copy under 14px on phones).
 * It was 14px on phones on groups 1 to 4 only, with 0.08em tracking on group 4. */
body.fn-public-refresh .fn-eyebrow.fn-eyebrow.fn-eyebrow.fn-eyebrow,
body.fn-public-refresh .pwr-sec__title-intro.pwr-sec__title-intro.pwr-sec__title-intro {
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.11em !important;
  text-transform: uppercase;
  color: var(--fn-muted) !important;
}
@media (max-width: 767px) {
  body.fn-public-refresh .fn-eyebrow.fn-eyebrow.fn-eyebrow.fn-eyebrow,
  body.fn-public-refresh .pwr-sec__title-intro.pwr-sec__title-intro.pwr-sec__title-intro,
  html body.fn-public-refresh main.fn-refreshed-page .pwr-timeline-item h4:first-of-type {
    font-size: 14px !important;
  }
}
/* Card titles: one size (they were 21, 23, 25, 27, 29, 34 and 36px across the pages). */
html body.fn-public-refresh main :is(
    .pwr-step__title,
    .pwr-adc-content__title,
    .web3-sec-tld-banner h3,
    .dev-cta h3,
    .dev-box-right h3,
    .grid-container .box h3,
    .fn-post-card h2,
    .fn-post-card h3,
    .pwr-post-item__title,
    .fn-card h3,
    .fn-help-cats h4,
    .pwr-timeline-item h4:not(:first-of-type)
  ) {
  font-family: Archivo, Arial, sans-serif !important;
  font-size: var(--fn-card-title) !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.03em !important;
}
/* Step titles: the stored line break is kept. Hiding it (shared overlay) glued the words on
 * both sides of it ("Real<br>Impact" read "RealImpact" on careers). */
html body.fn-public-refresh main.fn-refreshed-page .pwr-step__title br {
  display: inline !important;
}
/* Section copy: 18px / 1.7 (17px on phones). It was 20px on most site pages, 18px on about us
 * and articles, 17px / 1.9 on legal pages and 16px on the WP4 landings. */
html body.fn-public-refresh main.fn-refreshed-page
  :is(.fn-refresh-section, .fn-legal-hero ~ .dnd-section)
  :is(.pwr-sec-txt__content, .pwr-sec__intro-sec, .pwr-toc__content, .pwr-rich-text)
  p:not(:is(.pwr-step, [data-index], .web3-sec-tld-banner, .dev-box-left, .dev-box-right, .box, .pwr-testimonial, .pwr-timeline-item, .fn-faq, .pwr-accordion, .fn-help-cats, .fn-help-cats-m, .modal-content, .search-container) p),
html body.fn-public-refresh main.fn-refreshed-page.fn-legal .dnd-section p,
html body.fn-public-refresh main.fn-refreshed-page.fn-legal .dnd-section li {
  font-size: 18px !important;
  line-height: 1.7 !important;
}
/* Hero lead and standfirst: 19px / 1.7 muted (17px on phones), every page type. */
html body.fn-public-refresh main.fn-refreshed-page .fn-hero-copy p:not(.fn-eyebrow):not(.fn-hero-lead),
html body.fn-public-refresh .fn-editorial-hero p:not(.fn-eyebrow),
html body.fn-public-refresh main.fn-article-page .fn-article-standfirst {
  font-size: 19px !important;
  line-height: 1.7 !important;
}
@media (max-width: 767px) {
  html body.fn-public-refresh main.fn-refreshed-page
    :is(.fn-refresh-section, .fn-legal-hero ~ .dnd-section)
    :is(.pwr-sec-txt__content, .pwr-sec__intro-sec, .pwr-toc__content, .pwr-rich-text)
    p:not(:is(.pwr-step, [data-index], .web3-sec-tld-banner, .dev-box-left, .dev-box-right, .box, .pwr-testimonial, .pwr-timeline-item, .fn-faq, .pwr-accordion, .fn-help-cats, .fn-help-cats-m, .modal-content, .search-container) p),
  html body.fn-public-refresh main.fn-refreshed-page.fn-legal .dnd-section p,
  html body.fn-public-refresh main.fn-refreshed-page.fn-legal .dnd-section li,
  html body.fn-public-refresh main.fn-refreshed-page .fn-hero-copy p:not(.fn-eyebrow):not(.fn-hero-lead),
  html body.fn-public-refresh .fn-editorial-hero p:not(.fn-eyebrow),
  html body.fn-public-refresh main.fn-article-page .fn-article-standfirst {
    font-size: 17px !important;
  }
}
/* Card copy: 16px / 1.7 (it was 1.65, 1.7, 1.75 and 1.8 by card type). */
html body.fn-public-refresh main.fn-refreshed-page :is(.pwr-step__desc, .pwr-adc-content__text, .web3-sec-tld-banner, .dev-cta-description, .dev-box-right, .grid-container .box) p,
html body.fn-public-refresh main.fn-refreshed-page .pwr-step__desc,
html body.fn-public-refresh main.fn-refreshed-page .pwr-step__desc * {
  font-size: 16px !important;
  line-height: 1.7 !important;
}
/* Phones: small labels on listings and tables reach the 14px minimum. */
@media (max-width: 767px) {
  html body.fn-public-refresh .fn-tag-tabs a,
  html body.fn-public-refresh .fn-post-card time,
  html body.fn-public-refresh .fn-pages-a .pwr-post-item__date,
  html body.fn-public-refresh .fn-pages-a .fn-price-table thead th {
    font-size: 14px !important;
  }
}

/* ---------------------------------------------------------------------------------------
 * 5. Cards and callouts: one radius, one padding.
 * ------------------------------------------------------------------------------------- */
/* Partnerships keeps its own 40px card padding (public-refresh-pr6-g2.css): the stored
 * edge-to-edge program photos bleed by exactly -40px / calc(100% + 80px), so a 32px card pushed
 * them 8px past both card edges. */
html body.fn-public-refresh main.fn-refreshed-page :is(
    .pwr-step:not(.fn-g2-tld-grid *),
    .pwr-bento-grid:not(.fn-g2-partnerships *) .pwr-adc__content-wrappers > [data-index],
    .dev-cta-content-box,
    .dev-web3-tld-content-box,
    .grid-container .box,
    .pwr-testimonial,
    .pwr-timeline-item,
    .fn-help-cats > .row-fluid > .dnd-column
  ) {
  padding: var(--fn-card-pad) !important;
}
html body.fn-public-refresh main.fn-refreshed-page :is(
    .pwr-step,
    .pwr-bento-grid .pwr-adc__content-wrappers > [data-index],
    .web3-sec-tld-banner,
    .dev-box-left,
    .dev-box-right,
    .grid-container .box,
    .pwr-testimonial,
    .pwr-timeline-item,
    .fn-help-cats > .row-fluid > .dnd-column,
    .search-container,
    .modal-content
  ),
html body.fn-public-refresh :is(.fn-post-card, .fn-article-cta, .fn-empty, .fn-article-toc),
html body.fn-public-refresh .fn-pages-a .pwr-post-item .pwr-post-item__content {
  border-radius: var(--fn-radius) !important;
}
/* Feature banners: copy inset by the card padding; the picture keeps the bottom edge. */
html body.fn-public-refresh main.fn-refreshed-page .web3-sec-tld-banner {
  padding-top: var(--fn-card-pad) !important;
  padding-left: var(--fn-card-pad) !important;
  padding-right: var(--fn-card-pad) !important;
}
html body.fn-public-refresh main.fn-refreshed-page .web3-sec-tld-banner:not(:has(.web3-tld-image-r img[src])) {
  padding-bottom: var(--fn-card-pad) !important;
}
html body.fn-public-refresh main.fn-refreshed-page .web3-sec-tld-banner:has(> .fn-g1-bleed-right) {
  padding-right: 0 !important;
}
html body.fn-public-refresh main.fn-refreshed-page .web3-sec-tld-banner:has(> .fn-g1-bleed-right) > .web3-sec-tld-content {
  padding-right: var(--fn-card-pad);
}
/* Banner copy: the legacy 60% wrapper and 320px paragraph cap squeezed it to 186px (fixed on
 * groups 1, 2 and 4 separately). Next to an absolutely placed picture the copy column is 58%. */
html body.fn-public-refresh main.fn-refreshed-page .web3-sec-tld-banner .desc-wrapper,
html body.fn-public-refresh main.fn-refreshed-page .web3-sec-tld-banner .desc-wrapper p {
  max-width: none !important;
  width: auto !important;
}
html body.fn-public-refresh main.fn-refreshed-page:not(.fn-pages-a) .web3-sec-tld-banner:not(:has(.fn-g1-pick)) > .web3-sec-tld-content {
  max-width: 58% !important;
}
@media (max-width: 700px) {
  html body.fn-public-refresh main.fn-refreshed-page:not(.fn-pages-a) .web3-sec-tld-banner:not(:has(.fn-g1-pick)) > .web3-sec-tld-content {
    max-width: none !important;
  }
}
/* Step descriptions: one left edge (the legacy shrunk, centred block sat 5 to 34px off). */
html body.fn-public-refresh main.fn-refreshed-page .pwr-step__desc {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Post cards (listings, related articles, the domain standard issues): the card padding. */
@supports (grid-template-rows: subgrid) {
  html body.fn-public-refresh .fn-post-grid > .fn-post-card > div > * {
    padding-left: var(--fn-card-pad);
    padding-right: var(--fn-card-pad);
  }
  html body.fn-public-refresh .fn-post-grid > .fn-post-card > div > time {
    padding-top: var(--fn-card-pad);
  }
  html body.fn-public-refresh .fn-post-grid > .fn-post-card > div > .fn-read {
    padding-bottom: var(--fn-card-pad);
  }
}
@media (min-width: 1151px) {
  @supports (grid-template-rows: subgrid) {
    html body.fn-public-refresh .fn-post-grid > .fn-post-card:first-child:nth-last-child(3n + 4) > div > * {
      padding-left: 0;
    }
  }
}
html body.fn-public-refresh .fn-pages-a .pwr-post-item__info-box {
  padding: var(--fn-card-pad) !important;
}
/* Callouts (builder, article search, empty listing): one padding, one radius. The /contact-us
 * Contact Form is a pop-up again (owner decision 6 Oct) with the pop-up module's own padding,
 * as on /help-center, so it is not a callout any more. */
html body.fn-public-refresh :is(.fn-article-cta, .fn-empty) {
  padding: var(--fn-callout-pad) !important;
}

/* ---------------------------------------------------------------------------------------
 * 6. One button: yellow, 52px, radius 12px, label on one line, never past the gutter.
 *    (56, 58, 71, 82, 41 and 36px buttons were measured; header and footer controls keep
 *    their own compact live sizes.)
 * ------------------------------------------------------------------------------------- */
html body.fn-public-refresh main :is(.cta_button, .pwr-cta_button, .dev-cta-button, .fn-button, .hs-button, .fn-search-btn) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  box-sizing: border-box !important;
  height: var(--fn-button-h) !important;
  min-height: var(--fn-button-h) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  border-radius: 12px !important;
  font-family: Instrument, Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  max-width: 100%;
}
html body.fn-public-refresh main :is(.cta_button, .pwr-cta_button, .dev-cta-button, .fn-button, .hs-button, .fn-search-btn) :is(i, .ph, svg) {
  flex: none;
  font-size: 20px !important;
  line-height: 1 !important;
  max-height: 20px;
}
html body.fn-public-refresh main .hs-search-field__button {
  height: var(--fn-button-h) !important;
  min-width: var(--fn-button-h);
  border-radius: 12px !important;
}
@media (max-width: 767px) {
  html body.fn-public-refresh main :is(.cta_button, .pwr-cta_button, .dev-cta-button, .fn-button, .hs-button, .fn-search-btn) {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ---------------------------------------------------------------------------------------
 * 7. Inline copy links: purple and underlined on every page type (they were ink, ink and
 *    underlined, purple, or purple and underlined depending on the page).
 * ------------------------------------------------------------------------------------- */
html body.fn-public-refresh main:is(.fn-refreshed-page, .fn-article-page) :is(p, li, td, dd) a:not([class]):not(:is(nav, .fn-article-toc, .fn-breadcrumb, .fn-tag-tabs, .fn-help-cats, .fn-help-cats-m) *),
html body.fn-public-refresh .fn-editorial :is(p, li) a:not([class]):not(:is(nav, .fn-tag-tabs) *) {
  color: var(--fn-purple) !important;
  -webkit-text-fill-color: currentColor !important;
  text-decoration-line: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px;
}
html body.fn-public-refresh main:is(.fn-refreshed-page, .fn-article-page) :is(p, li, td, dd) a:not([class]):hover {
  text-decoration-thickness: 2px !important;
}

/* ---------------------------------------------------------------------------------------
 * 8. Contrast: the stored light purple (a259ff, 3.9:1 on the waitlist banner at 13px) reads in
 *    the purple token (4.5:1 or better on every surface), like the overlay's grey label fix.
 * ------------------------------------------------------------------------------------- */
html body.fn-public-refresh main.fn-refreshed-page [style*="a259ff"]:not([style*="background"]) {
  color: var(--fn-purple) !important;
}

/* Legal hero: the legacy info box keeps an 80px top margin on phones (legal pages started
 * 120px under the header there, 85px on desktop). */
html body.fn-public-refresh main.fn-refreshed-page.fn-legal .fn-legal-hero .pwr-hero__info-box {
  margin-top: 0 !important;
}

/* The ICANN globe ("Globe-Layered", a 1023.8 x 379.6 SVG) keeps its box before its bytes arrive.
 * Its chips sit at a percentage of the hotspot, which is only as tall as the image, so a late or
 * blocked image (6 Oct 2026: r2.dev refused on some networks) dropped them out of their band:
 * clipped 11 to 16px on /about-us, over the CTA on /domains/buy-com-domain. `auto` keeps the
 * image's own ratio once it has loaded. */
html body.fn-public-refresh main.fn-refreshed-page .hotspot-container > img[src$="body-img-aa6a0cebc7fc96a2b767c76086de91c2.svg"] {
  aspect-ratio: auto 1023.8 / 379.6;
}