/* Site layout on top of the shared design system. Tokens only: no colour literals here. */

/* Type: Apple devices keep SF (the look the system is drawn for); everything else gets self-hosted Inter, the closest
   open SF-like face, instead of Segoe UI or Roboto (owner's PC 2026-10-30). A browser downloads a face only when it
   renders with it, so Macs and iPhones never fetch the file. Inter is OFL (assets/fonts/OFL.txt). */
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Shown only until Inter arrives: a local face sized to Inter's width, so the swap does not re-wrap lines and shift the page. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Segoe UI"), local("Roboto"), local("Arial");
  size-adjust: 107%;
  ascent-override: 90.5%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Inter Fallback", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Inter Fallback", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
}
.site-main { padding-block: var(--space-12) var(--space-16); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-16); }
.site-footer { border-top: 1px solid var(--color-border); padding-block: var(--space-8); }
.site-footer-inner { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; align-items: center; }
.site-footer a { color: var(--color-text-muted); text-decoration: none; }
.site-footer a:hover { color: var(--color-text); text-decoration: underline; }

/* Header: brand left, nav right, on the same container width as the tile grid. */
.app-header-inner { justify-content: space-between; }
.nav-link { min-height: 2.75rem; }
/* The header stays with you, translucent over what scrolls under it. */
.app-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--color-surface) 80%, transparent); -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px); }
html { scroll-padding-top: var(--space-20); }
.skip-link { z-index: 30; } /* above the sticky header, or it would focus unseen */

/* Homepage: centred hero with the rendered object under the words, pill filter chips, showroom tiles with a big tinted icon stage. */
/* Hero art (assets/brand/hero-art.svg): hairline rings behind everything, clipped by the hero so it never scrolls sideways.
   The object (heroObject()) is in the hero's flow with a fixed aspect ratio, so nothing shifts as its images load. */
.home-hero { position: relative; overflow: hidden; background: var(--color-surface-sunken); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-16) var(--space-4) var(--space-12); } /* a visible edge, so the panel reads as deliberate */
.site-main:has(> .home-hero) { padding-top: var(--space-8); } /* 32px clear of the header border */
.hero-art { position: absolute; inset: 0; pointer-events: none; }
.hero-art > svg { display: block; width: 100%; height: 100%; }
.home-hero .hero-art > svg { overflow: visible; translate: 0 24%; } /* the rings centre on the object, not on the panel */
.home-hero .hero-art { -webkit-mask-image: linear-gradient(to bottom, transparent 22%, var(--color-text) 58%); mask-image: linear-gradient(to bottom, transparent 22%, var(--color-text) 58%); } /* and stay clear of the words */
.ha-contour { stroke: var(--color-border-strong); stroke-width: 1; stroke-opacity: 0.28; vector-effect: non-scaling-stroke; }
.ha-contour circle { vector-effect: non-scaling-stroke; }
.ha-contour circle:nth-child(n+5) { stroke-opacity: 0.6; }
.ha-contour circle:nth-child(n+7) { stroke-opacity: 0.35; }
.hero-object { position: relative; width: min(100%, 40rem); aspect-ratio: 5 / 3; margin-top: var(--space-6); margin-bottom: calc(var(--space-16) * -1); }
.hero-layer { position: absolute; inset: 0; display: block; }
.hero-layer img { display: block; width: 100%; height: auto; filter: drop-shadow(0 1.75rem 2rem var(--color-scrim)); }

/* stack spacing set per item (gap 0): lede 20px under the headline, button 32px under the lede */
.home-hero .hero { position: relative; justify-items: center; text-align: center; margin-inline: auto; padding-block: 0; gap: 0; }
.home-hero .hero h1 { font-size: clamp(2.25rem, 7vw, 4.25rem); letter-spacing: var(--tracking-display); line-height: 1.08; font-weight: var(--weight-semibold); max-width: 18ch; text-wrap: balance; }
.home-hero .hero .section-lede { margin-top: var(--space-5); color: var(--color-text-muted); max-width: 60ch; text-wrap: balance; }
.home-hero .hero .btn-primary { margin-top: var(--space-8); min-height: 3rem; padding-inline: var(--space-6); font-size: var(--text-base); }

.directory { scroll-margin-top: var(--space-8); }
.home-hero + .directory { margin-top: calc(var(--space-12) - var(--space-16)); } /* hero to filters: 48px of space, no ornament */
.directory-controls { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-4); margin-bottom: var(--space-10); }
.chips { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--space-2); max-width: 100%; }
.chip { flex: none; min-height: 2.75rem; padding: 0 var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); background: transparent; color: var(--color-text); font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); cursor: pointer; }
.chip:hover { background: var(--color-surface-sunken); }
.chip[aria-pressed="true"] { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); } /* solid like the CTA, so the active filter is obvious */
.chip:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: 2px; }
.directory-search { width: 100%; height: 2.75rem; min-height: 2.75rem; border-radius: var(--radius-full); padding-inline: var(--space-5); }

.tile-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
.tile { position: relative; display: flex; flex-direction: column; overflow: hidden; text-align: left; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.tile[hidden] { display: none; }
.tile:focus-within { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: 3px; }
.tile-stage { display: grid; place-items: center; height: 3.5rem; padding-block: var(--space-3); } /* a slim band, so the name and line sit high */
/* the product icon set: one stroke width, coloured by the stage's tint */
.icon { width: var(--space-8); height: var(--space-8); stroke-width: 1.5; color: var(--color-accent); flex: none; }
.tint-accent { background: var(--color-accent-subtle); }
.tint-warn { background: var(--color-warn-subtle); }
.tint-success { background: var(--color-success-subtle); }
.tint-warn .icon { color: var(--color-warn); }
.tint-success .icon { color: var(--color-success); }
.tint-muted { background: var(--color-surface-sunken); }
.tile-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-6); }
.tile-type { margin: 0 0 calc(-1 * var(--space-2)); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); white-space: nowrap; } /* eyebrow, tucked 4px above the name; neutral so it never fights the band tint */
.tile-title { margin: 0; font-size: var(--text-2xl); letter-spacing: var(--tracking-heading); }
.tile-title a { color: inherit; text-decoration: none; }
.tile-title a::after { content: ""; position: absolute; inset: 0; } /* the whole tile opens the app */
.tile-title a:focus-visible { outline: none; }
.tile-line { margin: 0; color: var(--color-text-muted); max-width: 60ch; line-height: var(--leading-normal); }
.tile-meta { margin: auto 0 0; padding-top: var(--space-2); display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: var(--space-3); } /* pinned to the tile bottom so rows line up; neutral pill, 12px, price */
.tile-meta .badge { white-space: nowrap; font-size: var(--text-xs); padding: var(--space-1) var(--space-3); }
.tile-price { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tile-link { margin-top: calc(-1 * var(--space-1)); display: inline-flex; align-items: center; min-height: 2.75rem; font-size: var(--text-sm); font-weight: var(--weight-medium); }
@media (hover: hover) {
  .tile:hover { border-color: var(--color-border-strong); }
}
@media (max-width: 29.99rem) {
  .home-hero { padding: var(--space-10) var(--space-2); } /* equal top and bottom */
  .home-hero + .directory { margin-top: calc(var(--space-8) - var(--space-16)); }
  .home-hero .hero h1 { font-size: 1.875rem; }
  .nav-link { padding-inline: var(--space-2); }
  /* phones: a 48px band and 28px icon, so a full card and the top of the next fit the first screen */
  .tile-stage { height: var(--space-12); padding-block: var(--space-2); }
  .tile-stage .icon { width: calc(var(--space-6) + var(--space-1)); height: calc(var(--space-6) + var(--space-1)); }
}
@media (min-width: 48rem) {
  /* one toolbar row on the grid's edges: chips left, search right */
  .directory-controls { flex-direction: row; align-items: center; justify-content: space-between; }
  .directory-search { width: 20rem; }
  .tile-grid { grid-template-columns: 1fr 1fr; }
  .tile:last-child:nth-child(odd) { grid-column: 1 / -1; } /* an odd last tile spans the row instead of leaving a hole */
}
@media (min-width: 68.75rem) {
  .tile-grid { grid-template-columns: repeat(3, 1fr); }
  .tile-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); } /* two products fill the row, no empty third column */
  .tile:last-child:nth-child(odd) { grid-column: auto; }
}
.home-blog { text-align: center; justify-items: center; }

.prose { max-width: 42rem; min-width: 0; overflow-wrap: anywhere; }
.prose p, .prose li { line-height: var(--leading-normal); }
/* Long documents and articles: sections breathe, and the contents list is a quiet map at the top. */
.prose > h2 { margin-top: var(--space-8); font-size: var(--text-xl); letter-spacing: var(--tracking-heading); }
.prose > h3 { margin-top: var(--space-4); font-size: var(--text-lg); }
.contents { padding: var(--space-5) var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.contents ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.contents a { display: inline-flex; align-items: center; min-height: 2.25rem; color: var(--color-text-muted); text-decoration: none; }
.contents a:hover { color: var(--color-text); text-decoration: underline; text-underline-offset: 0.2em; }
/* wide screens: the map sits beside the text and stays in view; the absolute column has the article's height, so its list can stick */
@media (min-width: 68.75rem) {
  .prose:has(> .contents) { position: relative; max-width: none; }
  .prose:has(> .contents) > :not(.contents) { max-width: 42rem; }
  .contents { position: absolute; top: 0; bottom: 0; left: 45rem; width: 16rem; padding: 0; border: 0; border-radius: 0; background: none; font-size: var(--text-sm); }
  .contents ol { position: sticky; top: var(--space-20); padding-left: var(--space-5); border-left: 1px solid var(--color-border); }
  .contents a { min-height: 1.75rem; }
}
.post-figure { margin: var(--space-4) 0; }
.post-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.post-figure figcaption, .post-code figcaption { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-normal); }
.post-lead { margin-top: 0; }
.post-code { margin: var(--space-4) 0; }
.post-code figcaption { margin: 0 0 var(--space-2); font-weight: var(--weight-medium); }
.post-code pre { margin: 0; padding: var(--space-4) var(--space-5); overflow-x: auto; border-radius: var(--radius-md); background: var(--color-surface-sunken); font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--leading-normal); overflow-wrap: normal; }
.prose .table-wrap { margin: var(--space-4) 0; overflow-x: auto; }
.prose .table caption { caption-side: top; margin-bottom: var(--space-2); text-align: left; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-muted); }
.post-list { list-style: none; padding: 0; display: grid; gap: 0; width: 100%; text-align: left; }
.post-list > li { padding-block: var(--space-4); border-top: 1px solid var(--color-border); }
.post-list > li:last-child { border-bottom: 1px solid var(--color-border); }
.post-list a { color: var(--color-text); font-weight: var(--weight-medium); text-decoration: none; }
.post-list a:hover { color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.2em; }
.post-list p { margin: var(--space-1) 0 0; }

/* Product page: hero CTA, sections, pricing, FAQ, then the same CTA in a closing band. */
.product { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-16); }
.product > nav { margin-bottom: calc(var(--space-8) - var(--space-16)); }
/* The H1 is a small label; the headline is the hero's one focal heading. */
.product > .hero h1 { font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: normal; color: var(--color-text-muted); }
.product-headline { margin: 0; font-size: var(--text-2xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-heading); line-height: var(--leading-tight); max-width: 34ch; text-wrap: balance; }
.product > .hero .section-lede { color: var(--color-text-muted); max-width: 60ch; text-wrap: pretty; }
.product > .hero .btn-primary, .product-close .btn-primary { min-height: 3rem; padding-inline: var(--space-6); font-size: var(--text-base); }
/* Product hero: the text, then a static brand-art panel (the homepage's hero-art field with the product's icon); side by side from 48rem. */
.product > .hero { max-width: none; justify-items: stretch; gap: var(--space-8); }
.product-hero-text { display: grid; gap: var(--space-4); justify-items: start; }
.product-hero-art { position: relative; overflow: hidden; display: grid; place-items: center; min-height: 10rem; background: var(--color-surface-sunken); border-radius: var(--radius-lg); }
.product-hero-art .brand-hero-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.product-hero-icon { position: relative; display: grid; place-items: center; width: 6.5rem; height: 6.5rem; border-radius: 28%; background: var(--color-surface); box-shadow: var(--shadow-2); }
.product-hero-icon .icon { width: var(--space-12); height: var(--space-12); }
@media (min-width: 48rem) {
  .product > .hero { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: stretch; gap: var(--space-12); }
  .product-hero-art { min-height: 16rem; }
}
.product-video { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); background: var(--color-surface-sunken); }

/* divider(): one hairline between major blocks, the same clear space on each side (48px, 40px on phones) instead of the page's 64px gap.
   The neighbours give back the gap: a negative margin on the 1px hr itself collapses its grid row and only trims the space above. */
.divider { margin: 0; border: 0; border-top: 1px solid var(--color-border); }
.product { --divider-space: clamp(var(--space-10), 6vw, var(--space-12)); }
.product > :has(+ .divider) { margin-bottom: calc(var(--divider-space) - var(--space-16)); }
.product > .divider + * { margin-top: calc(var(--divider-space) - var(--space-16)); }
.product-sections { display: grid; gap: var(--space-12); }
.product-section { display: grid; gap: var(--space-6); align-items: center; }
.product-section-text { display: grid; gap: var(--space-3); max-width: 38rem; }
.product-section h2 { margin: 0; font-size: var(--text-xl); letter-spacing: var(--tracking-heading); }
.product-section p { margin: 0; line-height: var(--leading-normal); color: var(--color-text-muted); }
.product-shot { width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-2); }

/* frame(): one screenshot component; the variants differ only by the browser chrome bar */
.frame { margin: 0; max-width: 100%; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.frame img { display: block; max-width: 100%; width: 100%; height: auto; }
.frame-bar { display: flex; align-items: center; gap: var(--space-2); height: var(--space-8); padding-inline: var(--space-3); background: var(--color-surface-sunken); border-bottom: 1px solid var(--color-border); }
.frame-dot { flex: none; width: var(--space-2); height: var(--space-2); border-radius: var(--radius-full); background: var(--color-border); }
.frame-address { flex: 0 1 18rem; height: var(--space-4); margin-inline: auto; border-radius: var(--radius-full); background: var(--color-surface); }
.product-screenshots { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }

.product-pricing, .product-faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.product-pricing h2, .product-faq h2, .product-close h2 { margin: 0; }
.pricing-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
/* one plan: a single wide card, name and price beside what it includes (no stranded half-width box) */
.pricing-grid:has(> :only-child) .pricing-plan { display: grid; align-content: start; align-items: start; column-gap: var(--space-12); }
@media (min-width: 48rem) {
  .pricing-grid:has(> :only-child) .pricing-plan { grid-template-columns: minmax(14rem, max-content) minmax(0, 1fr); }
  .pricing-grid:has(> :only-child) .pricing-includes { grid-column: 2; grid-row: 1 / span 2; }
}
/* two or three plans: equal-height cards (grid rows stretch), each action pinned to its card's foot */
.pricing-plan { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.pricing-name { margin: 0; font-size: var(--text-base); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); color: var(--color-text-muted); }
/* the price may wrap ("$9/month" / "per site") and scales down on narrow cards, so it never crosses into the list */
.pricing-price { margin: 0; font-size: clamp(var(--text-2xl), 1rem + 1.6vw, var(--text-3xl)); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); text-wrap: balance; }
/* a list nested in the grid's <li> defaults to hollow circles; the site's lists use solid discs */
.pricing-includes { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-2); line-height: var(--leading-normal); list-style: disc; }
.pricing-includes li::marker { color: var(--color-text-muted); }
.pricing-name { white-space: nowrap; }
.pricing-action { margin: auto 0 0; padding-top: var(--space-3); }
.pricing-action .btn { width: 100%; min-height: 2.75rem; white-space: nowrap; }
.pricing-action .btn-ghost { border-color: var(--color-border-strong); color: var(--color-text); }

.product-faq { max-width: 46rem; }
.faq-item { padding-top: var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
.faq-item:first-of-type { border-top: 1px solid var(--color-border); }
.faq-item summary::after { content: ""; flex: none; width: var(--space-2); height: var(--space-2); margin: 0 var(--space-1) 0 auto; border-right: 1.5px solid var(--color-text-muted); border-bottom: 1.5px solid var(--color-text-muted); rotate: 45deg; }
.faq-item[open] summary::after { rotate: 225deg; }
.faq-item summary { display: flex; align-items: center; gap: var(--space-4); min-height: 2.75rem; padding-block: var(--space-2); cursor: pointer; font-weight: var(--weight-medium); }
.faq-item summary:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.faq-item summary:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: 2px; }
.faq-item p { margin: 0 0 var(--space-4); max-width: 65ch; line-height: var(--leading-normal); color: var(--color-text-muted); }

.product-close { display: grid; gap: var(--space-6); justify-items: start; padding: var(--space-12) var(--space-8); background: var(--color-surface-sunken); border-radius: var(--radius-lg); }
.product-close h2 { max-width: 24ch; text-wrap: balance; }
.product-close .cluster { margin: 0; }
@media (min-width: 48rem) {
  .product-sections:has(.product-shot) { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .product-section:has(> .product-shot) { grid-column: 1 / -1; grid-template-columns: 2fr 3fr; }
  .product-sections:not(:has(.product-shot)) { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); align-items: start; }
  .product-close { padding: var(--space-16); }
}
/* Phones: the price note always sits under the CTA, whatever its length. */
@media (max-width: 29.99rem) {
  .product-cta { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}
/* Pro page (proPage()): the product hero, then one plan card with the buy button in its own column, then the key panel. */
.pro .pricing-grid .pricing-plan.pro-plan { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "price" "includes" "buy"; }
.pro-plan .pricing-name { grid-area: name; }
.pro-plan .pricing-price { grid-area: price; }
.pro .pro-plan .pricing-includes { grid-area: includes; }
.pro-buy { grid-area: buy; margin: var(--space-2) 0 0; }
.pro-buy .btn-primary { width: 100%; min-height: 3rem; padding-inline: var(--space-6); font-size: var(--text-base); white-space: nowrap; }
/* three columns only where the list keeps a readable width; the price column fits its text (up to 20rem), so the price
   never runs under the list (owner's PC 2026-10-30: a 14rem cap let "$9/month per site" overlap it) */
@media (min-width: 64rem) {
  .pro .pricing-grid .pricing-plan.pro-plan { grid-template-columns: fit-content(20rem) minmax(0, 1fr) auto; grid-template-areas: "name includes buy" "price includes buy"; align-items: center; column-gap: var(--space-8); }
  .pro-plan .pricing-name { align-self: end; }
  .pro-plan .pricing-price { align-self: start; }
  .pro-buy { margin: 0; }
  .pro-buy .btn-primary { width: auto; }
}
.pro-result { display: grid; gap: var(--space-6); max-width: 40rem; }
.pro-status { margin: 0; font-weight: var(--weight-medium); line-height: var(--leading-normal); }
.pro-key { display: grid; gap: var(--space-6); padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.pro-key-row { display: flex; gap: var(--space-2); }
.pro-key-row .input { flex: 1; min-width: 0; min-height: 2.75rem; font-family: var(--font-mono); font-size: var(--text-sm); }
.pro-key-row .btn { flex: none; min-height: 2.75rem; white-space: nowrap; }
.pro-steps-title { margin: 0; font-size: var(--text-lg); }
.pro-resend { display: grid; gap: var(--space-4); max-width: 40rem; margin-top: var(--space-2); padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
.pro-steps { margin: calc(var(--space-2) - var(--space-6)) 0 0; padding-left: var(--space-5); display: grid; gap: var(--space-2); line-height: var(--leading-normal); }
.pro > .pro-back { margin: calc(var(--space-8) - var(--space-16)) 0 0; }
.pro-back a { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* Page heroes stack: H1, lede, actions. (.page-header is the apps' toolbar row: title left, actions right.) */
.hero { display: grid; gap: var(--space-4); justify-items: start; max-width: 46rem; }
.hero h1 { margin: 0; }
.hero .section-lede { margin: 0; font-size: var(--text-lg); }
/* /pricing/: the product hero's layout, text beside the brand-art panel (no single product icon on an all-products page) */
.pricing-hero { max-width: none; justify-items: stretch; gap: var(--space-8); }
@media (min-width: 48rem) {
  .pricing-hero { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: stretch; gap: var(--space-12); }
}
/* H1 and lede centred against the art as one group, 16px apart (the column's grid rows no longer stretch apart) */
.pricing-hero .product-hero-text { align-content: center; }
@media (max-width: 40rem) {
  .pricing-hero .product-hero-art { display: none; } /* decorative only: on phones the first plan starts under the lede */
}
/* /pricing/ plan cards: one layout for every plan (label, price, features, action), two equal columns spanning the
   content width, so a product with a single plan gets a half-width card like the rest */
.pricing-page .pricing-grid { grid-template-columns: minmax(0, 1fr); max-width: none; }
.pricing-page .pricing-grid .pricing-plan { display: flex; align-items: stretch; }
@media (min-width: 48rem) {
  .pricing-page .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-page .pricing-grid:has(> :nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* no card alone on a row */
}
.pricing-period { font-size: 0.4em; white-space: nowrap; font-weight: var(--weight-medium); letter-spacing: normal; color: var(--color-text-muted); }
.pricing-planned { display: block; margin-top: var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: normal; color: var(--color-text-muted); }
.pricing-page .pricing-action .btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.pricing-page .pricing-action .btn-primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.pricing-page .pricing-action .btn { min-height: 2.75rem; }

/* ogCard(): the 1200x630 social card (dist/og/), rendered to PNG at deploy. Fixed box; the headline
   sits bottom-left at 56px: the longest current one (63 chars) balances into two lines in the 1040px measure. */
.og { margin: 0; background: var(--color-bg); }
.og-card { position: relative; box-sizing: border-box; width: 1200px; height: 630px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-20); background: var(--color-bg); color: var(--color-text); font-family: var(--font-display); }
.og-card-art { position: absolute; inset: 0; }
.og-card-art svg { display: block; width: 100%; height: 100%; }
.og-card-wordmark, .og-card-text { position: relative; margin: 0; }
.og-card-wordmark { font-size: var(--text-xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-heading); }
.og-card-text { display: grid; gap: var(--space-4); }
.og-card-name { margin: 0; font-size: var(--text-2xl); font-weight: var(--weight-medium); letter-spacing: var(--tracking-heading); color: var(--color-accent); }
.og-card-headline { margin: 0; font-size: calc(var(--text-3xl) * 1.4); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); line-height: var(--leading-tight); text-wrap: balance; }
/* With a real capture: the frame sits right, centred on the card, and the text keeps the 432px left of a 48px gap. */
.og-card-shot { position: absolute; top: 50%; right: var(--space-20); width: 560px; transform: translateY(-50%); }
.og-card-shot .frame { box-shadow: var(--shadow-2); }
.og-card:has(.og-card-shot) .og-card-text { max-width: 432px; }
.og-card:has(.og-card-shot) .og-card-headline { font-size: var(--text-3xl); }
/* dates never break at their hyphens */
time { white-space: nowrap; }