/* PR #6 fix group 3: overlay rules for this group's pages only (loaded after public-refresh.css and public-refresh-pr6-fixes.css). */

/* Legal URL wrap (from the legal parity verifier, see public-refresh-legal-fixes.css for the full rationale). Loaded via the g3 group sheet so no PR #6 file is touched. */
main.fn-legal :is(p, li, a, td, th, span, strong, em) {
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------------------
 * Shared (g3 pages): an intro description holding only a non-breaking space (marked
 * fn-empty by fixGroup3) takes no space. Founders: the heading sits right on its cards.
 * ------------------------------------------------------------------------------------- */
.fn-refreshed-page .fn-empty {
  display: none !important;
}

/* ---------------------------------------------------------------------------------------
 * Privacy policy: the HubSpot TOC widget is empty in the CMS (no tocbot script), so its box
 * only said "loading..." and overlapped the first clause. Its two strings are allowlisted
 * widget chrome (tests/int/fixtures/legal/allowlist.json); no legal text is inside it.
 * ------------------------------------------------------------------------------------- */
.fn-refreshed-page.fn-legal .pwr-toc-menu {
  display: none !important;
}

/* ---------------------------------------------------------------------------------------
 * About us.
 * Hero: eyebrow + two-tone H1 + short lead, illustration whole on the right (the long intro
 * and the ICANN globe were moved to .fn-about-intro by fixGroup3).
 * ------------------------------------------------------------------------------------- */
.fn-refreshed-page .fn-refresh-hero .fn-hero-lead {
  margin: 24px 0 0 !important;
  max-width: 560px;
  font-size: 20px !important;
  line-height: 1.5 !important;
  color: var(--fn-ink) !important;
  text-align: left !important;
}
.fn-refreshed-page .fn-refresh-hero .fn-hero-lead strong {
  font-weight: 500 !important;
}
/* Owner review 2: the illustration (3:2) was taller than this short copy, so under the shared
 * centring it rose above the eyebrow and ran below the lead. It now takes exactly the copy's
 * height (the art box adds no height to the row: height 0, min-height 100%), whole, on the
 * container's right edge; the hero keeps the shared 84px top padding. */
@media (min-width: 901px) {
  .fn-refreshed-page .fn-refresh-hero:has(+ .fn-about-intro) > .fn-hero-art {
    align-self: stretch !important;
    height: 0;
    min-height: 100%;
    justify-content: flex-end !important;
  }
  .fn-refreshed-page .fn-refresh-hero:has(+ .fn-about-intro) > .fn-hero-art img {
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
  }
}
/* The intro sits on the soft grey ground live gives it (the Story band's grey): the globe SVG
 * is a WHITE dome with purple continents, so on a white section the dome vanished and only its
 * stored yellow glow showed, as a stray cream arc behind the text with purple slivers under it. */
.fn-refreshed-page .fn-about-intro {
  padding-top: 64px !important;
  padding-bottom: 56px !important;
  background: #f6f6f8 !important;
  /* The globe's glow paints outside the image box; it stays inside this band. */
  overflow: clip !important;
}
.fn-refreshed-page .fn-about-intro .dnd-column,
.fn-refreshed-page .fn-about-intro .row-fluid {
  display: block !important;
  width: 100% !important;
}
.fn-refreshed-page .fn-about-intro .pwr-sec-txt,
.fn-refreshed-page .fn-about-intro .page-center {
  padding: 0 !important;
  margin: 0 auto !important;
  max-width: none !important;
}
.fn-refreshed-page .fn-about-intro .pwr-sec-txt__content {
  max-width: 760px;
  margin: 0 auto !important;
}
.fn-refreshed-page .fn-about-intro .pwr-sec-txt__content p {
  max-width: 760px !important;
  margin: 0 auto !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
  text-align: left !important;
  color: var(--fn-muted) !important;
}
.fn-refreshed-page .fn-about-intro .pwr-sec-txt__content p strong {
  color: var(--fn-ink) !important;
}
/* The ICANN globe (with its two stored chips) is shown whole below the intro, as on live. */
.fn-refreshed-page .fn-about-intro .hotspot-container {
  position: relative;
  width: 100% !important;
  max-width: 1000px !important;
  margin: 48px auto 0 !important;
}
.fn-refreshed-page .fn-about-intro .hotspot-container > img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  border-radius: 0 !important;
  /* The theme's glow (0 -128px 128px) reached ~380px up, over every line of the intro; it now
   * hugs the dome. */
  filter: drop-shadow(0 -24px 64px rgba(255, 204, 51, 0.3)) !important;
}

/* Founders: the theme's "TOUCH" hint is chrome for its hover-flip cards (template_pwr-touch
 * hides it on pointer devices, and that sheet is not among this page's stored cssFiles). The
 * redesigned card always shows the name box, so the hint is never needed. */
.fn-refreshed-page .pwr-touch-btn {
  display: none !important;
}

/* Press logos: one clean, evenly spaced row at one height, right under the label. */
.fn-refreshed-page .pwr-sec-clients__intro-sec {
  margin: 0 0 24px !important;
  padding: 0 !important;
}
.fn-refreshed-page .logo-gallery {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 24px 32px;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
.fn-refreshed-page .logo-gallery .logo-item {
  display: flex !important;
  align-items: center;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto;
}
.fn-refreshed-page .logo-gallery img {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  height: 28px !important;
}
@media (max-width: 767px) {
  .fn-refreshed-page .logo-gallery {
    gap: 20px 28px;
  }
  .fn-refreshed-page .logo-gallery img {
    height: 22px !important;
  }
}

/* ---------------------------------------------------------------------------------------
 * Help center.
 * ------------------------------------------------------------------------------------- */
/* The Contact / Feedback cards follow the hero as their own section (fixGroup3). */
.fn-refreshed-page .fn-hero-rest {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* One button: 52px tall (Chat With Support was 56, the search button 58). */
.fn-refreshed-page :is(.pwr-cta_button, .dev-cta-button) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px !important;
  min-height: 52px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
}
.fn-refreshed-page :is(.pwr-cta_button, .dev-cta-button) :is(svg, i, img) {
  max-height: 20px;
}
.fn-refreshed-page .hs-search-field__input,
.fn-refreshed-page .hs-search-field__button {
  height: 52px !important;
  min-height: 52px !important;
  box-sizing: border-box !important;
}
/* Main categories (desktop version, 768px and up): even cards in one grid, no 200px holes
 * between the rows. The page's stored CSS hid the first row at exactly 768px
 * (`#hs_cos_wrapper_widget_1746175443350 div:first-child`, 575 to 768px); it is shown again. */
@media (min-width: 768px) {
  .fn-refreshed-page .fn-help-cats .hs_cos_wrapper div:first-child {
    display: block !important;
  }
}
.fn-refreshed-page .fn-help-cats {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
.fn-refreshed-page .fn-help-cats:not(:has(~ .fn-help-cats)) {
  padding-bottom: 56px !important;
}
.fn-refreshed-page .fn-help-cats > .row-fluid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.fn-refreshed-page .fn-help-cats > .row-fluid::before,
.fn-refreshed-page .fn-help-cats > .row-fluid::after {
  content: none !important;
}
.fn-refreshed-page .fn-help-cats > .row-fluid > .dnd-column {
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
  padding: 28px !important;
  background: var(--fn-lilac) !important;
  border: 1px solid var(--fn-line) !important;
  border-radius: 24px !important;
}
.fn-refreshed-page .fn-help-cats > .row-fluid > .dnd-column:not(:has(h4)) {
  display: none !important;
}
.fn-refreshed-page .fn-help-cats :is(.pwr-sec-txt, .page-center, .pwr-sec-txt__content, .pwr-rich-text, .dnd-module, .dnd-row) {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}
.fn-refreshed-page .fn-help-cats .pwr-sec-txt__intro-sec {
  margin: 0 0 4px !important;
  padding: 0 !important;
}
.fn-refreshed-page .fn-help-cats .pwr-sec-txt__content {
  margin-top: 0 !important;
}
@media (max-width: 1023px) {
  .fn-refreshed-page .fn-help-cats > .row-fluid > .dnd-column {
    padding: 20px !important;
  }
}
.fn-refreshed-page .fn-help-cats h4 {
  margin: 0 0 12px !important;
  font-size: 20px !important;
  line-height: 1.3 !important;
  text-align: left !important;
}
.fn-refreshed-page :is(.fn-help-cats, .fn-help-cats-m) :is(.pwr-sec-txt__left, .pwr-simple-list-item__desc) br {
  display: none;
}
.fn-refreshed-page :is(.fn-help-cats, .fn-help-cats-m) :is(.pwr-sec-txt__left, .pwr-simple-list-item__desc) a {
  display: block !important;
  min-height: 40px;
  padding: 9px 0 !important;
  box-sizing: border-box;
  font-size: 16px !important;
  line-height: 1.4 !important;
  color: var(--fn-ink) !important;
}
/* Mobile version (below 768px): one even rhythm between the cards. */
.fn-refreshed-page .fn-help-cats-m {
  padding-top: 0 !important;
  padding-bottom: 16px !important;
}
.fn-refreshed-page .fn-help-cats-m:not(:has(~ .fn-help-cats-m)) {
  padding-bottom: 56px !important;
}
.fn-refreshed-page .fn-help-cats-m > .row-fluid > .dnd-column {
  margin: 0 0 16px !important;
}
.fn-refreshed-page .fn-help-cats-m > .row-fluid > .dnd-column:last-child {
  margin-bottom: 0 !important;
}
.fn-refreshed-page .fn-help-cats-m :is(.pwr-simple-list-item, .pwr-sec-simple-list-items__container) {
  margin: 0 !important;
}

/* Phones: the legacy .page-center adds a 16px side margin inside the section's 24px padding,
 * so cards and headings sat 40px in while the hero sat at 24px. One 24px gutter everywhere. */
@media (max-width: 767px) {
  .fn-refreshed-page .dnd-section .page-center {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
.fn-refreshed-page .fn-help-cats-m .pwr-simple-list-item__title {
  font-size: 18px !important;
  line-height: 1.3 !important;
  margin: 0 0 4px !important;
}

/* Phones: no text under 14px (eyebrows, timeline dates, the press label were 12px) and every
 * link a thumb can hit is 40px (the founders' social icons were 26x30). */
@media (max-width: 767px) {
  .fn-refreshed-page .fn-eyebrow,
  .fn-refreshed-page .pwr-sec__title-intro,
  .fn-refreshed-page .pwr-timeline-item h4:first-of-type {
    font-size: 14px !important;
  }
  .fn-refreshed-page .pwr-team-member__contact .pwr-social-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
  }
}

/* The theme's "show more" script is not in the CMS, so its targets stayed "collapsed": at
 * tablet widths the timeline kept a bottom fade mask over the last milestones. Show all. */
.fn-refreshed-page .pwr-show-more__target--collapsed {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  max-height: none !important;
}
.fn-refreshed-page .pwr-show-more__container {
  display: none !important;
}
/* At 768px the theme floats the stored mobile ICANN chip over the middle of the globe; it
 * sits right under the globe instead. */
@media (max-width: 1023px) {
  .fn-refreshed-page .fn-about-intro .hotspot-container {
    display: block !important;
  }
  .fn-refreshed-page .fn-about-intro .hotspot-mobile {
    position: static !important;
    display: flex !important;
    justify-content: center;
    margin-top: 24px;
  }
  .fn-refreshed-page .fn-about-intro .hotspot-content-mobile {
    margin-top: 0 !important;
  }
}

/* ---------------------------------------------------------------------------------------
 * About us, founders: live's hover card in the new style. On hover (pointer devices), on
 * keyboard focus, or when the card's toggle button is pressed (tap, Enter, Space: fn-open +
 * aria-expanded, fixGroup3), a dark panel fades over the photo with the stored name, role,
 * bio and social links; the light name box fades out. The photo stays whole underneath.
 * ------------------------------------------------------------------------------------- */
.fn-refreshed-page .pwr-team-member .fn-team-box,
.fn-refreshed-page .pwr-team-member .pwr-3D-box__sensor {
  transform: none !important;
}
.fn-refreshed-page .pwr-team-member .pwr-team-member__overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1;
  background: rgba(21, 23, 27, 0.86) !important;
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 0.25s ease !important;
}
.fn-refreshed-page .fn-team-toggle {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fn-refreshed-page .fn-team-toggle:focus-visible {
  outline: 3px solid var(--fn-purple);
  outline-offset: -3px;
}
.fn-refreshed-page .pwr-team-member .pwr-3D-box__info-box {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  z-index: 3;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 32px !important;
  text-align: center;
  overflow-y: auto;
  transform: none !important;
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    visibility 0s linear 0.25s !important;
}
.fn-refreshed-page .pwr-team-member .pwr-3D-box__info-box .pwr-team-member__name {
  font:
    650 22px/1.3 Archivo,
    Arial,
    sans-serif !important;
  color: #fff !important;
}
.fn-refreshed-page .pwr-team-member .pwr-3D-box__info-box .pwr-team-member__job-title {
  margin: 4px 0 0 !important;
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.82) !important;
}
.fn-refreshed-page .pwr-team-member .pwr-3D-box__info-box .pwr-team-member__desc,
.fn-refreshed-page .pwr-team-member .pwr-3D-box__info-box .pwr-team-member__desc * {
  display: block;
  margin: 16px 0 0 !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: #fff !important;
}
.fn-refreshed-page .pwr-team-member .pwr-3D-box__info-box .pwr-team-member__desc * {
  display: inline;
  margin: 0 !important;
}
.fn-refreshed-page .pwr-team-member .pwr-team-member__contact {
  display: flex !important;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 0 !important;
}
.fn-refreshed-page .pwr-team-member .pwr-team-member__contact .pwr-social-icon {
  /* Identical 40px targets: the theme's asymmetric padding (0 .7em, none on the first-child's
   * left or the last-child's right) pushed the X glyph 6px left and the "in" 5px right. */
  display: grid !important;
  place-items: center;
  box-sizing: border-box;
  width: 40px !important;
  height: 40px !important;
  padding: 2px !important;
  margin: 0 !important;
  border-radius: 999px;
  background-clip: content-box;
  color: #fff !important;
  opacity: 1 !important;
  pointer-events: auto;
  transition: background-color 0.2s ease;
}
.fn-refreshed-page .pwr-team-member .pwr-team-member__contact .pwr-social-icon[hidden] {
  display: none !important;
}
.fn-refreshed-page .pwr-team-member .pwr-team-member__contact .pwr-social-icon > span {
  display: contents !important;
}
/* A subtle 36px circle (inside the 40px target) on hover and keyboard focus only. */
.fn-refreshed-page .pwr-team-member .pwr-team-member__contact .pwr-social-icon:is(:hover, :focus-visible) {
  background-color: rgba(255, 255, 255, 0.16);
}
.fn-refreshed-page .pwr-team-member .pwr-team-member__contact .pwr-social-icon:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 0 !important;
}
/* The theme's keyboard ring is drawn at the 20px glyph box, off-centre from the new circle. */
body:has(.pwr-team-member .pwr-social-icon:focus-visible) .pwr-focus-highlight {
  opacity: 0 !important;
}
/* One glyph size: fixGroup3 gives each stored icon a square grid centred on its glyph. */
.fn-refreshed-page .pwr-team-member .pwr-team-member__contact svg {
  display: block;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  fill: #fff !important;
  overflow: visible;
}
.fn-refreshed-page .pwr-team-member .pwr-team-member__name-tag {
  z-index: 1;
  transition: opacity 0.25s ease;
}
/* Open. */
.fn-refreshed-page .pwr-team-member.fn-open :is(.pwr-team-member__overlay, .pwr-3D-box__info-box),
.fn-refreshed-page .pwr-team-member:has(:focus-visible) :is(.pwr-team-member__overlay, .pwr-3D-box__info-box) {
  opacity: 1 !important;
  visibility: visible;
  transition:
    opacity 0.25s ease,
    visibility 0s !important;
}
.fn-refreshed-page .pwr-team-member.fn-open .pwr-team-member__name-tag,
.fn-refreshed-page .pwr-team-member:has(:focus-visible) .pwr-team-member__name-tag {
  opacity: 0;
}
@media (hover: hover) {
  .fn-refreshed-page .pwr-team-member:hover :is(.pwr-team-member__overlay, .pwr-3D-box__info-box) {
    opacity: 1 !important;
    visibility: visible;
    transition:
      opacity 0.25s ease,
      visibility 0s !important;
  }
  .fn-refreshed-page .pwr-team-member:hover .pwr-team-member__name-tag {
    opacity: 0;
  }
}
@media (max-width: 767px) {
  .fn-refreshed-page .pwr-team-member .pwr-3D-box__info-box {
    padding: 24px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fn-refreshed-page .pwr-team-member :is(.pwr-team-member__overlay, .pwr-3D-box__info-box, .pwr-team-member__name-tag) {
    transition: none !important;
  }
}

/* ---------------------------------------------------------------------------------------
 * About us, intro (owner review 2): a centred lead, as on live. Each stored line is its own
 * <p class="fn-line"> (fixGroup3 split the <br> lines), centred in the 760px column; one even
 * 8px gap inside a group and 28px where the stored double <br> separated the two groups.
 * ------------------------------------------------------------------------------------- */
.fn-refreshed-page .fn-about-intro .pwr-sec-txt__content p.fn-line {
  margin: 8px auto 0 !important;
  text-align: center !important;
  text-wrap: pretty;
}
.fn-refreshed-page .fn-about-intro .pwr-sec-txt__content p.fn-line:first-child {
  margin-top: 0 !important;
}
.fn-refreshed-page .fn-about-intro .pwr-sec-txt__content p.fn-line.fn-group-start {
  margin-top: 28px !important;
}

/* ---------------------------------------------------------------------------------------
 * Help center, Contact Support + Leave Feedback (owner review r4, 24 Sep). The shared tool-card
 * layout floated the laptop photo mid-card on a 32px inset with the copy squeezed to 316px,
 * and the Feedback card was mostly empty under its button. As on live (about 70/30): the
 * Contact card is the wide one, its photo stands on the card's bottom edge at the right, whole,
 * and the copy keeps a readable measure; both cards are one height with the title on one top
 * line and the button on one bottom line. The two images, copy and buttons are unchanged.
 * ------------------------------------------------------------------------------------- */
html body.fn-public-refresh main.fn-refreshed-page .fn-help-contact .dev-box-container {
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  align-items: stretch !important;
}
html body.fn-public-refresh main.fn-refreshed-page .fn-help-contact :is(.dev-box-left, .dev-box-right) {
  align-items: stretch !important;
}
html body.fn-public-refresh main.fn-refreshed-page .fn-help-contact .dev-box-left > div {
  width: 100%;
  display: flex !important;
  align-items: stretch !important;
}
html body.fn-public-refresh main.fn-refreshed-page .fn-help-contact .dev-cta {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: stretch !important;
  height: auto !important;
}
html body.fn-public-refresh main.fn-refreshed-page .fn-help-contact :is(.dev-cta-content-box, .dev-web3-tld-content-box) {
  flex: 1 1 auto;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 28px !important;
  height: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
  align-self: stretch !important;
}
/* An empty legacy ::before is a flex item: with the 28px gap it pushed the Contact title 28px
 * below the Feedback title. */
html body.fn-public-refresh main.fn-refreshed-page .fn-help-contact :is(.dev-cta-content-box, .dev-web3-tld-content-box)::before,
html body.fn-public-refresh main.fn-refreshed-page .fn-help-contact :is(.dev-cta-content-box, .dev-web3-tld-content-box)::after {
  content: none !important;
  display: none !important;
}
html body.fn-public-refresh main.fn-refreshed-page .fn-help-contact .dev-cta-content-box {
  padding-right: 0 !important;
}
html body.fn-public-refresh main.fn-refreshed-page .fn-help-contact .dev-cta-text {
  justify-content: flex-start !important;
  margin: 0 !important;
}
/* The photo stands on the card's bottom edge at the right; the card's own padding is its
 * breathing room above (the cut-out's transparent margin keeps it clear of the right edge). */
html body.fn-public-refresh main.fn-refreshed-page .fn-help-contact .dev-cta-image-box.desktop-only {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  padding: 32px 0 0 0 !important;
  margin: 0 !important;
  min-width: 0;
}
html body.fn-public-refresh main.fn-refreshed-page .fn-help-contact .dev-cta-image-box.desktop-only img {
  display: block;
  width: 100% !important;
  max-width: 420px !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  object-fit: contain !important;
}
/* Stacked (up to 1000px): one card per row. The Contact card keeps copy and photo side by side
 * while it is wide enough (tablets); on phones (up to 600px) the photo follows the button, on
 * the card's bottom edge at the right, never wider than 340px. */
@media (max-width: 1000px) {
  html body.fn-public-refresh main.fn-refreshed-page .fn-help-contact .dev-box-container {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 600px) {
  html body.fn-public-refresh main.fn-refreshed-page .fn-help-contact .dev-cta {
    grid-template-columns: minmax(0, 1fr);
  }
  html body.fn-public-refresh main.fn-refreshed-page .fn-help-contact .dev-cta-content-box {
    padding-right: var(--fn-card-pad) !important;
  }
  html body.fn-public-refresh main.fn-refreshed-page .fn-help-contact .dev-cta-image-box.desktop-only {
    padding: 0 var(--fn-card-pad) 0 !important;
  }
  html body.fn-public-refresh main.fn-refreshed-page .fn-help-contact .dev-cta-image-box.desktop-only img {
    max-width: 340px !important;
  }
}