/* The ported pages in the new look (card yUuWKuyq; plan
   docs/ai/2026/10/2026-10-03-remaining-pages-new-look): About, Contact,
   the process and information pages, the blog, the podcast, the
   agreements, the legal pages, the tools pages and the booking pages.

   They keep the markup the Ignition port gave them, which is a small
   vocabulary - prose in .content, a .side-image, the About team, blog
   and podcast cards, a pager, striped sections and .button - and this
   sheet sets it in the brand's type: Figtree for headings and controls,
   Lato for reading, navy for structure, plum for the thing to click.
   Only layout/_ported.php links it, so its element rules reach no other
   page. Every colour, size and space is a tokens.css value */

/* The page: a reading column on white, with room under the header.
   Long words (the URLs in the legal pages) break rather than push a
   phone sideways */
.po > main {
  display: block;
  padding: var(--po-sp-12) var(--po-sp-8) var(--po-sp-16);
  overflow-wrap: break-word;
}

.po > main .content {
  max-width: 760px;
  margin: 0 auto;
}

/* The blog index is cards, so it takes the width a row of three needs;
   a post's related cards and the podcast's one episode stay in the
   reading column */
.po > main .content:has(> .blog-list:not(.related-blog-posts)) {
  max-width: 1120px;
}

/* Type */

.po > main h1 {
  margin: 0 0 var(--po-sp-6);
  font-size: var(--po-fs-display);
  color: var(--po-brand-ink);
}

.po > main h1 small {
  display: block;
  margin-top: var(--po-sp-2);
  font-size: var(--po-fs-xl);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--po-muted);
}

.po > main h2 {
  margin: var(--po-sp-10) 0 var(--po-sp-3);
  font-size: var(--po-fs-3xl);
}

.po > main h3 {
  margin: var(--po-sp-8) 0 var(--po-sp-2);
  font-size: var(--po-fs-2xl);
}

.po > main h4 {
  margin: var(--po-sp-6) 0 var(--po-sp-2);
  font-size: var(--po-fs-xl);
}

.po > main :is(h1, h2, h3, h4):first-child {
  margin-top: 0;
}

.po > main p {
  margin: 0 0 var(--po-sp-4);
  line-height: 1.7;
}

.po > main :is(ul, ol) {
  margin: 0 0 var(--po-sp-5);
  padding-left: var(--po-sp-6);
}

.po > main li {
  line-height: 1.7;
}

.po > main li + li {
  margin-top: var(--po-sp-2);
}

.po > main li > p {
  margin: 0;
}

.po > main strong {
  font-weight: 700;
  color: var(--po-ink-soft);
}

/* A link inside a sentence is underlined: its navy alone is too close
   to the body text's grey to tell apart */
.po > main :is(p, li, td) a:not(.button) {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.po > main hr {
  margin: var(--po-sp-8) 0;
  border: 0;
  border-top: 1px solid var(--po-line);
}

.po > main article img {
  height: auto;
  border-radius: 8px;
}

.po > main blockquote {
  margin: var(--po-sp-6) 0;
  padding: var(--po-sp-1) var(--po-sp-5);
  border-left: 3px solid var(--po-brand-2);
  color: var(--po-ink-2);
}

.po > main table {
  width: 100%;
  margin: 0 0 var(--po-sp-6);
  border-collapse: collapse;
  font-size: var(--po-fs-lg);
}

.po > main :is(th, td) {
  padding: var(--po-sp-3);
  border-bottom: 1px solid var(--po-line);
  text-align: left;
  vertical-align: top;
}

.po > main th {
  font-family: var(--po-font-ui);
  font-weight: 600;
  color: var(--po-ink-soft);
}

.po > main iframe {
  display: block;
  max-width: 100%;
  border-radius: 8px;
}

/* The title band: the h1 of a page whose heading sat in the old header
   (layout/_ported.php), over the page's first section */
.pg-band {
  padding: var(--po-sp-12) var(--po-sp-8) var(--po-sp-10);
  background: var(--po-brand-tint);
}

.pg-band h1 {
  max-width: 760px;
  margin: 0 auto;
  font-size: var(--po-fs-display);
  color: var(--po-brand-ink);
}

/* Pages built of sections - the tools pages - stripe them edge to edge,
   white then the cool tint, so the column moves into each section */
.po > main:has(> section) {
  padding: 0;
}

.po > main > section {
  padding: var(--po-sp-12) var(--po-sp-8);
}

.po > main > section:nth-of-type(even) {
  background: var(--po-tint-cool);
}

.po > main .section-content {
  max-width: 760px;
  margin: 0 auto;
}

.po > main h2 .subtitle {
  display: block;
  margin-top: var(--po-sp-2);
  font-size: var(--po-fs-xl);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--po-muted);
}

.po > main lite-youtube {
  margin: var(--po-sp-6) 0;
  border-radius: 8px;
}

/* The side picture of the legal and contact pages: beside the text where
   there is room, kept in view while the text scrolls; left out on a
   narrower screen, as the ported page does */
.po > main > .side-image {
  display: none;
}

@media (min-width: 1100px) {
  .po > main:has(> .side-image) {
    display: grid;
    grid-template-columns: 240px minmax(0, 760px);
    justify-content: center;
    align-items: start;
    gap: var(--po-sp-12);
  }

  .po > main > .side-image {
    display: block;
    position: sticky;
    top: calc(var(--po-sp-16) + var(--po-sp-8));
    width: 100%;
    height: 480px;
    object-fit: cover;
    border-radius: 8px;
  }

  .po > main:has(> .side-image) > .content {
    margin: 0;
  }
}

/* Buttons: the ported pages' .button in the chrome's .btn shape - quiet
   by default, plum where the vendor marked one primary or accent. The
   shadow is site.css's landing-page .button, which shares the name */
.po > main .button {
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--po-sp-1);
  min-height: 42px;
  padding: 0 var(--po-sp-4);
  border: 1px solid var(--po-line-2);
  border-radius: 7px;
  background: var(--po-surface);
  color: var(--po-ink-2);
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-lg);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background 130ms, border-color 130ms, color 130ms;
}

.po > main .button:hover {
  background: var(--po-bg-2);
  color: var(--po-ink-soft);
  text-decoration: none;
}

.po > main .button:is(.primary, .accent) {
  border-color: var(--po-cta);
  background: var(--po-cta);
  color: var(--po-surface);
}

.po > main .button:is(.primary, .accent):hover {
  border-color: var(--po-cta-hover);
  background: var(--po-cta-hover);
  color: var(--po-surface);
}

.po > main .button:is(.primary, .accent).outline {
  background: var(--po-surface);
  color: var(--po-cta);
}

.po > main .button:is(.primary, .accent).outline:hover {
  background: var(--po-cta);
  color: var(--po-surface);
}

.po > main .button .material-symbols-sharp {
  font-size: var(--po-fs-2xl);
}

.po > main .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--po-sp-3);
  margin: var(--po-sp-8) 0 0;
}

/* The pager's round buttons, disabled at either end */
.po > main .pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--po-sp-3);
  margin-top: var(--po-sp-10);
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-base);
  color: var(--po-muted);
}

.po > main .button.icon {
  width: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 50%;
  color: var(--po-brand-2);
}

.po > main .button:disabled {
  background: var(--po-bg-3);
  color: var(--po-faint);
  cursor: default;
}

/* The About team: a card each, the photo in a circle */
.po > main .team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--po-sp-5);
  margin: 0 0 var(--po-sp-10);
  padding: 0;
  list-style: none;
}

.po > main .team li {
  margin: 0;
  padding: var(--po-sp-6) var(--po-sp-4);
  border: 1px solid var(--po-line);
  border-radius: 8px;
  text-align: center;
}

.po > main .team .pic {
  width: 120px;
  height: 120px;
  margin: 0 auto var(--po-sp-4);
  overflow: hidden;
  border-radius: 50%;
  background: var(--po-bg-3);
}

.po > main .team img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.po > main .team .name {
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-xl);
  font-weight: 600;
  line-height: 1.3;
  color: var(--po-ink-soft);
}

.po > main .team .title {
  margin-top: var(--po-sp-1);
  font-size: var(--po-fs-base);
  line-height: 1.4;
  color: var(--po-muted);
}

.po > main .team .credentials {
  margin-top: var(--po-sp-2);
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-xs);
  font-weight: 600;
  letter-spacing: var(--po-ls-caps);
  text-transform: uppercase;
  color: var(--po-brand-2);
}

/* Blog and podcast cards: the picture across the top, cropped from a
   quarter of the way down so a portrait keeps its face (YkKaBaDx) */
.po > main :is(.blog-list, .podcast-list) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--po-sp-6);
  margin: var(--po-sp-8) 0;
  padding: 0;
  list-style: none;
}

.po > main :is(.blog-list, .podcast-list) > li {
  display: flex;
  flex-direction: column;
  gap: var(--po-sp-2);
  margin: 0;
  padding: 0 0 var(--po-sp-5);
  overflow: hidden;
  border: 1px solid var(--po-line);
  border-radius: 8px;
  background: var(--po-surface);
  box-shadow: var(--po-sh-1);
}

/* A post with no picture starts at the card's padding instead */
.po > main :is(.blog-list, .podcast-list) > li:not(:has(> .hero)) {
  padding-top: var(--po-sp-5);
}

.po > main :is(.blog-list, .podcast-list) > li > * {
  margin-right: var(--po-sp-5);
  margin-left: var(--po-sp-5);
}

.po > main :is(.blog-list, .podcast-list) .hero {
  margin: 0 0 var(--po-sp-2);
  aspect-ratio: 16 / 9;
  background-color: var(--po-bg-3);
  background-position: center 25%;
  background-size: cover;
}

.po > main :is(.blog-list, .podcast-list) h2 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: var(--po-fs-xl);
  line-height: 1.3;
}

.po > main :is(.blog-list, .podcast-list) time {
  font-size: var(--po-fs-md);
  color: var(--po-muted);
}

/* The summary, three lines at most */
.po > main .summary-container p {
  max-height: calc(1.6em * 3);
  margin: 0;
  overflow: hidden;
  font-size: var(--po-fs-lg);
  line-height: 1.6;
}

.po > main :is(.blog-list, .podcast-list) .button {
  align-self: flex-start;
  margin-top: auto;
}

.po > main .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--po-sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.po > main .tags .tag {
  margin: 0;
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-sm);
  font-weight: 600;
  line-height: 1.4;
  color: var(--po-brand-2);
}

.po > main .tags .tag:not(:last-child)::after {
  content: ",";
}

/* A post or agreement: its date and the share buttons over the text */
.po > main .meta-and-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--po-sp-4);
  margin: 0 0 var(--po-sp-8);
  padding-bottom: var(--po-sp-4);
  border-bottom: 1px solid var(--po-line);
}

.po > main .publication-date {
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-base);
  color: var(--po-muted);
}

.po > main .publication-date time {
  color: var(--po-ink-2);
}

/* The block under a post: the estimate or the search (their own
   sheets), or the newest other post on the cool tint */
.po > main .call-to-action {
  margin: var(--po-sp-12) 0;
}

.po > main .latest-blog-post-teaser {
  padding: var(--po-sp-8);
  border-radius: 8px;
  background: var(--po-tint-cool);
}

.po > main .latest-blog-post-teaser h3 {
  margin-top: 0;
}

.po > main .content > h2 {
  margin-top: var(--po-sp-12);
}

.po > main .content > .actions {
  justify-content: center;
}

@media (max-width: 760px) {
  .po > main {
    padding: var(--po-sp-8) var(--po-sp-5) var(--po-sp-12);
  }

  .po > main > section,
  .pg-band {
    padding: var(--po-sp-8) var(--po-sp-5);
  }

  .po > main h1,
  .pg-band h1 {
    font-size: var(--po-fs-4xl);
  }

  .po > main .latest-blog-post-teaser {
    padding: var(--po-sp-5);
  }
}