/* =============================================================
   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); }
/* BUG 15 — inconsistent alignment, and half the screen left empty.
   Two problems, one cause. `.wrap` ran content to a 1680px shell while
   `.wrap-text` centred a 720px column inside it, so pages disagreed about
   where the left edge was — and on a wide screen the 720px column left the
   right half of the viewport blank.

   The fix is the composition used by every serious B2B site of this kind: one
   centred content column for reading, and full-width bands for the elements
   that are meant to span — logo strips, pricing grids, link grids, images,
   dark CTA bands. Prose never sits alone in a narrow column beside dead
   space, because the sections around it carry the width. */
:root { --col: 1180px; }

.wrap,
.wrap-text {
  max-width: min(var(--col), 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Reading measure inside the column. The column is centred; the text reads
   from a left edge, because centred body copy is unreadable past two lines. */
.wrap-text > *,
.wrap-text > .prose > * { max-inline-size: 78ch; }

/* Elements that are supposed to span the column, and must not be clipped by
   the reading measure. */
.wrap-text > .table-wrap, .wrap-text > .prose > .table-wrap,
.wrap-text > table,       .wrap-text > .prose > table,
.wrap-text > .tiers, .wrap-text > .demo-grid, .wrap-text > .shelf,
.wrap-text > .pillars, .wrap-text > .split-7-5, .wrap-text > .split-5-7,
.wrap-text > .toc, .wrap-text > .dl { max-inline-size: 100%; }

/* Full-bleed bands: the ink CTA, the stack strip and the market band already
   paint to the viewport edge. They keep their own inner column. */
.band > .wrap, .stack-wall > .wrap, .data-block > .wrap,
.ftr > .wrap { max-width: min(var(--col), 100%); }

/* 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))); }
.mega { inline-size: max-content; min-inline-size: 240px; }

/* 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. */
/* Desktop only. Unscoped, this beat the mobile single-column rule and left
   the bio in a 129px column on phones — long German words spilled out of it. */
@media (min-width: 901px) {
  .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: 40px; 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-md); }

  /* Dropdowns collapse. The parent link keeps the row; the toggle beside it
     opens the list underneath, which takes the full width of the row. */
  .nav > li.has-mega { display: flex; flex-wrap: wrap; align-items: center; }
  .nav > li.has-mega > a { flex: 1 1 auto; min-inline-size: 0; }
  .sub-toggle {
    display: flex; align-items: center; justify-content: center;
    inline-size: 48px; block-size: 48px; flex: none;
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--pv-grey-300);
  }
  .sub-toggle span {
    inline-size: 9px; block-size: 9px;
    border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--pv-dur-fast) var(--pv-ease-out);
  }
  .has-mega[data-sub-open] .sub-toggle span { transform: translateY(2px) rotate(-135deg); }
  .has-mega[data-sub-open] .sub-toggle { color: var(--pv-white); }
  .nav .mega { flex-basis: 100%; display: none; }
  .nav .has-mega[data-sub-open] .mega { display: block; }
  /* 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;
}
/* The label was a scaffolding device: it told the reader they were looking at
   a summary, which a good summary does not need. The element stays in the
   document for assistive technology and is no longer painted. */
.answer-label {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.answer-label--hidden {
  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); }

/* Words priced as a headline figure ("Κατόπιν προσφοράς") wrap badly at
   display size. Text prices get a size that fits the column. */
.price-figure--text {
  font-size: var(--pv-text-xl); line-height: 1.25; letter-spacing: -0.01em;
  margin-block-start: var(--pv-space-4);
}
.price-figure--text small { display: block; margin-block-start: var(--pv-space-2); }

/* Two options inside one tier (Expansion), so the ladder stays five wide.
   Stacked, not side by side: at five columns each option had ~110px and the
   larger figure was clipped. */
.tier-split {
  display: grid; grid-template-columns: 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); display: flex; align-items: baseline; justify-content: space-between; gap: var(--pv-space-3); }
.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-2xl); color: var(--color-text); line-height: 1.1; }
.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: 1360px) { .tiers { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1000px) { .tiers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .tiers, .tiers--3 { grid-template-columns: 1fr; } }

/* A statement line set apart from the prose. The source document sets these
   as standalone paragraphs; they carry the argument of the section, so they
   get display treatment rather than being buried in body copy. */
.pull {
  font-family: var(--pv-font-heading); font-weight: 700;
  font-size: var(--pv-text-xl); line-height: 1.35; letter-spacing: -0.01em;
  color: var(--color-text);
  border-inline-start: 3px solid var(--color-primary);
  padding-inline-start: var(--pv-space-5);
  margin-block: var(--pv-space-5) var(--pv-space-6);
  max-inline-size: 60ch;
}
.on-dark .pull { color: var(--pv-white); }

/* ---------- guides: the shelf -------------------------------- */
.shelf {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--pv-space-8) var(--pv-space-7); margin-block-start: var(--pv-space-8);
}
.book {
  display: grid; grid-template-columns: 150px 1fr; gap: var(--pv-space-5);
  align-items: start; text-decoration: none; color: inherit;
}
.book-cover img {
  inline-size: 100%; block-size: auto; display: block;
  transition: transform var(--pv-dur-base) var(--pv-ease-out);
}
a.book:hover .book-cover img { transform: translateY(-4px); }
a.book:hover .book-title { color: var(--color-primary); }
.book--soon { opacity: .55; }
.book-num {
  font-family: var(--pv-font-heading); font-weight: 700;
  font-size: 10px; letter-spacing: .18em; color: var(--color-primary);
  margin: 0 0 var(--pv-space-2);
}
.book-title {
  font-size: var(--pv-text-lg); letter-spacing: -.01em;
  margin: 0 0 var(--pv-space-3);
  transition: color var(--pv-dur-fast) var(--pv-ease-out);
}
.book-body p { font-size: var(--pv-text-sm); color: var(--color-text-muted); margin: 0; }
.book-meta {
  font-family: var(--pv-font-heading); font-weight: 700;
  font-size: 10px; letter-spacing: .16em;
  color: var(--color-text-muted); margin-block-start: var(--pv-space-3) !important;
}

/* ---------- guides: the landing page -------------------------- */
.guide-head { display: grid; grid-template-columns: 300px 1fr; gap: var(--pv-space-8); align-items: start; }
.guide-cover img { inline-size: 100%; block-size: auto; display: block; }
.toc {
  border: 1px solid var(--color-border); padding: var(--pv-space-5);
  margin-block: var(--pv-space-6); max-inline-size: 68ch;
}
.toc-h {
  font-size: var(--pv-text-xs); letter-spacing: .2em; color: var(--color-text-muted);
  margin: 0 0 var(--pv-space-3);
}
.toc ol { margin: 0; padding-inline-start: var(--pv-space-5); font-size: var(--pv-text-sm); color: var(--color-text-muted); }
.toc li { margin-block-end: var(--pv-space-2); }

/* ---------- guides: the gate --------------------------------- */
.dl {
  border: 1px solid var(--color-border); border-block-start: 3px solid var(--color-primary);
  background: var(--color-bg-alt); padding: var(--pv-space-6);
  max-inline-size: 36rem; margin-block-start: var(--pv-space-7);
}
.dl-h { font-size: var(--pv-text-xl); margin: 0 0 var(--pv-space-2); }
.dl-sub { font-size: var(--pv-text-sm); color: var(--color-text-muted); margin-block-end: var(--pv-space-5); }
.dl .field { margin-block-end: var(--pv-space-4); max-inline-size: none; }
.dl .field > span em { font-style: normal; font-weight: 400; letter-spacing: 0; text-transform: none; }
.dl .field input { background: var(--color-surface); }
.dl .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pv-space-4); }
.dl .btn { inline-size: 100%; }
.dl-privacy { font-size: var(--pv-text-xs); color: var(--color-text-muted); margin: var(--pv-space-4) 0 0; }
.dl-done { border-inline-start: 3px solid var(--color-accent); background: var(--color-surface); padding: var(--pv-space-5); }
.dl-done-h { margin-block-end: var(--pv-space-3); }
.dl-error { margin-block-start: var(--pv-space-4); }
/* honeypot — off-screen rather than display:none, which some bots detect */
.hp { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }

@media (max-width: 1100px) { .shelf { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .guide-head { grid-template-columns: 1fr; }
  .guide-cover { max-inline-size: 240px; }
}
@media (max-width: 640px) {
  .shelf { grid-template-columns: 1fr; }
  .book { grid-template-columns: 110px 1fr; }
  .dl .row2 { 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);
}
/* The mark is a 700x700 square in a cell that is wider than it is tall, so
   `cover` cropped both sides off the lockup. `contain` plus padding is what
   the mobile breakpoint already did; desktop never got the same treatment. */
.expert-mark { background: var(--pv-white); overflow: hidden; padding: var(--pv-space-6); }
.expert-mark img {
  inline-size: 100%; block-size: 100%; object-fit: contain; 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. */
/* 9/14 is the source footage's own ratio (720x1120 after the bottom crop), and
   the poster is cut to match. Because the box and both assets agree, `cover`
   crops nothing: her head stays in frame and there are no letterbox bars. */
.portrait--video { position: relative; aspect-ratio: 9/14; overflow: hidden;
  background-color: var(--pv-ink-900); background-size: cover; background-position: center top; }
/* The poster is painted as the container background and the video sits on top
   of it. Both must be framed identically or the shot jumps the moment the
   video finishes loading: the background was `center top` while the video
   defaulted to `center center`. */
.portrait--video video {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
  object-fit: cover; object-position: center top;
}
@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: 52px; 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 { margin-block-start: var(--pv-space-5); display: flex; flex-wrap: wrap; gap: var(--pv-space-3); }
.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; }
}

/* ------------------------------------------------------------------ ARTICLE
   Long-form pieces under /insights/. They reuse the service page's grid and
   rail; only the byline and the source note are new. */
.byline {
  font-size: var(--pv-text-sm);
  color: var(--color-text-muted);
  margin-block-start: var(--pv-space-4);
}
.byline a { color: inherit; text-decoration-color: var(--pv-orange-500); }
.byline a:hover { color: var(--color-text); }

.src-note {
  font-size: var(--pv-text-xs);
  color: var(--color-text-muted);
  max-inline-size: 78ch;
  padding-block-start: var(--pv-space-4);
  border-block-start: 1px solid var(--color-border);
}

.article-hero { margin: 0; }
.article-hero img {
  inline-size: 100%;
  block-size: auto;
  display: block;
  border: 1px solid var(--color-border);
}

/* Data-drawn hero. Colours are fixed rather than tokenised: the panel is a
   dark instrument readout in both themes, so it must not follow the page. */
.article-hero--chart svg { inline-size: 100%; block-size: auto; display: block; }
.article-hero--chart .ah-bg { fill: #0C0C0D; }
.article-hero--chart .ah-track { fill: #1C1C1E; }
.article-hero--chart .ah-to { fill: #FF3300; }
.article-hero--chart .ah-from { fill: #ABABAB; }
.article-hero--chart .ah-rule { stroke: #FF9933; stroke-width: 3; }
.article-hero--chart text { font-family: var(--font-body, system-ui), sans-serif; }
.article-hero--chart .ah-cap { fill: #FFFFFF; font-size: 34px; font-weight: 700; }
.article-hero--chart .ah-label { fill: #ABABAB; font-size: 27px; }
.article-hero--chart .ah-value { fill: #FFFFFF; font-size: 30px; font-weight: 700; }
.article-hero--chart .ah-legend { fill: #ABABAB; font-size: 22px; }

/* ------------------------------------------------------------------- DEMOS
   A demo detail page reuses the article grid: prose on the left, the access
   form in the rail. The screenshot is a plain figure — it is a picture of a
   product, not a decorative hero, so it keeps its own border and no crop. */
.demo-hero { margin: 0; border: 1px solid var(--color-border); }
.demo-hero img { inline-size: 100%; block-size: auto; display: block; }

.page-rail .dl { position: static; margin-block-start: 0; }
.page-rail .dl-h { margin-block-start: 0; }


/* ----------------------------------------------------------------- MENU CAPS
   Top-level items are written in capitals in the markup (see caps() in
   render.mjs). Capitals need air between letters or they read as a block. */
.nav > li > a { letter-spacing: 0.06em; }
.nav .btn-sm { letter-spacing: 0.06em; }
/* The dropdown toggle only exists for touch; on desktop hover opens the list. */
@media (min-width: 901px) { .sub-toggle { display: none; } }

/* --------------------------------------------------------- MOBILE OVERFLOW
   A grid or flex child defaults to min-width: auto, so a table's scroll floor
   (34rem) pushed the whole column — and the page — to 564px on a 390px phone.
   With a zero floor the column stays viewport-wide and the table scrolls
   inside .table-wrap, as it was always meant to. */
.split-band > *, .page-grid > * { min-inline-size: 0; }

/* Long compounds (German especially) must break rather than spill. */
h1, h2, h3, .lede, .prose, .answer, .demo-title { overflow-wrap: break-word; hyphens: auto; }

/* ------------------------------------------------------------------ FOOTER
   Every column on one row, full width. There were five blocks in a
   four-track grid, so the fifth always dropped to a second line. */
.ftr .wrap { max-inline-size: none; padding-inline: var(--gutter); }
.ftr-grid {
  grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: var(--pv-space-7);
}
@media (max-width: 1080px) {
  .ftr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pv-space-6); }
  .ftr-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .ftr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------- DEMO CARDS
   The card shows the product's own screenshot when one exists, anchored top
   left so the dashboard's header and headline number are what survive the
   crop. Without one it keeps the dark tile and blade. */
.demo-shot--img { display: block; overflow: hidden; border: 1px solid var(--color-border); }
.demo-shot--img img {
  inline-size: 100%; block-size: 100%; display: block;
  object-fit: cover; object-position: left top;
  transition: transform var(--pv-dur-base) var(--pv-ease-out);
}
.demo-cell:hover .demo-shot--img img { transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) { .demo-cell:hover .demo-shot--img img { transform: none; } }

/* ===================================================================
   INSIGHTS — hub listing and article hero
   =================================================================== */

/* ------------------------------------------------------------- KICKER
   The small capitalised line above a title. Greek capitals are written
   without the tonos in the markup (caps() in render.mjs), so this rule
   never applies text-transform — doing so would put the accents back. */
.art-kicker {
  font-family: var(--pv-font-heading);
  font-size: var(--pv-text-xs);
  letter-spacing: 0.22em;
  color: var(--pv-amber-400);
  margin: 0 0 var(--pv-space-4);
}
.art-kicker--light { color: var(--color-primary); }

/* --------------------------------------------------------- PAGE HERO
   Full-bleed picture carrying the title. One definition, after three that
   fought each other: the picture is an absolute layer, so its intrinsic
   height never sets the band; the band has a minimum height and otherwise
   grows with its content, so a long title is never clipped — which is what
   a fixed height with overflow:hidden did to «Τι είναι το AEO (Answer Engine
   Optimization)». The title sits on the centre line of the band. */
.art-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-block-size: clamp(17rem, 30vw, 26rem);
  background: var(--pv-ink-900);
  overflow: hidden;
}
.art-hero-img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Two veils: the vertical pass buys legibility, the horizontal pass is
   weighted to the start edge so the brand lockup burnt into the bottom-right
   of the supplied pictures is not lost in the darkest part. */
.art-hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(12, 12, 13, 0.34) 0%, rgba(12, 12, 13, 0.52) 50%, rgba(12, 12, 13, 0.78) 100%),
    linear-gradient(to right, rgba(12, 12, 13, 0.80) 0%, rgba(12, 12, 13, 0.42) 52%, rgba(12, 12, 13, 0.08) 82%);
}
.art-hero-inner {
  position: relative;
  padding-block: var(--pv-space-8);
}
.art-hero-inner h1 {
  color: var(--pv-white);
  max-inline-size: 22ch;
  margin: 0;
}
.art-hero-inner .rule-accent { margin-block: var(--pv-space-5) var(--pv-space-4); }
.art-hero-lede { color: var(--pv-grey-200); font-size: var(--pv-text-lg); max-inline-size: 48ch; margin: 0; }
.art-hero-lede a { color: var(--pv-white); }

.byline--hero { color: var(--pv-grey-300); margin-block-start: 0; }
.byline--hero a { color: var(--pv-white); }
.byline--hero a:hover { color: var(--pv-amber-400); }
.byline-dot { color: var(--pv-grey-600); padding-inline: 0.25em; }

/* The lede sits under the hero rather than on it: over a photograph a
   paragraph that long stops being readable at phone widths. */
.art-lede { max-inline-size: 60ch; }

@media (max-width: 640px) {
  .art-hero { min-block-size: 15rem; }
  .art-hero-inner { padding-block: var(--pv-space-7); }
  .art-hero-inner h1 { font-size: var(--pv-text-3xl); }
}

/* ------------------------------------------------------------- BAND HEAD */
.art-band-head {
  display: flex;
  align-items: baseline;
  gap: var(--pv-space-4);
  border-block-end: 1px solid var(--color-border);
  padding-block-end: var(--pv-space-4);
  margin-block-end: var(--pv-space-7);
}
.art-band-h {
  font-family: var(--pv-font-heading);
  font-size: var(--pv-text-sm);
  letter-spacing: 0.14em;
  margin: 0;
}
.art-band-count { font-size: var(--pv-text-sm); color: var(--color-text-muted); }
.art-band { background: var(--color-bg-alt); }
.art-band .art-band-h {
  border-block-end: 1px solid var(--color-border);
  padding-block-end: var(--pv-space-4);
  margin-block-end: var(--pv-space-7);
  display: block;
}

/* ------------------------------------------------------------- FEATURED */
.art-feat {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--pv-space-8);
  align-items: center;
}
.art-feat-media {
  display: block;
  overflow: hidden;
  background: var(--pv-ink-900);
  /* The supplied pictures are 1600x837 and carry the brand lockup in the
     bottom-right corner. Cards keep that ratio so the lockup is never cut in
     half; only the hero, which has to fill a band, crops. */
  aspect-ratio: 1600 / 837;
}
.art-feat-media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--pv-dur-base) var(--pv-ease-out);
}
.art-feat:hover .art-feat-media img { transform: scale(1.02); }
.art-feat-body h2 { margin: 0 0 var(--pv-space-4); }
.art-feat-body h2 a { color: inherit; text-decoration: none; }
.art-feat-body h2 a:hover { color: var(--color-primary); }
.art-feat-cta { margin-block-start: var(--pv-space-5); margin-block-end: 0; }

/* Read-the-article link: a caps label on an orange underline with an arrow
   drawn in CSS, so it needs no icon file and inherits the text colour. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--pv-space-3);
  font-family: var(--pv-font-heading);
  font-weight: 700;
  font-size: var(--pv-text-sm);
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--color-primary);
  border-block-end: 2px solid var(--pv-orange-600);
  padding-block-end: var(--pv-space-2);
}
.link-arrow::after {
  content: "";
  inline-size: 1rem;
  block-size: 0.55rem;
  background: var(--pv-orange-600);
  clip-path: polygon(0 40%, 62% 40%, 62% 0, 100% 50%, 62% 100%, 62% 60%, 0 60%);
  transition: transform var(--pv-dur-fast) var(--pv-ease-out);
}
.link-arrow:hover::after { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .link-arrow:hover::after { transform: none; } }

/* ----------------------------------------------------------- CARD GRID
   Two articles sit in two columns, four or more in three. The count comes
   from the template as --art-cols so a single card never leaves an empty
   track beside it. */
.art-grid {
  display: grid;
  grid-template-columns: repeat(min(var(--art-cols, 2), 3), minmax(0, 1fr));
  gap: var(--pv-space-8) var(--pv-space-7);
}
.art-card-link { display: block; text-decoration: none; color: inherit; }
.art-card-media {
  display: block;
  overflow: hidden;
  background: var(--pv-ink-900);
  aspect-ratio: 1600 / 837;
  margin-block-end: var(--pv-space-5);
}
.art-card-media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--pv-dur-base) var(--pv-ease-out);
}
.art-card:hover .art-card-media img { transform: scale(1.02); }
.art-card h3 {
  margin: 0;
  font-size: var(--pv-text-xl);
  line-height: 1.2;
  transition: color var(--pv-dur-fast) var(--pv-ease-out);
}
.art-card:hover h3 { color: var(--color-primary); }
.art-card-lede {
  font-size: var(--pv-text-md);
  color: var(--color-text-muted);
  margin-block: var(--pv-space-3) var(--pv-space-4);
  max-inline-size: 52ch;
}
.art-card-meta { font-size: var(--pv-text-sm); color: var(--color-text-muted); margin: 0; }
.art-card-meta strong { color: var(--color-text); font-weight: 600; }

/* Placeholder when an article has no picture yet: the brand blade on the
   dark tile, the same device the demo cards use. */
.art-card-blade, .art-feat-media .art-card-blade {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 51, 0, 0.5) 50%, rgba(255, 153, 51, 0.28) 58%, transparent 66%);
}

@media (prefers-reduced-motion: reduce) {
  .art-feat:hover .art-feat-media img,
  .art-card:hover .art-card-media img { transform: none; }
}

@media (max-width: 900px) {
  .art-feat { grid-template-columns: 1fr; gap: var(--pv-space-6); }
  .art-grid { grid-template-columns: repeat(min(var(--art-cols, 2), 2), minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .art-grid { grid-template-columns: 1fr; }
}

/* ===================================================================
   HOMEPAGE — sections introduced with the wireframe rebuild
   =================================================================== */

/* A heading now follows a kicker, so it must not keep the top margin it
   carries when it opens a section on its own. */
.art-kicker--light + h2 { margin-block-start: 0; }
.section-lede {
  font-size: var(--pv-text-lg);
  line-height: 1.55;
  color: var(--color-text-muted);
  max-inline-size: 62ch;
  margin-block-end: var(--pv-space-7);
}

/* ------------------------------------------------------- DEFINITION
   The paragraph meant to be copied verbatim wherever the company is
   described. Set larger than body copy and given room, because its job is
   to be read once and reused, not skimmed. */
.def-note { font-size: var(--pv-text-sm); color: var(--color-text-muted); margin: 0; max-inline-size: 30ch; }
.def-body {
  font-size: var(--pv-text-lg);
  line-height: 1.6;
  margin: 0;
  max-inline-size: 64ch;
}

/* ------------------------------------------------------------ PROOF
   One cell per engine. The after-figure is the headline; the baseline sits
   under it in the muted tone, because the movement is the point and the
   starting number is the evidence for it. */
.proof-lede { max-inline-size: 64ch; margin-block-end: var(--pv-space-7); }
/* .proof-grid, .proof-cell, .proof-engine, .proof-to, .proof-from and
   .proof-note all live in pv-home.css, which is loaded after this file and
   therefore wins. Re-declaring them here produced a band rendered from two
   stylesheets at once, where half the rules were dead and the half that won
   was not the half being edited. Only the rules pv-home has no equivalent
   for belong here. */
.link-arrow--dark { color: var(--pv-amber-400); }
.link-arrow--dark:hover { color: var(--pv-white); }

/* ----------------------------------------------------- SERVICE CARDS
   Each card is the service page's own label and description. Writing a
   second summary here would create two descriptions of one thing that drift
   apart, which is exactly what entity clarity cannot afford. */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
}
.svc-card {
  position: relative;
  display: block;
  background: var(--color-bg);
  padding: var(--pv-space-6);
  text-decoration: none;
  color: inherit;
  transition: background var(--pv-dur-fast) var(--pv-ease-out);
}
.svc-card:hover { background: var(--color-bg-alt); }
.svc-card h3 {
  margin: 0 0 var(--pv-space-3);
  font-size: var(--pv-text-lg);
  line-height: 1.25;
  transition: color var(--pv-dur-fast) var(--pv-ease-out);
}
.svc-card:hover h3 { color: var(--color-primary); }
.svc-card p { margin: 0 0 var(--pv-space-6); font-size: var(--pv-text-sm); color: var(--color-text-muted); }
.svc-more {
  position: absolute;
  inset-block-end: var(--pv-space-5);
  inset-inline-start: var(--pv-space-6);
  color: var(--pv-orange-600);
}
.svc-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pv-space-5) var(--pv-space-8);
  margin-block-start: var(--pv-space-7);
}

/* --------------------------------------------------------- APPROACH */
.approach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--pv-space-6);
}
.approach-card { border: 1px solid var(--color-border); border-block-start: 3px solid var(--pv-orange-600); padding: var(--pv-space-6); }
.approach-card h3 { margin: 0 0 var(--pv-space-5); font-size: var(--pv-text-lg); }
.approach-card ul { margin: 0 0 var(--pv-space-5); padding-inline-start: var(--pv-space-5); }
.approach-card li { font-size: var(--pv-text-sm); color: var(--color-text-muted); margin-block-end: var(--pv-space-3); }

/* ------------------------------------------------------------ DEMOS */
.demo-card { display: block; text-decoration: none; color: inherit; background: var(--color-bg); padding: var(--pv-space-6); }
.demo-card-shot {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--pv-ink-900);
  border: 1px solid var(--color-border);
  margin-block-end: var(--pv-space-5);
}
.demo-card-shot img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: left top; display: block; }
.demo-card h3 { margin: 0 0 var(--pv-space-3); font-size: var(--pv-text-lg); transition: color var(--pv-dur-fast) var(--pv-ease-out); }
.demo-card:hover h3 { color: var(--color-primary); }
.demo-card p { margin: 0; font-size: var(--pv-text-sm); color: var(--color-text-muted); }

/* ------------------------------------------------------------ STEPS
   An ordered list without visible numbers. The order lives in the markup
   and in the HowTo schema; the rule above each step carries it visually. */
.step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--pv-space-6);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}
.step-cell { border-block-start: 2px solid var(--pv-orange-600); padding-block-start: var(--pv-space-5); }
.step-cell h3 { margin: 0 0 var(--pv-space-3); font-size: var(--pv-text-md); }
.step-cell p { margin: 0; font-size: var(--pv-text-sm); color: var(--color-text-muted); }

/* ----------------------------------------------------------- PEOPLE */
.who-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--pv-space-7); }
.who-card { display: flex; gap: var(--pv-space-5); border: 1px solid var(--color-border); background: var(--color-bg); padding: var(--pv-space-5); }
.who-media { flex: none; inline-size: 7.5rem; overflow: hidden; background: var(--pv-ink-900); }
.who-media img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center top; display: block; }
.who-body { min-inline-size: 0; }
.who-body h3 { margin: 0 0 var(--pv-space-2); font-size: var(--pv-text-lg); }
.who-role {
  font-family: var(--pv-font-heading);
  font-size: var(--pv-text-xs);
  letter-spacing: 0.12em;
  color: var(--color-primary);
  margin: 0 0 var(--pv-space-4);
}
.who-body > p { font-size: var(--pv-text-sm); color: var(--color-text-muted); margin: 0 0 var(--pv-space-4); }
.who-link { margin: 0; font-size: var(--pv-text-sm); }

/* ------------------------------------------------------------ COSTS */
.cost-list { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--color-border); }
.cost-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--pv-space-5);
  padding-block: var(--pv-space-5);
  border-block-end: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  font-family: var(--pv-font-heading);
  font-size: var(--pv-text-md);
}
.cost-list a:hover { color: var(--color-primary); }
.cost-list a span:last-child { color: var(--pv-orange-600); }

/* ----------------------------------------------------------- CONTACT */
.contact-side { display: flex; flex-direction: column; justify-content: center; gap: var(--pv-space-4); }
.contact-side .btn { align-self: start; }
.contact-note { font-size: var(--pv-text-sm); color: var(--color-text-muted); margin: 0; }

@media (max-width: 640px) {
  .who-card { flex-direction: column; }
  .who-media { inline-size: 100%; aspect-ratio: 3 / 2; }
}

/* ===================================================================
   FULL-WIDTH SHELL, HEADER, AND HERO CORRECTIONS
   =================================================================== */

/* ----------------------------------------------------------- WIDTH
   The shell was capped at 1180px, which on a 1440 screen left a third of
   the viewport empty and made every page read as a boxed article. The cap
   now tracks the viewport and only stops where a line would get too long
   to scan; prose keeps its own measure through .wrap-text, so widening the
   shell widens the layout without widening the reading line. */
:root { --col: 1600px; }
.wrap, .wrap-text, .ftr > .wrap, .hdr > .wrap { max-width: min(var(--col), 100%); }
:root { --wrap: var(--col); }

/* A wider shell needs a wider gutter at the top end, or content runs to
   the glass edge on a large monitor. */
:root { --gutter: clamp(1.25rem, 4.5vw, 6rem); }

/* --------------------------------------------------------- HEADER
   The logo was 34px against 14px nav text: the brand read smaller than the
   menu beside it. The mark is the one element that has to survive a glance,
   so it goes up and the navigation comes down. */
.hdr-logo img { block-size: 46px; }
.nav > li > a {
  font-size: var(--pv-text-xs);
  letter-spacing: 0.08em;
  color: var(--pv-white);
}
.nav > li > a:hover { color: var(--pv-amber-400); }
.nav .lang-switch a { color: var(--pv-white); }
.nav .btn-sm { color: var(--pv-white); font-size: var(--pv-text-xs); }
.hdr-actions a.btn, .nav .btn-primary { color: var(--pv-white); }
.sub-toggle { color: var(--pv-white); }
@media (min-width: 901px) { :root { --nav-height: 84px; } }

/* --------------------------------------------------------- HOMEPAGE
   The hero is the full width of the viewport with the type on the left.
   The decorative blade is gone: it occupied the right third of the band
   and pushed the headline into a column narrower than the body copy
   beneath it. */
.hero .wrap { max-width: min(var(--col), 100%); }
.hero h1 { max-inline-size: 18ch; }
.hero-sub { max-inline-size: 60ch; }

/* .hero is a centred flex container, so its .wrap shrank to the width of the
   longest line inside it and the whole block sat in a column narrower than
   the sections below. The wrap takes the full track; the headline keeps its
   own measure through max-inline-size. */
.hero .wrap { inline-size: 100%; }
.hero h1 { max-inline-size: 18ch; }


/* The headline broke to four lines at 18ch on a wide screen, which turns a
   sentence into a stack. A wider measure lets it set in two. */
.hero h1 { max-inline-size: 26ch; }
@media (max-width: 900px) { .hero h1 { max-inline-size: 18ch; } }

/* Every piece of header and hero type is pure white, buttons included. The
   ghost button's label was grey against black and read as disabled. */
.btn-ghost, .hero .btn-ghost, .on-dark .btn-ghost { color: var(--pv-white); }
.btn-ghost:hover, .hero .btn-ghost:hover { color: var(--pv-ink-900); background: var(--pv-white); }

/* ===================================================================
   CONTACT FORM
   =================================================================== */
.pv-form { display: grid; gap: var(--pv-space-5); max-inline-size: 36rem; }
.pv-field { display: grid; gap: var(--pv-space-2); }
.pv-field label {
  font-family: var(--pv-font-heading);
  font-size: var(--pv-text-xs);
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
}
.pv-opt { letter-spacing: 0; text-transform: none; opacity: 0.75; }
.pv-hint { font-size: var(--pv-text-sm); color: var(--color-text-muted); margin: var(--pv-space-2) 0 0; }
.svc-card--static { cursor: default; }
.svc-card--static:hover { background: var(--color-bg); }
.svc-card--static:hover h3 { color: inherit; }
.pv-field input,
.pv-field select,
.pv-field textarea {
  inline-size: 100%;
  font: inherit;
  font-size: var(--pv-text-md);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  padding: var(--pv-space-4);
  /* Below 16px, iOS zooms the viewport on focus and the layout jumps. */
  min-block-size: 48px;
}
.pv-field textarea { min-block-size: 7rem; resize: vertical; }
.pv-field input:focus-visible,
.pv-field select:focus-visible,
.pv-field textarea:focus-visible {
  outline: 2px solid var(--pv-orange-600);
  outline-offset: 1px;
  border-color: transparent;
}
.pv-field [aria-invalid="true"] { border-color: var(--pv-red-700); }

/* The honeypot is hidden from people without display:none, which some
   autofill implementations skip entirely — the point is that a bot fills it
   and a person never sees it. */
.pv-honey {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

.pv-privacy { font-size: var(--pv-text-xs); color: var(--color-text-muted); margin: 0; max-inline-size: 52ch; }
.pv-form .btn { justify-self: start; }

.contact-side { display: block; }

/* A heading that exists for document structure rather than for the eye.
   Not display:none and not hidden — both remove it from the accessibility
   tree, which is the thing it is there to appear in. */
.visually-hidden {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

/* Homepage calls to action are buttons, the same outline button used across
   the service pages, not underlined links with an arrow. One vocabulary for
   "go here" on the whole site. */
.svc-ctas .btn + .btn { margin-inline-start: 0; }
.on-dark .btn-secondary { border-color: var(--pv-orange-500); color: var(--pv-amber-400); }
.on-dark .btn-secondary:hover { background: var(--pv-orange-500); color: var(--pv-white); }

/* ===================================================================
   FULL WIDTH — every page except articles
   ===================================================================
   Articles keep a reading measure; they carry body.is-article and are the
   only place the caps below still apply. Everywhere else the content fills
   the shell. A single column of 150-character lines is not "full width",
   it is unreadable — so a text section becomes two columns: its heading on
   the left, its paragraphs on the right, the same split the contact section
   and the form use. It is done in CSS with grid auto-placement, so every
   existing heading-then-paragraphs section gets it without a markup change.
   -------------------------------------------------------------------- */

/* ---- lift the caps outside articles ------------------------------- */
body:not(.is-article) .wrap-text > *,
body:not(.is-article) .wrap-text > .prose > * { max-inline-size: none; }
body:not(.is-article) .page-main { max-inline-size: none; }
body:not(.is-article) .prose p,
body:not(.is-article) .prose li,
body:not(.is-article) .faq-body p,
body:not(.is-article) .defs dd,
body:not(.is-article) .pillar-support p { max-inline-size: none; }
body:not(.is-article) .page-head h1 { max-inline-size: none; }
body:not(.is-article) .page-head .lede { max-inline-size: none; }
body:not(.is-article) .section-lede,
body:not(.is-article) .def-body,
body:not(.is-article) .proof-lede,
body:not(.is-article) .art-lede,
body:not(.is-article) .art-card-lede { max-inline-size: none; }

/* ---- heading left, content right ----------------------------------- */
@media (min-width: 901px) {
  body:not(.is-article) .wrap-text,
  body:not(.is-article) .page-main.prose {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: var(--pv-space-9);
    align-items: start;
  }
  /* The heading of each block takes the first column; everything that
     follows it takes the second. Auto-placement keeps each heading on the
     row of its first paragraph, because a heading's column is lower than
     the cursor's, which advances the row. */
  body:not(.is-article) .wrap-text > :is(h1, h2, h3, .art-kicker),
  body:not(.is-article) .page-main.prose > :is(h2, h3) {
    grid-column: 1;
    margin-block-start: 0;
    /* Not sticky: a heading that follows the reader down the page collides
       with the next one the moment its own row is shorter than itself. */
    position: static;
    align-self: start;
  }
  body:not(.is-article) .wrap-text > :not(h1, h2, h3, .art-kicker, hr),
  body:not(.is-article) .page-main.prose > :not(h2, h3, hr) {
    grid-column: 2;
  }
  /* The rule follows its heading inside the first column rather than
     starting a row of its own, which would push the content down one row
     past the heading it belongs to. */
  body:not(.is-article) .wrap-text > hr.rule-accent,
  body:not(.is-article) .page-main.prose > hr.rule-accent { display: none; }
  body:not(.is-article) .wrap-text > :is(h1, h2)::after,
  body:not(.is-article) .page-main.prose > h2::after {
    content: "";
    display: block;
    inline-size: var(--rule-w, 64px);
    block-size: var(--rule-h, 3px);
    background: var(--color-accent);
    margin-block-start: var(--pv-space-4);
  }
  /* Kicker above a heading: no rule under the kicker. */
  body:not(.is-article) .wrap-text > .art-kicker::after { content: none; }
  /* A kicker sits on the heading's row, not a row of its own. */
  body:not(.is-article) .wrap-text > .art-kicker { position: static; margin-block-end: var(--pv-space-3); }
  body:not(.is-article) .wrap-text > .art-kicker + h2 { position: static; }

  /* A text block with no heading of its own (the answer and intro under a
     hero, say) has nothing to put in the first column, so it is not split:
     one centred reading column instead of a block with an empty left half. */
  body:not(.is-article) .wrap-text:not(:has(> :is(h1, h2, h3, .art-kicker))) { display: block; }
  body:not(.is-article) .wrap-text:not(:has(> :is(h1, h2, h3, .art-kicker))) > :not(.answer, .table-wrap, table, .tiers, .demo-grid, .shelf, .pillars, .split-7-5, .split-5-7, .toc, .dl, .price-grid, .link-grid, .art-grid, .svc-grid, .who-grid, .step-grid, .approach-grid, .shelf-preview, .proof-grid, .legal-toc) {
    max-inline-size: 52rem;
    margin-inline: auto;
  }

  /* Breathing room before every heading that follows content: the element
     just before an h2/h3 carries the gap, so the heading still starts level
     with its own first paragraph and never touches the block above it. */
  body:not(.is-article) .wrap-text > :has(+ :is(h2, h3)),
  body:not(.is-article) .page-main.prose > :has(+ :is(h2, h3)),
  body:not(.is-article) .wrap-text > :is(h2, h3):has(+ * + :is(h2, h3)),
  body:not(.is-article) .page-main.prose > :is(h2, h3):has(+ * + :is(h2, h3)) { margin-block-end: var(--pv-space-8); }

  /* Things that are layouts, not text, span both columns. */
  body:not(.is-article) .wrap-text > :is(.table-wrap, table, .tiers, .demo-grid, .shelf, .pillars,
    .split-7-5, .split-5-7, .toc, .dl, .price-grid, .link-grid, .art-grid, .svc-grid, .who-grid,
    .step-grid, .approach-grid, .shelf-preview, .proof-grid, .legal-toc),
  body:not(.is-article) .page-main.prose > :is(.table-wrap, table, .dl, .steps, .pull) {
    grid-column: 1 / -1;
  }
  /* The first paragraph after a heading keeps no top margin: the heading
     is beside it, not above it. */
  body:not(.is-article) .wrap-text > :is(h1, h2, h3) + *,
  body:not(.is-article) .page-main.prose > :is(h2, h3) + * { margin-block-start: 0; }
  /* The rule-only paragraph that used to carry section numbers is gone;
     nothing else to reset. */
}

/* ---- service page grid: text + rail ------------------------------- */
@media (min-width: 1101px) {
  body:not(.is-article) .page-grid {
    grid-template-columns: minmax(0, 3fr) minmax(16rem, 1fr);
    gap: var(--pv-space-9);
  }
}

/* ---- the short answer: a centred quotation ------------------------
   Alegreya italic (option B), self-hosted with Greek glyphs. The block is
   the one sentence an answer engine should lift, so it is set apart from
   the body type the way a pull quote is: serif, centred, a quotation mark
   in brand colour above it, no rule. Applies on every page, articles too;
   inside an article it keeps the reading measure. */
body:not(.is-article) .measure-col { max-inline-size: none; }
body:not(.is-article) .measure-col .lede,
body:not(.is-article) .measure-col > p { max-inline-size: none; }
.answer {
  position: relative;
  max-inline-size: 52rem;
  margin-inline: auto;
  border-inline-start: 0;
  padding: var(--pv-space-8) var(--pv-space-4) var(--pv-space-7);
  text-align: center;
}
.answer::before {
  content: "\201C";
  display: block;
  font-family: 'Alegreya', Georgia, 'Times New Roman', serif;
  font-size: 4.5rem; line-height: 0.6;
  color: var(--color-primary);
  margin-block-end: var(--pv-space-3);
}
.answer-body {
  font-family: 'Alegreya', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.45rem, 2.1vw, 1.95rem);
  line-height: 1.42;
  letter-spacing: 0.002em;
  text-wrap: balance;
  hyphens: manual;
  color: var(--color-text);
}
.is-article .answer { max-inline-size: 42rem; }
.on-dark .answer-body { color: var(--pv-white); }

/* ---- phones: back to a single column ------------------------------ */
@media (max-width: 900px) {
  body:not(.is-article) .wrap-text > :is(h1, h2, h3) { position: static; }
}
/* The form fills its column like everything else outside articles. */
body:not(.is-article) .pv-form { max-inline-size: none; }


/* =====================================================================
   LEGAL PAGES + CONSENT BANNER
   ===================================================================== */
.legal-meta { color: var(--color-text-muted); font-size: var(--pv-text-sm); margin-block-start: var(--pv-space-3); }
.legal-toc { grid-column: 1 / -1; margin-block-end: var(--pv-space-5); }
.legal-toc ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--pv-space-2) var(--pv-space-4); }
.legal-toc li { margin: 0; }
.legal-sec > :first-child { margin-block-start: 0; }
.legal-sec > :last-child { margin-block-end: 0; }
.legal-sec { margin-block-end: var(--pv-space-6); }
@media (min-width: 901px) { body:not(.is-article) .legal-body { row-gap: var(--pv-space-4); } }
.legal-toc a { font-family: var(--pv-font-heading); font-size: var(--pv-text-sm); text-decoration: none; border-block-end: 1px solid var(--color-border); }
.legal-toc a:hover { color: var(--color-primary); border-color: var(--color-primary); }
.legal-body h3 { margin-block: var(--pv-space-5) var(--pv-space-2); }
.legal-body .table-wrap { margin-block-end: var(--pv-space-5); }
.legal-body code { font-size: 0.9em; }
.legal-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--pv-space-2) var(--pv-space-5); margin: 0 0 var(--pv-space-5); }
.legal-dl > div { display: contents; }
.legal-dl dt { font-family: var(--pv-font-heading); font-weight: 700; color: var(--color-text-muted); }
.legal-dl dd { margin: 0; }
@media (max-width: 640px) {
  .legal-dl { grid-template-columns: 1fr; gap: 0; }
  .legal-dl dt { margin-block-start: var(--pv-space-3); }
}

/* The banner sits bottom-left, never covers the whole screen, never blocks
   scrolling: a cookie wall is not consent. */
.pv-consent {
  position: fixed; inset-inline-start: var(--pv-space-4); inset-block-end: var(--pv-space-4);
  z-index: 1000; max-inline-size: 26rem; inline-size: calc(100% - 2 * var(--pv-space-4));
}
.pv-consent-box {
  background: var(--pv-white); color: var(--color-text);
  border: 1px solid var(--color-border); border-block-start: 3px solid var(--color-primary);
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
  padding: var(--pv-space-5);
}
.pv-consent-box h2 { font-size: var(--pv-text-lg); margin: 0 0 var(--pv-space-2); }
.pv-consent-box p { font-size: var(--pv-text-sm); line-height: 1.5; margin: 0 0 var(--pv-space-4); }
.pv-consent-box p a { color: inherit; }
.pv-consent-actions { display: flex; flex-wrap: wrap; gap: var(--pv-space-2); align-items: center; }
.pv-consent-actions .btn { flex: 1 1 10rem; justify-content: center; }
.pv-consent-more {
  flex-basis: 100%; background: none; border: 0; padding: var(--pv-space-2) 0 0; cursor: pointer;
  font-family: var(--pv-font-heading); font-size: var(--pv-text-sm); color: var(--color-text-muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.pv-consent-more:hover { color: var(--color-primary); }
.pv-consent-options[hidden], .pv-consent[hidden] { display: none; }
.pv-consent-options { display: grid; gap: var(--pv-space-3); margin-block-end: var(--pv-space-4); }
.pv-consent-cat { display: grid; grid-template-columns: auto 1fr; gap: var(--pv-space-3); font-size: var(--pv-text-sm); line-height: 1.45; align-items: start; }
.pv-consent-cat input { margin-block-start: .3em; accent-color: var(--color-primary); }
.pv-consent-cat strong { display: block; }
.pv-consent-options .btn { justify-self: start; }
@media (max-width: 640px) {
  .pv-consent { inset-inline: 0; inset-block-end: 0; max-inline-size: none; inline-size: 100%; }
  .pv-consent-box { border-inline: 0; }
}
.ftr-legal-nav { margin-block-start: var(--pv-space-2); font-size: var(--pv-text-xs); letter-spacing: 0.02em; color: var(--pv-grey-500); }
.ftr-legal-nav a { color: var(--pv-grey-300); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--pv-grey-500); }
.ftr-legal-nav a:hover { color: var(--pv-white); text-decoration-color: var(--color-primary); }

/* ---- checkbox rows in forms (PhoenixBooking demo) ------------------- */
.field-check { display: grid; grid-template-columns: auto 1fr; gap: var(--pv-space-3); align-items: start; margin-block-end: var(--pv-space-3); }
.field-check > span { font-family: var(--pv-font-body); font-size: var(--pv-text-sm); font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.5; color: var(--color-text-muted); }
.field-check input { margin-block-start: .25em; inline-size: 1.1rem; block-size: 1.1rem; accent-color: var(--color-primary); }
.field-check a { color: var(--color-text); }
.dl .field select { background: var(--color-surface); }

/* ---- PhoenixBooking pricing ---------------------------------------- */
.tiers--4 { grid-template-columns: repeat(4, 1fr); }
.pb-pricing .lede { max-inline-size: 60ch; }
.pb-incl-h { margin-block: var(--pv-space-8) var(--pv-space-4); font-size: var(--pv-text-lg); }
.pb-incl { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pv-space-3) var(--pv-space-7); }
.pb-incl li { display: flex; gap: var(--pv-space-3); font-size: var(--pv-text-sm); color: var(--color-text-muted); }
.pb-incl .blade { flex: none; margin-block-start: .45em; }
/* The prepay band: one promotion, two deals, the arithmetic underneath.
   Dark so it reads as an offer, not as a fifth price card. */
.pb-prepay { background: var(--pv-ink-900); color: var(--pv-white); }
.pb-prepay .art-kicker { color: var(--pv-amber-400); }
.pb-prepay-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--pv-space-8); align-items: start; }
.pb-prepay h2 { margin-block: var(--pv-space-2) var(--pv-space-4); font-size: var(--pv-text-3xl); letter-spacing: -0.02em; }
.pb-prepay-example { color: var(--pv-grey-300); font-size: var(--pv-text-base); margin-block-end: var(--pv-space-5); max-inline-size: 48ch; }
.pb-prepay-deals { display: grid; gap: 1px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); }
.pb-deal { background: var(--pv-ink-900); padding: var(--pv-space-5) var(--pv-space-6); }
.pb-prepay .pb-deal-h { font-family: var(--pv-font-heading); font-weight: 700; font-size: var(--pv-text-2xl); color: var(--pv-amber-400); margin: 0 0 var(--pv-space-2); letter-spacing: -0.01em; }
.pb-deal p:last-child { margin: 0; color: var(--pv-grey-300); }
.pb-prepay-table-h { margin-block: var(--pv-space-8) var(--pv-space-3); font-size: var(--pv-text-base); color: var(--pv-grey-300); font-weight: 700; }
.pb-prepay .table-wrap { margin: 0; }
.pb-prepay table, .pb-prepay th, .pb-prepay td { color: var(--pv-white); }
.pb-prepay tbody th { color: var(--pv-amber-400); }
.pb-prepay th, .pb-prepay td { border-color: rgba(255,255,255,.18); }
.pb-prepay thead th { color: var(--pv-grey-300); }
.pb-addons-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--pv-space-9); align-items: start; }
.pb-addon-list dt { color: var(--color-text); }
.pb-addon-list dd { color: var(--color-text-muted); }
.pb-small { font-size: var(--pv-text-sm); color: var(--color-text-muted); max-inline-size: 60ch; }
.pb-cta { text-align: center; }
.pb-cta .lede { margin-inline: auto; max-inline-size: 48ch; }
.pb-cta-btns { display: flex; gap: var(--pv-space-3); justify-content: center; flex-wrap: wrap; margin-block-start: var(--pv-space-5); }
@media (max-width: 1100px) { .tiers--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .pb-prepay-grid, .pb-addons-grid { grid-template-columns: 1fr; gap: var(--pv-space-6); }
  .pb-incl { grid-template-columns: 1fr; }
}
@media (max-width: 640px) { .tiers--4 { grid-template-columns: 1fr; } }

/* Billing-period toggle above the PhoenixBooking tiers */
.pb-toggle { display: inline-flex; border: 1px solid var(--color-border); margin-block-start: var(--pv-space-6); }
.pb-toggle-btn {
  background: var(--color-surface); border: 0; border-inline-end: 1px solid var(--color-border); cursor: pointer;
  font-family: var(--pv-font-heading); font-weight: 700; font-size: var(--pv-text-sm); letter-spacing: 0.04em;
  color: var(--color-text-muted); padding: var(--pv-space-3) var(--pv-space-5);
  display: inline-flex; align-items: center; gap: var(--pv-space-2);
}
.pb-toggle-btn:last-child { border-inline-end: 0; }
.pb-toggle-btn:hover { color: var(--color-text); }
.pb-toggle-btn.is-on { background: var(--pv-ink-900); color: var(--pv-white); }
.pb-toggle-badge {
  font-size: 10px; letter-spacing: 0.08em; padding: 2px 6px;
  background: var(--color-bg-alt); color: var(--color-text-muted);
}
.pb-toggle-badge--best { background: var(--color-primary); color: var(--pv-white); }
.pb-toggle-btn.is-on .pb-toggle-badge { background: var(--pv-amber-400); color: var(--pv-ink-900); }
.pb-toggle-btn.is-on .pb-toggle-badge--best { background: var(--color-primary); color: var(--pv-white); }
.tiers--4 { margin-block-start: var(--pv-space-4); }
.tier-was { margin: var(--pv-space-1) 0 0; font-size: var(--pv-text-sm); color: var(--color-text-muted); }
.tier-was s { text-decoration-thickness: 2px; text-decoration-color: var(--color-primary); }
.tier--featured .tier-was { color: var(--pv-grey-300); }
.tier--deal .price-figure { color: var(--color-primary); }
.tier--featured.tier--deal .price-figure { color: var(--pv-amber-400); }
@media (max-width: 640px) {
  .pb-toggle { display: flex; inline-size: 100%; }
  .pb-toggle-btn { flex: 1 1 0; min-inline-size: 0; flex-direction: column; justify-content: center; gap: 4px; padding-inline: var(--pv-space-2); font-size: var(--pv-text-xs); letter-spacing: 0.02em; }
  .pb-toggle-badge { white-space: nowrap; }
}

/* ---- PhoenixBooking feature rows (screenshot + text) ----------------- */
.pb-features .lede { max-inline-size: 60ch; margin-block-end: var(--pv-space-7); }
.pb-feature {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--pv-space-8);
  align-items: center; padding-block: var(--pv-space-7); border-block-start: 1px solid var(--color-border);
}
.pb-feature--flip .pb-shot { order: 2; }
.pb-shot { margin: 0; background: var(--pv-ink-900); padding: 6px; box-shadow: 0 24px 60px rgba(0,0,0,.18); }
.pb-shot img { display: block; inline-size: 100%; block-size: auto; }
.pb-feature-text h3 { font-size: var(--pv-text-2xl); letter-spacing: -0.01em; margin: var(--pv-space-2) 0 var(--pv-space-3); }
.pb-feature-text p:last-child { color: var(--color-text-muted); margin: 0; }
@media (max-width: 900px) {
  .pb-feature { grid-template-columns: 1fr; gap: var(--pv-space-5); }
  .pb-feature--flip .pb-shot { order: 0; }
}

/* ---- demos hub, rich cards ------------------------------------------ */
.demo-cell--rich { display: flex; flex-direction: column; }
.demo-cell--rich .demo-title a { color: inherit; text-decoration: none; }
.demo-cell--rich .demo-title a:hover { color: var(--color-primary); }
.demo-cell-link { display: block; }
.demo-q { font-family: var(--pv-font-heading); font-weight: 700; font-size: var(--pv-text-base); margin: var(--pv-space-2) 0 var(--pv-space-3); color: var(--color-text); }
.demo-meta { display: grid; grid-template-columns: max-content 1fr; gap: var(--pv-space-1) var(--pv-space-4); margin: var(--pv-space-4) 0; font-size: var(--pv-text-sm); }
.demo-meta > div { display: contents; }
.demo-meta dt { font-family: var(--pv-font-heading); font-weight: 700; color: var(--color-text-muted); }
.demo-meta dd { margin: 0; color: var(--color-text-muted); }
.demo-ctas { margin-block-start: auto; padding-block-start: var(--pv-space-3); }
.demo-hub-note { color: var(--color-text-muted); font-size: var(--pv-text-sm); max-inline-size: 70ch; margin-block: var(--pv-space-4) var(--pv-space-6); }

/* ------------------------------------------------------------ GUIDES HUB */
.gh-pick dd a { font-weight: 600; }
.gh-list { display: grid; gap: var(--pv-space-7); margin-block-start: var(--pv-space-7); }
.gh-card {
  display: grid; grid-template-columns: 200px 1fr; gap: var(--pv-space-7);
  align-items: start; background: var(--color-bg); border: 1px solid var(--color-border); padding: var(--pv-space-6);
}
.gh-cover img { inline-size: 100%; block-size: auto; display: block; transition: transform var(--pv-dur-base) var(--pv-ease-out); }
.gh-cover:hover img { transform: translateY(-4px); }
.gh-title { font-size: var(--pv-text-2xl); margin: var(--pv-space-2) 0 var(--pv-space-3); letter-spacing: -.01em; }
.gh-title a { color: inherit; text-decoration: none; }
.gh-title a:hover { color: var(--color-primary); }
.gh-body > p { margin: 0 0 var(--pv-space-3); }
.gh-find-h { font-family: var(--pv-font-heading); font-weight: 700; margin-block-start: var(--pv-space-4); }
.gh-find { margin: 0 0 var(--pv-space-4); padding-inline-start: 1.2em; }
.gh-find li { margin: 0 0 var(--pv-space-1); }
.gh-for, .gh-meta { font-size: var(--pv-text-sm); color: var(--color-text-muted); }
.gh-meta { font-family: var(--pv-font-heading); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: var(--pv-text-xs); }
.gh-disclaimer { font-size: var(--pv-text-sm); color: var(--color-text-muted); margin-block-start: var(--pv-space-6); }
@media (max-width: 720px) {
  .gh-card { grid-template-columns: 1fr; }
  .gh-cover { max-inline-size: 180px; }
}

/* A band sub that is a sentence or two, not a second headline. */
.band-sub--p { font-family: var(--pv-font-body); font-weight: 400; font-size: var(--pv-text-lg); line-height: 1.5; color: var(--pv-grey-200); max-inline-size: 60ch; margin-inline: auto; margin-block-start: var(--pv-space-4); }
.section-sm > .wrap-text > .answer:first-child { padding-block-start: var(--pv-space-5); }
.shelf--soon { margin-block-start: var(--pv-space-7); }