/* Executr landing site — layout only. Every value comes from tokens.css; no new colours. */

body { min-height: 100vh; overflow-x: hidden; }

/* ---------- Shell ---------- */
.ex-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--space-8); }
.ex-wrap--read { max-width: 760px; }
.ex-section { padding-block: var(--space-20); }
.ex-section--raised {
  background: var(--color-surface-raised);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.ex-section__head { display: flex; flex-direction: column; gap: var(--space-2); max-width: 640px; margin-bottom: var(--space-12); }
.ex-section__head h2 { font: var(--text-heading-1); }
.ex-section__head p { color: var(--color-ink-muted); }
.ex-eyebrow { font: var(--text-label); color: var(--color-teal-strong); }
@media (max-width: 700px) {
  .ex-wrap { padding: 0 var(--space-4); }
  .ex-section { padding-block: var(--space-12); }
}

/* ---------- Header: navy frame, per the design system ---------- */
.ex-head { background: var(--color-navy); color: var(--color-on-navy); }
.ex-head__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6);
  min-height: 72px; padding-block: var(--space-3);
}
.ex-head .ex-logo { color: var(--color-on-navy); }
.ex-head__nav { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.ex-head__nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-3);
  font: var(--text-label); color: var(--color-on-navy-muted); text-decoration: none;
}
.ex-head__nav a:hover { color: var(--color-on-navy); }
.ex-head__spacer { flex: 1 1 auto; }

/* ---------- Hero ---------- */
.ex-hero { display: flex; flex-direction: column; gap: var(--space-12); padding-block: var(--space-16); }
.ex-hero__top { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-16); align-items: flex-end; }
.ex-hero__copy { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.ex-hero h1 {
  font: 500 clamp(34px, 4.6vw, 48px)/1.16 var(--font-serif);
  letter-spacing: -0.01em; max-width: 16em;
}
.ex-hero__lede { font: 400 18px/30px var(--font-sans); color: var(--color-ink-muted); max-width: 34em; }
.ex-hero__actions { flex: 0 1 320px; display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.ex-hero__assure { display: flex; gap: var(--space-2); font: var(--text-body-sm); color: var(--color-ink-muted); }
.ex-hero__assure .ex-ico { width: 18px; height: 18px; margin-top: 2px; color: var(--color-teal); }
/* Pulled toward the screenshot it describes, so it reads as that image's caption
   rather than as a line floating between two sections. */
.ex-hero__caption {
  font: var(--text-body-sm); color: var(--color-ink-muted); text-align: center;
  margin-top: calc(var(--space-8) - var(--space-12));
}

/* ---------- Product screens ----------
   Decorative: every .ex-shot is aria-hidden, so nothing inside may be focusable. Use
   <span class="ex-btn"> and .ex-faux, never a real button, link or input. The meaning
   lives in the <figcaption>, which sits outside the hidden subtree. */
.ex-shot { min-width: 0; }
.ex-screen {
  container: screen / inline-size;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay);
  overflow: hidden;
}
.ex-screen--flat { box-shadow: var(--shadow-card); }

/* Browser chrome */
.ex-screen__bar {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface-sunken);
  border-bottom: 1px solid var(--color-border);
}
.ex-screen__dots { display: flex; gap: 6px; flex: none; }
.ex-screen__dots i { width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--color-border); }
.ex-screen__url {
  flex: 1 1 0; max-width: 360px; margin: 0 auto;
  padding: 2px var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  font: var(--text-caption); color: var(--color-ink-muted); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* The app's own navy top bar */
.ex-screen__top {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--color-navy); color: var(--color-on-navy);
}
.ex-screen__estate { font: var(--text-caption); padding: var(--space-1) var(--space-3); border: 1px solid var(--color-navy-line); border-radius: var(--radius-sm); }
.ex-screen__spacer { flex: 1 1 0; }

/* Sidebar + content */
.ex-screen__app { display: grid; grid-template-columns: 200px minmax(0, 1fr); }
.ex-screen__nav {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-4) var(--space-3);
  border-right: 1px solid var(--color-border);
  background: var(--color-surface-raised);
}
.ex-nav-item {
  display: flex; justify-content: space-between; gap: var(--space-2);
  padding: 9px 10px; border-radius: var(--radius-sm);
  font: 500 13px/18px var(--font-sans); color: var(--color-ink-muted);
}
.ex-nav-item b { font-weight: 500; color: var(--color-ink-muted); }
.ex-nav-item--on { background: var(--color-teal-tint); color: var(--color-ink); font-weight: 600; }
.ex-screen__main {
  container: pane / inline-size;
  display: flex; flex-direction: column; gap: var(--space-6);
  padding: var(--space-8); min-width: 0;
  background: var(--color-surface);
}
.ex-screen__main--tight { padding: var(--space-6); gap: var(--space-4); }
.ex-screen__greet { font: var(--text-heading-1); }
.ex-screen__sub { font: var(--text-body-sm); color: var(--color-ink-muted); }
.ex-screen__title { font: var(--text-heading-2); }
.ex-screen__head { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: baseline; justify-content: space-between; }
.ex-screen__panel {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
}
.ex-screen__panels { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.ex-screen__panels > * { min-width: 0; }
.ex-panel__title { font: 600 15px/22px var(--font-sans); }
.ex-screen__money { font: 600 26px/32px var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ex-screen__label { font: var(--text-caption); color: var(--color-ink-muted); }
.ex-panel__link { font: var(--text-caption); color: var(--color-teal-strong); }
.ex-panel__row { display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; margin-bottom: var(--space-2); }
.ex-screen .ex-btn { min-height: 38px; padding: 0 var(--space-4); font: 600 13px/18px var(--font-sans); cursor: default; box-shadow: none; transform: none; }
.ex-screen .ex-notice { padding: var(--space-3) var(--space-4); }
.ex-screen .ex-notice p { font: 400 13px/20px var(--font-sans); }

/* Faux form controls — spans, so nothing inside a screen can take focus */
.ex-faux { display: flex; flex-direction: column; gap: var(--space-1); }
.ex-faux__label { font: 500 13px/18px var(--font-sans); }
.ex-faux__input {
  display: flex; align-items: center; min-height: 38px; padding: 0 var(--space-3);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: var(--color-surface-raised); font: 400 13px/20px var(--font-sans);
}
.ex-faux__input--long { min-height: 64px; align-items: flex-start; padding-top: var(--space-2); }
.ex-faux__caret { display: inline-block; width: 1px; height: 15px; margin-left: 1px; background: var(--color-ink); }

/* The hero screen runs past the right edge, so it reads as a real window continuing
   beyond the page rather than a picture sitting on it. */
@media (min-width: 1100px) {
  .ex-shot--bleed { margin-right: calc(-1 * (max(0px, (100vw - 1200px) / 2) + var(--space-8))); }
  .ex-shot--bleed .ex-screen { border-right: 0; border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
}

/* Screens size to their own container, not the viewport: the same markup renders in the
   wide hero and in a half-width showcase cell. */
@container screen (max-width: 620px) {
  .ex-screen__app { grid-template-columns: minmax(0, 1fr); }
  .ex-screen__nav { display: none; }
}
@container pane (max-width: 640px) {
  .ex-screen__main { padding: var(--space-4); }
  .ex-screen__greet { font: var(--text-heading-2); }
  .ex-journey { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ex-journey__stage:nth-child(3n) .ex-journey__line { visibility: hidden; }
}
@container pane (max-width: 380px) {
  .ex-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex-journey__stage:nth-child(3n) .ex-journey__line { visibility: visible; }
  .ex-journey__stage:nth-child(2n) .ex-journey__line { visibility: hidden; }
}
/* Browsers without container queries fall back to viewport widths. */
@supports not (container-type: inline-size) {
  @media (max-width: 1000px) {
    .ex-screen__app { grid-template-columns: minmax(0, 1fr); }
    .ex-screen__nav { display: none; }
    .ex-journey { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ex-journey__stage:nth-child(3n) .ex-journey__line { visibility: hidden; }
  }
}

/* ---------- Screen showcase ("How it works") ---------- */
.ex-shots { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12) var(--space-8); }
@media (min-width: 980px) { .ex-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ex-shot-figure { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.ex-shot-figure figcaption { display: flex; flex-direction: column; gap: var(--space-1); }
.ex-shot-figure figcaption b { font: var(--text-heading-3); }
.ex-shot-figure figcaption span { font: var(--text-body-sm); color: var(--color-ink-muted); }
.ex-shot-figure .ex-screen { flex: 1 1 auto; }
.ex-step {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font: var(--text-caption); color: var(--color-teal-strong);
}
.ex-step i {
  display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: var(--radius-full); background: var(--color-teal-tint);
  font-style: normal; font-weight: 600;
}

/* ---------- Feature columns ---------- */
.ex-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
@media (min-width: 820px) { .ex-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ex-col { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.ex-col__ico { color: var(--color-teal); }
.ex-col__ico .ex-ico { width: 24px; height: 24px; }
.ex-col h3 { font: var(--text-heading-3); }
.ex-col p { color: var(--color-ink-muted); }

/* ---------- Pricing ---------- */
.ex-plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: stretch; }
@media (min-width: 880px) { .ex-plans { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); max-width: 1040px; margin: 0 auto; } }
/* A single-tier variant must not stretch a 1,040px card across the section. */
.ex-plans > .ex-plan:only-child { max-width: 560px; margin: 0 auto; }
.ex-plan { position: relative; display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-8); }
.ex-plan--featured { border: 2px solid var(--color-teal-strong); padding: calc(var(--space-8) - 1px); }
.ex-plan__flag {
  position: absolute; top: -13px; left: var(--space-8);
  display: inline-flex; align-items: center; height: 26px; padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-teal-strong); color: var(--color-on-teal);
  font: var(--text-caption); letter-spacing: 0.02em;
}
.ex-plan__name { font: var(--text-heading-3); }
.ex-plan__blurb { font: var(--text-body-sm); color: var(--color-ink-muted); }
.ex-plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
.ex-plan__price b { font: 600 48px/56px var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ex-plan__price span { color: var(--color-ink-muted); }
.ex-plan__once { font: var(--text-body-sm); color: var(--color-ink-muted); }
.ex-plan .ex-ticks { flex: 1 1 auto; }
.ex-plan__legal { font: var(--text-body-sm); color: var(--color-ink-muted); text-align: center; }
.ex-reassure {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-8);
  margin-top: var(--space-12); font: var(--text-body-sm); color: var(--color-ink-muted);
}
.ex-reassure span { display: inline-flex; gap: var(--space-2); align-items: center; }
.ex-reassure .ex-ico { width: 18px; height: 18px; color: var(--color-teal); }

/* ---------- FAQ ---------- */
.ex-faq { display: flex; flex-direction: column; max-width: 800px; }
.ex-faq__item { border-top: 1px solid var(--color-border); padding: var(--space-4) 0; }
.ex-faq__item:last-child { border-bottom: 1px solid var(--color-border); }
.ex-faq__q {
  display: flex; gap: var(--space-4); justify-content: space-between; align-items: baseline;
  font: var(--text-heading-3); cursor: pointer; list-style: none; min-height: 28px;
}
.ex-faq__q::-webkit-details-marker { display: none; }
.ex-faq__q::marker { content: ""; }
.ex-faq__q .ex-ico { width: 20px; height: 20px; flex: none; color: var(--color-ink-muted); transition: transform 120ms ease; }
.ex-faq__item[open] .ex-faq__q .ex-ico { transform: rotate(45deg); }
.ex-faq__item p { margin-top: var(--space-3); color: var(--color-ink-muted); max-width: 70ch; }

/* ---------- Footer ---------- */
.ex-foot { background: var(--color-navy); color: var(--color-on-navy-muted); }
.ex-foot__inner {
  display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-8);
  align-items: flex-start; justify-content: space-between;
  padding-block: var(--space-12); font: var(--text-body-sm);
}
.ex-foot__legal { display: flex; flex-direction: column; gap: var(--space-2); max-width: 620px; }
.ex-foot__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.ex-foot__links a, .ex-foot__links button {
  font: var(--text-body-sm); color: var(--color-on-navy);
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline;
}
.ex-foot__links a:hover, .ex-foot__links button:hover { color: var(--color-on-navy-muted); }

/* ---------- Order summary (the basket) ---------- */
.ex-order { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-6); }
.ex-order h1 { font: var(--text-heading-1); }
.ex-order__steps { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font: var(--text-body-sm); color: var(--color-ink-muted); }
.ex-order__steps [aria-current="step"] { font-weight: 600; color: var(--color-ink); }
.ex-order__card { gap: var(--space-4); }
.ex-order__plan { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; align-items: flex-start; }
.ex-order__name { font: var(--text-heading-2); }
.ex-order__for { font: var(--text-body-sm); color: var(--color-ink-muted); margin-top: var(--space-1); }
.ex-order__lines { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.ex-order__line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); font: var(--text-body-sm); }
.ex-order__line dt { color: var(--color-ink-muted); }
.ex-order__line dd { font-variant-numeric: tabular-nums; text-align: right; }
.ex-order__line--total { margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--color-border); font: var(--text-body); }
.ex-order__line--total dt { color: var(--color-ink); font-weight: 600; }
.ex-order__line--total dd { font: 600 22px/30px var(--font-sans); font-variant-numeric: tabular-nums; }
.ex-order__note { font: var(--text-body-sm); color: var(--color-ink-muted); }
.ex-order__includes { display: flex; flex-direction: column; gap: var(--space-4); }
.ex-order__pay { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
.ex-order__pay .ex-btn { min-height: 52px; }
.ex-order__smallprint { font: var(--text-body-sm); color: var(--color-ink-muted); }
.ex-order__back { font: var(--text-body-sm); }

/* ---------- Dialog ---------- */
.ex-scrim {
  position: fixed; inset: 0; z-index: 20; background: var(--color-scrim);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4); overflow-y: auto;
}
.ex-dialog {
  width: 100%; max-width: 480px;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay); padding: var(--space-8);
}
.ex-dialog__step { display: flex; flex-direction: column; gap: var(--space-4); }
.ex-dialog h2 { font: var(--text-heading-2); }
.ex-dialog p { color: var(--color-ink-muted); }
.ex-dialog__tag { align-self: flex-start; }
.ex-dialog__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.ex-dialog__actions .ex-btn { min-height: 48px; }
.ex-fineprint { font: var(--text-body-sm); color: var(--color-ink-muted); }

/* ---------- Cookie banner ---------- */
.ex-cookies {
  position: fixed; z-index: 30; inset: auto var(--space-4) var(--space-4); margin: 0 auto;
  max-width: 560px; padding: var(--space-6);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.ex-cookies h2 { font: var(--text-heading-3); }
.ex-cookies p { font: var(--text-body-sm); color: var(--color-ink-muted); }
.ex-cookies__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ex-cookies__actions .ex-btn { flex: 1 1 auto; }

/* ---------- Prose, for the two notices ---------- */
.ex-prose { display: flex; flex-direction: column; gap: var(--space-4); }
.ex-prose h1 { font: var(--text-heading-1); }
.ex-prose h2 { font: var(--text-heading-2); margin-top: var(--space-8); }
.ex-prose h3 { font: var(--text-heading-3); margin-top: var(--space-4); }
.ex-prose p, .ex-prose li { color: var(--color-ink); }
.ex-prose ul { padding-left: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.ex-prose__meta { font: var(--text-body-sm); color: var(--color-ink-muted); }
.ex-prose table { width: 100%; border-collapse: collapse; font: var(--text-body-sm); }
.ex-prose th, .ex-prose td { text-align: left; vertical-align: top; padding: var(--space-3); border: 1px solid var(--color-border); }
.ex-prose th { background: var(--color-surface-sunken); font: var(--text-label); white-space: nowrap; }
.ex-table-scroll { overflow-x: auto; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Staff bar ---------- */
/* Only ever inserted by site.js when the staff flag is set, so it cannot appear
   for a visitor. Sticky rather than fixed: it takes up its own space instead of
   covering the header, and still follows you down the page. Below the dialog
   scrim (z-index 20) so it never sits over an open dialog. */
.ex-staffbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-6);
  background: var(--color-warning-tint);
  border-bottom: 2px solid var(--color-warning);
  color: var(--color-ink);
}
.ex-staffbar__text { flex: 1 1 20rem; min-width: 0; font: var(--text-body-sm); margin: 0; }
.ex-staffbar__off {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 var(--space-4);
  font: var(--text-label); color: var(--color-warning-text);
  border: 1px solid var(--color-warning); border-radius: var(--radius-md);
  text-decoration: none; background: var(--color-surface-raised);
}
.ex-staffbar__off:hover { background: var(--color-warning-tint); }

/* ---------- Fee as a share of the estate ---------- */
/* Deliberately quiet, and width-matched to .ex-plans so it lines up with the left
   edge of the cards rather than the section. The point lands better as a footnote
   under the prices than as a panel competing with them. */
.ex-plans__scale {
  margin-top: var(--space-6);
  font: var(--text-body-sm);
  color: var(--color-ink-muted);
}
@media (min-width: 880px) {
  .ex-plans__scale { max-width: 1040px; margin-inline: auto; }
}
/* Follows a single-tier card, which is narrower and centred. */
.ex-plans__scale--single { max-width: 560px; margin-inline: auto; }