/* PR #6 fix group 4: overlay rules for this group's pages only (loaded after public-refresh.css and public-refresh-pr6-fixes.css). */
/*
 * Pages: /web3-tools, /web3-emails, /web3-dns, /downloads, /website-builder.
 * Re-verified at 390, 768, 1440, 1728 and 2000px. Every rule below is listed, with the
 * width it was seen at and before/after screenshots, in .review/g4/G4-DEFECT-LOG.md.
 * Presentation only: stored copy, links, forms and anchors stay in the CMS.
 */

/* ---------------------------------------------------------------------------------------
 * 1. Tool cards (dev-box: web3-tools, downloads).
 * ------------------------------------------------------------------------------------- */
/* The old clearfix pseudo-elements became an extra flex item: the lilac card's title sat 28px
 * lower than the cream card's title in the same row. */
.fn-refreshed-page .dev-cta-content-box::before,
.fn-refreshed-page .dev-cta-content-box::after,
.fn-refreshed-page .dev-web3-tld-content-box::before,
.fn-refreshed-page .dev-web3-tld-content-box::after {
  display: none !important;
}
/* The cream card's content did not fill the card, so its button floated above the lilac
 * card's button. Content fills the card, text at the top, button on the bottom line. */
.fn-refreshed-page .dev-box-right {
  align-items: stretch !important;
}
.fn-refreshed-page .dev-box-right > .dev-web3-tld-content-box {
  flex: 1 1 auto;
  align-self: stretch !important;
}
.fn-refreshed-page .dev-cta-content-box,
.fn-refreshed-page .dev-web3-tld-content-box {
  justify-content: flex-start !important;
}
.fn-refreshed-page .dev-cta-button-wrapper {
  margin-top: auto !important;
}
@media (min-width: 1001px) {
  /* Titles with a stored line break run to three lines; the other card in the row gets the
   * same title height so both descriptions start on one line. */
  .fn-refreshed-page .dev-box-container:has(h3 br) h3 {
    min-height: 3.36em;
  }
}

/* ---------------------------------------------------------------------------------------
 * 2. One gutter: the legacy .page-center margin (16px on phones) inset card grids.
 * ------------------------------------------------------------------------------------- */
.fn-refreshed-page .fn-refresh-section .page-center,
.fn-refreshed-page .fn-refresh-hero .page-center {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ---------------------------------------------------------------------------------------
 * 3. Provider bento cards (web3-emails, website-builder).
 * ------------------------------------------------------------------------------------- */
.fn-refreshed-page .pwr-bento-grid .pwr-adc__content-wrappers > [data-index],
.fn-refreshed-page
  .pwr-bento-grid
  .pwr-adc__content-wrappers:has(> [data-index]:nth-child(3):last-child)
  > [data-index]:first-child {
  justify-content: flex-start !important;
}
/* A stored 50px inline gap split each title from its bullets. */
.fn-refreshed-page .pwr-bento-grid .pwr-adc-content--title {
  margin-bottom: 16px !important;
}
.fn-refreshed-page .pwr-bento-grid .pwr-adc-content--image {
  margin-bottom: 16px !important;
}
/* The tall card's button sits on the bottom line, level with the stacked cards' last line. */
.fn-refreshed-page .pwr-bento-grid .pwr-adc-content--button {
  margin-top: auto !important;
  margin-bottom: 0 !important;
}
.fn-refreshed-page .pwr-bento-grid .pwr-adc-content--text:last-child {
  margin-bottom: 0 !important;
}
.fn-refreshed-page .pwr-bento-grid,
.fn-refreshed-page .pwr-bento-grid .pwr-adc__wrapper,
.fn-refreshed-page .pwr-bento-grid .pwr-adc__col {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* Consecutive provider groups are one list: 56px between groups, not ~160px. */
.fn-refreshed-page .dnd-section:has(.pwr-bento-grid) + .dnd-section:has(.pwr-bento-grid) {
  padding-top: 0 !important;
}

/* ---------------------------------------------------------------------------------------
 * 4. One button: yellow, dark label, 52px, label on one line.
 * ------------------------------------------------------------------------------------- */
.fn-public-refresh .pwr-cta_button {
  padding: 13px 23px !important;
  min-height: 52px;
}
.fn-refreshed-page .cta_button,
.fn-refreshed-page .pwr-cta_button,
.fn-refreshed-page .dev-cta-button {
  white-space: nowrap;
  max-width: 100%;
}

/* ---------------------------------------------------------------------------------------
 * 5. Feature banners (web3-emails): readable measure, image whole and in proportion.
 * ------------------------------------------------------------------------------------- */
.fn-refreshed-page .web3-sec-tld-content {
  max-width: 58% !important;
}
.fn-refreshed-page .web3-sec-tld-banner .desc-wrapper,
.fn-refreshed-page .web3-sec-tld-banner .desc-wrapper p {
  max-width: none !important;
  width: auto !important;
}

/* ---------------------------------------------------------------------------------------
 * 6. web3-dns hero: the hotspot illustration.
 * ------------------------------------------------------------------------------------- */
/* A legacy yellow drop-shadow (0 -128px 128px) on the hotspot images tinted the whole hero. */
.fn-refreshed-page .hotspot-container img {
  filter: none !important;
}
/* r3 (24 Sep, owner): the callout was a 325px card laid over the middle of the illustration.
 * Live pins the same words as a small marker on a wide globe (Globe-Layered.svg, 1000px); the
 * refreshed hero draws connectivity.webp instead, so the words become a compact chip pinned
 * across the illustration's lower edge, clear of the central object. Words and logo are the
 * stored ones; only size and placement change. The image carries the rounded corners and the
 * box no longer clips, so the chip sits over the edge (it was cut off on phones). The pin dot has
 * nothing to point at on this illustration and is not drawn. Only web3-dns has a hotspot. */
.fn-refreshed-page .fn-refresh-hero .hotspot-container {
  border-radius: 32px;
  overflow: visible;
  margin-bottom: 28px !important;
}
.fn-refreshed-page .fn-refresh-hero .hotspot-container > img {
  border-radius: 32px;
}
.fn-refreshed-page .fn-refresh-hero .hotspot .dot {
  display: none !important;
}
.fn-refreshed-page .fn-refresh-hero .hotspot {
  top: auto !important;
  bottom: -22px;
  left: 24px !important;
  right: 24px;
}
.fn-refreshed-page .fn-refresh-hero .hotspot-content,
.fn-refreshed-page .fn-refresh-hero .hotspot-content-mobile {
  gap: 12px;
  max-width: 280px !important;
  margin: 0 !important;
  padding: 10px 18px 10px 14px !important;
  border-radius: 14px !important;
  background: var(--fn-yellow) !important;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--fn-ink) 14%, transparent);
}
.fn-refreshed-page .fn-refresh-hero .hotspot-content img,
.fn-refreshed-page .fn-refresh-hero .hotspot-content-mobile img {
  width: 30px !important;
  height: auto !important;
  margin: 0 !important;
  flex: 0 0 auto;
  border-radius: 0 !important;
}
.fn-refreshed-page .fn-refresh-hero .hotspot-content span,
.fn-refreshed-page .fn-refresh-hero .hotspot-content-mobile span {
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 500;
  color: var(--fn-ink) !important;
}
@media (max-width: 768px) {
  .fn-refreshed-page .fn-refresh-hero .hotspot-mobile {
    top: auto !important;
    bottom: -22px;
    left: 16px;
    right: 16px;
    justify-content: center;
  }
}

/* ---------------------------------------------------------------------------------------
 * 7. website-builder hero and callout.
 * ------------------------------------------------------------------------------------- */
/* The cards row is nested in a second dnd-row: each added the 56px card margin (112px). */
.fn-refreshed-page .fn-refresh-hero .dnd-row:has(.pwr-sec-steps) .dnd-row:has(.pwr-sec-steps) {
  margin-top: 0 !important;
}
/* The closing callout sits on the page container (1344px incl. 24px gutters). */
.fn-refreshed-page .fn-builder-callout {
  box-sizing: border-box;
  width: calc(100% - 48px);
  max-width: 1296px;
}

/* ---------------------------------------------------------------------------------------
 * 8. Step and benefit cards: shared rows so titles and text line up across a row.
 * ------------------------------------------------------------------------------------- */
@media (min-width: 701px) {
  .fn-refreshed-page .pwr-steps > .pwr-step:has(> .pwr-mh--wrapper:last-child:empty) {
    display: grid !important;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 14px;
    align-content: start;
  }
}

/* ---------------------------------------------------------------------------------------
 * 9. Responsive.
 * ------------------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Tablet: the hero illustration follows the hero copy, the cards come after it. */
  .fn-refreshed-page .fn-refresh-hero:has(> .fn-hero-copy :is(.pwr-sec-steps, .fn-box-container, .dev-box-container)) > .fn-hero-art {
    order: 1;
    margin-top: 32px !important;
  }
  .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) {
    order: 2;
  }
}
@media (min-width: 701px) and (max-width: 1000px) {
  /* Three cards in two columns: the last one takes the whole row (no half-empty row). */
  .fn-refreshed-page .pwr-steps > .pwr-step:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  /* A centred section intro stays centred under its centred heading (it turned left, 16px). */
  .fn-refreshed-page .dnd-section:not(.fn-refresh-hero) .pwr-sec-txt.pwr--align-c .pwr-sec-txt__content p {
    text-align: center !important;
    max-width: 640px;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 18px !important;
  }
}
@media (max-width: 700px) {
  .fn-refreshed-page .pwr-bento-grid .pwr-adc__content-wrappers > [data-index] {
    padding: 24px !important;
  }
  .fn-refreshed-page .web3-sec-tld-content {
    max-width: none !important;
  }
  .fn-refreshed-page .web3-tld-image-r img {
    max-height: 240px;
    width: auto !important;
    max-width: 100%;
  }
  .fn-refreshed-page .fn-builder-callout {
    width: auto;
    margin: 24px 24px 48px;
    padding: 24px;
  }
}
@media (max-width: 600px) {
  /* No copy below 14px on phones. */
  .fn-public-refresh .fn-eyebrow {
    font-size: 14px !important;
    letter-spacing: 0.08em !important;
  }
}