/* WP3 pages (contact-us, domain-standard, buy-com-domain, domain-names-price-list,
 * event-contact, free-domain). Loaded after public-refresh.css, only on those slugs.
 * Uses the tokens and patterns of public-refresh.css only: presentation, never copy. */

/* 1. Sections are white bands; legacy grey module fills and row backgrounds go. */
.fn-pages-a .dnd-section,
.fn-pages-a .dnd-row,
.fn-pages-a .dnd-section > .row-fluid,
.fn-pages-a .pwr-sec-steps,
.fn-pages-a .pwr-sec-accordion,
.fn-pages-a .pwr-sec-posts,
.fn-pages-a .pwr-sec-txt,
.fn-pages-a .pwr-bento-grid,
.fn-pages-a .pwr-adc__wrapper {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.fn-pages-a .page-center {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Section intros: centred title, body text capped at a readable measure. */
.fn-pages-a .fn-refresh-section .pwr-sec__intro-sec,
.fn-pages-a .fn-refresh-section .pwr-sec-txt__content {
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
}

.fn-pages-a .fn-refresh-section .pwr-sec-txt__left,
.fn-pages-a .fn-refresh-section .pwr-sec-txt__content p {
  max-width: 720px !important;
  width: auto !important;
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.fn-pages-a .fn-refresh-section .pwr-sec__title {
  margin-bottom: 20px !important;
}

/* One two-tone heading pattern: same weight throughout, the accented part in purple. */
.fn-pages-a .fw-400-br,
.fn-pages-a .fw-400 {
  font-weight: inherit !important;
  color: var(--fn-purple) !important;
  -webkit-text-fill-color: currentColor !important;
}

/* 2. Hero: copy column uses its full width; intro copy stays readable. */
.fn-pages-a .fn-hero-copy .pwr-sec__intro-sec,
.fn-pages-a .fn-hero-copy .pwr-sec-txt__content,
.fn-pages-a .fn-hero-copy .pwr-sec-txt__left {
  max-width: none !important;
  width: auto !important;
  float: none !important;
  text-align: left !important;
}

.fn-pages-a .fn-hero-copy .dnd-row,
.fn-pages-a .fn-hero-copy .dnd-module,
.fn-pages-a .fn-hero-copy .row-fluid,
.fn-pages-a .fn-hero-copy .dnd-column {
  width: 100% !important;
  margin-left: 0 !important;
  float: none !important;
  padding: 0 !important;
  text-align: left !important;
  justify-content: flex-start !important;
}

.fn-pages-a .fn-hero-copy p:not(.fn-eyebrow) {
  max-width: 600px;
}

.fn-pages-a .fn-hero-copy .pwr-mini-cta,
.fn-pages-a .fn-hero-copy .pwr-cta {
  text-align: left !important;
  justify-content: flex-start !important;
  margin: 28px 0 0 !important;
  padding: 0 !important;
}

/* Illustrations are never cropped or stretched: whole picture, natural aspect ratio. */
.fn-pages-a .fn-hero-art img {
  aspect-ratio: auto !important;
  object-fit: contain !important;
  height: auto !important;
}

/* Portrait art (identity card) sits on its own lavender plate, sized like the live hero. */
.fn-page-free-domain .fn-hero-art {
  background: none;
  border-radius: 0;
  justify-self: center;
  width: 100%;
  max-width: 440px;
}

/* A stored hero image used as the illustration keeps its whole picture. r4 (24 Sep, owner):
 * no inset of its own (the 40px padding shrank the magazine to 262px at 390); from 901px the
 * consistency hero rule sizes the art box to the copy block. */
.fn-pages-a .fn-hero-art--stored {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
/* Domain standard: the two-tone title reads "The Domain / Standard" on two lines, as live. */
.fn-page-domain-standard .fn-refresh-hero h1 .gradient {
  display: block;
}

.fn-pages-a .fn-hero-art--stored * {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  float: none !important;
}

.fn-pages-a .fn-hero-art--stored img {
  max-height: 420px;
  width: auto !important;
  max-width: 100%;
}

/* 3. One button style (fn-button): legacy themes paint buttons through pseudo-elements. */
.fn-pages-a .cta_button::before,
.fn-pages-a .cta_button::after,
.fn-pages-a .pwr-cta_button::before,
.fn-pages-a .pwr-cta_button::after,
.fn-pages-a .dev-cta-button::before,
.fn-pages-a .dev-cta-button::after {
  display: none !important;
}

.fn-pages-a .pwr-cta_button,
.fn-pages-a .fn-search-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px 23px !important;
  min-height: 50px;
  background: var(--fn-yellow) !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  color: var(--fn-ink) !important;
  font:
    650 15px/1.3 Instrument,
    Arial,
    sans-serif !important;
  box-shadow: none !important;
  text-decoration: none !important;
  cursor: pointer;
}

.fn-pages-a .pwr-cta_button:hover,
.fn-pages-a .fn-search-btn:hover {
  background: #f4bf27 !important;
}

.fn-pages-a .cta_button,
.fn-pages-a .cta_button *,
.fn-pages-a .pwr-cta_button *,
.fn-pages-a .dev-cta-button * {
  color: var(--fn-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}

/* 4. Cards: lavender / white surfaces with a hairline, the refresh card language. */
.fn-pages-a .dev-box-container {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.fn-pages-a .dev-box-left,
.fn-pages-a .dev-box-right {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

.fn-pages-a .dev-box-left > div,
.fn-pages-a .dev-cta,
.fn-pages-a .dev-cta-content-box,
.fn-pages-a .dev-web3-tld-content-box {
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
}

.fn-pages-a .dev-cta-content-box,
.fn-pages-a .dev-web3-tld-content-box {
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 40px !important;
  width: 100% !important;
  max-width: none !important;
}

/* The old purple gradient is painted by a pseudo-element under the card text. */
.fn-pages-a .dev-box-container *::before,
.fn-pages-a .dev-box-container *::after {
  background: none !important;
}

/* Old-site stock photo of the purple card: decorative, not content. The hero carries the art. */
.fn-pages-a .dev-cta-image-box {
  display: none !important;
}

.fn-pages-a .dev-cta-text h3,
.fn-pages-a .dev-cta-description,
.fn-pages-a .dev-cta-description * {
  color: var(--fn-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}

.fn-pages-a .dev-cta-description {
  margin-top: 20px;
  max-width: 560px;
}

.fn-pages-a .dev-cta-description p,
.fn-pages-a .dev-cta-description p span {
  color: var(--fn-muted) !important;
}

.fn-pages-a .dev-cta-description strong {
  color: var(--fn-ink) !important;
}

/* Three-card bento grids read as one even row. */
.fn-pages-a .pwr-bento-grid .pwr-adc__content-wrappers {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.fn-pages-a .pwr-bento-grid .pwr-adc__content-wrappers > [data-index] {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-start !important;
  gap: 20px;
  padding: 32px !important;
  position: relative;
}

.fn-pages-a .pwr-bento-grid .pwr-adc-content {
  margin: 0 !important;
  padding: 0 !important;
}

.fn-pages-a .pwr-bento-grid .pwr-adc-content--spacer,
.fn-pages-a .pwr-bento-grid .pwr-bg-overlay {
  display: none !important;
}

.fn-pages-a .pwr-bento-grid .pwr-adc-content--button {
  margin-top: auto !important;
}

.fn-pages-a .pwr-bento-grid .pwr-adc-content__title {
  font-family: Archivo, Arial, sans-serif !important;
  font-size: clamp(23px, 2vw, 29px) !important;
  font-weight: 650 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.045em !important;
  color: var(--fn-ink) !important;
}

/* A card's photo background (laptop still life) becomes the card image, shown whole. */
.fn-pages-a .pwr-bento-grid .pwr-bg {
  position: static !important;
  display: block;
  order: 2;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
}

.fn-pages-a .pwr-bento-grid .pwr-bg img {
  position: static !important;
  display: block;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 16px;
}

.fn-pages-a .pwr-bento-grid .pwr-adc-content--title {
  order: 1;
}

.fn-pages-a .pwr-bento-grid .pwr-adc-content--image,
.fn-pages-a .pwr-bento-grid .pwr-adc-content--text {
  order: 3;
}

.fn-pages-a .pwr-bento-grid .pwr-adc-content--button {
  order: 4;
}

/* Step cards (issues, transfer steps) and post cards: white with a hairline. */
.fn-pages-a .pwr-steps {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0 !important;
}

.fn-pages-a .pwr-steps--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fn-pages-a .pwr-steps::before,
.fn-pages-a .pwr-steps::after,
.fn-pages-a .pwr-sec-posts__container::before,
.fn-pages-a .pwr-sec-posts__container::after {
  display: none !important;
}

.fn-pages-a .pwr-step {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 32px !important;
  background: #fff !important;
  border: 1px solid var(--fn-line) !important;
  border-radius: 24px !important;
  box-shadow: none !important;
  text-align: left !important;
}

.fn-pages-a .pwr-step::before,
.fn-pages-a .pwr-step::after {
  display: none !important;
}

.fn-pages-a .pwr-step .pwr-mh--wrapper {
  height: auto !important;
  min-height: 0 !important;
}

.fn-pages-a .pwr-step__img {
  border-radius: 16px;
  margin: 0 0 20px !important;
}

.fn-pages-a .pwr-step__title {
  display: block;
  font-family: Archivo, Arial, sans-serif !important;
  font-size: clamp(21px, 1.8vw, 25px) !important;
  font-weight: 650 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.035em !important;
  color: var(--fn-ink) !important;
  margin-bottom: 12px;
}

.fn-pages-a .pwr-step__desc,
.fn-pages-a .pwr-step__desc * {
  font-family: Instrument, Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: var(--fn-muted) !important;
}

.fn-pages-a .pwr-step__desc strong,
.fn-pages-a .pwr-step__desc b {
  color: var(--fn-ink) !important;
}

.fn-pages-a .pwr-step__desc a,
.fn-pages-a .pwr-step__desc a * {
  color: var(--fn-purple) !important;
  text-underline-offset: 4px;
}

.fn-pages-a .pwr-sec-posts__container {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin: 0 !important;
}

.fn-pages-a .pwr-post-item {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
}

.fn-pages-a .pwr-post-item .pwr-3D-box,
.fn-pages-a .pwr-post-item .pwr-post-item__content {
  height: 100% !important;
  transform: none !important;
}

/* Card height from the layout, not from the theme script (Giacomo's review, 6 Oct). The theme
 * places the info box absolutely and template_pwr.min.js pins `height: Npx` on the card once;
 * a pin taken before the web fonts arrive (480px where the copy needs 549px at 1728) let the
 * card's overflow cut off the copy and "Start Reading". The info box now flows under the picture,
 * the pin is ignored, and every row is as tall as the tallest card, as the pin made them. */
.fn-pages-a .pwr-sec-posts__container {
  grid-auto-rows: 1fr;
}

.fn-pages-a .pwr-sec-posts__container > .pwr-post-item {
  height: auto !important;
}

.fn-pages-a .pwr-post-item .pwr-post-item__info-box {
  position: static !important;
}

.fn-pages-a .pwr-post-item .pwr-post-item__content {
  background: #fff !important;
  border: 1px solid var(--fn-line) !important;
  border-radius: 22px !important;
  box-shadow: none !important;
  overflow: hidden;
  transition:
    box-shadow 0.2s,
    transform 0.2s;
}

.fn-pages-a .pwr-post-item:hover .pwr-post-item__content {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 42px #30214310 !important;
}

.fn-pages-a .pwr-post-item__overlay {
  display: none !important;
}

.fn-pages-a .pwr-post-item__info-box {
  padding: 26px !important;
}

.fn-pages-a .pwr-post-item__title {
  font-size: 25px !important;
  margin: 12px 0 !important;
  color: var(--fn-ink) !important;
}

.fn-pages-a .pwr-post-item__desc {
  color: var(--fn-muted) !important;
  font-size: 16px !important;
}

.fn-pages-a .pwr-post-item__date {
  font-size: 12px !important;
  color: var(--fn-muted) !important;
}

.fn-pages-a .pwr-post-item__more-link,
.fn-pages-a .pwr-post-item__more-link * {
  color: var(--fn-purple) !important;
  fill: var(--fn-purple) !important;
  font-weight: 650 !important;
  font-size: 14px !important;
}

/* Promo banners (buy-com): lavender / yellow-tint cards; their images stay. */
.fn-pages-a .fn-box-2-col {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.fn-pages-a .web3-sec-tld-banner {
  background: var(--fn-lilac) !important;
  color: var(--fn-ink) !important;
  border: 1px solid var(--fn-line) !important;
  border-radius: 24px !important;
  margin: 0 !important;
  width: auto !important;
  overflow: hidden;
}

.fn-pages-a .web3-sec-tld-banner:nth-child(2n) {
  background: #fff9dc !important;
}

.fn-pages-a .web3-sec-tld-banner h3,
.fn-pages-a .web3-sec-tld-banner p {
  color: var(--fn-ink) !important;
  -webkit-text-fill-color: currentColor !important;
}

.fn-pages-a .web3-sec-tld-banner p {
  color: var(--fn-muted) !important;
}

.fn-pages-a .web3-tld-image-r img:not([src]) {
  display: none !important;
}

/* 5. Forms. Owner decision 6 Oct (reverses r3 of 24 Sep): the /contact-us "Contact Us" button
 * opens the stored Contact Form pop-up (#contact) again, now that the CMS draws its HubSpot form
 * and stores what is sent. The pop-up keeps the pop-up module's own look, the same as the
 * /help-center ticket pop-up (same form): no rule of this file reaches it, so the rules that hid
 * it and its x (r3) and the card look of the first WP3 design (the form shown in the page) are
 * gone, and the form rules below leave /contact-us out (:where adds no specificity, so every
 * other pages-a page matches them exactly as before). Closed, the pop-up is hidden by the
 * module's own .modal-overlay { display: none } until the button opens it. */
.fn-pages-a:where(:not(.fn-page-contact-us)) .hs-form .hs-form-field {
  margin-bottom: 14px !important;
}

.fn-pages-a:where(:not(.fn-page-contact-us)) .hs-form .input,
.fn-pages-a:where(:not(.fn-page-contact-us)) .hs-form input.hs-input,
.fn-pages-a:where(:not(.fn-page-contact-us)) .hs-form textarea.hs-input {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.fn-pages-a:where(:not(.fn-page-contact-us)) .hs-form input.hs-input,
.fn-pages-a:where(:not(.fn-page-contact-us)) .hs-form textarea.hs-input {
  background: #fff !important;
  color: var(--fn-ink) !important;
  font:
    400 16px/1.5 Instrument,
    Arial,
    sans-serif !important;
}

.fn-pages-a:where(:not(.fn-page-contact-us)) .hs-form input.hs-input::placeholder,
.fn-pages-a:where(:not(.fn-page-contact-us)) .hs-form textarea.hs-input::placeholder,
.fn-pages-a .fn-search-bar input::placeholder {
  color: var(--fn-muted);
  opacity: 1;
}

.fn-pages-a:where(:not(.fn-page-contact-us)) .hs-form input.hs-button {
  width: auto !important;
  height: auto !important;
  margin-top: 8px !important;
}

/* Event sign-up: logo lockup, copy and form align to the copy column. */
.fn-page-event-contact .fn-hero-copy img.hs-image-widget {
  max-width: 280px !important;
  height: auto !important;
  margin: 0 0 28px !important;
}

.fn-page-event-contact .fn-hero-copy .hs_cos_wrapper_type_linked_image {
  display: block;
  text-align: left !important;
}

.fn-page-event-contact .fn-hero-copy .hs_cos_wrapper_type_form,
.fn-page-event-contact .fn-hero-copy form {
  display: block;
  max-width: 560px !important;
  margin: 24px 0 0 !important;
}

.fn-page-event-contact .fn-hero-copy .hs_cos_wrapper_type_rich_text {
  display: block;
  margin-top: 20px;
  text-align: left !important;
}

.fn-pages-a .fn-hero-copy a:not(.cta_button):not(.pwr-cta_button) {
  color: var(--fn-purple) !important;
}

/* Search field (buy-com hero): the refreshed search bar look. */
.fn-pages-a .fn-search-bar {
  display: flex !important;
  gap: 10px;
  max-width: 560px;
  margin: 28px 0 0 !important;
  padding: 6px !important;
  background: #fff !important;
  border: 1px solid var(--fn-line) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

.fn-pages-a .fn-search-bar input {
  flex: 1;
  min-width: 0;
  border: 0 !important;
  background: transparent !important;
  padding: 0 14px !important;
  font:
    400 16px/1.5 Instrument,
    Arial,
    sans-serif !important;
  color: var(--fn-ink) !important;
}

/* Free-domain closing search prompt: a lavender card with the standard button. */
.fn-pages-a .search-container {
  background: var(--fn-lilac) !important;
  border: 1px solid var(--fn-line) !important;
  border-radius: 24px !important;
  box-shadow: none !important;
  padding: 28px 32px !important;
  max-width: none !important;
}

.fn-pages-a .search-container .text,
.fn-pages-a .search-container .text * {
  color: var(--fn-ink) !important;
}

/* Category pills (free-domain) sit on white; the bars artwork behind them is decoration. */
.fn-page-free-domain img[alt="BarsBG"] {
  display: none !important;
}

/* 6. FAQ blocks match the refresh accordion: white, hairlines, no floating box. */
.fn-pages-a .pwr-accordion-container {
  max-width: 1000px !important;
  margin: 0 auto !important;
  background: none !important;
}

.fn-pages-a .fn-faq {
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

/* 7. Price list: a clean, scrollable table with a sticky header and TLD column. */
.fn-pages-a .fn-price-table {
  max-height: 78vh;
  overflow: auto;
  border: 1px solid var(--fn-line);
  border-radius: 24px;
  background: #fff;
}

.fn-pages-a .fn-price-table:focus-visible {
  outline: 3px solid var(--fn-purple);
  outline-offset: 4px;
}

.fn-pages-a .fn-price-table table {
  height: auto !important;
  min-width: 760px !important;
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font:
    400 15px/1.4 Instrument,
    Arial,
    sans-serif !important;
  color: var(--fn-ink) !important;
  margin: 0 !important;
}

.fn-pages-a .fn-price-table tr {
  height: auto !important;
  background: #fff !important;
}

.fn-pages-a .fn-price-table th,
.fn-pages-a .fn-price-table td {
  height: auto !important;
  padding: 14px 20px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--fn-line) !important;
  background: #fff !important;
  font-variant-numeric: tabular-nums;
}

.fn-pages-a .fn-price-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--fn-lilac) !important;
  font:
    650 13px/1.3 Instrument,
    Arial,
    sans-serif !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fn-ink) !important;
}

.fn-pages-a .fn-price-table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  font-weight: 650 !important;
}

.fn-pages-a .fn-price-table thead th:first-child {
  left: 0;
  z-index: 3;
}

/* Struck standard prices recede; the current prices lead in the accent colour. */
.fn-pages-a .fn-price-table td [style*="line-through"] {
  color: var(--fn-muted) !important;
}

.fn-pages-a .fn-price-table td strong,
.fn-pages-a .fn-price-table td strong * {
  color: var(--fn-purple) !important;
  font-weight: 650 !important;
}

.fn-pages-a .fn-price-table tbody tr:hover th,
.fn-pages-a .fn-price-table tbody tr:hover td {
  background: var(--fn-lilac) !important;
}

.fn-page-domains-domain-names-price-list .fn-refresh-hero {
  padding-bottom: 24px !important;
}

.fn-page-domains-domain-names-price-list .fn-refresh-hero .pwr-sec__intro-sec,
.fn-page-domains-domain-names-price-list .fn-refresh-hero .pwr-sec-txt,
.fn-page-domains-domain-names-price-list .fn-refresh-hero h1 {
  text-align: left !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* 8. Responsive. */
@media (max-width: 1100px) {
  .fn-pages-a .pwr-steps--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .fn-pages-a .dev-box-container,
  .fn-pages-a .fn-box-2-col,
  .fn-pages-a .pwr-bento-grid .pwr-adc__content-wrappers,
  .fn-pages-a .pwr-steps,
  .fn-pages-a .pwr-sec-posts__container {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .fn-pages-a .dev-cta-content-box,
  .fn-pages-a .dev-web3-tld-content-box,
  .fn-pages-a .pwr-step,
  .fn-pages-a .pwr-bento-grid .pwr-adc__content-wrappers > [data-index] {
    padding: 24px !important;
  }

  .fn-pages-a .pwr-steps--4 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .fn-pages-a .fn-price-table {
    max-height: 72vh;
    border-radius: 20px;
  }

  .fn-pages-a .fn-price-table th,
  .fn-pages-a .fn-price-table td {
    padding: 12px 14px !important;
  }

  .fn-pages-a .fn-search-bar {
    flex-direction: column;
  }

  .fn-page-free-domain .fn-hero-art {
    max-width: 320px;
  }
}

/* 9. Page-level alignment fixes (after review screenshots). */
.fn-pages-a .fn-hero-copy .dnd-module > .hs_cos_wrapper,
.fn-pages-a .fn-hero-copy .hs_cos_wrapper_type_module {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none !important;
}

.fn-pages-a .fn-refresh-section .pwr-sec__intro-sec,
.fn-pages-a .fn-refresh-section .pwr-sec__title {
  text-align: center !important;
}

/* A second stored H1 inside the body reads at section-title scale. */
.fn-pages-a .fn-refresh-section h1 {
  font-size: clamp(30px, 3.2vw, 44px) !important;
}

/* Card text starts under the title; the action sits at the bottom of the card. */
.fn-pages-a .dev-cta-content-box,
.fn-pages-a .dev-web3-tld-content-box {
  justify-content: flex-start !important;
  gap: 0;
}

.fn-pages-a .dev-cta,
.fn-pages-a .dev-cta-text {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

.fn-pages-a .dev-cta-text h3 {
  margin: 0 !important;
}

.fn-pages-a .dev-cta-button-wrapper {
  margin-top: auto !important;
  padding-top: 32px !important;
}

/* Free-domain category pills: no grey gradient plate behind them. */
.fn-pages-a .cat-bg {
  background: none !important;
}

/* Buy-com promo cards: copy and picture share the card, nothing absolutely placed. */
.fn-pages-a .web3-sec-tld-banner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 24px;
  padding: 32px !important;
  min-height: 0 !important;
}

.fn-pages-a .web3-sec-tld-content {
  position: static !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  align-self: start;
}

.fn-pages-a .web3-sec-tld-content .desc-wrapper {
  margin-top: 16px;
}

.fn-pages-a .web3-tld-image-r {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  inset: auto !important;
  transform: none !important;
}

.fn-pages-a .web3-tld-image-r img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-height: 280px;
  object-fit: contain !important;
  position: static !important;
}

/* Price list: no illustration, so the title spans the container; table aligns with it. */
.fn-page-domains-domain-names-price-list .fn-refresh-hero {
  display: block !important;
  padding-bottom: 8px !important;
}

.fn-page-domains-domain-names-price-list .fn-refresh-section {
  padding-top: 16px !important;
}

.fn-page-domains-domain-names-price-list .fn-refresh-section .dnd-module,
.fn-page-domains-domain-names-price-list .fn-refresh-section .hs_cos_wrapper,
.fn-page-domains-domain-names-price-list .fn-refresh-section .row-fluid,
.fn-page-domains-domain-names-price-list .fn-refresh-section .dnd-column {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

.fn-page-domains-domain-names-price-list .fn-refresh-hero .pwr-sec-txt__content {
  display: none;
}

@media (max-width: 600px) {
  .fn-pages-a .web3-sec-tld-banner {
    grid-template-columns: minmax(0, 1fr);
    padding: 24px !important;
  }
}

/* Event sign-up forms: the page's own id rules indent the form; align it to the copy. */
.fn-page-event-contact #hs_cos_wrapper_widget_1761037856800,
.fn-page-event-contact #hs_cos_wrapper_module_1761041031794 {
  padding: 8px 0 0 !important;
}

.fn-page-event-contact #hs_cos_wrapper_module_1760970007143 {
  padding-left: 0 !important;
}

.fn-page-event-contact #hs_cos_wrapper_widget_1761037856800 .hs-button,
.fn-page-event-contact #hs_cos_wrapper_module_1761041031794 .hs-button {
  padding: 15px 23px !important;
  line-height: 1.3 !important;
}

/* Contact cards: text starts at the card edge, no inherited offsets. */
.fn-pages-a .dev-cta-content-box,
.fn-pages-a .dev-web3-tld-content-box {
  margin: 0 !important;
}

.fn-pages-a .dev-cta-text {
  display: block !important;
  height: auto !important;
}

/* Buy-com promo cards: two equal cards side by side, copy on top, picture below. */
.fn-pages-a .fn-box-container {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.fn-pages-a .fn-box-2-col {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.fn-pages-a .web3-sec-tld-banner {
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.fn-pages-a .web3-sec-tld-content {
  display: block !important;
  width: 100% !important;
}

.fn-pages-a .web3-sec-tld-content p {
  margin: 0 !important;
  max-width: 520px;
}

.fn-pages-a .web3-tld-image-r {
  align-self: flex-end;
  max-width: 360px;
}

@media (max-width: 900px) {
  .fn-pages-a .fn-box-container {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

.fn-pages-a .fn-box-2-col,
.fn-pages-a .web3-sec-tld-banner {
  box-shadow: none !important;
}

.fn-pages-a .fn-box-2-col:nth-child(2n) .web3-sec-tld-banner {
  background: #fff9dc !important;
}

.fn-pages-a .web3-tld-image-r {
  width: 60% !important;
}

/* Globe hotspots (ICANN badge) hang below the small mobile globe: reserve their room. */
@media (max-width: 600px) {
  .fn-pages-a .hotspot-container {
    margin-bottom: 120px !important;
  }
}

/* Shared container (lead's standard, matches the new header/footer and live freename.com):
 * max-width 1344px, 24px side padding, centred. Vertical rhythm stays PR #6's. */
.fn-pages-a .dnd-section {
  max-width: 1344px !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.fn-page-domains-domain-names-price-list #hs_cos_wrapper_widget_1757410662053 {
  padding: 0 !important;
}

/* A stored section holding only empty wrappers would add a blank band to the rhythm. */
.fn-pages-a .dnd-section:not(:has(:not(div))) {
  display: none !important;
}

/* Flex-positioned hero modules (logo lockup) align to the copy edge. */
.fn-pages-a .fn-hero-copy .dnd-module {
  align-items: flex-start !important;
}

.fn-pages-a .fn-search-wrapper {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.fn-pages-a .pwr-bento-grid .pwr-adc-content__image-wrapper {
  margin: 0 !important;
  width: 100% !important;
}

.fn-pages-a .page-center {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 10. QA3 sweep fixes (390/768/1440/2000, see tests/int/public-refresh-qa3.int.spec.ts). */

/* One button size: legacy themes set height:50px with content-box sizing, which made
 * .cta_button and .pwr-cta_button 82px tall beside 52px buttons. */
.fn-pages-a .pwr-cta_button,
.fn-pages-a .cta_button,
.fn-pages-a .dev-cta-button,
.fn-pages-a .hs-button,
.fn-pages-a .fn-search-btn {
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 50px !important;
  line-height: 1.3 !important;
}

.fn-pages-a .pwr-cta_button,
.fn-pages-a .cta_button,
.fn-pages-a .dev-cta-button {
  gap: 20px !important;
}

.fn-pages-a .cta_button .ph,
.fn-pages-a .pwr-cta_button .ph,
.fn-pages-a .dev-cta-button .ph {
  font-size: 20px !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.fn-page-event-contact #hs_cos_wrapper_widget_1761037856800 .hs-button,
.fn-page-event-contact #hs_cos_wrapper_module_1761041031794 .hs-button {
  color: var(--fn-ink) !important;
}

/* Contact cards: the wrapper's 32px is the only step between copy and button. */
.fn-pages-a .dev-cta-button-wrapper .dev-cta-button {
  margin-top: 0 !important;
}

/* Section titles span the intro, so centred text sits on the page centre line. */
.fn-pages-a .fn-refresh-section .pwr-sec__title {
  max-width: none !important;
  width: auto !important;
}

/* One vertical rhythm: modules inside a section use the shared 24px module padding. */
.fn-pages-a .pwr-sec-steps,
.fn-pages-a .pwr-sec-accordion,
.fn-pages-a .pwr-sec-posts {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.fn-pages-a .fn-refresh-section .pwr-mini-cta {
  margin-bottom: 0 !important;
}

.fn-pages-a .fn-refresh-section .pwr-sec__intro-sec {
  margin-bottom: 40px !important;
}

/* FAQ answers keep a readable measure inside the 1000px accordion. */
.fn-pages-a .fn-faq-answer {
  display: block;
  max-width: 760px;
}

/* Bento cards: copy directly under the title in every card, pictures and actions below. */
.fn-pages-a .pwr-bento-grid .pwr-adc-content--title {
  order: 1;
}

.fn-pages-a .pwr-bento-grid .pwr-adc-content--text {
  order: 2;
}

.fn-pages-a .pwr-bento-grid .pwr-adc-content--image,
.fn-pages-a .pwr-bento-grid .pwr-bg {
  order: 3;
}

.fn-pages-a .pwr-bento-grid .pwr-adc-content--button {
  order: 4;
}

/* Form labels: legacy fn-modal CSS removes them (display:none); keep them out of sight
 * (placeholders show the field) but in the accessibility tree. */
.fn-pages-a .hs_cos_wrapper_type_form form.hs-form .hs-form-field > label {
  display: block !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.fn-pages-a .hs_cos_wrapper_type_form form.hs-form .hs-form-field {
  position: relative;
}

/* A section holding only a title (its text module is empty) introduces the next section:
 * no double section padding between the title and its cards. */
.fn-pages-a .fn-refresh-section:has(.pwr-sec-txt__intro-sec):not(:has(.pwr-sec-txt__content p, .pwr-sec-txt__content li, .pwr-sec-txt__content img, form, table, .pwr-cta, .pwr-mini-cta, .pwr-adc, .pwr-sec-steps, .pwr-sec-posts, .pwr-sec-accordion)) {
  padding-bottom: 0 !important;
}

.fn-pages-a .fn-refresh-section:has(.pwr-sec-txt__intro-sec):not(:has(.pwr-sec-txt__content p, .pwr-sec-txt__content li, .pwr-sec-txt__content img, form, table, .pwr-cta, .pwr-mini-cta, .pwr-adc, .pwr-sec-steps, .pwr-sec-posts, .pwr-sec-accordion)) .pwr-sec-txt {
  padding-bottom: 0 !important;
}

.fn-pages-a .fn-refresh-section:has(.pwr-sec-txt__intro-sec):not(:has(.pwr-sec-txt__content p, .pwr-sec-txt__content li, .pwr-sec-txt__content img, form, table, .pwr-cta, .pwr-mini-cta, .pwr-adc, .pwr-sec-steps, .pwr-sec-posts, .pwr-sec-accordion)) .pwr-sec__intro-sec {
  margin-bottom: 16px !important;
}

.fn-pages-a .fn-refresh-section:has(.pwr-sec-txt__intro-sec):not(:has(.pwr-sec-txt__content p, .pwr-sec-txt__content li, .pwr-sec-txt__content img, form, table, .pwr-cta, .pwr-mini-cta, .pwr-adc, .pwr-sec-steps, .pwr-sec-posts, .pwr-sec-accordion)) + .fn-refresh-section {
  padding-top: 0 !important;
}

/* A bento card's photo (former card background) is shown whole but capped, so it does not
 * stretch the row and leave the text cards beside it half empty. */
.fn-pages-a .pwr-bento-grid .pwr-bg img {
  width: auto !important;
  max-width: 100%;
  max-height: 340px;
  object-fit: contain !important;
  margin: 0 auto;
}

/* Three-card bento: the card with the picture spans both rows, the two text cards stack
 * beside it (equal columns left the text cards 230 to 435px empty). */
@media (min-width: 901px) {
  .fn-pages-a .pwr-bento-grid .pwr-adc__content-wrappers:has(> [data-index]:first-child:nth-last-child(3)) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* The stored layout already spans this card (grid-row: span 2); public-refresh.css resets it. */
  .fn-pages-a .pwr-bento-grid .pwr-adc__content-wrappers > [data-index]:first-child:nth-last-child(3) {
    grid-row: span 2 !important;
  }
}

/* Stored cell_<id>-padding rules (64px above the event cards and the buy-com globe) would
 * add to the section rhythm. */
.fn-pages-a .fn-refresh-section .dnd-column[class*="cell_"][class*="-padding"] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Legacy mobile CTA alignment adds a 16px offset; actions start at the copy edge. */
.fn-pages-a .fn-mobile-align-l {
  margin-left: 0 !important;
}

/* A centred CTA row is followed by a 40px step before the next row of the section. */
.fn-pages-a .fn-refresh-section .dnd-row:has(.pwr-mini-cta) + .dnd-row {
  margin-top: 40px !important;
}

@media (max-width: 600px) {
  .fn-pages-a .fn-search-bar .fn-search-btn {
    width: 100%;
  }
}

/* Event sign-up: the stored mobile id rule indents the logo lockup 16px past the copy. */
.fn-page-event-contact .module_1760969753529-padding > #hs_cos_wrapper_module_1760969753529 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Hero search: the field sits inside the bar's outline; the shared input border rule is
 * more specific than .fn-search-bar input, so match it with the same :not() chain. */
.fn-pages-a .fn-search-bar input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) {
  border: 0 !important;
  box-shadow: none !important;
}

/* A row that opens with its own section title (Articles, Previous Issues) is a new
 * sub-section: a 56px step above it, so the title belongs to the cards below it. */
.fn-pages-a .fn-refresh-section .dnd-row + .dnd-row:has(.pwr-sec__intro-sec) {
  margin-top: 56px !important;
}

/* Owner review 24 Sep (rA): card pictures sit right under their text, sized to the card, like
 * the Instant Credibility card (tests/int/public-refresh-ra.int.spec.ts). */

/* Buy-com promo cards (Save On .COM Domains, Earn Rewards on Transfers), live arrangement
 * (owner, second review: "make it look nice like live"). Both pictures are 7:10 portrait
 * cut-outs drawn to bleed off the card: the woman and the dashboard end at the file's right and
 * bottom edges, a transparent band sits above the subject. As on live (card 664x432, picture
 * box 332x474 in its bottom right corner): the copy takes the left half, the picture box is
 * the right half at the file's own ratio, anchored bottom right, so the subject starts near the
 * card top and the cut edges are the card's edges. The card keeps live's 664:432 proportion
 * (it grows only if the copy needs more room). Up to 768px the stored module shows its empty
 * mobile-only wrappers instead (no picture, as on live), so the cards stay plain text there. */
@media (min-width: 769px) {
  .fn-page-domains-buy-com-domain .web3-sec-tld-banner {
    position: relative;
    justify-content: flex-start !important;
    gap: 0;
    aspect-ratio: 664 / 432;
    height: auto !important;
    min-height: 100%;
  }

  /* Title at the top, description at the bottom of the copy column, as on live, so a short
   * description does not leave the lower half of the card empty. */
  .fn-page-domains-buy-com-domain .web3-sec-tld-banner .web3-sec-tld-content {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    flex: 1 1 auto;
    width: calc(50% - 24px) !important;
    max-width: none !important;
  }

  /* The stored .desc-wrapper is capped at 60% (of the old full-width copy block). */
  .fn-page-domains-buy-com-domain .web3-sec-tld-banner .web3-sec-tld-content .desc-wrapper,
  .fn-page-domains-buy-com-domain .web3-sec-tld-banner .web3-sec-tld-content p {
    max-width: none !important;
  }

  .fn-page-domains-buy-com-domain .web3-sec-tld-banner .web3-tld-image-r {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    top: auto !important;
    width: 50% !important;
    max-width: none;
    height: auto !important;
    margin: 0 !important;
  }

  .fn-page-domains-buy-com-domain .web3-sec-tld-banner .web3-tld-image-r img {
    width: 100% !important;
    height: auto !important;
    max-width: none;
    max-height: none;
    aspect-ratio: 7 / 10;
    object-fit: contain !important;
    object-position: 100% 100% !important;
  }
}

/* 769 to 900px: the cards stack one per row and are wide (about 770px); the live 50% box and
 * 664:432 card would leave a tall empty column under three lines of copy, so the card is
 * lower (11:5) and the picture box takes 36%, still anchored bottom right from near the top. */
@media (min-width: 769px) and (max-width: 900px) {
  .fn-page-domains-buy-com-domain .web3-sec-tld-banner {
    aspect-ratio: 11 / 5;
  }

  .fn-page-domains-buy-com-domain .web3-sec-tld-banner .web3-sec-tld-content {
    width: calc(64% - 24px) !important;
  }

  .fn-page-domains-buy-com-domain .web3-sec-tld-banner .web3-tld-image-r {
    width: 36% !important;
  }
}

/* Free-domain "Domain Registration": the laptop photo (2:3 portrait, the scene in rows 24% to
 * 69%, white backdrop above and below) is a full-width 4:3 picture under the text; only the
 * empty backdrop is trimmed (the stored inline object-position: top would cut the lilies).
 * Page-scoped: it replaces the QA3 340px centred cap here. */
.fn-page-free-domain .pwr-bento-grid .pwr-bg img {
  width: 100% !important;
  max-width: none;
  height: auto !important;
  max-height: none;
  aspect-ratio: 4 / 3;
  object-fit: cover !important;
  object-position: 50% 43% !important;
  margin: 0;
}