/* Article template (blog, help, AI blog) and listing additions for PUBLIC_UI_REFRESH.
   Uses only the tokens defined in public-refresh.css (--fn-ink, --fn-muted, --fn-purple,
   --fn-yellow, --fn-line, --fn-lilac) and its radii. Body copy comes from HubSpot with
   inline typography; refreshPostBody strips most of it in memory, and the !important
   rules below win over the mirrored POWER theme and any inline style that remains. */

.fn-article-page {
  /* One article column for header, featured image, body, topics and CTA (owner review 24 Sep:
     the image used to run the full 1296px container and looked oversized next to a 980px title
     block and a 720px body). 720 prose + 60 gap + 300 table of contents. */
  --fn-article-width: 1080px;
  display: block;
  width: 100%;
  background: #fff;
  color: var(--fn-ink);
}
.fn-article.fn-editorial {
  padding-top: 40px;
  padding-bottom: 0;
}

/* Header */
.fn-article-header {
  max-width: var(--fn-article-width);
  margin-left: auto;
  margin-right: auto;
}
.fn-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.5;
}
.fn-breadcrumb li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--fn-muted);
}
.fn-public-refresh .fn-breadcrumb li::before,
.fn-public-refresh .fn-article-toc li::before {
  content: none !important;
  display: none !important;
}
.fn-public-refresh .fn-breadcrumb li + li::before {
  content: "/" !important;
  display: inline !important;
  position: static !important;
  color: var(--fn-muted);
}
.fn-breadcrumb li,
.fn-article-toc li {
  margin: 0 !important;
  padding: 0 !important;
}
.fn-breadcrumb a {
  color: var(--fn-muted);
  text-decoration: none;
}
/* Only the tag crumb is a chip; the section crumb looks the same with or without a tag. */
.fn-breadcrumb-tag a {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--fn-lilac);
  color: var(--fn-purple);
  font-weight: 600;
}
.fn-breadcrumb a:hover {
  color: var(--fn-purple);
}
.fn-public-refresh .fn-article-header h1 {
  margin: 0 0 24px !important;
  font-size: clamp(34px, 4.2vw, 56px) !important;
  text-wrap: balance;
}
.fn-article-standfirst {
  margin: 0 0 32px;
  max-width: 780px;
  color: var(--fn-muted);
  font-size: 19px;
  line-height: 1.65;
}
.fn-article-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
  padding: 18px 0;
  border-top: 1px solid var(--fn-line);
  border-bottom: 1px solid var(--fn-line);
}
.fn-article-meta > p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 0;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fn-muted);
}
.fn-article-meta > p > * + *::before {
  content: "·";
  margin: 0 10px;
  color: var(--fn-muted);
}
.fn-article-author {
  color: var(--fn-ink);
  font-weight: 600;
}
.fn-share {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fn-share a,
.fn-share button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--fn-line);
  border-radius: 999px;
  background: #fff;
  color: var(--fn-ink);
  font: 600 13px/1 Instrument, Arial, sans-serif;
  text-decoration: none;
  cursor: pointer;
}
.fn-share button {
  padding: 0 14px 0 12px;
}
.fn-share a:hover,
.fn-share button:hover {
  border-color: var(--fn-purple);
  color: var(--fn-purple);
}

/* Featured image */
.fn-article-figure {
  max-width: var(--fn-article-width);
  margin: 40px auto 0;
  border: 1px solid var(--fn-line);
  border-radius: 24px;
  overflow: hidden;
  background: var(--fn-lilac);
  line-height: 0;
}
.fn-article-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 720px;
  object-fit: contain;
}

/* Body + table of contents */
.fn-article-layout {
  display: grid;
  grid-template-columns: minmax(0, 720px) minmax(0, 300px);
  justify-content: space-between;
  gap: 60px;
  max-width: var(--fn-article-width);
  margin: 56px auto 0;
}
.fn-article-layout--single {
  /* No table of contents: the text runs the full article column, edge to edge with the
     featured image (owner review 24 Sep). */
  grid-template-columns: minmax(0, 1fr);
}
.fn-article-layout--single .fn-prose {
  max-width: none;
}
.fn-article-aside {
  min-width: 0;
}
.fn-article-toc {
  position: sticky;
  top: 32px;
  max-height: calc(100vh - 64px);
  overflow: auto;
  padding: 24px;
  border: 1px solid var(--fn-line);
  border-radius: 22px;
  background: #fff;
}
.fn-public-refresh .fn-article-toc .fn-eyebrow {
  margin: 0 0 14px !important;
}
.fn-article-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--fn-line);
}
.fn-article-toc a {
  display: block;
  margin-left: -1px;
  padding: 6px 0 6px 14px;
  border-left: 2px solid transparent;
  color: var(--fn-muted);
  font-size: 14px;
  line-height: 1.45;
  text-decoration: none;
}
.fn-article-toc a:hover {
  color: var(--fn-purple);
  border-left-color: var(--fn-purple);
}

/* Prose. Overrides both the global .fn-public-refresh heading scale and inline styles. */
.fn-public-refresh .fn-prose {
  min-width: 0;
  color: var(--fn-ink);
  font: 400 18px/1.7 Instrument, Arial, sans-serif;
  overflow-wrap: break-word;
}
.fn-public-refresh .fn-prose * {
  font-family: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
.fn-public-refresh .fn-prose > :first-child {
  margin-top: 0 !important;
}
/* One fixed gap from the last block to the topic chips, whatever the body ends with (QA1). */
.fn-public-refresh .fn-prose > :last-child {
  margin-bottom: 0 !important;
}
.fn-public-refresh .fn-prose p {
  margin: 0 0 1.25em !important;
  padding: 0 !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
  color: var(--fn-ink) !important;
  background: none !important;
}
.fn-public-refresh .fn-prose span {
  font-size: inherit !important;
  color: inherit !important;
  background: none !important;
}
.fn-public-refresh .fn-prose h2,
.fn-public-refresh .fn-prose h3,
.fn-public-refresh .fn-prose h4,
.fn-public-refresh .fn-prose h5,
.fn-public-refresh .fn-prose h6 {
  font-family: Archivo, Arial, sans-serif !important;
  font-weight: 650 !important;
  color: var(--fn-ink) !important;
  text-align: left !important;
  padding: 0 !important;
  scroll-margin-top: 32px;
}
.fn-public-refresh .fn-prose h2 {
  font-size: clamp(26px, 2.4vw, 32px) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.035em !important;
  margin: 1.9em 0 0.7em !important;
}
.fn-public-refresh .fn-prose h3 {
  font-size: clamp(21px, 1.8vw, 24px) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.025em !important;
  margin: 1.8em 0 0.6em !important;
}
.fn-public-refresh .fn-prose h4,
.fn-public-refresh .fn-prose h5,
.fn-public-refresh .fn-prose h6 {
  font-size: 20px !important;
  line-height: 1.4 !important;
  letter-spacing: -0.015em !important;
  margin: 1.5em 0 0.4em !important;
}
.fn-public-refresh .fn-prose h2 + h3 {
  margin-top: 0.8em !important;
}
.fn-public-refresh .fn-prose strong,
.fn-public-refresh .fn-prose b {
  font-weight: 650;
}
.fn-public-refresh .fn-prose a {
  color: var(--fn-purple) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px;
}
.fn-public-refresh .fn-prose a:hover {
  text-decoration-thickness: 2px !important;
}
.fn-public-refresh .fn-prose a *,
.fn-public-refresh .fn-prose u {
  color: inherit !important;
  text-decoration: none !important;
}
.fn-public-refresh .fn-prose a u {
  text-decoration: none !important;
}

/* Lists: native markers, one rhythm, <p> inside <li> collapses. */
.fn-public-refresh .fn-prose ul,
.fn-public-refresh .fn-prose ol {
  margin: 0 0 1.4em !important;
  padding: 0 0 0 1.5em !important;
}
.fn-public-refresh .fn-prose ul {
  list-style: disc outside !important;
}
.fn-public-refresh .fn-prose ol {
  list-style: decimal outside !important;
}
.fn-public-refresh .fn-prose ul ul {
  list-style-type: circle !important;
}
.fn-public-refresh .fn-prose li {
  display: list-item !important;
  margin: 0 0 0.5em !important;
  padding: 0 0 0 0.3em !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
  color: var(--fn-ink) !important;
  background: none !important;
}
.fn-public-refresh .fn-prose li::before {
  content: none !important;
  display: none !important;
}
.fn-public-refresh .fn-prose li::marker {
  color: var(--fn-purple);
  font-weight: 650;
}
.fn-public-refresh .fn-prose li > p {
  margin: 0 !important;
}
.fn-public-refresh .fn-prose li > ul,
.fn-public-refresh .fn-prose li > ol {
  margin: 0.5em 0 0 !important;
}

/* Media */
.fn-public-refresh .fn-prose img {
  display: block;
  max-width: 100% !important;
  height: auto !important;
  margin: 2em auto !important;
  border-radius: 20px;
}
.fn-public-refresh .fn-prose p img,
.fn-public-refresh .fn-prose a img {
  margin: 1em auto !important;
}
/* An image inside a list item starts at the list text edge (one rule for every list; centring
   it in the indented item box gave unequal side gaps). */
.fn-public-refresh .fn-prose li img,
.fn-public-refresh .fn-prose li p img,
.fn-public-refresh .fn-prose li a img {
  margin: 1em auto 1em 0 !important;
}
.fn-public-refresh .fn-prose .fn-embed {
  position: relative;
  margin: 2em 0;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
  background: var(--fn-lilac);
}
.fn-public-refresh .fn-prose .fn-embed iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
  border-radius: 0;
}
/* HubSpot's responsive-embed wrappers around a video we already frame in .fn-embed: the theme's
   padding and overflow kept the video's bottom margin from collapsing (QA1 24 Sep, 111px gap). */
.fn-public-refresh .fn-prose .hs-responsive-embed-wrapper:has(.fn-embed),
.fn-public-refresh .fn-prose .hs-responsive-embed-inner-wrapper:has(> .fn-embed) {
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  max-width: none !important;
  height: auto !important;
}
.fn-public-refresh .fn-prose iframe {
  max-width: 100%;
  border: 0;
  border-radius: 20px;
}

.fn-public-refresh .fn-prose figure {
  margin: 2em 0 !important;
  padding: 0 !important;
}
.fn-public-refresh .fn-prose figure > .fn-table-wrap {
  margin: 0 !important;
}
/* A WordPress figure image narrower than the column is centred like every other body image
   (QA1 24 Sep: 11 posts had it on the left edge). */
.fn-public-refresh .fn-prose figure > img {
  margin: 0 auto !important;
}
.fn-public-refresh .fn-prose li figure > img {
  margin: 0 auto 0 0 !important;
}
.fn-public-refresh .fn-prose figcaption {
  margin-top: 10px;
  color: var(--fn-muted);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

/* Tables */
.fn-public-refresh .fn-prose .fn-table-wrap {
  margin: 1.8em 0;
  overflow-x: auto;
  border: 1px solid var(--fn-line);
  border-radius: 16px;
}
.fn-public-refresh .fn-prose table {
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: collapse !important;
  font-size: 15px;
  background: #fff;
}
.fn-public-refresh .fn-prose th,
.fn-public-refresh .fn-prose td {
  width: auto !important;
  height: auto !important;
  padding: 12px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--fn-line) !important;
  vertical-align: top;
  text-align: left;
  background: none !important;
}
.fn-public-refresh .fn-prose tr:last-child > td {
  border-bottom: 0 !important;
}
.fn-public-refresh .fn-prose th,
.fn-public-refresh .fn-prose thead td,
.fn-public-refresh .fn-prose tbody:first-child > tr:first-child > td {
  background: var(--fn-lilac) !important;
  font-weight: 650;
}
.fn-public-refresh .fn-prose td p,
.fn-public-refresh .fn-prose th p,
.fn-public-refresh .fn-prose td li {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}
.fn-public-refresh .fn-prose td *,
.fn-public-refresh .fn-prose th * {
  text-align: left !important;
}
.fn-public-refresh .fn-prose td p + p {
  margin-top: 0.5em !important;
}
/* A one-column table is a boxed command or URL: long tokens wrap instead of scrolling. */
.fn-public-refresh .fn-prose table:not(:has(td + td, th + th)) td {
  overflow-wrap: anywhere;
}

/* Quotes, code, rules */
.fn-public-refresh .fn-prose blockquote {
  margin: 2em 0 !important;
  padding: 24px 28px !important;
  border: 0 !important;
  border-left: 4px solid var(--fn-purple) !important;
  border-radius: 0 16px 16px 0;
  background: var(--fn-lilac) !important;
  font-size: 19px;
}
.fn-public-refresh .fn-prose blockquote p:last-child {
  margin-bottom: 0 !important;
}
.fn-public-refresh .fn-prose code {
  overflow-wrap: anywhere;
  border: 0 !important;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--fn-lilac);
  font: 500 0.88em/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}
.fn-public-refresh .fn-prose pre {
  margin: 1.8em 0;
  padding: 20px 24px;
  overflow-x: auto;
  border-radius: 16px;
  background: var(--fn-ink);
  color: #fff;
}
.fn-public-refresh .fn-prose pre code {
  padding: 0;
  background: none;
  color: inherit;
}
.fn-public-refresh .fn-prose hr {
  margin: 2.5em 0;
  border: 0;
  border-top: 1px solid var(--fn-line);
}

/* Topics */
.fn-article-tags {
  max-width: var(--fn-article-width);
  margin: 40px auto 0 !important;
}

/* End-of-article CTA: the lavender card surface used by .fn-builder-callout. */
.fn-article-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 48px;
  max-width: var(--fn-article-width);
  margin: 72px auto 0;
  padding: 48px;
  border-radius: 28px;
  background: var(--fn-lilac);
}
.fn-public-refresh .fn-article-cta h2 {
  margin: 0 0 16px !important;
}
.fn-article-cta h2 span {
  color: var(--fn-purple);
}
.fn-article-cta p:not(.fn-eyebrow) {
  margin: 0;
  color: var(--fn-muted);
  font-size: 17px;
}
.fn-article-cta label {
  display: block;
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
}
.fn-article-cta form > div {
  display: flex;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--fn-line);
  border-radius: 16px;
  background: #fff;
}
.fn-article-cta input[type="search"] {
  flex: 1;
  min-width: 0;
  border: 0 !important;
  background: transparent !important;
  padding: 0 12px !important;
  font: 400 16px/1.4 Instrument, Arial, sans-serif;
  color: var(--fn-ink);
  outline: none;
}
.fn-article-cta form > div:focus-within {
  border-color: var(--fn-purple);
}
.fn-article-cta .fn-button {
  flex-shrink: 0;
}

/* Related articles */
.fn-article-related.fn-editorial {
  padding-top: 96px;
}
.fn-public-refresh .fn-article-related h2 {
  margin: 0 0 40px !important;
}
.fn-public-refresh .fn-post-card h3 {
  font-size: 25px !important;
  margin: 0 !important;
}

/* Card images follow the migrated banner ratios, so text inside a banner is never cut:
   blog banners are ~1.91:1 (1200x628 and siblings), help banners 1281x484. */
.fn-post-card > img {
  aspect-ratio: 1200 / 628;
}
.fn-post-card--contain > img {
  /* Help banners are 1281x484; older help images are 1.91:1 decorative 3D art. Cover fills
     the box so no card shows white side bars (owner review 24 Sep). */
  aspect-ratio: 1281 / 484;
  object-fit: cover;
  object-position: center;
  background: var(--fn-lilac);
  border-bottom: 1px solid var(--fn-line);
}

/* Empty listing */
.fn-empty {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 48px;
  padding: 48px;
  border-radius: 28px;
  background: var(--fn-lilac);
}
.fn-public-refresh .fn-empty h2 {
  margin: 0 0 16px !important;
}
.fn-empty p {
  margin: 0 0 28px;
  color: var(--fn-muted);
  font-size: 17px;
}
.fn-empty img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}

/* Listing grid (QA2, 24 Sep): cards in one row share five row tracks (image, date, title,
   excerpt, link), so a two-line title no longer pushes one excerpt below its neighbours.
   The card's inner div becomes display: contents so its children sit on those tracks. */
@supports (grid-template-rows: subgrid) {
  .fn-post-grid > .fn-post-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 5;
    row-gap: 0;
  }
  .fn-post-grid > .fn-post-card > div {
    display: contents;
  }
  .fn-post-grid > .fn-post-card > img {
    grid-row: 1;
  }
  .fn-post-grid > .fn-post-card > div > * {
    padding: 16px 26px 0;
  }
  .fn-post-grid > .fn-post-card > div > time {
    grid-row: 2;
    padding-top: 26px;
  }
  .fn-post-grid > .fn-post-card > div > h2,
  .fn-post-grid > .fn-post-card > div > h3 {
    grid-row: 3;
  }
  .fn-post-grid > .fn-post-card > div > p {
    grid-row: 4;
  }
  .fn-post-grid > .fn-post-card > div > .fn-read {
    grid-row: 5;
    padding-bottom: 26px;
  }

  /* Ten posts per page in three columns left one card alone on the last row. When the
     count would do that, the first card leads across the whole row instead: image over the
     first columns, text in the last one, on the same column lines as the grid below. */
  @media (min-width: 1151px) {
    .fn-post-grid > .fn-post-card:first-child:nth-last-child(3n + 4) {
      grid-column: 1 / -1;
      grid-template-columns: subgrid;
      /* Flexible first and last tracks absorb the image height, so the text block stays
         together and centred beside it. */
      grid-template-rows: minmax(0, 1fr) auto auto auto auto minmax(0, 1fr);
    }
    .fn-post-grid > .fn-post-card:first-child:nth-last-child(3n + 4) > img {
      grid-column: 1 / -2;
      grid-row: 1 / -1;
    }
    .fn-post-grid > .fn-post-card:first-child:nth-last-child(3n + 4) > div > * {
      grid-column: -2 / -1;
      padding-left: 0;
    }
  }
}

/* The page label stays centred whatever the previous and next links measure. */
.fn-public-refresh .fn-pagination {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}
.fn-pagination > span:last-child {
  justify-self: end;
}
.fn-pagination a {
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .fn-article-layout {
    grid-template-columns: minmax(0, 720px);
  }
  .fn-article-aside {
    display: none;
  }
}
@media (max-width: 800px) {
  .fn-article-cta,
  .fn-empty {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 28px;
  }
}
@media (max-width: 600px) {
  .fn-article.fn-editorial {
    padding-top: 28px;
  }
  .fn-breadcrumb ol {
    margin-bottom: 20px;
  }
  .fn-article-standfirst {
    font-size: 17px;
    margin-bottom: 24px;
  }
  .fn-article-meta {
    padding: 14px 0;
  }
  .fn-share button span {
    display: none;
  }
  .fn-share button {
    padding: 0 10px;
  }
  /* Phone tap targets at least 40px, text at least 14px (QA 24 Sep mobile audit). */
  .fn-breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  .fn-breadcrumb ol {
    gap: 4px 8px;
  }
  .fn-share a,
  .fn-share button {
    min-width: 40px;
    height: 40px;
  }
  .fn-article-tags a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    font-size: 14px;
  }
  .fn-public-refresh .fn-article-page .fn-eyebrow {
    font-size: 14px !important;
  }
  .fn-article-related .fn-post-card time {
    font-size: 14px;
  }
  .fn-article-figure {
    margin-top: 28px;
    border-radius: 20px;
  }
  .fn-article-layout {
    margin-top: 36px;
  }
  .fn-public-refresh .fn-prose,
  .fn-public-refresh .fn-prose p,
  .fn-public-refresh .fn-prose li {
    font-size: 17px !important;
  }
  .fn-public-refresh .fn-prose img {
    border-radius: 16px;
  }
  /* Most phone-width tables overflowed by a few words (QA1): tighter cells let them fit;
     wider ones still scroll inside .fn-table-wrap. */
  .fn-public-refresh .fn-prose table {
    font-size: 14px;
  }
  .fn-public-refresh .fn-prose th,
  .fn-public-refresh .fn-prose td {
    padding: 10px !important;
  }
  .fn-public-refresh .fn-prose td p,
  .fn-public-refresh .fn-prose th p,
  .fn-public-refresh .fn-prose td li {
    font-size: 14px !important;
  }
  .fn-article-cta {
    margin-top: 48px;
  }
  .fn-article-cta form > div {
    flex-direction: column;
  }
  .fn-article-cta input[type="search"] {
    padding: 12px !important;
  }
  .fn-article-related.fn-editorial {
    padding-top: 64px;
  }
  .fn-public-refresh .fn-post-card h3 {
    font-size: 22px !important;
  }
}

/* The mirrored theme gives nav list links the heading face; UI labels use the body face. */
.fn-public-refresh .fn-breadcrumb,
.fn-public-refresh .fn-breadcrumb a,
.fn-public-refresh .fn-article-toc a {
  font-family: Instrument, Arial, sans-serif !important;
  letter-spacing: 0 !important;
}

/* Shared container standard (matches the new header/footer and live freename.com):
   1344px max including 24px side padding, so content is 1296px wide at every breakpoint. */
.fn-public-refresh .fn-editorial {
  max-width: 1344px;
  padding-left: 24px;
  padding-right: 24px;
}

/* A block the normaliser found with nothing visible but a text-less link inside (refreshPostBody
   keeps the link in the DOM, QA1 24 Sep). It would otherwise leave a blank line. */
.fn-public-refresh .fn-prose .fn-prose-empty {
  display: none !important;
}