/*
 * @pot/blocks-evoped — CSS of the sealed leaves (ADR-0041): contact.lines@1,
 * contact.form@1, events.entries@1, team.members@1, header.bar@1,
 * header.centered@1, footer.social@1, pricing.plans@1, gallery.images@1 (on top of the island's gallery.css),
 * media.video@1, testimonials.attribution@1, text.feature@1, and of the
 * sealed frames hero.angled-frame@1, cta.panel-frame@1,
 * testimonials.large-frame@1 and features.panorama-frame@1. The
 * presentations themselves are patterns over core blocks and carry no CSS;
 * their layout lives in `@pot/renderer/styles.css`.
 *
 * Load after `@pot/renderer/styles.css`. Tokens only (ADR-0004/0030): every
 * colour is a `--pot-color-*` role, `currentColor`, or a `color-mix` of roles;
 * type sizes are `--pot-text-*`. Each leaf root sets its text colour from
 * `--pot-color-foreground`, which a Section's `data-bg` scopes. Media queries
 * only at the system breakpoints (sm 640, md 768, lg 1024, xl 1280, min-width)
 * plus `prefers-reduced-motion` (ADR-0041; linted). Comments cite the spross
 * source (`src/components/…`).
 *
 * A published `@N` is immutable: a visual change ships as a new versioned
 * stylesheet with the renderer pin (CONTRACT.md).
 */

.pot-contact-lines,
.pot-contact-plain,
.pot-contact-form,
.pot-events-entries,
.pot-team-members,
.pot-header-bar,
.pot-footer-legal,
.pot-testimonial-attribution,
.pot-feature {
  color: var(--pot-color-foreground);
  min-width: 0;
}
.pot-events-entry-title {
  overflow-wrap: break-word;
}

/* Body copy of an event reads muted on every surface. */
.pot-events-entry-text .pot-rich-paragraph,
.pot-events-entry-text .pot-rich-list {
  color: var(--pot-color-muted-foreground);
}

/* The inverted button on a brand surface: white with the darkest text
 * (theme/-utils/getInvertedButtonColor.ts:21-22, `text-brand-dark`, near black
 * on the yellow brand). The page foreground is the nearest role that holds
 * AA on the white button for every brand. */
[data-bg="primary"] {
  --pot-button-primary-fg: var(--pot-page-foreground);
}

/* Icon row: icon, then text (BlockContact.tsx:87-94). */
.pot-icon-row {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.pot-icon-row-icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
}

/* contact.lines@1 — blocks/BlockFeature.tsx (display: icons) ------------- */

/* 40px under the body: 16 of the enclosing stack plus 24 (VariantContained.tsx:98);
 * 40px between items. */
.pot-contact-lines {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
/* Row: tile, 12px, text (l.40). */
.pot-contact-line {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}
/* Tile 48x48, radius 4, brand; icon 24 in brand-lighter (l.47-53). */
.pot-contact-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--pot-radius-sm);
  background: var(--pot-color-primary);
  color: var(--pot-color-accent);
}
.pot-contact-svg {
  width: 1.5rem;
  height: 1.5rem;
}
/* Title 16/24 (sm 18/24), 400, headline; body 14/20 (sm 16/24) muted, 4px
 * apart (l.33-34, 61-80). */
.pot-contact-line-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.pot-contact-label {
  font-size: var(--pot-text-base);
  line-height: 1.5rem;
  font-weight: var(--pot-font-weight-normal);
}
.pot-contact-value {
  font-size: var(--pot-text-sm);
  line-height: 1.25rem;
  color: var(--pot-color-muted-foreground);
  overflow-wrap: anywhere;
}
@media (min-width: 640px) {
  .pot-contact-label {
    font-size: var(--pot-text-lg);
  }
  .pot-contact-value {
    font-size: var(--pot-text-base);
    line-height: 1.5rem;
  }
}
/* Contact values are body text, not brand links: colour inherited, no
 * decoration; keyboard focus stays visible. */
.pot-contact-link,
.pot-contact-plain-link,
.pot-events-contact-link {
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.pot-contact-link:focus-visible,
.pot-contact-plain-link:focus-visible,
.pot-events-contact-link:focus-visible {
  outline: 2px solid var(--pot-color-brand-text);
  outline-offset: 2px;
}

/* The email line renders as a prose link (BlockFeature body is Markdown, which
 * autolinks it: brand text, bold; the phone stays plain text). */
.pot-contact-link-mail {
  color: var(--pot-color-brand-text);
  font-weight: var(--pot-font-weight-bold);
}
.pot-contact-link-mail:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* contact.lines@1 display: plain — SectionContact ContactDetails.tsx:30,
 * BlockContact.tsx:49-94: 40px under the body (12 of the stack plus 28), 16px
 * muted; address block, phone row 24px under it, mail row 12px. */
.pot-contact-plain {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 1.75rem;
  color: var(--pot-color-muted-foreground);
}
.pot-contact-plain-address {
  margin: 0;
}
.pot-contact-plain-address + .pot-contact-plain-link {
  margin-top: 1.5rem;
}
.pot-contact-plain-link + .pot-contact-plain-link {
  margin-top: 0.75rem;
}

/* contact.form@1 — SectionContact form (live DOM) ------------------------- */

.pot-contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.pot-contact-submit {
  margin-top: 0.5rem;
}

.pot-contact-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.pot-contact-field-label {
  /* Live sets the label inline in a 16/24 line: 3px above it, 27px to the field. */
  margin-top: 0.1875rem;
  font-size: var(--pot-text-sm);
  line-height: 1.25rem;
  color: var(--pot-color-muted-foreground);
}
/* Transparent field on the section surface: text and border follow the
 * surface's scoped roles, so the form reads on light, brand and dark. */
.pot-contact-input {
  box-sizing: border-box;
  width: 100%;
  padding: 0.75rem 1rem;
  font: inherit;
  font-size: var(--pot-text-base);
  line-height: 1.5;
  color: inherit;
  background: transparent;
  /* Full muted text, not live's 70 % mix (2.7:1): a field's boundary needs
   * 3:1 against the surface (WCAG 1.4.11; the gate checks the role). */
  border: 1px solid var(--pot-color-muted-foreground);
  border-radius: var(--pot-radius-md);
}
textarea.pot-contact-input {
  resize: vertical;
}
/* Focus: a 2px ring of border plus 1px shadow, no outline (live form), in
 * brand text instead of live's brand fill, which misses 3:1 on light brands
 * (WCAG 1.4.11). */
.pot-contact-input:focus {
  outline: none;
  border-color: var(--pot-color-brand-text);
  box-shadow: 0 0 0 1px var(--pot-color-brand-text);
}
/* Privacy note 16px under the button: shield 16 (2px down), 6px, text 14/20
 * (spross Form/FormPrivacyNotice.tsx). The live shield is a plain flex item
 * (`w-4 h-4`, shrinkable): where the text wraps it gives way and draws
 * narrower, about 11 px at 390, a full 16 px once the note fits one line. */
.pot-contact-note {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  margin: -0.5rem 0 0;
  font-size: var(--pot-text-sm);
  line-height: 1.25rem;
  color: var(--pot-color-muted-foreground);
}
.pot-contact-note-icon {
  flex: 0 1 auto;
  width: 1rem;
  height: 1rem;
  margin-top: 0.125rem;
}
.pot-contact-note a {
  color: var(--pot-color-brand-text);
  font-weight: var(--pot-font-weight-bold);
  text-decoration: none;
}
.pot-contact-note a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Honeypot (no-JS path): off screen, never seen or focused by a person. */
.pot-contact-form .pot-form-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Second column of a 2 + 3 split (contact.split@1, events.detailed@1),
 * stacked below lg: live pads each column `py-16` (VariantSplit.tsx:49 via
 * getVariantSplit.ts:53-61, SectionEvents.tsx:66, 103), so the stacked
 * columns sit two paddings apart: the grid's row gap (xl, 64) plus the
 * column's own top padding here. From lg the columns sit side by side. */
.pot-grid > .pot-events-entries,
.pot-grid > .pot-contact-form,
.pot-grid > pot-form > .pot-contact-form {
  margin-top: var(--pot-spacing-xl);
}
@media (min-width: 1024px) {
  .pot-grid > .pot-events-entries,
  .pot-grid > .pot-contact-form,
  .pot-grid > pot-form > .pot-contact-form {
    margin-top: 0;
  }
}

/* events.entries@1 — SectionEvents.tsx, EventItem.tsx, DateItem.tsx ------ */

/* Entries 80px apart (l.111); placed by events.detailed@1. */
.pot-events-entries {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  margin: 0;
  list-style: none;
}
.pot-events-entry {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* Title 16/24, bold (600 is not loaded live, renders 700), headline; a full
 * width block whose wrapper keeps 40px free on the right below xl
 * (EventItem l.48-52: `pr-10 xl:pr-0` on the wrapper, not the h3). */
.pot-events-entry-title {
  align-self: stretch;
  margin: 0 2.5rem 0 0;
  font-family: var(--pot-font-display);
  font-size: var(--pot-text-base);
  line-height: 1.5rem;
  font-weight: var(--pot-font-weight-semibold);
}
/* Description 6px below, 16/24 muted (l.64-70). */
.pot-events-entry-text {
  margin-top: 0.375rem;
}
.pot-events-entry-text .pot-rich-paragraph {
  margin: 0 0 1.1429em;
  font-size: var(--pot-text-base);
  line-height: 1.5rem;
}
.pot-events-entry-text .pot-rich-list {
  margin: 0 0 1.1429em;
  font-size: var(--pot-text-base);
  line-height: 1.5rem;
}
.pot-events-entry-text .pot-rich-item {
  margin: 0 0 0.5em;
}
.pot-events-entry-text .pot-rich-paragraph:last-child {
  margin-bottom: 0;
}
/* Meta (a <dl>): 24px below; column, row from xl; term and value 8 apart
 * (`space-x-2`), the 20/solid icon 2 down (`dt mt-0.5`) in muted at 70%
 * (gray-400); 8px between items below xl; from xl a 1px divider, ml 20
 * pl 14 (EventItem.tsx:75-131). Date bold (DateItem.tsx:41-53). */
.pot-events-meta {
  display: flex;
  flex-direction: column;
  margin: 1.5rem 0 0;
  color: var(--pot-color-muted-foreground);
}
.pot-events-meta-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.pot-events-meta-term {
  display: flex;
  flex: none;
  margin: 0.125rem 0 0;
}
.pot-events-meta-icon {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0.7;
}
.pot-events-meta-value {
  margin: 0;
}
/* Date and price keep one line; the place wraps (live dd). */
.pot-events-meta-item:not(.pot-events-place) {
  flex: none;
}
.pot-events-meta-item + .pot-events-meta-item {
  margin-top: 0.5rem;
}
.pot-events-date {
  font-weight: var(--pot-font-weight-bold);
  margin-right: 0.25rem;
}
.pot-events-dates {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
  color: var(--pot-color-muted-foreground);
}
/* The event's bottom content: 24px below, its blocks 40px apart, in stored
 * order (EventItem.tsx:140 `mt-6 space-y-10`). */
.pot-events-after {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5rem;
  margin-top: 1.5rem;
}
/* Contact rows 12px apart (BlockContact.tsx:87 `mt-3`); the first row's
 * `mt-6` collapses into the block spacing above it (24 first, 40 after a
 * sign-up), so the rows add no top space of their own. */
.pot-events-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  color: var(--pot-color-muted-foreground);
}
/* The link is the row (no line box around the icon row's inline-flex). */
.pot-events-contact-link,
.pot-contact-plain-link {
  display: flex;
}
.pot-events-contact-link + .pot-events-contact-link {
  margin-top: 0.75rem;
}
.pot-events-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.pot-events-none {
  margin: 0;
  color: var(--pot-color-muted-foreground);
}
@media (min-width: 1280px) {
  .pot-events-entry-title {
    margin-right: 0;
  }
  .pot-events-meta {
    flex-direction: row;
  }
  .pot-events-meta-item + .pot-events-meta-item {
    margin-top: 0;
    margin-left: 1.25rem;
    padding-left: 0.875rem;
    border-left: 1px solid color-mix(in srgb, var(--pot-color-muted-foreground) 35%, transparent);
  }
}

/* header.bar@1, header.centered@1 — components/Layout/Header/ ----------- */

/* Container 1280, px 16 / sm 24 / lg 32; row py 8, min-height 50 / sm 100
 * (Header.tsx:44-59). Logo 30 / sm 50 tall (Logo/ResponsiveImage.tsx:82,89). */
.pot-header-bar {
  background: var(--pot-color-background);
}
.pot-header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  box-sizing: border-box;
  max-width: 80rem;
  min-height: 3.125rem;
  margin-inline: auto;
  padding: 0.5rem 1rem;
}
.pot-header-brand {
  display: inline-flex;
  align-items: center;
  color: var(--pot-color-foreground);
  font-weight: var(--pot-font-weight-bold);
  font-size: var(--pot-text-lg);
  text-decoration: none;
}
.pot-header-logo {
  display: block;
  height: 1.875rem;
  width: auto;
}
/* Burger below sm: 40px icon in a brand-outlined 6px-radius button, p 4,
 * brand-text icon (MobileMenuToggle.tsx:27, MenuToggle.tsx:11-20). */
.pot-header-menu-btn {
  display: inline-grid;
  place-items: center;
  margin-right: -0.5rem;
  padding: 0.25rem;
  font: inherit;
  color: var(--pot-color-brand-text);
  background: transparent;
  border: 1px solid var(--pot-color-primary);
  border-radius: var(--pot-radius-md);
  cursor: pointer;
}
/* Focus ring in brand text: the brand fill misses 3:1 on light brands. */
.pot-header-menu-btn:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--pot-color-brand-text);
}
.pot-header-menu-icon {
  width: 2.5rem;
  height: 2.5rem;
}
/* End of the row: menu, dropdown button, burger (Header.tsx:99-130: sm:space-x-5). */
.pot-header-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.25rem;
  min-width: 0;
}
.pot-header-more {
  display: none;
}
/* Mobile panel: top card over the header, p 8 around, radius 8, shadow-lg;
 * a top row with logo and close button (pt 16, px 16), then the centred
 * links 8px apart and the end links 16px apart, px 20, each group py 12;
 * enters 200ms ease-out from scale .95 (PopoverMobile.tsx:37-90,
 * MobileSecondaryMenu.tsx:22-24, MobilePrimaryMenu.tsx:18-66). */
.pot-header-nav {
  box-sizing: border-box;
  inset: 0 0 auto 0;
  width: auto;
  margin: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--pot-radius-lg);
  background: var(--pot-color-background);
  color: var(--pot-color-foreground);
  box-shadow: var(--pot-shadow-lg), 0 0 0 1px
    color-mix(in srgb, var(--pot-color-foreground) 5%, transparent);
  transform-origin: top right;
}
.pot-header-nav:popover-open {
  animation: pot-header-nav-in calc(200ms * var(--pot-motion, 1)) cubic-bezier(0, 0, 0.2, 1);
}
@keyframes pot-header-nav-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pot-header-nav:popover-open {
    animation: none;
  }
}
.pot-header-list {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0.75rem 1.25rem;
  list-style: none;
}
.pot-header-nav .pot-header-narrow {
  gap: 0.5rem;
}
/* Logo 30px tall and the close button (as the burger) under pt 16; 2px
 * below the button (it sits in a 52px line box: PopoverMobile.tsx:58-70). */
.pot-header-panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem 0.125rem;
}
.pot-header-panel-name {
  font-weight: var(--pot-font-weight-bold);
  font-size: var(--pot-text-lg);
}
/* Dropdown between sm and lg: the centred menu in a 20rem card under the
 * button, right edge on the gutter, 85px from the top; links stacked 8px
 * apart, centred, px 20, py 12 (PopoverPhablet.tsx:34-52,
 * MobileSecondaryMenu.tsx:22-24). Positioned against the page (top layer,
 * `position: absolute`), so it scrolls with the header. */
.pot-header-centre {
  box-sizing: border-box;
  position: absolute;
  inset: 5.3125rem 1.5rem auto auto;
  width: min(20rem, calc(100% - 3rem));
  margin: 0;
  padding: 0.75rem 0;
  border: 0;
  border-radius: var(--pot-radius-lg);
  background: var(--pot-color-background);
  color: var(--pot-color-foreground);
  box-shadow: var(--pot-shadow-lg), 0 0 0 1px
    color-mix(in srgb, var(--pot-color-foreground) 5%, transparent);
}
.pot-header-centre:popover-open {
  animation: pot-header-centre-in calc(200ms * var(--pot-motion, 1)) cubic-bezier(0, 0, 0.2, 1);
}
@keyframes pot-header-centre-in {
  from {
    opacity: 0;
    transform: translateY(0.25rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pot-header-centre:popover-open {
    animation: none;
  }
}
.pot-header-centre .pot-header-list {
  display: grid;
  gap: 0.5rem;
  padding: 0 1.25rem;
}
.pot-header-centre .pot-header-link {
  display: flex;
  justify-content: center;
}
/* Nav links: link variant, 16px, 500, p 4/8, muted; hover gray-600 (a step
 * darker), no transition (getButtonColor.ts:173-177, PrimaryMenuDesktop.tsx). */
.pot-header-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--pot-radius-md);
  font-size: var(--pot-text-base);
  line-height: 1.5rem;
  font-weight: var(--pot-font-weight-medium);
  color: var(--pot-color-muted-foreground);
  text-decoration: none;
}
.pot-header-link:hover {
  color: color-mix(in srgb, var(--pot-color-muted-foreground) 70%, var(--pot-color-foreground));
}
.pot-header-link:active {
  color: color-mix(in srgb, var(--pot-color-muted-foreground) 45%, var(--pot-color-foreground));
}
.pot-header-link:focus-visible {
  outline: 2px solid var(--pot-color-brand-text);
  outline-offset: 0;
}
/* Burger panel below sm: links centred, the CTA full width
 * (MobilePrimaryMenu.tsx:55-60 `grid px-5`, button `justify-center`). */
.pot-header-nav .pot-header-link,
.pot-header-nav .pot-header-cta .pot-button {
  display: flex;
  justify-content: center;
  width: auto;
}
/* Header CTA: primary button with py 4 (PrimaryMenuDesktop.tsx:38). */
.pot-header-cta .pot-button {
  padding-block: 0.25rem;
}
.pot-header-link,
.pot-header-cta .pot-button {
  white-space: nowrap;
  text-align: center;
}
@media (min-width: 640px) {
  .pot-header-inner {
    min-height: 6.25rem;
    padding-inline: 1.5rem;
  }
  .pot-header-logo {
    height: 3.125rem;
  }
  .pot-header-burger,
  .pot-header-nav .pot-header-narrow,
  .pot-header-panel-top {
    display: none;
  }
  /* Centred menu at the end: the row closes up to 12px (Header.tsx:59-62). */
  .pot-header-align-end {
    gap: 0.75rem;
  }
  .pot-header-more {
    display: inline-grid;
  }
  /* Desktop nav from sm: inline row, gap 12 (Header.tsx:96, PrimaryMenuDesktop.tsx:21-27). */
  .pot-header-nav,
  .pot-header-nav:not(:popover-open) {
    display: block;
    position: static;
    inset: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: none;
    box-shadow: none;
    border-radius: 0;
    animation: none;
  }
  .pot-header-list {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
  }
  .pot-header-nav .pot-header-link,
  .pot-header-nav .pot-header-cta .pot-button {
    display: inline-flex;
    width: fit-content;
  }
}
@media (min-width: 1024px) {
  .pot-header-inner {
    padding-inline: 2rem;
  }
  /* From lg the centred menu sits inline, centred on the page: logo and end
   * take equal columns, 40px apart (Header.tsx:62-66, Logo.tsx `lg:flex-1
   * lg:w-0`, SecondaryMenuDesktop.tsx:20 `hidden lg:flex space-x-3`). */
  .pot-header-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }
  .pot-header-split .pot-header-brand {
    justify-self: start;
    max-width: 100%;
  }
  /* A narrow logo column scales the logo down, as live (object-fit contain). */
  .pot-header-split .pot-header-logo {
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
  }
  .pot-header-split .pot-header-end {
    justify-self: end;
  }
  .pot-header-more {
    display: none;
  }
  .pot-header-centre,
  .pot-header-centre:not(:popover-open) {
    display: block;
    position: static;
    inset: auto;
    width: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    background: none;
    box-shadow: none;
    border-radius: 0;
    animation: none;
  }
  .pot-header-centre .pot-header-list {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
  }
  .pot-header-centre .pot-header-link {
    display: inline-flex;
  }
  /* secondaryAlign end: logo keeps its width, the centred menu fills the
   * middle flush right, 40px after the logo (Logo.tsx `lg:grow-0`,
   * SecondaryMenuDesktop.tsx:21-23 `flex-1 justify-end lg:!ml-10`). */
  .pot-header-split.pot-header-align-end {
    display: flex;
  }
  .pot-header-align-end .pot-header-centre {
    flex: 1 1 0%;
    margin-left: 1.75rem;
  }
  .pot-header-align-end .pot-header-centre .pot-header-list {
    justify-content: flex-end;
  }
}

/* core.footer.legal (policy leaf, ADR-0042) in the Evoped look ------------ */

/* footer.centered@1 owns its vertical padding (its Section is `paddingY:
 * none`): `py-12` with the link row's `-my-2`, 40px above the first link and
 * 48 below the copyright at every width (Footer.tsx:66-68, Menu.tsx:25). */
.pot-stack:has(> .pot-stack-row > .pot-footer-legal) {
  padding-block: 2.5rem 3rem;
}

/* Inside footer.centered@1's link row its links join the row and the
 * copyright takes its own row below (Menu.tsx:23-50, CopyrightLine.tsx:15).
 * Overrides the neutral layout of @pot/renderer/styles.css. */
.pot-footer-legal,
.pot-footer-legal-nav,
.pot-footer-legal-links {
  display: contents;
  list-style: none;
}
/* The row itself: 20px between links, 10px between wrapped lines, 20px
 * wider than the container on each side (Menu.tsx:25-26, `-mx-5 gap-x-5
 * gap-y-2.5`). */
.pot-stack-row:has(> .pot-footer-legal) {
  gap: 0.625rem 1.25rem;
  margin-inline: -1.25rem;
}
/* The pull is 20px but the gutter only 16 below sm, so the row pokes 4px past
 * the viewport on each side; live clips it at the footer container
 * (Footer.tsx:67 `overflow-hidden`, padding box = viewport). `clip`, not
 * `hidden`: no scroll container, no BFC, the y axis stays visible. Without
 * this every page scrolls sideways by 4px on a phone. */
.pot-section-inner:has(> .pot-stack > .pot-stack-row > .pot-footer-legal) {
  overflow-x: clip;
}
/* 16px below the links: 24 (`space-y-6`, Footer.tsx:67) less the row's
 * -8 (`-my-2`), of which the row gap gives 10; back inside the container. */
.pot-footer-copy {
  flex-basis: 100%;
  order: 2;
  margin: 0.375rem 1.25rem 0;
  text-align: center;
  font-size: var(--pot-text-base);
  line-height: 1.5rem;
  color: var(--pot-color-muted-foreground);
}

/* footer.social@1 — components/Layout/Footer/SocialLinks.tsx ------------ */

/* A row of its own between the link row and the copyright (Footer.tsx:47-48):
 * 24px marks in 44px targets, 2px apart, muted, a step darker on hover. */
.pot-footer-social {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.125rem;
  order: 1;
  /* 24px to the copyright line (Footer.tsx:43 space-y-6), on top of the row gap. */
  margin: 0 0 max(0px, calc(1.5rem - var(--pot-gap, 1rem)));
  padding: 0;
  list-style: none;
  color: var(--pot-color-muted-foreground);
}
.pot-footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.25rem 0.5rem;
  box-sizing: border-box;
  border-radius: var(--pot-radius-md);
  color: inherit;
  font-size: var(--pot-text-base);
  text-decoration: none;
}
.pot-footer-social-link:hover {
  color: color-mix(in srgb, var(--pot-color-muted-foreground) 70%, var(--pot-color-foreground));
}
.pot-footer-social-link:focus-visible {
  outline: 2px solid var(--pot-color-brand-text);
  outline-offset: 0;
}
.pot-footer-social-icon {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
}

/* pricing.plans@1 — sections/SectionPricing/VariantCards.tsx, CardItem.tsx -- */

/* One column capped at 28rem below lg, then one column per plan; two plans sit
 * centred in a 6-column grid (VariantCards.tsx:14-31, 79-84). */
.pot-pricing-plans {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  width: 100%;
  max-width: 28rem;
  margin-inline: auto;
  color: var(--pot-color-foreground);
}

/* Card: radius 24, p 32 → xl 40, page surface, 1px border ring; emphasized
 * 2px brand ring (CardItem.tsx:61-81). `data-bg="background"` resets the
 * section's surface tokens inside the card. */
.pot-pricing-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 2rem;
  border-radius: calc(var(--pot-radius-lg) * 2);
  background: var(--pot-color-background);
  color: var(--pot-color-foreground);
  box-shadow: 0 0 0 1px var(--pot-color-border);
  overflow-wrap: break-word;
}
.pot-pricing-card-emphasized {
  box-shadow: 0 0 0 2px var(--pot-color-primary);
}

/* Title row: title left, badge right, gap 16 (l.86-118). */
.pot-pricing-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.pot-pricing-title {
  margin: 0;
  font-family: var(--pot-font-body);
  font-size: var(--pot-text-lg);
  font-weight: var(--pot-font-weight-semibold);
  line-height: 2rem;
  letter-spacing: normal;
  color: var(--pot-color-foreground);
}
.pot-pricing-card-emphasized .pot-pricing-title {
  color: var(--pot-color-brand-text);
}
/* Pill: 12/20 semibold in brand text on a 5 % brand wash; the scale has no
 * step below sm (l.103-117). */
.pot-pricing-badge {
  flex: none;
  margin: 0.125rem 0 0;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: var(--pot-font-weight-semibold);
  line-height: 1.25rem;
  white-space: pre;
  color: var(--pot-color-brand-text);
  background: color-mix(in srgb, var(--pot-color-primary) 5%, transparent);
}
.pot-pricing-badge p {
  margin: 0;
}

/* Description: prose base in body colour, snug lines, tight lists, 16 under
 * the title (l.120-132; -types.ts PRICING_DESCRIPTION_PROSE). */
.pot-pricing-card > * + .pot-pricing-text {
  margin-top: 1rem;
}
.pot-pricing-text .pot-rich-paragraph,
.pot-pricing-text .pot-rich-list {
  line-height: 1.375;
  color: var(--pot-color-muted-foreground);
}
.pot-pricing-text .pot-rich-paragraph {
  margin: 0 0 1.25em;
}
.pot-pricing-text .pot-rich-paragraph:last-child,
.pot-pricing-text .pot-rich-list:last-child {
  margin-bottom: 0;
}
.pot-pricing-text .pot-rich-list {
  margin-block: 0.5rem;
}
.pot-pricing-text .pot-rich-item {
  margin-block: 0.25rem;
}

/* Price row 24 below: amount and currency 36 bold tight, unit 14/24
 * semibold in body colour, gap 4, baseline (l.133-176). */
.pot-pricing-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.25rem;
  margin: 0;
}
.pot-pricing-card > * + .pot-pricing-price {
  margin-top: 1.5rem;
}
.pot-pricing-amount {
  font-size: var(--pot-text-3xl);
  font-weight: var(--pot-font-weight-bold);
  line-height: 2.5rem;
  letter-spacing: -0.025em;
  color: var(--pot-color-foreground);
}
.pot-pricing-unit {
  font-size: var(--pot-text-sm);
  font-weight: var(--pot-font-weight-semibold);
  line-height: 1.5rem;
  color: var(--pot-color-muted-foreground);
}

/* Full-width button 40 below (l.177-191). */
.pot-pricing-action {
  width: 100%;
}
.pot-pricing-card > * + .pot-pricing-action {
  margin-top: 2.5rem;
}

/* Features: 14/24 body colour, 12 apart, 32 below → xl 40; check 20x24 in
 * brand text, gap 12 (l.192-226). */
.pot-pricing-features {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--pot-text-sm);
  line-height: 1.5rem;
  color: var(--pot-color-muted-foreground);
}
.pot-pricing-card > * + .pot-pricing-features {
  margin-top: 2rem;
}
.pot-pricing-feature {
  display: flex;
  gap: 0.75rem;
}
.pot-pricing-check {
  flex: none;
  width: 1.25rem;
  height: 1.5rem;
  color: var(--pot-color-brand-text);
}

@media (min-width: 1024px) {
  .pot-pricing-plans {
    max-width: none;
  }
  .pot-pricing-plans-2 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .pot-pricing-plans-2 > .pot-pricing-card {
    grid-column: span 2;
  }
  .pot-pricing-plans-2 > .pot-pricing-card:first-child {
    grid-column: 2 / span 2;
  }
  .pot-pricing-plans-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .pot-pricing-plans-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .pot-pricing-plans-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {
  .pot-pricing-card {
    padding: 2.5rem;
  }
  .pot-pricing-card > * + .pot-pricing-features {
    margin-top: 2.5rem;
  }
}

/* faq.entries@1 — SectionAccordion/SectionAccordion.tsx. Base look from the
 * pot-accordion island CSS; the pack adds the 2px line under the heading,
 * 24px below it (`divide-y-2`, `mt-6`, l.56, 71), and prose answers in the
 * body colour (l.103-110). */
.pot-faq {
  color: var(--pot-color-foreground);
}
* + .pot-faq {
  margin-top: 1.5rem;
  border-top-width: 2px;
}
/* Question 18/28, medium (`font-medium text-lg`, l.88-90). */
.pot-faq .pot-accordion-title {
  line-height: 1.75rem;
}
.pot-faq > .pot-accordion-item:last-child {
  border-bottom: 0;
}
.pot-faq .pot-accordion-body :is(.pot-rich-paragraph, .pot-rich-list) {
  color: inherit;
  line-height: inherit;
}

/* features.icon-card@1 — SectionFeatures/GridCardItem.tsx: 24px room for the
 * tile (l.67); the card surface (`pot-surface-card`: fill, radius and
 * elevation from the look, evoped@1 gray-50 `bg-surface-muted`, 8px), 24px
 * sides, 32px bottom, full row height, centred (l.68-75,
 * VariantGridOffsetIcons.tsx:45); tile 48px (12px padding around a 24px
 * icon), radius md, brand, pulled up 24px (l.77-89); title 18px / 500, tight,
 * 32px below the tile (l.92-103); text 16px muted, 20px below the title
 * (l.104-115). */
.pot-feature-card {
  height: 100%;
  padding-top: 1.5rem;
  min-width: 0;
}
.pot-feature-card-inner {
  height: 100%;
  padding: 0 1.5rem 2rem;
  text-align: center;
}
.pot-feature-card-tile {
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  margin: -1.5rem auto 0;
  padding: 0.75rem;
  border-radius: var(--pot-radius-md);
  background: var(--pot-color-primary);
  color: var(--pot-color-accent);
}
.pot-feature-card-icon {
  width: 1.5rem;
  height: 1.5rem;
}
/* No icon, no tile: the card pads its top instead (`py-8`, no `mt-8`). */
.pot-feature-card-inner:not(:has(> .pot-feature-card-tile)) {
  padding-top: 2rem;
}
.pot-feature-card-inner > .pot-feature-card-title:first-child {
  margin-top: 0;
}
.pot-feature-card-title {
  margin: 2rem 0 0;
  font-family: var(--pot-font-display, inherit);
  font-size: var(--pot-text-lg);
  font-weight: var(--pot-font-weight-medium);
  line-height: 1.75rem;
  letter-spacing: -0.025em;
  overflow-wrap: break-word;
}
.pot-feature-card-text {
  margin-top: 1.25rem;
}
.pot-feature-card-text :is(.pot-rich-paragraph, .pot-rich-list) {
  font-size: var(--pot-text-base);
  line-height: 1.5rem;
  color: var(--pot-color-muted-foreground);
}

/* team.members@1 — SectionTeam/VariantVerticalImages/VariantVerticalImages.tsx */

/* People 48px apart below sm (l.63); from sm rows with 32px padding and a
 * hairline between them, the list pulled up by the first row's padding
 * (l.63-65, 85). */
.pot-team-members {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Row: portrait, then the text 16px below; from sm three columns, portrait
 * in the first, text in the other two, 24px apart, top-aligned (l.86, 115). */
.pot-team-member {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
/* Portrait radius lg, large shadow; natural aspect below sm, 3:4 cover from
 * sm (l.87-98). */
.pot-team-member-photo {
  border-radius: var(--pot-radius-lg);
  box-shadow: var(--pot-shadow-lg);
}
.pot-team-member-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
  object-fit: cover;
}
/* Text: name and role, bio, links 16px apart (l.116). */
.pot-team-text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
/* Name and role 18/24, 500, 4px apart; name in the heading colour, role in
 * the body text colour, which reads muted live (l.118-136). */
.pot-team-head {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: var(--pot-text-lg);
  line-height: 1.5rem;
  font-weight: var(--pot-font-weight-medium);
}
.pot-team-name,
.pot-team-role {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  overflow-wrap: break-word;
}
.pot-team-name {
  font-family: var(--pot-font-display);
}
.pot-team-role,
.pot-team-link {
  color: var(--pot-color-muted-foreground);
}
/* Links as text (live: 28px icons in 44px targets, SocialLinks.tsx:25-40):
 * a row of 44px-high targets, 16px medium in the muted body colour; hover
 * darkens to the text colour and underlines. */
.pot-team-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pot-team-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--pot-text-base);
  font-weight: var(--pot-font-weight-medium);
  text-decoration: none;
}
.pot-team-link:hover {
  color: var(--pot-color-foreground);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pot-team-link:focus-visible {
  outline: 2px solid var(--pot-color-brand-text);
  outline-offset: 2px;
}
/* Network marks (SocialLinks.tsx:20-41): 28px marks in 44px targets (px 8,
 * py 4), 2px apart, the row pulled 6px out so the first mark's edge sits 2px
 * in (`space-x-0.5 -mx-1.5`). */
.pot-team-links-marks {
  gap: 0.125rem;
  margin: 0 -0.375rem;
}
.pot-team-link-mark {
  justify-content: center;
  min-width: 44px;
  padding: 0.25rem 0.5rem;
}
.pot-team-link-mark:hover {
  text-decoration: none;
}
.pot-team-link-icon {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
}
@media (min-width: 640px) {
  .pot-team-members {
    gap: 0;
    margin-top: -2rem;
  }
  .pot-team-member {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 1.5rem;
    padding-block: 2rem;
  }
  .pot-team-member + .pot-team-member {
    border-top: 1px solid var(--pot-divider-color);
  }
  .pot-team-member-photo {
    aspect-ratio: 3 / 4;
  }
  .pot-team-member-img {
    height: 100%;
  }
  .pot-team-text {
    grid-column: 2 / span 2;
  }
}
/* gallery.images@1 — SectionGallery.tsx, MediaGallery/ ------------------- */

/* Grid, gaps, square thumbnails and the hover darkening come from the
 * island's gallery.css. The wrapper caps the grid below lg: max-w-md
 * sm:max-w-3xl with px-4 / sm:px-6 inside (SectionGallery.tsx:63-64), i.e.
 * 26rem / 45rem of content; from lg the section's 80rem container rules. */
.pot-gallery-images {
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
}
@media (min-width: 640px) {
  .pot-gallery-images {
    max-width: 45rem;
  }
}
@media (min-width: 1024px) {
  .pot-gallery-images {
    max-width: none;
  }
}

/* Columns per breakpoint (MediaGallery.tsx `items_per_row_xs/sm/md/lg`,
 * defaults 1 / 2 / 2 / 4): `data-cols-xs/sm/md` set --pot-gallery-xs/sm/md,
 * `data-cols` sets the island's --pot-gallery-cols from lg. */
.pot-gallery-images[data-cols-xs="2"] {
  --pot-gallery-xs: 2;
}
.pot-gallery-images[data-cols-xs="3"] {
  --pot-gallery-xs: 3;
}
.pot-gallery-images[data-cols-xs="4"] {
  --pot-gallery-xs: 4;
}
.pot-gallery-images[data-cols-xs="5"] {
  --pot-gallery-xs: 5;
}
.pot-gallery-images[data-cols-xs="6"] {
  --pot-gallery-xs: 6;
}
.pot-gallery-images[data-cols-sm="1"] {
  --pot-gallery-sm: 1;
}
.pot-gallery-images[data-cols-sm="3"] {
  --pot-gallery-sm: 3;
}
.pot-gallery-images[data-cols-sm="4"] {
  --pot-gallery-sm: 4;
}
.pot-gallery-images[data-cols-sm="5"] {
  --pot-gallery-sm: 5;
}
.pot-gallery-images[data-cols-sm="6"] {
  --pot-gallery-sm: 6;
}
.pot-gallery-images[data-cols-md="1"] {
  --pot-gallery-md: 1;
}
.pot-gallery-images[data-cols-md="3"] {
  --pot-gallery-md: 3;
}
.pot-gallery-images[data-cols-md="4"] {
  --pot-gallery-md: 4;
}
.pot-gallery-images[data-cols-md="5"] {
  --pot-gallery-md: 5;
}
.pot-gallery-images[data-cols-md="6"] {
  --pot-gallery-md: 6;
}
.pot-gallery-images .pot-gallery-grid {
  grid-template-columns: repeat(var(--pot-gallery-xs, 1), 1fr);
}
@media (min-width: 640px) {
  .pot-gallery-images .pot-gallery-grid {
    grid-template-columns: repeat(var(--pot-gallery-sm, 2), 1fr);
  }
}
@media (min-width: 768px) {
  .pot-gallery-images .pot-gallery-grid {
    grid-template-columns: repeat(var(--pot-gallery-md, 2), 1fr);
  }
}
@media (min-width: 1024px) {
  .pot-gallery-images .pot-gallery-grid {
    grid-template-columns: repeat(var(--pot-gallery-cols, 4), 1fr);
  }
}

/* Thumbnails: rounded-lg with overflow hidden (globals.css .gallery-thumbnail),
 * the look's md radius. */
.pot-gallery-images .pot-gallery-item {
  border-radius: var(--pot-radius-md);
}

/* Magnifier: 40px, white at 70 %, over the 50 % black layer, fading in with
 * it in 300ms (ThumbnailImage.tsx:18-20); also on keyboard focus. */
.pot-gallery-images .pot-gallery-item::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: calc(50% - 1.25rem);
  width: 2.5rem;
  height: 2.5rem;
  background: var(--pot-color-dark-foreground);
  opacity: 0;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M10.5 3.75a6.75 6.75 0 1 0 0 13.5 6.75 6.75 0 0 0 0-13.5ZM2.25 10.5a8.25 8.25 0 1 1 14.59 5.28l4.69 4.69a.75.75 0 1 1-1.06 1.06l-4.69-4.69A8.25 8.25 0 0 1 2.25 10.5Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
  transition: opacity calc(300ms * var(--pot-motion, 1)) ease-in-out;
  pointer-events: none;
}
.pot-gallery-images .pot-gallery-item:hover::before,
.pot-gallery-images .pot-gallery-item:focus-visible::before {
  opacity: 0.7;
}
.pot-gallery-images .pot-gallery-item:focus-visible::after {
  opacity: 0.5;
}

/* hero.angled-frame@1 — sections/SectionHero/VariantAngledImage.tsx ------- */

.pot-hero-angled {
  position: relative;
  overflow: hidden;
  color: var(--pot-color-foreground);
}
.pot-hero-angled-inner {
  max-width: 80rem;
  margin-inline: auto;
}
/* Panel on the page surface, above the image (l.59-73). Top = the 24px
 * placeholder plus the main's margin (mt-10 sm:12 md:16 lg:20 xl:28, l.88);
 * bottom pb-8 sm:16 md:20 lg:28 xl:32; gutter px-4 sm:6 lg:8 with pr-4. */
.pot-hero-angled-panel {
  position: relative;
  z-index: 1;
  padding: 4rem 1rem 2rem;
  background-color: var(--pot-color-background);
}
/* The angle (l.75-84): 192px wide, centred on the panel's right edge. */
.pot-hero-angled-edge {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: 12rem;
  height: 100%;
  transform: translateX(50%);
  color: var(--pot-color-background);
}
.pot-hero-angled-content {
  min-width: 0;
}
/* Image full-bleed below the text, h-56 sm:72 md:96 (l.176-185). */
.pot-hero-angled-media {
  width: 100%;
  height: 14rem;
  overflow: hidden;
}
.pot-hero-angled-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 640px) {
  .pot-hero-angled-panel {
    padding: 4.5rem 1.5rem 4rem;
  }
  .pot-hero-angled-media {
    height: 18rem;
  }
}
@media (min-width: 768px) {
  .pot-hero-angled-panel {
    padding-top: 5.5rem;
    padding-bottom: 5rem;
  }
  .pot-hero-angled-media {
    height: 24rem;
  }
}
/* From lg: panel 672 wide in the 1280 container, image absolute on the right half. */
@media (min-width: 1024px) {
  .pot-hero-angled-panel {
    width: 100%;
    max-width: 42rem;
    padding: 6.5rem 1rem 7rem 2rem;
  }
  .pot-hero-angled-edge {
    display: block;
  }
  .pot-hero-angled-media {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
  }
}
@media (min-width: 1280px) {
  .pot-hero-angled-panel {
    padding-top: 8.5rem;
    padding-bottom: 8rem;
  }
}

/* media.video@1 — sections/SectionHero/VariantMediaContent.tsx ----------- */

/* Full column, sm:max-w-lg, lg:max-w-md, centred, shadow-lg (l.138-140);
 * the 16:9 box and radius come from the pot-video island CSS. */
.pot-media-video {
  width: 100%;
  margin-inline: auto;
}
.pot-media-video pot-video {
  box-shadow: var(--pot-shadow-lg);
}
@media (min-width: 640px) {
  .pot-media-video {
    max-width: 32rem;
  }
}
@media (min-width: 1024px) {
  .pot-media-video {
    max-width: 28rem;
  }
}

/* cta.panel-frame@1 — sections/SectionBrandPanel/SectionBrandPanel.tsx ---- */

/* 64px above and below at every width (l.58); the frame sits in a full-bleed
 * Section without padding and brings its own gutter. */
.pot-panel-frame {
  padding-block: 4rem;
}
/* max-w-7xl, the panel surface fills the band below lg (l.66-70). */
.pot-panel-frame-inner {
  max-width: 80rem;
  margin-inline: auto;
}
.pot-panel-frame-primary .pot-panel-frame-inner {
  background: var(--pot-color-primary);
}
/* Image column: above the panel; below lg its upper half stays on the page
 * (half-height page layer, l.73-79), so the image straddles the panel edge. */
.pot-panel-frame-media {
  position: relative;
  z-index: 1;
}
.pot-panel-frame-media::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 50%;
  background: var(--pot-color-background);
}
/* max-w-md px-4 → sm max-w-3xl px-6 (l.80); aspect 10:6 → sm 2:1 → lg 1:1
 * (l.81); rounded-3xl shadow-2xl, cover (l.83-88). */
.pot-panel-frame-image {
  position: relative;
  max-width: 28rem;
  margin-inline: auto;
  padding-inline: 1rem;
}
.pot-panel-frame-crop {
  position: relative;
  overflow: hidden;
  aspect-ratio: 10 / 6;
  border-radius: calc(2 * var(--pot-radius-lg));
  box-shadow: 0 25px 50px -12px color-mix(in srgb, var(--pot-color-dark) 25%, transparent);
}
.pot-panel-frame-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* `imageCrop: square`: live's asset is the image's centred square
 * (Image.tsx 405 × 405 → `width=810&height=810`, fit cover), covered into the
 * box. A square `img`, centred vertically in the clipped box, shows the same
 * for every box at least as wide as tall (10:6, 2:1, 1:1). */
.pot-panel-frame-crop-square img {
  position: absolute;
  top: 50%;
  left: 0;
  height: auto;
  aspect-ratio: 1 / 1;
  transform: translateY(-50%);
}
/* Panel content: max-w-md py-12 px-4 → sm max-w-3xl py-16 px-6 (l.104). */
.pot-panel-frame-panel {
  position: relative;
  color: var(--pot-color-foreground);
}
.pot-panel-frame-primary .pot-panel-frame-panel {
  background: var(--pot-color-primary);
}
.pot-panel-frame-content {
  max-width: 28rem;
  margin-inline: auto;
  padding: 3rem 1rem;
  min-width: 0;
}
/* The direct lines follow the body at the stack's gap (space-y-6, l.104);
 * each row is one 24px line (ContactDetails `dd flex`). */
.pot-panel-frame .pot-contact-plain,
.pot-panel-frame .pot-contact-lines {
  margin-top: 0;
}
.pot-panel-frame .pot-contact-plain-link {
  display: flex;
}
@media (min-width: 640px) {
  .pot-panel-frame-image {
    max-width: 48rem;
    padding-inline: 1.5rem;
  }
  .pot-panel-frame-crop {
    aspect-ratio: 2 / 1;
  }
  .pot-panel-frame-content {
    max-width: 48rem;
    padding: 4rem 1.5rem;
  }
}
/* lg: 12 tracks; the image takes 1–4 with 64px above and below, the panel
 * 3–12 behind it (rounded, its own 10 tracks, content in 4–9, centred
 * vertically); both share the row, so the image overlaps the panel (l.71-104). */
@media (min-width: 1024px) {
  .pot-panel-frame-inner {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    padding-inline: 2rem;
  }
  .pot-panel-frame-primary .pot-panel-frame-inner {
    background: none;
  }
  .pot-panel-frame-media {
    grid-column: 1 / span 4;
    grid-row: 1;
    padding-block: 4rem;
  }
  .pot-panel-frame-media::before {
    content: none;
  }
  .pot-panel-frame-image {
    max-width: none;
    padding: 0;
  }
  .pot-panel-frame-crop {
    aspect-ratio: 1 / 1;
  }
  .pot-panel-frame-panel {
    grid-column: 3 / span 10;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    align-items: center;
    border-radius: calc(2 * var(--pot-radius-lg));
  }
  .pot-panel-frame-content {
    grid-column: 4 / span 6;
    max-width: none;
    padding: 0;
  }
}

/* testimonials.attribution@1 — sections/SectionTestimonials/ --------------- */

/* Footer of a quote: `mt-8`, avatar beside author and role
 * (VariantSideBySide.tsx:126-170, `flex items-center gap-4`;
 * VariantLargeAvatar.tsx:84-121, `ml-4`). The patterns stack it with gap none. */
.pot-testimonial-attribution {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
/* 48 px, cover, round (l.134-139). */
.pot-testimonial-avatar {
  display: block;
  flex: none;
  width: 3rem;
  height: 3rem;
  box-sizing: content-box;
  border-radius: 9999px;
  object-fit: cover;
}
/* `ring`: a 2 px ring of the page surface outside the 48 px (`border-2
 * border-white`, l.131; the page surface is white in every live theme). */
.pot-testimonial-avatar-ring {
  border: 2px solid var(--pot-color-background);
}
/* Author and role: `text-base font-medium` in the body colour (`theme.text.base`,
 * l.145-167; VariantLargeAvatar.tsx:105-118): grey on the page surface, the
 * surface foreground on brand, accent and dark (renderer scope). Muted text
 * is gate-checked on every surface. */
.pot-testimonial-author,
.pot-testimonial-role {
  margin: 0;
  color: var(--pot-color-muted-foreground);
  font-size: var(--pot-text-base);
  font-weight: var(--pot-font-weight-medium);
  line-height: 1.5rem;
}

/* testimonials.large-frame@1 — sections/SectionTestimonials/VariantLargeAvatar.tsx */

/* The live box pads 80 / 48 px (`pt-20 pb-12`, 80 / 80 from lg, l.47) inside
 * the section shell's own space (`MEDIUM_SPACE`, the Section's `paddingY:
 * lg`): the frame pads the box, the Section the shell, so the 96 px overhang
 * of the mark stays inside the section. */
.pot-large-frame {
  position: relative;
  padding-top: 5rem;
  padding-bottom: 3rem;
}
/* The footer (`mt-8`, l.84) is there without author and avatar too: a quote
 * alone keeps its 32 px under the text. */
.pot-large-frame-content:not(:has(.pot-testimonial-attribution)) {
  padding-bottom: 2rem;
}
.pot-large-frame-portrait {
  display: none;
}
.pot-large-frame-body {
  position: relative;
  min-width: 0;
}
/* 144 px outline mark, `-translate-x-8 -translate-y-24`, brand at 50 %;
 * on a coloured surface the page surface at 30 % (QuoteChar.tsx). */
.pot-large-frame-mark {
  position: absolute;
  top: 0;
  left: 0;
  width: 9rem;
  height: 9rem;
  transform: translate(-2rem, -6rem);
  color: var(--pot-color-primary);
  opacity: 0.5;
  pointer-events: none;
}
:is([data-bg="primary"], [data-bg="accent"], [data-bg="dark"]) .pot-large-frame-mark {
  color: var(--pot-color-background);
  opacity: 0.3;
}
/* The quote sits over the mark (`blockquote.relative`); the outline mark
 * replaces the generic filled one, and the quote starts at the column top. */
.pot-large-frame-content {
  position: relative;
}
.pot-large-frame .pot-prose-quote {
  margin-top: 0;
}
.pot-large-frame .pot-prose-quote::before {
  content: none;
}
/* The footer's text keeps its `ml-4` below lg with or without the 48 px
 * avatar (l.97, `ml-4 lg:ml-0`): a margin on the text, not a gap. */
.pot-large-frame .pot-testimonial-attribution {
  gap: 0;
}
.pot-large-frame .pot-testimonial-attribution-text {
  margin-left: 1rem;
}
@media (min-width: 1024px) {
  .pot-large-frame {
    display: flex;
    align-items: center;
    padding-block: 5rem;
  }
  /* `hidden lg:block h-64 w-64`, round, cover. */
  .pot-large-frame-portrait {
    display: block;
    flex: none;
    width: 16rem;
    height: 16rem;
    overflow: hidden;
  }
  .pot-large-frame-portrait img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    object-fit: cover;
  }
  /* `lg:ml-10` */
  .pot-large-frame-body {
    flex: 1 1 auto;
    margin-left: 2.5rem;
  }
  /* The 48 px avatar is `lg:hidden`; the text loses its `ml-4` with it. */
  .pot-large-frame .pot-testimonial-avatar {
    display: none;
  }
  .pot-large-frame .pot-testimonial-attribution-text {
    margin-left: 0;
  }
}
@media (min-width: 1280px) {
  /* `xl:h-80 xl:w-80` */
  .pot-large-frame-portrait {
    width: 20rem;
    height: 20rem;
  }
}

/* text.feature@1 — blocks/BlockFeature.tsx ------------------------------- */

/* Row: icon, 12px, text (l.39-41); an icon beside only a title or only a text
 * is centred with it (l.29, 41). */
.pot-feature {
  display: flex;
  gap: 0.75rem;
}
.pot-feature-centred {
  align-items: center;
}
/* `tile` (hero bottom content): 40px under the body and between items, 16 of
 * the enclosing stack plus 24 (VariantContained.tsx:98). */
.pot-feature-tile {
  margin-top: 1.5rem;
}
/* Actions after the bottom content (hero.split@1 `actionsAfter`) are bottom
 * content too: 40px above them, the same 16 + 24 (l.98, `space-y-10`); so
 * are actions right under the body (hero.split@1 `actions`, the bare buttons
 * of a text-by-text column): `mt-10` (l.87; SectionTextByText.tsx:87). */
:is(.pot-feature-tile, .pot-contact-lines) + :is(.pot-stack-row, .pot-button),
.pot-gap-md > .pot-prose + :is(.pot-stack-row, .pot-button) {
  margin-top: 1.5rem;
}
/* hero.split@1 image, stacked: live wraps it in an `inline-flex` box on a
 * text line, whose strut leaves 7px of descender below the image (l.111-118);
 * from lg the box is a grid item, blockified, and the strut goes. */
.pot-grid-narrow-md.pot-grid-collapse-lg > .pot-image-wrap {
  margin-bottom: 0.4375rem;
}
@media (min-width: 1024px) {
  .pot-grid-narrow-md.pot-grid-collapse-lg > .pot-image-wrap {
    margin-bottom: 0;
  }
}
/* Tile 48x48, radius 4, brand; icon 24 in brand-lighter (l.47-53). */
.pot-feature-badge {
  display: grid;
  flex: none;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--pot-radius-sm);
  background: var(--pot-color-primary);
  color: var(--pot-color-accent);
}
.pot-feature-icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
}
/* Title and text 4px apart (l.58). */
.pot-feature-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
/* Title 16/24, sm 18/24, the look's heading weight, headline colour (l.30-33, 62-69). */
.pot-feature-title {
  margin: 0;
  font-family: var(--pot-font-display);
  font-size: var(--pot-text-base);
  font-weight: var(--pot-heading-weight, var(--pot-font-weight-normal));
  line-height: 1.5rem;
  overflow-wrap: break-word;
}
/* Text 14/20, sm 16/24, muted prose (l.34, 72-80). */
.pot-feature-text :is(.pot-rich-paragraph, .pot-rich-list) {
  font-size: var(--pot-text-sm);
  line-height: 1.25rem;
  color: var(--pot-color-muted-foreground);
}
.pot-feature-text :is(.pot-rich-paragraph, .pot-rich-list):not(:last-child) {
  margin-bottom: 1.25em;
}
@media (min-width: 640px) {
  .pot-feature-tile .pot-feature-title {
    font-size: var(--pot-text-lg);
  }
  .pot-feature-tile .pot-feature-text :is(.pot-rich-paragraph, .pot-rich-list) {
    font-size: var(--pot-text-base);
    line-height: 1.5rem;
  }
}
/* `stacked` (panorama items, `iconPosition top`, `textSize sm`, no tile): 24px
 * above, icon 24 in the headline colour 20px over the text, title 16/20
 * (l.30-34, 40); optional hairline on top (VariantPanorama.tsx:56-58, 145). */
.pot-feature-stacked {
  flex-direction: column;
  gap: 1.25rem;
  padding-top: 1.5rem;
}
.pot-feature-stacked .pot-feature-title {
  line-height: 1.25;
}
.pot-feature-rule {
  border-top: 1px solid var(--pot-color-border);
}

/* features.panorama-frame@1 — sections/SectionFeatures/VariantPanorama.tsx */

/* Band: full width, 384 high, cover, no radius; a gradient from the page
 * surface at the bottom to transparent at the top (l.73-92). Image and fade
 * share one grid cell, so nothing is positioned and the content after the
 * band paints over it. */
.pot-panorama-band {
  display: grid;
  grid-template: 24rem / 100%;
  overflow: hidden;
}
.pot-panorama-image,
.pot-panorama-fade {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
}
.pot-panorama-image {
  display: block;
  object-fit: cover;
  object-position: center;
}
.pot-panorama-fade {
  background: linear-gradient(to top, var(--pot-color-background), transparent);
}
/* Container 1280, px 16 / sm 24 / lg 32, pb 64 / sm 96; 48px into the band
 * (l.94-100). */
.pot-panorama-content {
  position: relative;
  max-width: 80rem;
  margin-inline: auto;
  padding: 0 1rem 4rem;
}
.pot-panorama-frame-band .pot-panorama-content {
  margin-top: -3rem;
}
/* The content box carries the gutter (it sits in a full-bleed section), so a
 * container inside adds no second one (CONTRACT: a Container inside a Section
 * adds no second padding; live `max-w-2xl mx-auto` has none, VariantPanorama.tsx:103). */
.pot-panorama-content .pot-container:not(.pot-pad-sm, .pot-pad-md, .pot-pad-lg, .pot-pad-xl) {
  padding-inline: 0;
}
@media (min-width: 640px) {
  .pot-panorama-content {
    padding: 0 1.5rem 6rem;
  }
}
@media (min-width: 1024px) {
  .pot-panorama-content {
    padding-inline: 2rem;
  }
}

/*
 * @pot/blocks-evoped — evoped@2 additions (wave 1 layout, owner 2026-10-23).
 * Published as `blocks-evoped@2.css` = `styles.css` followed by this file;
 * `blocks-evoped@1.css` stays as it is. Every rule here matches only classes
 * the evoped@2 blocks emit (hero.angled-frame@2, hero.video-frame@1,
 * intro.centered-frame@1, team.members@2), so an @1 presentation renders the
 * same under either pack. Tokens only for colour and type; lengths are the
 * source's Tailwind geometry, as in the sealed frames of `styles.css`.
 */

/* Hero text centred between sm and lg (hero.angled-frame@2,
 * hero.video-frame@1): `sm:text-center lg:text-left`, the buttons
 * `justify-center lg:justify-start` (VariantAngledImage.tsx l.96, 140;
 * VariantMediaContent.tsx l.42, 113). Below sm the text stays left and the
 * stacked buttons centred, as in @1. */
@media (min-width: 640px) {
  .pot-hero-centred {
    text-align: center;
  }
  .pot-hero-centred :is(.pot-heading, .pot-text) {
    text-align: center;
  }
  .pot-hero-centred .pot-stack-align-start {
    align-items: center;
  }
  .pot-hero-centred .pot-stack-row-sm {
    justify-content: center;
  }
}
@media (min-width: 1024px) {
  .pot-hero-centred {
    text-align: left;
  }
  .pot-hero-centred :is(.pot-heading, .pot-text) {
    text-align: left;
  }
  .pot-hero-centred .pot-stack-align-start {
    align-items: flex-start;
  }
  .pot-hero-centred .pot-stack-row-sm {
    justify-content: flex-start;
  }
}

/* hero.video-frame@1 — sections/SectionHero/VariantMediaContent.tsx ------ */

/* Text, then the video column 48 below it (`mt-12`, l.138); the column is
 * there without a video too. */
.pot-hero-video {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 3rem;
}
.pot-hero-video-text,
.pot-hero-video-media {
  min-width: 0;
}
/* Text capped at 42rem and centred from md (`md:max-w-2xl md:mx-auto`, l.42). */
@media (min-width: 768px) {
  .pot-hero-video-text {
    width: 100%;
    max-width: 42rem;
    margin-inline: auto;
  }
}
/* From lg: two equal columns 32 apart (`lg:grid-cols-12 lg:gap-8`, 6 + 6),
 * the video centred in its column (`lg:flex lg:items-center`, l.138); the
 * gutter stays 24 (`px-4 sm:px-6`, no `lg:px-8`, l.38), so the frame reaches
 * out over a wide Section's larger gutter. */
@media (min-width: 1024px) {
  .pot-hero-video {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
    row-gap: 0;
    margin-inline: calc(1.5rem - var(--pot-gutter, 1.5rem));
  }
  .pot-hero-video-text {
    max-width: none;
    margin-inline: 0;
  }
  .pot-hero-video-media {
    display: flex;
    align-items: center;
  }
}

/* intro.centered-frame@1 — sections/SectionHeaderCentered ---------------- */

/* Centred; the lead 20 below the heading (`mt-5`) and capped at 36rem
 * (`max-w-xl mx-auto`, l.48-52). The stack has no gap; the eyebrow keeps its
 * `sm` above the heading through the renderer's eyebrow rule. */
.pot-intro-centred {
  text-align: center;
}
.pot-intro-centred .pot-prose {
  width: 100%;
  max-width: 36rem;
  margin-inline: auto;
}
.pot-intro-centred :is(.pot-heading, .pot-text-eyebrow) + .pot-prose {
  margin-top: 1.25rem;
}

/* team.members@2 — SectionTeam/VariantVerticalImages ---------------------- */

/* From lg the people take two of three columns and the heading one
 * (`lg:grid-cols-3 lg:gap-8`, people `lg:col-span-2`, l.45, 56): the
 * heading column is a third of the width less two thirds of the gap. */
@media (min-width: 1024px) {
  .pot-grid:has(> .pot-team-members-wide) {
    --pot-grid-two: minmax(0, calc((100% - 2 * var(--pot-col-gap, var(--pot-gap))) / 3))
      minmax(0, 1fr);
  }
}

/* events.entries@2 — SectionEvents/DateItem ------------------------------ */

/* Several dates in the dates fact, a list, one per line, 8px apart
 * (DateItem.tsx in a `flex flex-col gap-2` dd). */
.pot-events-date-lines {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pot-events-date-line {
  white-space: nowrap;
}

/*
 * @pot/blocks-evoped — evoped@3 additions (offset-icon cards, video hero,
 * panorama intro gap, owner review of wave batch 1; 2026-10-23).
 * Published as `blocks-evoped@3.css` = `blocks-evoped@2.css` (`styles.css`
 * then `styles-2.css`) followed by this file; the @1 and @2 stylesheets stay
 * as they are (both are published and snapshotted). Every rule here matches
 * only classes the evoped@3 blocks emit (features.icon-card@2,
 * hero.video-frame@2, features.panorama-frame@2, text.feature@2,
 * media.badge-row@1) or a core class combination only an evoped@3 pattern
 * emits (testimonials.side-by-side@2: a two-column divided grid), so an @1
 * or @2 presentation renders the same under evoped@3. Tokens only for colour.
 */

/* features.icon-card@2 — SectionFeatures/GridCardItem ------------------- */

/* The card is a block formatting context (`flow-root`, GridCardItem.tsx:47),
 * so the tile's `-mt-6` pulls the tile over the card's top edge instead of
 * collapsing through it and moving the card up with the tile. */
.pot-feature-card-overhang > .pot-feature-card-inner {
  display: flow-root;
}

/* hero.video-frame@2 — live's space below the video hero: v2 pads it
 * `pb-16 sm:pb-24 lg:pb-32` (64 / 96 / 128, VariantMediaContent.tsx l.51),
 * the enclosing Section's `paddingY: xl` gives 64 / 64 / 96 (evoped@1
 * `sectionSteps.xl`), so the frame adds the 32 from sm. */
@media (min-width: 640px) {
  .pot-hero-video-2 {
    padding-bottom: 2rem;
  }
}

/* features.panorama-frame@2 — SectionFeatures/VariantPanorama ------------- */

/* 64 from the intro to the feature cells (measured to the feature's
 * hairline; the cell's own `pt-6` follows inside) at every width: `pt-16` on
 * the grid, l.113. The content stack's `lg` step is 40 below sm. */
.pot-panorama-intro-gap > .pot-stack {
  --pot-gap: 4rem;
  gap: var(--pot-gap);
}

/* No hairline above the feature items (owner 2026-10-23): the frame drops
 * the `divider` border of its `text.feature` cells; their `pt-6` stays.
 * features.panorama@1 (frame @1) keeps it. */
.pot-panorama-intro-gap .pot-feature-rule {
  border-top: 0;
}

/* text.feature@2 — blocks/BlockFeature.tsx (owner review 2026-10-23) ------ */

/* A list in the text keeps the prose item margins (`li` 0.5em above and
 * below, `.formattedHTML ul { space-y-2 }`): 8 px between items as before,
 * and now also 8 above the first one, so the list starts 12 under the title
 * (4 of the body gap + 8) like live, not 4. */
.pot-feature-v2 .pot-feature-text .pot-rich-item {
  margin-block: 0.5em;
}

/* testimonials.side-by-side@2 — SectionTestimonials/VariantSideBySide ---- */

/* A lone quote keeps the left half and the first quote's line and inner
 * space (`md:border-r md:pr-10 lg:pr-16`, l.88-91); in @1 it had no line and
 * filled the band. The grid's divider rules only draw between siblings. */
@media (min-width: 768px) {
  .pot-grid-cols-2.pot-grid-collapse-md.pot-grid-divider > :only-child {
    border-inline-end: 1px solid var(--pot-divider-color);
    padding-inline-end: var(--pot-spacing-md4);
  }
}
@media (min-width: 1024px) {
  .pot-grid-cols-2.pot-grid-collapse-md.pot-grid-divider > :only-child {
    padding-inline-end: var(--pot-spacing-lg);
  }
}

/* media.badge-row@1 — v2 image-only Markdown table (Markdown/TableWrap.tsx) */

/* One row at every width: equal cells, each image the cell width. The card
 * is the table header row (`bg-gray-100`; the neutral card surface, not
 * `muted`, which the Evoped look tints with the brand) with a hairline
 * ring and the small shadow; below md it spans the gutters edge to edge
 * without a radius (`-mx-4 sm:-mx-6`), from md it sits in the prose column
 * with the card radius (`md:rounded-lg`). Cells `py-3.5 px-3`, the first
 * `pl-4`; the image keeps the prose image margin above and below. */
.pot-badge-row {
  display: flex;
  margin-inline: calc(-1 * var(--pot-gutter, 0px));
  background: var(--pot-color-card);
  box-shadow: 0 0 0 1px var(--pot-color-border), var(--pot-shadow-sm);
  overflow: hidden;
}
.pot-badge-row-cell {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.875rem 0.75rem;
}
.pot-badge-row-cell:first-child {
  padding-inline-start: 1rem;
}
.pot-badge-row-image {
  display: block;
  width: 100%;
  height: auto;
  margin-block: 1.5rem;
}
@media (min-width: 768px) {
  .pot-badge-row {
    margin-inline: 0;
    border-radius: var(--pot-radius-md);
  }
}

/*
 * @pot/blocks-compat — compat@4 additions (wave batch 1, last fixes;
 * 2026-10-23). Published as `blocks-compat@4.css` (alias `blocks-evoped@4.css`)
 * = `blocks-compat@3.css` followed by this file. compat@3 is frozen: its
 * stylesheet is in a live-target snapshot (17:05Z), so these rules, first
 * appended to `styles-3.css` (PR 188), live here.
 *
 * Two rules restyle presentations compat@3 already has (the side-by-side
 * testimonials' divided grid, the media.video@2 consent card). That is on
 * purpose: they are the fixes the compat@4 sites need, and this file is only
 * loaded by a site that pins compat@4, so a compat@3 site renders exactly as
 * published. The action.button@1 and faq.entries@2 rules match only classes
 * those new blocks emit. Tokens only for colour.
 */

/* Wave batch 1, last fixes (2026-10-23) ------------------------------------ */

/* testimonials.side-by-side@2 below md: live's halves are full-width rows,
 * `py-12 px-4 sm:px-6` (48 above and below, the gutter inside), so the 2 px
 * line between them runs edge to edge (VariantSideBySide.tsx:52, 88-94). The
 * grid steps out of the gutter and each cell takes it back. From md the
 * halves sit in the gutter again with core's spacing, restated here because
 * the rule above outranks core's `:where` selectors. */
.pot-grid-cols-2.pot-grid-collapse-md.pot-grid-divider {
  width: calc(100% + 2 * var(--pot-gutter, 0px));
  margin-inline: calc(-1 * var(--pot-gutter, 0px));
}
.pot-grid-cols-2.pot-grid-collapse-md.pot-grid-divider > * {
  padding: 3rem var(--pot-gutter, 0px);
}
@media (min-width: 768px) {
  .pot-grid-cols-2.pot-grid-collapse-md.pot-grid-divider {
    width: 100%;
    margin-inline: 0;
  }
  .pot-grid-cols-2.pot-grid-collapse-md.pot-grid-divider > * {
    padding-block: var(--pot-spacing-lg);
    padding-inline: 0;
  }
  .pot-grid-cols-2.pot-grid-collapse-md.pot-grid-divider > * + * {
    padding-inline-start: var(--pot-spacing-md4);
  }
  .pot-grid-cols-2.pot-grid-collapse-md.pot-grid-divider > :not(:last-child) {
    padding-inline-end: var(--pot-spacing-md4);
  }
}
@media (min-width: 1024px) {
  .pot-grid-cols-2.pot-grid-collapse-md.pot-grid-divider > * + * {
    padding-inline-start: var(--pot-spacing-lg);
  }
  .pot-grid-cols-2.pot-grid-collapse-md.pot-grid-divider > :not(:last-child) {
    padding-inline-end: var(--pot-spacing-lg);
  }
}

/* action.button@1 — the icon after the label: 6 px apart (`space-x-1.5`),
 * 20 px, in the text colour. */
.pot-action-button-iconed {
  gap: 0.375rem;
}
.pot-action-button-icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}

/* faq.entries@2 — below sm live pads the FAQ section 48 (`py-12`); the
 * section's `lg` step is 32 there, so the FAQ's column adds 16 on top. */
.pot-container:has(> .pot-faq-2) {
  padding-top: 1rem;
}
@media (min-width: 640px) {
  .pot-container:has(> .pot-faq-2) {
    padding-top: 0;
  }
}

/* media.video@2 — no drop shadow under the consent card (owner 2026-10-23):
 * the blurred poster sets the card off; the radius stays. Once consented the
 * player keeps the frame's shadow. */
.pot-media-video pot-video:not([data-consented]):has(> .pot-video-consent) {
  box-shadow: none;
}

/*
 * compat@5 additions (wave batch 2, owner 2026-10-23). `blocks-compat@5.css`
 * is `blocks-compat@4.css` byte for byte, then this file. Rules here only
 * match classes the compat@5 blocks emit; compat@4 stays frozen.
 */

/* features.panorama-frame@3 — VariantPanorama.tsx: the hairline above each
 * feature (`border-t border-gray-200`, `pt-6` inside the cell) is back; the
 * @2 frame hides it. Per item, so a centred short row draws it item-wide. */
.pot-panorama-intro-gap.pot-panorama-rules .pot-feature-rule {
  border-top: 1px solid var(--pot-color-border);
}

/* testimonials.side-by-side@2 with three or more quotes — VariantSideBySide
 * l.88-100: only the first two quotes carry the lines and the inner space
 * (first `md:border-r md:pr-10 lg:pr-16`, second `md:border-l md:pl-10
 * lg:pl-16 md:pr-0`, `border-t-2` below md); every later quote is only
 * `py-12 md:py-16 px-4 sm:px-6`: no line at any width, 24 px in from sm.
 * Like styles-4.css this restyles an earlier presentation's divided grid
 * (no other pattern emits it); it reaches only compat@5 sites. */
.pot-grid-cols-2.pot-grid-collapse-md.pot-grid-divider > :nth-child(n + 3) {
  border: 0;
}
@media (min-width: 640px) {
  .pot-grid-cols-2.pot-grid-collapse-md.pot-grid-divider > :nth-child(n + 3) {
    padding-inline: 1.5rem;
  }
}
@media (min-width: 768px) {
  .pot-grid-cols-2.pot-grid-collapse-md.pot-grid-divider > :nth-child(2):not(:last-child) {
    border-inline-end: 0;
    padding-inline-end: 0;
  }
}

/* events.entries@3 — SectionEvents.tsx l.131-135: no events is one centred
 * line at text-lg (18 / 28) in the body colour (`li.text-center >
 * p.text-lg`, `theme.text.base` = `text-body`, live #6b7280): the muted
 * foreground token. */
.pot-events-none-centred {
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--pot-color-muted-foreground);
}

/* header.bar@2 — v2 icon-only menu link (PrimaryMenuDesktop, Instagram):
 * the network mark at 20 px in the nav links' muted colour, a 44 px tap
 * target, after the call to action. */
.pot-header-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  color: var(--pot-color-muted-foreground);
}
.pot-header-social-link:hover {
  color: var(--pot-color-foreground);
}
.pot-header-social-icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* testimonials.side-by-side@2 — the lines are `border-white/20` (l.88-94):
 * visible on a coloured band, gone on a white one (praxis-leer). */
.pot-grid-cols-2.pot-grid-collapse-md.pot-grid-divider {
  --pot-divider-color: rgb(255 255 255 / 0.2);
}

/* hero.split@2 — VariantContained.tsx l.110-133: the image at its source size
 * (core.image@2 `maxWidth: source`) sits at the start of the stacked column
 * below lg (an `inline-flex` box) and centred in its column from lg (the box
 * is a grid item, the image `mx-auto`). */
@media (min-width: 1024px) {
  .pot-grid-narrow-md.pot-grid-collapse-lg > .pot-image-maxw-source {
    margin-inline: auto;
  }
}

/*
 * compat@6 additions (wave batch 4, ADR-0044). `blocks-compat@6.css` is
 * `blocks-compat@5.css` byte for byte, then this file. Rules here only match
 * classes the compat@6 blocks emit; compat@5 stays frozen.
 */

/* contact.lines@2 — the icon list (core.list@2, renderer@3) in live's rhythm.
 * 40 px under the body like all bottom content (VariantContained.tsx:98):
 * 16 of the enclosing stack plus 24; 12 plus 28 in the contact split
 * (ContactDetails.tsx:30); none in the brand panel, whose stack gives the
 * 24 (SectionBrandPanel space-y-6). */
.pot-contact-lines2 {
  min-width: 0;
  margin-top: var(--pot-spacing-md2);
}
.pot-gap-sm2 > .pot-contact-lines2 {
  margin-top: 1.75rem;
}
.pot-panel-frame .pot-contact-lines2 {
  margin-top: 0;
}
.pot-contact-lines2 > .pot-list {
  margin: 0;
}

/* display plain — BlockContact.tsx:49-94: 16/24; the address block, the
 * first communication 24 under it (`mt-6`), the next 12 apart (`mt-3`);
 * a 24 px line icon 12 before the value. */
.pot-contact-lines2-plain {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pot-spacing-md2);
}
.pot-contact-lines2-plain .pot-list {
  gap: var(--pot-spacing-sm2);
  line-height: 1.5rem;
}

/* display tiles — BlockFeature.tsx (the @1 `icons` display): 40 between rows,
 * tile 48 with the icon in the accent (l.47-53), label 16/24 (sm 18), value
 * 14/20 muted (sm 16/24), 4 apart; the email reads as a prose link. */
.pot-contact-lines2-tiles .pot-list {
  gap: var(--pot-spacing-md4);
}
.pot-contact-lines2-tiles .pot-list-icon {
  /* Decorative (aria-hidden) icon: WCAG 1.4.11 exempts it; the text keeps its contrast-safe pair. */
  color: var(--pot-color-accent);
}
.pot-contact-lines2-tiles .pot-list-body {
  gap: 0.25rem;
}
.pot-contact-lines2-tiles .pot-list-label {
  font-size: var(--pot-text-base);
  line-height: 1.5rem;
  font-weight: var(--pot-font-weight-normal);
  color: var(--pot-color-foreground);
}
.pot-contact-lines2-tiles .pot-list-value {
  font-size: var(--pot-text-sm);
  line-height: 1.25rem;
  color: var(--pot-color-muted-foreground);
}
.pot-contact-lines2-tiles .pot-list-link[href^="mailto:"] {
  color: var(--pot-color-brand-text);
  font-weight: var(--pot-font-weight-bold);
}
@media (min-width: 640px) {
  .pot-contact-lines2-tiles .pot-list-label {
    font-size: var(--pot-text-lg);
  }
  .pot-contact-lines2-tiles .pot-list-value {
    font-size: var(--pot-text-base);
    line-height: 1.5rem;
  }
}

/* Actions after the rows are bottom content too: 40 above them (l.98). */
.pot-contact-lines2 + :is(.pot-stack-row, .pot-button) {
  margin-top: var(--pot-spacing-md2);
}