/* =============================================================
   PHOENIX VERUS — site layer
   Everything the design system listed under "Known gaps" (§11):
   mobile nav, forms, article/prose, plus the components the build
   spec needs — pricing cards, answer blocks, tables, expert card.

   Rules inherited and not broken here:
   - no value outside the 4px spacing scale
   - no hardcoded colour below the primitive layer
   - square corners, hairline dividers, no card shadows
   - one orchestrated motion moment per page (already spent on the hero)
   ============================================================= */

/* =============================================================
   FULL-WIDTH SHELL
   The design system set --wrap to 1240px, which on a 1920px screen leaves a
   third of the viewport empty on either side and reads as a narrow column.
   Widened here rather than in phoenix-verus.css so the design-system file stays
   the untouched source it was delivered as.

   What is NOT widened: reading columns. --wrap-text stays at 720px and prose
   stays capped at 68ch, because a 1500px line of body copy is unreadable
   regardless of how modern it looks. Full width means the shell, the grids and
   the dark bands span the screen; the sentences do not.
   ============================================================= */
:root {
  /* Full width with a safe zone. The shell tracks the viewport instead of
     stopping at a fixed 1240px, and the gutter grows with it so content never
     touches the edge on a wide screen or crowds it on a small one. */
  --wrap: min(1680px, 100%);
  --gutter: clamp(1.25rem, 5vw, 5.5rem);

  /* Vertical rhythm scales with the viewport too. The fixed 112px section
     padding is why a section did not fit on a laptop screen: on a 1440×800
     display it spent a quarter of the fold on whitespace. */
  --pv-space-8: clamp(2.5rem, 5vh, 4.5rem);
  --pv-space-9: clamp(3.25rem, 7vh, 7rem);
  --pv-space-10: clamp(4.5rem, 10vh, 10rem);
}
.wrap { padding-inline: var(--gutter); }
.wrap-text { max-width: calc(var(--wrap-text) + 2 * var(--gutter)); padding-inline: var(--gutter); }
.hdr-in { max-width: var(--wrap); padding-inline: var(--gutter); }

/* BUG 10 — text that inherited a dark colour onto a dark background.
   .on-dark only redefines custom properties; nothing applied them. So a table
   cell or a paragraph inside a dark section kept the body colour (--pv-grey-900
   on near-black) and was effectively invisible. This is the single worst
   readability bug on the site and it affected every .on-dark block. */
.on-dark, [data-theme="dark"] { color: var(--color-text); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--color-text); }
.on-dark p, .on-dark li, .on-dark dd, .on-dark td, .on-dark th { color: var(--color-text-muted); }
.on-dark thead th { color: var(--pv-grey-400); }
.on-dark .lede { color: var(--color-text-muted); }
.on-dark th, .on-dark td { border-block-end-color: var(--pv-border-dark); }
.on-dark thead th { border-block-end-color: var(--pv-border-dark-strong); }
.on-dark caption { color: var(--pv-grey-400); }
.on-dark a { color: var(--color-link); }
/* BUG 13 — buttons are not links for colour purposes. The .on-dark rule above
   is (0,2,0) and beat .btn-primary's (0,1,0), so the label on a filled orange
   button inside a dark section rendered in orange and disappeared. Buttons opt
   out and keep their own colour in every context. */
.on-dark a.btn-primary { color: var(--pv-white); }
.on-dark a.btn-secondary { color: var(--color-primary); }
.on-dark a.btn-secondary:hover { color: var(--pv-white); }
.on-dark a.btn-ghost { color: var(--pv-white); }
.on-dark a.btn-ghost:hover { color: var(--pv-ink-900); }
.on-dark tbody th { color: var(--pv-white); }

/* Wide screens get more air between the asymmetric columns, not more text. */
@media (min-width: 1400px) {
  .split-7-5, .split-5-7, .split-even, .data-grid, .expert-grid, .founder-grid {
    gap: var(--pv-space-9);
  }
}


/* =============================================================
   TYPOGRAPHY REPAIRS
   Found by auditing the built pages against the real Greek and German
   copy rather than against Latin placeholder text. Each of these is a
   reproducible bug, not a preference.
   ============================================================= */

/* BUG 1 — colliding lines in Greek and German headings.
   The design system sets h1 line-height to 1.02. That is correct for a
   two-word English display line and wrong for Greek: at 68px, ascenders
   with tonos (Ό, ή) and descenders (β, ρ, μ) from adjacent lines land in
   the same pixels. The design system's own §3 warns that Greek diacritics
   collide with descenders from the line above; the h1 rule did not apply
   its own warning. Greek and German get the room they need. */
:lang(el) h1 { line-height: 1.16; }
:lang(el) h2 { line-height: 1.26; }
:lang(el) h3 { line-height: 1.34; }
:lang(de) h1 { line-height: 1.12; }
:lang(de) h2 { line-height: 1.22; }

/* BUG 2 — long words overflowing their container.
   "βελτιστοποιήσουμε" is 17 characters and "KI-Sichtbarkeitsmessung" is 23.
   At display size either is wider than a 720px reading column, and the
   default is to overflow rather than break. Headings break; body prose gets
   `anywhere` only on the things that genuinely have no break opportunity
   (URLs, addresses), never on all prose. */
h1, h2, h3, h4 { overflow-wrap: break-word; }
:lang(de) h1, :lang(de) h2, :lang(de) h3 { hyphens: auto; }
a[href^="mailto:"], .expert-value a, address, code { overflow-wrap: anywhere; }

/* BUG 3 — the hero H1 was capped at 13ch.
   That cap assumed short display headlines. The real H1s are full sentences
   carrying the target query: the Greek home H1 is 66 characters, which at
   13ch is five stacked lines. Widened, with balanced wrapping so the last
   line is not an orphan. */
.hero h1 { max-inline-size: min(20ch, 100%); }
h1, h2 { text-wrap: balance; }
p, .lede, .answer-body { text-wrap: pretty; }

/* BUG 4 — anchored headings hid under the sticky header.
   /aeo/#ti-einai and /aeo/#aeo-vs-seo are in the keyword map, so they get
   linked from outside. Without scroll-padding the target lands behind the
   72px header. */
html { scroll-padding-top: calc(var(--nav-height) + var(--pv-space-4)); }

/* BUG 5 — the mega menu could run past the right edge of the viewport at
   narrow desktop widths. */
.mega { max-inline-size: min(440px, calc(100vw - 2 * var(--gutter))); }

/* BUG 6 — tables squashed instead of scrolling.
   .table-wrap scrolls, but without a floor the browser compresses columns
   to unreadable widths first and never triggers the scroll. */
.table-wrap table { min-inline-size: 34rem; }

/* BUG 7 — grid children refusing to shrink.
   A grid or flex item defaults to min-content width, so one long word in a
   cell pushes the whole track wider than the page. */
.split-7-5 > *, .split-5-7 > *, .split-even > *,
.data-grid > *, .expert-grid > *, .founder-grid > *,
.svc-cell, .demo-cell, .price-card, .ftr-grid > * { min-inline-size: 0; }

/* BUG 8 — the reversed founder block had inverted column proportions.
   Reordering the media into column two left it in the 7fr track, so the
   portrait got the wide column and the copy got the narrow one. */
.founder--reversed .founder-grid { grid-template-columns: 7fr 5fr; }

/* ---------- small button, used in the nav bar ---------------- */
.btn-sm {
  min-block-size: 40px;
  padding: var(--pv-space-2) var(--pv-space-4);
  font-size: var(--pv-text-xs);
  letter-spacing: 0.02em;
}

/* The bug that made the nav CTA enormous: .nav > li > a in the design system
   applies padding-block: 24px to every direct nav link, and the button is one.
   It was inheriting 48px of vertical padding on top of its own. Buttons in the
   nav opt out and keep their own box. */
.nav > li > a.btn, .hdr-actions a.btn {
  padding: var(--pv-space-2) var(--pv-space-4);
  box-shadow: none;
}
.hdr-actions a.btn { color: var(--pv-white); }
.nav-cta { display: flex; align-items: center; }
/* Push the language switcher and the CTA to the right edge, leaving the
   section links grouped on the left where they are scanned. */
/* BUG 14 — the nav sat on the left instead of the right.
   The design system's own rule intends it to be right-aligned:

     .nav { margin-inline-start: auto; display: flex; ...; margin: 0; padding: 0 }

   but the `margin: 0` shorthand at the end silently cancels the
   `margin-inline-start: auto` declared at the start of the same rule, so the
   list never claimed the free space in the header. Auto on both sides centres
   it in the space left between the logo and the right edge. Markup
   unchanged. */
.nav { margin-inline: auto; }

/* ---------- header: logo sizing + drawer --------------------- */
.hdr-logo img { block-size: 30px; inline-size: auto; }
.nav-toggle-bars { display: block; inline-size: 22px; }
.nav-toggle-bars span {
  display: block; block-size: 2px; background: currentColor;
  margin-block: 4px;
  transition: transform var(--pv-dur-fast) var(--pv-ease-out),
              opacity var(--pv-dur-fast) var(--pv-ease-out);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  /* The design system hides .nav and shows .nav-toggle but does not ship the
     drawer. This is the drawer. Links must never simply disappear. */
  .nav {
    display: none;
    position: fixed; inset-block-start: var(--nav-height); inset-inline: 0;
    inset-block-end: 0;
    background: var(--pv-ink-900);
    border-block-start: 1px solid var(--pv-hairline-dark);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--pv-space-4) var(--pv-space-5) var(--pv-space-8);
    overflow-y: auto; z-index: 90;
  }
  .nav[data-open="true"] { display: flex; }
  .nav > li { border-block-end: 1px solid var(--pv-hairline-dark); }
  .nav > li > a { padding-block: var(--pv-space-4); font-size: var(--pv-text-lg); }
  /* Mega menu becomes a plain nested list — hover has no meaning on touch */
  .mega {
    position: static; inline-size: auto; opacity: 1; visibility: visible;
    transform: none; background: transparent; border: 0;
    padding: 0 0 var(--pv-space-4);
  }
  .mega h4, .mega p { display: none; }
  .mega a { padding-block: var(--pv-space-3); padding-inline-start: var(--pv-space-4); }
  .nav .lang-switch { padding-block: var(--pv-space-4); }
  .nav-tail--mobile { display: block; }
  .nav .btn-sm { margin-block-start: var(--pv-space-5); min-block-size: 48px; }
  body[data-nav-open="true"] { overflow: hidden; }
}

/* Mega-menu and sidebar headings are h2 for document outline reasons, so they
   need their display size set back down to label scale. */
.mega-h {
  font-family: var(--pv-font-heading); font-size: var(--pv-text-sm);
  color: var(--pv-white); margin: 0 0 var(--pv-space-2); letter-spacing: 0;
}
.aside-h {
  font-size: var(--pv-text-sm); letter-spacing: 0.14em; text-transform: none;
  color: var(--color-text-muted); margin: 0;
}
.demo-title { font-size: var(--pv-text-xl); letter-spacing: -0.01em; }

/* ---------- the extractable answer block --------------------- */
/* Visually quiet on purpose. Its job is to be quoted, not to shout. */
.answer {
  border-inline-start: 3px solid var(--color-primary);
  padding: var(--pv-space-4) 0 var(--pv-space-4) var(--pv-space-5);
  margin-block: var(--pv-space-6);
  max-inline-size: 68ch;
}
.answer-label {
  font-family: var(--pv-font-heading); font-weight: 700;
  font-size: var(--pv-text-xs); letter-spacing: 0.2em;
  color: var(--color-text-muted); margin-block-end: var(--pv-space-2);
}
.answer-body { font-size: var(--pv-text-lg); line-height: 1.55; margin: 0; }
.on-dark .answer-body { color: var(--pv-white); }

/* ---------- prose / article ---------------------------------- */
.prose > * + * { margin-block-start: var(--pv-space-5); }
.prose h2 { margin-block-start: var(--pv-space-8); }
.prose h3 { margin-block-start: var(--pv-space-6); }
.prose p, .prose li { max-inline-size: 68ch; }
.prose ul, .prose ol { padding-inline-start: var(--pv-space-5); }
.prose li + li { margin-block-start: var(--pv-space-2); }
.prose strong { font-weight: 600; }
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em; background: var(--color-bg-alt);
  padding: 0.1em 0.35em; border: 1px solid var(--color-border);
}
.prose pre {
  background: var(--pv-ink-900); color: var(--pv-grey-300);
  padding: var(--pv-space-5); overflow-x: auto;
  font-size: var(--pv-text-sm); line-height: 1.6;
}
.prose pre code { background: none; border: 0; padding: 0; color: inherit; }

.blade-list { list-style: none; padding: 0; margin: var(--pv-space-5) 0 0; }
.blade-list li {
  display: flex; gap: var(--pv-space-3);
  margin-block-end: var(--pv-space-3); max-inline-size: 68ch;
}

.meta-dates {
  font-size: var(--pv-text-xs); color: var(--color-text-muted);
  letter-spacing: 0.04em; margin-block-start: var(--pv-space-4);
}

/* ---------- tables ------------------------------------------- */
/* Structured rows get quoted disproportionately — Blueprint 8.3. */
.table-wrap { overflow-x: auto; margin-block: var(--pv-space-6); }
table { border-collapse: collapse; inline-size: 100%; font-size: var(--pv-text-sm); }
caption {
  text-align: start; font-size: var(--pv-text-xs); letter-spacing: 0.04em;
  color: var(--color-text-muted); padding-block-end: var(--pv-space-3);
}
th, td {
  text-align: start; vertical-align: top;
  padding: var(--pv-space-3) var(--pv-space-4);
  border-block-end: 1px solid var(--color-border);
}
thead th {
  font-family: var(--pv-font-heading); font-size: var(--pv-text-xs);
  letter-spacing: 0.1em; color: var(--color-text-muted);
  border-block-end: 2px solid var(--color-border-strong);
}
tbody th { font-weight: 600; }

/* ---------- definitions -------------------------------------- */
.defs { margin-block: var(--pv-space-6); }
.defs dt {
  font-family: var(--pv-font-heading); font-weight: 700;
  margin-block-start: var(--pv-space-5);
}
.defs dd { margin: var(--pv-space-2) 0 0; color: var(--color-text-muted); max-inline-size: 68ch; }

/* ---------- FAQ body ----------------------------------------- */
.faq-body { padding-block-end: var(--pv-space-5); }
.faq-body p { color: var(--color-text-muted); max-inline-size: 68ch; margin-block-end: var(--pv-space-4); }
.faq-body p:last-child { margin-block-end: 0; }

/* Visually hidden, still in the accessibility tree and the document outline. */
.sr-only {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- pricing tiers ------------------------------------ */
.tiers {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  background: var(--color-border); border: 1px solid var(--color-border);
  margin-block-start: var(--pv-space-6);
}
.tiers--3 { grid-template-columns: repeat(3, 1fr); }
.tier {
  background: var(--color-surface); padding: var(--pv-space-6) var(--pv-space-5);
  display: flex; flex-direction: column; position: relative; min-inline-size: 0;
}
/* The recommended tier inverts to ink rather than taking a second brand
   colour, which would compete with the orange accent. */
.tier--featured { background: var(--pv-ink-900); color: var(--pv-white); }
.tier--featured .tier-name, .tier--featured .price-figure { color: var(--pv-white); }
.tier--featured .tier-list li, .tier--featured .tier-note { color: var(--pv-grey-300); }
.tier-flag {
  position: absolute; inset-block-start: 0; inset-inline-end: 0;
  background: var(--color-primary); color: var(--pv-white);
  font-family: var(--pv-font-heading); font-weight: 700;
  font-size: 10px; letter-spacing: 0.16em;
  padding: var(--pv-space-1) var(--pv-space-3);
}
.tier-kicker {
  font-family: var(--pv-font-heading); font-weight: 700;
  font-size: 10px; letter-spacing: 0.18em;
  color: var(--color-primary); margin: 0 0 var(--pv-space-2);
}
.tier-name { font-family: var(--pv-font-heading); font-weight: 700; font-size: var(--pv-text-lg); color: var(--color-text); margin: 0; }
.price-figure {
  font-family: var(--pv-font-heading); font-weight: 700;
  font-size: var(--pv-text-3xl); letter-spacing: -0.02em;
  margin: var(--pv-space-3) 0 0; line-height: 1;
}
.price-figure small {
  font-family: var(--pv-font-body); font-weight: 400;
  font-size: var(--pv-text-sm); letter-spacing: 0; color: var(--color-text-muted);
}
.tier-note { font-size: var(--pv-text-xs); color: var(--color-text-muted); margin: var(--pv-space-2) 0 0; }
.tier-list { list-style: none; padding: 0; margin: var(--pv-space-5) 0 var(--pv-space-6); flex: 1; }
.tier-list li {
  display: flex; gap: var(--pv-space-3); font-size: var(--pv-text-sm);
  color: var(--color-text-muted); margin-block-end: var(--pv-space-3);
}
.tier-inherit { font-weight: 600; color: var(--color-text) !important; }
.tier--featured .tier-inherit { color: var(--pv-white) !important; }
.tier .btn { align-self: flex-start; }
.tier--featured .btn-secondary { border-color: var(--pv-amber-400); color: var(--pv-amber-400); }
.tier--featured .btn-secondary:hover { background: var(--pv-amber-400); color: var(--pv-ink-900); }

/* Two options inside one tier (Expansion), so the ladder stays five wide. */
.tier-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--color-border); border: 1px solid var(--color-border);
  margin-block-start: var(--pv-space-3);
}
.tier-split div { background: var(--color-surface); padding: var(--pv-space-3) var(--pv-space-4); }
.tier--featured .tier-split { background: var(--pv-border-dark); border-color: var(--pv-border-dark); }
.tier--featured .tier-split div { background: var(--pv-ink-700); }
.tier-split .n {
  display: block; font-family: var(--pv-font-heading); font-weight: 700;
  font-size: 10px; letter-spacing: 0.16em; color: var(--color-text-muted);
}
.tier-split .v { font-family: var(--pv-font-heading); font-weight: 700; font-size: var(--pv-text-xl); color: var(--color-text); }
.tier--featured .tier-split .v { color: var(--pv-white); }

/* VAT is stated per section rather than as one footnote, so it stays visible
   when a single section is screenshotted or linked to. */
.vat {
  display: inline-flex; align-items: center; gap: var(--pv-space-2);
  font-family: var(--pv-font-heading); font-weight: 700;
  font-size: 10px; letter-spacing: 0.16em; color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  padding: var(--pv-space-1) var(--pv-space-3);
  margin-block-start: var(--pv-space-4);
}
.vat .blade { margin: 0; }

.note-strip {
  background: var(--color-bg-alt); border-inline-start: 3px solid var(--color-accent);
  padding: var(--pv-space-5); font-size: var(--pv-text-sm);
  color: var(--color-text-muted); max-inline-size: 68ch;
  margin-block-start: var(--pv-space-6);
}

.price-pending {
  border: 1px solid var(--color-border); border-inline-start: 3px solid var(--color-accent);
  padding: var(--pv-space-5); margin-block-start: var(--pv-space-6);
  font-size: var(--pv-text-sm); color: var(--color-text-muted); max-inline-size: 68ch;
}

@media (max-width: 1200px) { .tiers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .tiers, .tiers--3 { grid-template-columns: 1fr; } }

/* ---------- demo cards --------------------------------------- */
.demo-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--color-border); border: 1px solid var(--color-border);
  margin-block-start: var(--pv-space-7);
}
.demo-cell {
  background: var(--color-surface); padding: var(--pv-space-6);
  display: block; text-decoration: none; color: inherit;
  transition: background var(--pv-dur-base) var(--pv-ease-out);
}
.demo-cell:hover { background: var(--color-bg-alt); }
.demo-cell:hover h2, .demo-cell:hover h3 { color: var(--color-primary); }
.demo-cell h2, .demo-cell h3 { font-size: var(--pv-text-xl); letter-spacing: -0.01em; margin-block-end: var(--pv-space-3); transition: color var(--pv-dur-fast) var(--pv-ease-out); }
.demo-cell p { font-size: var(--pv-text-sm); color: var(--color-text-muted); margin: 0; }
.demo-status {
  display: inline-block; font-family: var(--pv-font-heading); font-weight: 700;
  font-size: var(--pv-text-xs); letter-spacing: 0.14em;
  color: var(--color-text-muted); margin-block-end: var(--pv-space-3);
}
.demo-shot {
  aspect-ratio: 16/10; background: var(--pv-ink-900);
  display: grid; place-items: center; margin-block-end: var(--pv-space-5);
}
.demo-shot .blade { inline-size: 26px; block-size: 18px; margin: 0; opacity: 0.75; }

/* ---------- expert / booking block --------------------------- */
/* Contact block. Roughly 70% of the previous width and centred, so it reads as
   a card set into the page rather than a full-bleed band repeated on every
   view. It carries the company mark, not a portrait. */
.expert-shell {
  max-inline-size: min(880px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}
.expert-grid {
  display: grid; grid-template-columns: 4fr 6fr;
  align-items: stretch; border: 1px solid var(--pv-hairline-dark);
}
.expert-mark { background: var(--pv-white); overflow: hidden; }
.expert-mark img {
  inline-size: 100%; block-size: 100%; object-fit: cover; display: block;
}
.expert-card {
  background: var(--pv-ink-900); padding: var(--pv-space-7) var(--pv-space-6);
  display: flex; flex-direction: column; justify-content: center;
}
.expert-card h2 { font-size: var(--pv-text-2xl); }
.expert-card h2 { color: var(--pv-white); }
.expert-sub { color: var(--pv-grey-300); font-weight: 600; margin-block: var(--pv-space-3) var(--pv-space-7); }
.expert-field {
  font-family: var(--pv-font-heading); font-weight: 700;
  font-size: var(--pv-text-xs); letter-spacing: 0.2em;
  color: var(--pv-grey-500); margin: 0 0 var(--pv-space-2);
}
.expert-value {
  border-block-end: 1px solid var(--pv-border-dark);
  padding-block-end: var(--pv-space-3); margin-block-end: var(--pv-space-6);
}
.expert-value a { color: var(--color-accent); text-decoration: none; font-size: var(--pv-text-lg); }
.expert-value a:hover { text-decoration: underline; }
.expert-card .btn { align-self: flex-start; }

/* BUG 12 — the emblem sat small inside a large dark box.
   Both the contact block and the portrait slot painted an ink panel and then
   dropped a capped-width image into the middle of it, so most of the box was
   empty. The mark now fills its container: the artwork is a square lockup on
   white, so it becomes the panel instead of floating in one. */
.portrait--mark {
  aspect-ratio: 1/1; background: var(--pv-white);
  display: block; padding: 0; overflow: hidden;
}
.portrait--mark img {
  position: static; inline-size: 100%; block-size: 100%;
  object-fit: cover; display: block;
}

/* The looping portrait, used only on the two founder pages. Everywhere else
   the contact block carries the company mark instead — a face repeated on
   every view reads as one freelancer, a mark reads as an organisation. */
.portrait--video { position: relative; aspect-ratio: 4/5; overflow: hidden;
  background-color: var(--pv-ink-900); background-size: cover; background-position: center top; }
.portrait--video video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .portrait--video video { display: none; } }

/* ---------- sources / citations ------------------------------ */
.sources {
  border-block-start: 1px solid var(--color-border);
  margin-block-start: var(--pv-space-8); padding-block-start: var(--pv-space-5);
  max-inline-size: 68ch;
}
.sources-h {
  font-family: var(--pv-font-heading); font-weight: 700;
  font-size: var(--pv-text-xs); letter-spacing: 0.2em;
  color: var(--color-text-muted); margin: 0 0 var(--pv-space-4);
}
.sources ul { list-style: none; padding: 0; margin: 0; }
.sources li {
  font-size: var(--pv-text-sm); color: var(--color-text-muted);
  margin-block-end: var(--pv-space-3); padding-inline-start: var(--pv-space-4);
  border-inline-start: 2px solid var(--color-border); line-height: 1.55;
}
.sources a { color: var(--color-link); }

/* ---------- two-pillar service architecture ------------------ */
.pillars {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--color-border); border: 1px solid var(--color-border);
  margin-block-start: var(--pv-space-7);
}
.pillar { background: var(--color-surface); padding: var(--pv-space-7) var(--pv-space-6); }
.pillar h3 { font-size: var(--pv-text-2xl); margin-block-end: var(--pv-space-4); }
.pillar h3 a { color: inherit; text-decoration: none; }
.pillar h3 a:hover { color: var(--color-primary); }
.pillar > p { color: var(--color-text-muted); max-inline-size: 52ch; }
.pillar-links {
  list-style: none; padding: 0; margin: var(--pv-space-5) 0 0;
  display: flex; flex-wrap: wrap; gap: var(--pv-space-2) var(--pv-space-5);
}
.pillar-links a {
  font-family: var(--pv-font-heading); font-weight: 700;
  font-size: var(--pv-text-xs); letter-spacing: 0.1em;
  color: var(--color-primary); text-decoration: none;
}
.pillar-links a:hover { text-decoration: underline; }
.pillar-support {
  border: 1px solid var(--color-border); border-block-start: 0;
  padding: var(--pv-space-6);
}
.pillar-support h3 { font-size: var(--pv-text-lg); margin-block-end: var(--pv-space-3); }
.pillar-support p { color: var(--color-text-muted); max-inline-size: 68ch; margin: 0; }
@media (max-width: 900px) { .pillars { grid-template-columns: 1fr; } }

/* ---------- build-stack band --------------------------------- */
.stack-wall { background: var(--pv-ink-900); padding-block: var(--pv-space-8); overflow: hidden; }
.stack-wall .wrap { text-align: center; }
.stack-wall-h {
  font-family: var(--pv-font-heading); font-weight: 700;
  font-size: var(--pv-text-xs); letter-spacing: 0.2em;
  color: var(--pv-grey-500); margin: 0 0 var(--pv-space-6);
}

/* The marquee. The track holds the list twice and shifts by exactly -50%,
   so the second copy lands where the first began and the loop has no seam.
   Direction is reversed (from -50% to 0) so travel reads left-to-right. */
.stack-marquee {
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.stack-track {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; inline-size: max-content;
  gap: var(--pv-space-9);
  animation: pv-marquee 64s linear infinite;
  will-change: transform;
}
.stack-track:hover { animation-play-state: paused; }
.stack-track li { flex: 0 0 auto; }
.stack-track a {
  display: block; padding-block: var(--pv-space-2);
  opacity: .62; transition: opacity var(--pv-dur-base) var(--pv-ease-out);
}
.stack-track a:hover, .stack-track a:focus-visible { opacity: 1; }
.stack-track img {
  block-size: 30px; inline-size: auto; display: block;
}

@keyframes pv-marquee {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .stack-track {
    animation: none; transform: none;
    flex-wrap: wrap; justify-content: center;
    inline-size: auto; gap: var(--pv-space-6) var(--pv-space-8);
    padding-inline: var(--gutter);
  }
  /* With motion off the duplicate row would just be a repeated list. */
  .stack-track li[aria-hidden="true"] { display: none; }
  .stack-marquee { -webkit-mask-image: none; mask-image: none; }
}

@media (max-width: 640px) {
  .stack-track img { block-size: 24px; }
  .stack-track { gap: var(--pv-space-7); }
}

/* ---------- principals (home "Behind PHOENIX VERUS") --------- */
.principals {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--pv-space-7); margin-block-start: var(--pv-space-7);
}
.principal { display: grid; grid-template-columns: 4fr 8fr; gap: var(--pv-space-5); align-items: start; }
.principal-media {
  aspect-ratio: 4/5; background-color: var(--pv-ink-800);
  background-size: cover; background-position: center top;
}
.principal-role {
  font-family: var(--pv-font-heading); font-weight: 700;
  font-size: var(--pv-text-xs); letter-spacing: 0.16em;
  color: var(--color-primary); margin: 0 0 var(--pv-space-2);
}
.principal-body h3 { margin-block: 0 var(--pv-space-3); }
.principal-body p { font-size: var(--pv-text-sm); color: var(--color-text-muted); margin-block-end: var(--pv-space-4); }
.principal-body .btn { margin-block-start: var(--pv-space-2); }

@media (max-width: 1080px) {
  .principals { grid-template-columns: 1fr; gap: var(--pv-space-8); }
}
@media (max-width: 560px) {
  .principal { grid-template-columns: 1fr; }
  .principal-media { aspect-ratio: 3/2; max-inline-size: 320px; }
}

/* ---------- footer ------------------------------------------- */
/* BUG 11 — the footer logo was distorted. The <img> carries width="800" for
   CLS reasons and the stylesheet set only block-size, so the intrinsic width
   attribute fought the height and stretched the mark. */
.ftr-logo { block-size: 42px; inline-size: auto; margin-block-end: var(--pv-space-5); }
.ftr-h {
  color: var(--pv-white); font-size: var(--pv-text-sm);
  letter-spacing: 0; margin: 0 0 var(--pv-space-4); line-height: 1.3;
}
.ftr-brand address { color: var(--pv-grey-300); }
.ftr-btm {
  flex-direction: column; align-items: center; text-align: center;
  gap: var(--pv-space-2);
}
.ftr-tagline {
  font-family: var(--pv-font-heading); font-weight: 700;
  font-size: var(--pv-text-sm); color: var(--pv-grey-300);
  letter-spacing: 0.02em; margin: 0;
}
.ftr-legal { margin: 0; color: var(--pv-grey-500); font-size: var(--pv-text-xs); letter-spacing: 0.02em; }

/* ---------- footer popular-topics block ---------------------- */
.topics {
  border-block-start: 1px solid var(--pv-hairline-dark);
  margin-block-start: var(--pv-space-7); padding-block-start: var(--pv-space-6);
  text-align: center;
}
.topics h4 { color: var(--pv-grey-500); font-size: var(--pv-text-xs); letter-spacing: 0.2em; margin-block-end: var(--pv-space-4); }
.topics ul {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--pv-space-2) var(--pv-space-5); padding: 0; margin: 0;
}
.topics a { color: var(--pv-grey-300); font-size: var(--pv-text-sm); text-decoration: none; }
.topics a:hover { color: var(--color-accent); }

/* ---------- forms -------------------------------------------- */
.field { display: block; margin-block-end: var(--pv-space-5); max-inline-size: 34rem; }
.field > span {
  display: block; font-family: var(--pv-font-heading); font-weight: 700;
  font-size: var(--pv-text-xs); letter-spacing: 0.14em;
  color: var(--color-text-muted); margin-block-end: var(--pv-space-2);
}
.field input, .field textarea, .field select {
  inline-size: 100%; min-block-size: 48px;
  font-family: var(--pv-font-body); font-size: var(--pv-text-md);
  color: var(--color-text); background: var(--color-surface);
  border: 1px solid var(--color-border-strong); border-radius: var(--pv-radius-0);
  padding: var(--pv-space-3) var(--pv-space-4);
  transition: border-color var(--pv-dur-fast) var(--pv-ease-out);
}
.field textarea { min-block-size: 9rem; resize: vertical; line-height: 1.6; }
.field input:hover, .field textarea:hover { border-color: var(--color-text-muted); }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--color-primary); }
.field [aria-invalid="true"] { border-color: var(--pv-red-700); }
.field-error { color: var(--pv-red-700); font-size: var(--pv-text-sm); margin-block-start: var(--pv-space-2); }
.field-hint { color: var(--color-text-muted); font-size: var(--pv-text-sm); margin-block-start: var(--pv-space-2); }

/* ---------- founder blocks (About) --------------------------- */
.founder-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--pv-space-8); align-items: center; }
.founder--reversed .founder-media { order: 2; }
.founder-media { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--pv-ink-800); }
.founder-video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.founder-role {
  font-family: var(--pv-font-heading); font-weight: 700;
  font-size: var(--pv-text-xs); letter-spacing: 0.2em;
  color: var(--color-primary); margin: 0 0 var(--pv-space-3);
}
.founder-body > h2 { margin-block-start: 0; }
.founder-links { font-size: var(--pv-text-sm); margin-block-start: var(--pv-space-5); }
.founder + .founder { padding-block-start: 0; }

/* A cinemagraph is motion that decorates, so reduced-motion freezes it.
   BUG 9: the previous rule hid the video and left an empty grey box, because
   nothing supplied a background image. The poster frame is now painted by the
   container, so freezing it shows a still portrait rather than a blank panel.
   The same background is what shows while the video is still loading. */
.founder-media, .expert-media {
  background-size: cover; background-position: center top;
  background-repeat: no-repeat;
}
@media (prefers-reduced-motion: reduce) {
  .founder-video, .expert-video { display: none; }
}

/* Autoplaying loops need a way to stop. One control, bottom-right of the
   portrait, 44px target, always reachable by keyboard. */
.media-toggle {
  position: absolute; inset-block-end: var(--pv-space-3); inset-inline-end: var(--pv-space-3);
  z-index: 2; inline-size: 44px; block-size: 44px;
  display: grid; place-items: center;
  background: rgb(12 12 13 / .72); color: var(--pv-white);
  border: 1px solid rgb(255 255 255 / .28); border-radius: var(--pv-radius-0);
  cursor: pointer; padding: 0;
  transition: background var(--pv-dur-fast) var(--pv-ease-out);
}
.media-toggle:hover { background: var(--pv-ink-900); }
.media-toggle svg { inline-size: 16px; block-size: 16px; fill: currentColor; }
.media-toggle .icon-pause { display: block; }
.media-toggle .icon-play { display: none; }
.media-toggle[aria-pressed="true"] .icon-pause { display: none; }
.media-toggle[aria-pressed="true"] .icon-play { display: block; }
@media (prefers-reduced-motion: reduce) { .media-toggle { display: none; } }

/* ---------- stub page ---------------------------------------- */
.is-stub .lede { color: var(--color-primary); font-weight: 600; }

/* ---------- responsive --------------------------------------- */
@media (max-width: 1080px) {
  .price-grid, .demo-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .expert-grid, .founder-grid { grid-template-columns: 1fr; }
  /* The lockup is square. Stacked, its panel goes wide, and `cover` was
     cropping the wordmark off the bottom. Contain it and cap the width so the
     whole mark stays visible. */
  .expert-mark { aspect-ratio: auto; padding: var(--pv-space-6); }
  .expert-mark img {
    object-fit: contain; block-size: auto;
    max-inline-size: 220px; margin-inline: auto;
  }
  .founder-media { aspect-ratio: 3/2; }
  .founder--reversed .founder-media { order: 0; }
  .founder + .founder { padding-block-start: var(--pv-space-8); }
}
@media (max-width: 640px) {
  .price-grid, .demo-grid { grid-template-columns: 1fr; }
  .answer { padding-inline-start: var(--pv-space-4); }
}