/*
 * SeSar Classic — reproduces the existing sesar.co.uk look.
 *
 * Dark-first: base #0f131a, cards #171d28, secondary bands #1b2232, gold #ffd633.
 * Written from the live site's tokens rather than adapted from the light refresh theme —
 * inverting a light palette rule by rule produces near-misses, so every surface here is
 * derived from src/index.css directly.
 *
 * Only what theme.json cannot express lives in this file.
 */

/* ═══════════════════════════════ Layout scaffolding ═══════════════════════ */

/* Bands are full width because the templates use flow layout; the inner column constrains.
   No alignfull breakout — WordPress zeroes its own breakout margins when the root padding
   variable is unset, which shifts every band sideways. */
.sesar-sec,
.sesar-hero { width: 100%; }

.sesar-sec { padding-top: var(--wp--preset--spacing--70); padding-bottom: var(--wp--preset--spacing--70); }

.sesar-inner {
  max-width: var(--sesar-measure, 1200px);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(16px, 4vw, 32px);
  padding-right: clamp(16px, 4vw, 32px);
}
.sesar-sec.is-narrow { --sesar-measure: 820px; }

/* A readability cap must not re-centre the element inside .sesar-inner. */
.sesar-inner > * { margin-left: 0; margin-right: auto; }

/* Alternating surfaces, matching the live site: base and secondary only. */
.sesar-sec.is-page   { background-color: var(--wp--preset--color--base); }
.sesar-sec.is-white  { background-color: var(--wp--preset--color--surface-raised); }
.sesar-sec.is-dark   { background-color: var(--wp--preset--color--surface-raised); }

/* ═══════════════════════════════════ Typography ═══════════════════════════ */

.sesar-eyebrow {
  font-size: 13px; font-weight: 700; line-height: 1.2;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--wp--preset--color--brand);
  margin: 0 0 14px;
}
.sesar-sec h2,
.sesar-h2,
.sesar-hero h2 {
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 700; line-height: 1.18; letter-spacing: -.02em;
  color: var(--wp--preset--color--contrast);
  margin: 0; max-width: 24ch; text-wrap: pretty;
}
.sesar-lede {
  font-size: 17px; line-height: 1.7;
  color: var(--wp--preset--color--muted);
  margin: 16px 0 0; max-width: 64ch;
}
.sesar-sec p { color: var(--wp--preset--color--muted); }

/* ═══════════════════════════════════════ Hero ════════════════════════════ */

/* Signature treatment: full-bleed image at 40% under a left-to-right dark veil. */
.sesar-hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--wp--preset--color--base);
  padding: clamp(56px, 7vw, 96px) 0;
}
/* Only the homepage and the mobile mechanic page get a viewport-height hero on live
   (`min-h-[90vh] lg:min-h-[70vh]`); every other hero is sized by its own content. Applying
   70vh to all 26 left short heroes — pricing worst — as half a screen of empty space. */
.sesar-hero.is-tall { min-height: 90vh; }
@media (min-width: 1024px) { .sesar-hero.is-tall { min-height: 70vh; } }
.sesar-hero-bg { position: absolute; inset: 0; z-index: 0; }
.sesar-hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .4;
  display: block;
}
.sesar-hero-bg::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right,
    hsl(220 25% 8%) 0%,
    hsl(220 25% 8% / .95) 50%,
    hsl(220 25% 8% / .7) 100%);
}
/* Every child except the backdrop sits above it. Specificity matters here: a plain
   `.sesar-hero > *` rule outranks `.sesar-hero-bg` and cancels its position:absolute,
   which collapses the backdrop into the flow and leaves it covering only part of the hero. */
.sesar-hero > *:not(.sesar-hero-bg) { position: relative; z-index: 2; width: 100%; }
.sesar-hero > .sesar-hero-bg { position: absolute; inset: 0; z-index: 0; width: 100%; }

.sesar-h1 {
  font-size: clamp(36px, 6vw, 68px);
  font-weight: 800; line-height: 1.05; letter-spacing: -.025em;
  color: var(--wp--preset--color--brand);
  margin: 0; max-width: 16ch; text-wrap: pretty;
}
.sesar-hero-lede {
  font-size: clamp(16px, 1.6vw, 19px); line-height: 1.7;
  color: var(--wp--preset--color--muted);
  margin: 22px 0 0; max-width: 58ch;
}
.sesar-standfirst {
  font-size: clamp(17px, 1.8vw, 20px); font-weight: 600; line-height: 1.5;
  color: var(--wp--preset--color--contrast);
  margin: 18px 0 0; max-width: 60ch;
}

/* Gold outline pill badges, as on the live hero. */
.sesar-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  background: hsl(45 100% 60% / .08);
  border: 1px solid hsl(45 100% 60% / .35);
  margin-bottom: 22px;
  font-size: 13px; font-weight: 600;
  color: var(--wp--preset--color--brand);
}
.sesar-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--wp--preset--color--brand); flex: 0 0 auto; }

/* Proof row of tick-prefixed items. */
.sesar-proof { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 28px; }
.sesar-proof-item { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--wp--preset--color--muted); }
.sesar-proof-item::before { content: "✓"; color: var(--wp--preset--color--brand); font-weight: 700; }
.sesar-proof-value { font-weight: 700; color: var(--wp--preset--color--contrast); }

/* ═════════════════════════════════════ Buttons ═══════════════════════════ */

.sesar-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.sesar-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 28px; border-radius: 12px;
  font-size: 15px; font-weight: 700;
  text-decoration: none;
  transition: background-color 180ms ease, box-shadow 180ms ease, transform 140ms ease;
}
.sesar-btn:active { transform: translateY(1px); }
.sesar-btn.is-primary {
  background: var(--wp--preset--color--brand);
  color: var(--wp--preset--color--brand-ink);
  box-shadow: 0 0 40px hsl(45 100% 60% / .15);
}
.sesar-btn.is-primary:hover { background: var(--wp--preset--color--brand-soft); color: var(--wp--preset--color--brand-ink); text-decoration: none; }
.sesar-btn.is-outline {
  background: transparent;
  color: var(--wp--preset--color--contrast);
  border: 1px solid var(--wp--preset--color--border);
}
.sesar-btn.is-outline:hover { background: var(--wp--preset--color--surface); border-color: hsl(45 100% 60% / .4); text-decoration: none; }
.sesar-btn.is-block { display: flex; width: 100%; }

.wp-block-button__link { box-shadow: 0 0 40px hsl(45 100% 60% / .15); }
.wp-block-button.is-style-outline > .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--contrast);
  border: 1px solid var(--wp--preset--color--border);
  box-shadow: none;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--surface); }
/* Core's outline style sets its own smaller padding and a hairline in the border colour, so
   beside a filled button it read as loose text rather than the second of a pair. */
.wp-block-button.is-style-outline > .wp-block-button__link {
  padding: 14px 24px;
  border-color: color-mix(in srgb, var(--wp--preset--color--contrast) 22%, transparent);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
  border-color: color-mix(in srgb, var(--wp--preset--color--brand) 40%, transparent);
}

/* A closing section's buttons are one row under the heading, centred with it. Live only
   pulls them left where the section itself runs left. */
.sesar-sec .sesar-inner > .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 30px;
}
.sesar-sec.is-flush .sesar-inner > .wp-block-buttons { justify-content: flex-start; }

/* ══════════════════════════════════════ Cards ════════════════════════════ */

.sesar-grid-2, .sesar-grid-3, .sesar-grid-4 { display: grid; gap: 24px; margin-top: 40px; }
.sesar-grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.sesar-grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.sesar-grid-4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.sesar-card,
.sesar-why-card,
.sesar-step,
.sesar-quote,
.sesar-tilecard,
.sesar-compare,
.sesar-plan,
.sesar-channel {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  box-shadow: 0 2px 8px hsl(0 0% 0% / .3);
}
.sesar-card, .sesar-why-card, .sesar-step { padding: 28px; height: 100%; }
.sesar-card h3, .sesar-why-card h3, .sesar-step h3 {
  margin: 0 0 12px; font-size: 19px; font-weight: 600;
  color: var(--wp--preset--color--contrast);
}
.sesar-card p, .sesar-why-card p, .sesar-step p { margin: 0; color: var(--wp--preset--color--muted); }

/* Cards sitting on a secondary band lift to the card colour so they stay distinct. */
.sesar-sec.is-white .sesar-card,
.sesar-sec.is-white .sesar-why-card,
.sesar-sec.is-white .sesar-step { background: var(--wp--preset--color--base); }

/* Gold icon tiles. */
.sesar-tile {
  width: 44px; height: 44px; border-radius: 12px;
  background: hsl(45 100% 60% / .12);
  color: var(--wp--preset--color--brand);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px; flex: 0 0 auto;
}
.sesar-tile.is-sm { width: 36px; height: 36px; border-radius: 9px; margin: 0; }
.sesar-icon { display: block; }

/* Bullets: gold dots and gold ticks. */
.sesar-dots, .sesar-checks { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.sesar-dots li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.55; color: var(--wp--preset--color--muted); }
.sesar-dots li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--wp--preset--color--brand); }
.sesar-checks li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.55; color: var(--wp--preset--color--muted); }
.sesar-checks svg { color: var(--wp--preset--color--brand); margin-top: 3px; flex: 0 0 auto; }

/* Cards inside post content, from the generic composer. */
.sesar-card ul { list-style: none; padding-left: 0; margin-top: 14px; }
.sesar-card li { position: relative; padding-left: 18px; margin-bottom: 10px; font-size: 15px; line-height: 1.55; color: var(--wp--preset--color--muted); }
.sesar-card li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--wp--preset--color--brand); }
.sesar-grid > .wp-block-group { align-self: stretch; }
.sesar-grid { display: grid; gap: 24px; margin-top: 40px; }

/* Numbered steps use a gold circle with dark numerals. */
.sesar-step-num {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--wp--preset--color--brand);
  color: var(--wp--preset--color--brand-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; margin-bottom: 16px;
}

/* Testimonials. */
.sesar-quote { padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.sesar-quote-text { font-size: 18px; font-weight: 600; line-height: 1.5; color: var(--wp--preset--color--contrast); margin: 0; }
.sesar-quote-body { font-size: 15px; line-height: 1.6; color: var(--wp--preset--color--muted); margin: 0; }
.sesar-quote-role { margin-top: auto; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--brand); }

/* ════════════════════════════════════ FAQ ═══════════════════════════════ */

/* Tab pills above a grouped set. Gold fill on the active one, a quiet outline on the rest,
   the way live marks the open group. */
.sesar-faq-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}

.sesar-faq-pill {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

.sesar-faq-pill:hover {
  color: var(--wp--preset--color--contrast);
  border-color: color-mix(in srgb, var(--wp--preset--color--brand) 50%, transparent);
}

.sesar-faq-pill.is-active {
  background: var(--wp--preset--color--brand);
  border-color: var(--wp--preset--color--brand);
  color: var(--wp--preset--color--brand-ink, #0f131a);
  font-weight: 600;
}

.sesar-faq-pill:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand);
  outline-offset: 2px;
}

/* The questions sit in a reading column of their own rather than the full section width —
   a 1200px-wide row with one short question in it reads as a bar, not a card. */
.sesar-faq {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
  max-width: 768px;
  margin-inline: auto;
  width: 100%;
}

/* WordPress adds a 24px block gap between flow children, which stacked on top of the flex
   gap and pushed the rows 36px apart — three times the spacing the design calls for. The
   flex gap is the one that should decide. */
.sesar-faq > .sesar-faq-item { margin-block: 0; }

.sesar-faq-item {
  background: linear-gradient(135deg,
    var(--wp--preset--color--surface),
    color-mix(in srgb, var(--wp--preset--color--surface) 80%, var(--wp--preset--color--base)));
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 16px;
  overflow: hidden;
  padding: 0;
  list-style: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.sesar-faq-item:hover {
  border-color: color-mix(in srgb, var(--wp--preset--color--brand) 40%, var(--wp--preset--color--border));
  box-shadow: 0 8px 24px -12px rgb(0 0 0 / .55);
}

.sesar-faq-item[open] {
  border-color: color-mix(in srgb, var(--wp--preset--color--brand) 55%, var(--wp--preset--color--border));
}

.sesar-faq-item > summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.45;
  color: var(--wp--preset--color--contrast);
  list-style: none;
}

.sesar-faq-item > summary::-webkit-details-marker { display: none; }

/* The question is an h3 for the document outline, but it is a row label, not a heading on
   the page — left with the theme's heading size and margins it made every row 99px tall. */
.sesar-faq-q {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
  color: inherit;
}

/* A chevron that turns, rather than a +/− that swaps — the movement is what makes it read
   as a panel opening. */
.sesar-faq-chevron {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--wp--preset--color--brand);
  transition: transform .2s ease;
}

.sesar-faq-item[open] .sesar-faq-chevron { transform: rotate(180deg); }

.sesar-faq-item > *:not(summary) {
  padding: 0 22px 20px;
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--wp--preset--color--muted);
}

/* Only the selected group is shown, hidden by a class the script sets rather than by
   matching each group name in a selector — a name written twice is a name that can drift,
   and adding a fifth group should not mean editing this file.

   Nothing is hidden until the script runs, so the markup holds every question for search
   engines, and anyone without JavaScript simply gets the full list. */
.sesar-faq-item.is-filtered-out { display: none; }

@media (max-width: 782px) {
  /* A finger needs 44px, and the pills wrap to two rows on a phone, where a mis-tap is most
     likely. Stated as a minimum rather than guessed at through padding — padding alone landed
     on 43px. */
  .sesar-faq-pill {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sesar-faq-item, .sesar-faq-chevron, .sesar-faq-pill { transition: none; }
}

/* ═══════════════════════════════════ CTA band ═══════════════════════════ */

.sesar-cta { background: linear-gradient(180deg, hsl(220 25% 8%), hsl(220 25% 12%)); }
/* Centred, as live has it: `text-center` on the block, `mx-auto` on the copy and
   `justify-center` on the buttons. Left-aligned in a 760px column it sat against one edge of
   a full-width band with the other half empty, and it was the only section on the page not
   centred. */
.sesar-cta-grid {
  display: block;
  max-width: 768px;
  margin-inline: auto;
  text-align: center;
}

.sesar-cta-title { font-size: clamp(28px, 4vw, 44px); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; color: var(--wp--preset--color--brand); margin: 0; }

/* `.sesar-sec h2` caps every section heading at 24ch with margin:0, and outranks a lone
   class. Inside the centred CTA block that left the heading in a 630px box pinned to the left
   of a 768px one: the words were centred, the box was not, and the heading sat 70px left of
   the lede and buttons under it. Matched a level deeper so it wins. */
.sesar-sec .sesar-cta-title,
.sesar-cta-grid .sesar-cta-title {
  max-width: 100%;
  margin-inline: auto;
}
.sesar-cta-body { font-size: 17px; line-height: 1.7; color: var(--wp--preset--color--muted); margin: 18px auto 30px; max-width: 56ch; }
.sesar-cta-grid .sesar-hero-actions { justify-content: center; }

@media (max-width: 600px) {
  /* Live stacks these below its `sm` breakpoint and lets each button fill the width, which
     keeps two full-width taps rather than two half-width ones side by side.

     `align-self: stretch` rather than `width: 100%`: the buttons are content-box, so a 100%
     width plus their own padding measured 414px inside a 390px screen and pushed the whole
     page sideways. Stretching along the cross axis needs no such arithmetic. */
  .sesar-cta-grid .sesar-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .sesar-cta-grid .sesar-hero-actions .sesar-btn {
    width: auto;
    flex: 0 0 auto;
  }
}

/* ══════════════════════════════ Widget stand-ins ════════════════════════ */

/* The live site runs these as React. Rendered statically so pages keep their content;
   each carries a visible note so nobody mistakes it for working functionality. */
.sesar-stub {
  background: linear-gradient(135deg, hsl(220 25% 12%), hsl(220 25% 15%));
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  padding: 32px;
  margin-top: 32px;
}
.sesar-stub-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--wp--preset--color--brand); margin-bottom: 14px;
}
.sesar-stub h3 { margin: 0 0 10px; color: var(--wp--preset--color--contrast); font-size: 20px; }
.sesar-stub p { margin: 0; color: var(--wp--preset--color--muted); }

/* ════════════════════════════════ Header / footer ═══════════════════════ */

.sesar-header {
  position: sticky; top: 0; z-index: 40;
  background: hsl(220 25% 8% / .9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--wp--preset--color--border);
}
.sesar-main { margin-top: 0; }
.sesar-main > *:first-child { margin-top: 0; }

.sesar-footer {
  background: var(--wp--preset--color--base);
  border-top: 1px solid var(--wp--preset--color--border);
  padding: clamp(48px, 6vw, 72px) 0 32px;
  width: 100%;
}
.sesar-footer-inner { max-width: 1360px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); }
.sesar-footer-grid { display: grid; gap: 36px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.sesar-wordmark { font-size: 28px; font-weight: 800; letter-spacing: -.03em; display: inline-block; }
.sesar-wordmark .is-se { color: var(--wp--preset--color--contrast); }
.sesar-wordmark .is-sar { color: var(--wp--preset--color--brand); }
.sesar-footer-desc { max-width: 34ch; margin: 16px 0 0; font-size: 14px; line-height: 1.7; color: var(--wp--preset--color--muted); }
.sesar-footer-addr { margin: 16px 0 0; font-size: 13px; line-height: 1.7; color: var(--wp--preset--color--muted); }
.sesar-footer-head { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--brand); margin: 0 0 16px; }
.sesar-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.sesar-footer-col a { font-size: 14px; color: var(--wp--preset--color--muted); text-decoration: none; }
.sesar-footer-col a:hover { color: var(--wp--preset--color--brand); text-decoration: none; }
.sesar-footer-bar {
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
  margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--wp--preset--color--border);
  font-size: 13px; color: var(--wp--preset--color--muted);
}

/* ═══════════════════════════════════ Misc ══════════════════════════════ */

.wp-block-image img { border-radius: 12px; }
:where(a, button, summary, input, textarea, select):focus-visible {
  outline: 2px solid var(--wp--preset--color--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (max-width: 781px) {
  .sesar-sec h2, .sesar-h2 { max-width: none; }
  .sesar-hero { min-height: auto; }
  .sesar-hero-actions .sesar-btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .sesar-btn, .wp-block-button__link { transition: none; }
}

/* Composed pages emit plain headings and paragraphs rather than the authored .sesar-*
   classes, so the hero's own typography is targeted structurally. */
/* The live site's page H1 is the gold gradient clipped to the text (.text-gradient in
   src/index.css), not a flat gold fill — a flat colour reads noticeably flatter. */
.sesar-hero h1 { color: var(--wp--preset--color--contrast); max-width: 18ch; text-wrap: pretty; }

/* Gold gradient only on the pages whose component applies .text-gradient — the live site
   varies this per page and applying it everywhere measurably diverges. */
.sesar-hero.has-gradient-h1 h1,
.sesar-h1 {
  background: linear-gradient(135deg, hsl(45 100% 60%), hsl(45 100% 70%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  max-width: 18ch;
  text-wrap: pretty;
}
/* Fallback where background-clip is unsupported. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .sesar-hero.has-gradient-h1 h1, .sesar-h1 { color: var(--wp--preset--color--brand); -webkit-text-fill-color: currentColor; }
}
.sesar-hero .sesar-inner > p {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.7;
  color: var(--wp--preset--color--muted);
  max-width: 58ch;
  margin: 22px 0 0;
}
.sesar-hero .wp-block-buttons { margin-top: 30px; }

/* Section ledes on composed pages. */
.sesar-sec .sesar-inner > p { font-size: 17px; line-height: 1.7; max-width: 64ch; margin-top: 16px; }
.sesar-sec .sesar-inner > h2 + p { margin-top: 14px; }

/* The composer emits wp:group with layout:{type:"grid"}; WordPress generates the column
   template from minimumColumnWidth. This fallback keeps the grid correct if that generated
   rule is ever missing — and stops the preview showing a stacked column that looks like a
   layout bug when production is fine. */
.sesar-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* A hero with only a heading and a lede does not need a 70vh stage — that is for the
   homepage's backdrop treatment. Archive and prose heroes size to their content. */
.sesar-hero:not(:has(.sesar-hero-bg)) { min-height: 0; padding: clamp(48px, 6vw, 72px) 0; }

/* Header CTAs: live pairs an outline "Book Demo" with a filled gold "Start Free Trial". */
.sesar-header .is-cta-outline a,
.sesar-header .is-cta-primary a {
  border-radius: 12px;
  padding: 9px 18px;
  font-weight: 700;
  text-decoration: none;
}
.sesar-header .is-cta-outline a {
  border: 1px solid var(--wp--preset--color--border);
  color: var(--wp--preset--color--contrast);
}
.sesar-header .is-cta-outline a:hover { border-color: hsl(45 100% 60% / .5); }
.sesar-header .is-cta-primary a {
  background: var(--wp--preset--color--brand);
  color: var(--wp--preset--color--brand-ink);
}
.sesar-header .is-cta-primary a:hover { background: var(--wp--preset--color--brand-soft); }

/* The archive title is plain white on live, not the gold gradient. */
.sesar-archive-title {
  font-size: clamp(36px, 6vw, 68px);
  font-weight: 800; line-height: 1.05; letter-spacing: -.025em;
  color: var(--wp--preset--color--contrast);
  margin: 0; max-width: 18ch;
}

/* Legal links sit in the bottom bar alongside the copyright, as on the live site. */
.sesar-footer-legal { display: inline-flex; flex-wrap: wrap; gap: 18px; }
.sesar-footer-legal a { color: var(--wp--preset--color--muted); text-decoration: none; }
.sesar-footer-legal a:hover { color: var(--wp--preset--color--brand); }
/* The header logo replaces the text site title. */
.sesar-header .wp-block-site-logo img { display: block; height: auto; }

/* ═════════════════════════════════════════════════════════════════════════
   Card icons, check-marked lists and whole-card links.
   The live site leans heavily on gold Lucide icons — icon tiles on cards and
   check marks in every feature list. Without them the pages read as unbranded.
   ═════════════════════════════════════════════════════════════════════════ */

.sesar-card .sesar-tile,
.sesar-why-card .sesar-tile {
  width: 44px; height: 44px; border-radius: 12px;
  background: hsl(45 100% 60% / .12);
  color: var(--wp--preset--color--brand);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}

/* List items carry a gold check instead of a dot, matching live. */
.sesar-card ul,
.sesar-sec .sesar-inner > ul,
.sesar-faq-item ul { list-style: none; padding-left: 0; }
.sesar-card li,
.sesar-sec .sesar-inner > ul > li,
.sesar-faq-item li {
  display: flex; align-items: flex-start; gap: 10px;
  padding-left: 0; margin-bottom: 11px;
  font-size: 15px; line-height: 1.55;
  color: var(--wp--preset--color--muted);
}
/* The CSS dot is replaced by the inline icon. */
.sesar-card li::before,
.sesar-sec .sesar-inner > ul > li::before,
.sesar-faq-item li::before { content: none; }
.sesar-card li .sesar-icon,
.sesar-sec .sesar-inner > ul > li .sesar-icon,
.sesar-faq-item li .sesar-icon {
  color: var(--wp--preset--color--brand);
  flex: 0 0 auto; margin-top: 2px;
}

/* Whole-card links get the lift and a gold affordance, as live does. */
.sesar-card.is-linked { position: relative; transition: transform 220ms cubic-bezier(.16,1,.3,1), box-shadow 220ms cubic-bezier(.16,1,.3,1), border-color 220ms ease; }
.sesar-card.is-linked:hover {
  transform: translateY(-3px);
  border-color: hsl(45 100% 60% / .45);
  box-shadow: 0 20px 60px -10px hsl(0 0% 0% / .5);
}
.sesar-card-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: auto; padding-top: 14px;
  font-size: 14px; font-weight: 700;
  color: var(--wp--preset--color--brand); text-decoration: none;
}
.sesar-card.is-linked:hover .sesar-card-link { gap: 10px; }
/* Make the whole card clickable without nesting interactive elements. */
.sesar-card.is-linked .sesar-card-link::after { content: ""; position: absolute; inset: 0; }

/* Cards become flex columns so the link pins to the bottom and heights match. */
.sesar-card { display: flex; flex-direction: column; }

/* ---------------------------------------------------------------- stat band
   The live "15+ / 0 / ∞ / 5 min" row. Values carry the gold gradient (text-gradient
   on live), which needs a transparent colour for background-clip to show through. */
.sesar-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 40px;
  text-align: center;
}
@media (min-width: 782px) {
  .sesar-stats { grid-template-columns: repeat(4, 1fr); }
}
.sesar-stat { display: flex; flex-direction: column; gap: 6px; }
.sesar-stat-value {
  font-size: clamp(36px, 5vw, 48px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  background: var(--wp--preset--gradient--brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sesar-stat-label { font-size: 18px; font-weight: 600; color: var(--wp--preset--color--contrast); }
.sesar-stat-sub { font-size: 14px; color: var(--wp--preset--color--muted); }

/* The header sat at 110px because the logo/nav/CTA row wrapped onto two lines,
   dropping "Start Free Trial" below the links. Live keeps it on one row. */
.sesar-header .sesar-inner { flex-wrap: nowrap; }
.sesar-header .wp-block-navigation__container { flex-wrap: nowrap; }
.sesar-header .wp-block-navigation { flex-wrap: nowrap; }

/* Header was 126px against live's 65px: the logo rendered at 146x97 (live 84x56) and the
   nav's links, buttons and dropdown toggles sat on four different baselines. */
.sesar-header .sesar-inner { align-items: center; }
.sesar-header .wp-block-site-logo img { max-height: 56px; width: auto; }
.sesar-header .wp-block-navigation__container,
.sesar-header .wp-block-navigation-item { align-items: center; }
.sesar-header .wp-block-navigation__container > * { display: flex; align-items: center; }

/* ------------------------------------------------- section headers, live-matched
   Live centres the section title and lede and renders a trailing fragment of the
   heading in gold. Cards stay left-aligned inside that centred header. */
.sesar-sec > .sesar-inner > h2,
.sesar-sec > .sesar-inner > h2 + p {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.sesar-sec > .sesar-inner > h2 { max-width: 22ch; }
.sesar-sec > .sesar-inner > h2 + p {
  max-width: 42ch;
  font-size: 20px;
  color: var(--wp--preset--color--muted);
}
.is-accent {
  background: var(--wp--preset--gradient--brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Card contents are left-aligned on live — the icon tile and title included. */
.sesar-card { text-align: left; }
.sesar-card > .sesar-tile { margin-left: 0; }
.sesar-eyebrow {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--wp--preset--color--brand);
  margin-bottom: 6px;
}
.sesar-card > h3 { text-align: left; font-size: clamp(22px, 2.2vw, 30px); }

/* ------------------------------------------------ section backdrop photography
   Live puts a photo behind certain bands at opacity .2 under a top-to-bottom veil
   (Home.tsx: object-cover opacity-20 beneath bg-gradient-to-b). */
.sesar-sec:has(> .sesar-inner > .sesar-sec-bg),
.sesar-sec:has(> .sesar-sec-bg) { position: relative; overflow: hidden; }
.sesar-sec-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.sesar-sec-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .2;
  display: block;
}
.sesar-sec-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    var(--wp--preset--color--base),
    hsl(220 25% 8% / .95) 50%,
    var(--wp--preset--color--base)
  );
}
/* Keep the band's own content above the photo. */
.sesar-sec:has(.sesar-sec-bg) > .sesar-inner > *:not(.sesar-sec-bg) { position: relative; z-index: 1; }

/* A card's own figure — live renders it under the headline in gold. */
.sesar-card-stat { display: block; margin: 2px 0 10px; }
.sesar-card-stat b {
  display: block;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--wp--preset--color--brand);
}
.sesar-card-stat i {
  display: block;
  font-style: normal;
  font-size: 14px;
  color: var(--wp--preset--color--muted);
}

/* -------------------------------------------------------- comparison table
   SeSar vs others. Wide content scrolls inside its own container so the page
   body never scrolls sideways on a phone. */
.sesar-compare-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  margin-top: 40px;
}
.sesar-compare {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
  font-size: 15px;
}
.sesar-compare th,
.sesar-compare td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--wp--preset--color--border);
  text-align: center;
}
.sesar-compare thead th { font-weight: 600; }
.sesar-compare thead th:first-child,
.sesar-compare tbody th { text-align: left; font-weight: 500; }
.sesar-compare thead th:nth-child(2) { color: var(--wp--preset--color--brand); font-weight: 700; }
.sesar-compare thead th:nth-child(3) { color: var(--wp--preset--color--muted); }
.sesar-yes { color: var(--wp--preset--color--brand); display: inline-flex; }
.sesar-no { color: var(--wp--preset--color--muted); opacity: .65; display: inline-flex; }
.sesar-maybe { color: var(--wp--preset--color--muted); font-size: 14px; }
/* Deliberately NOT position:absolute. With no positioned ancestor these labels escaped to
   the initial containing block, landing 82px past the viewport and making the whole document
   wider than the screen on mobile — which also meant the page panned sideways instead of the
   table scrolling. A static 1x1 clipped box is still announced by screen readers. */
.screen-reader-text {
  display: inline-block;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  vertical-align: middle;
}

/* On a phone the table fits without scrolling if the feature column is allowed to wrap and
   the padding tightens — better than asking someone to drag a nested scroll area. */
@media (max-width: 640px) {
  .sesar-compare { min-width: 0; font-size: 13px; }
  .sesar-compare th,
  .sesar-compare td { padding: 10px 6px; }
  .sesar-compare thead th:first-child,
  .sesar-compare tbody th { max-width: 190px; line-height: 1.35; }
  .sesar-maybe { font-size: 12px; }
}

/* ------------------------------------------------------- testimonial carousel
   Live: one testimonial per slide in a max-w-4xl frame on the raised surface, with two
   blurred gold glows behind, a gold quote badge overhanging the card's top-left corner,
   and arrows either side of a row of dots (the active one a widened gold pill). */
/* overflow-x: clip, not hidden: the decorative glows sit 80px outside the box and were
   making the document 64px wider than a phone screen, but the quote badge overhangs the
   card vertically and must not be clipped. clip on one axis leaves the other alone, and
   unlike hidden it does not turn this into a scroll container. */
.sesar-quotes {
  position: relative;
  max-width: 900px;
  margin: 44px auto 0;
  overflow-x: clip;
}
.sesar-quotes::before,
.sesar-quotes::after {
  content: "";
  position: absolute;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: hsl(45 100% 60% / .05);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.sesar-quotes::before { top: -120px; left: -80px; }
.sesar-quotes::after { bottom: -120px; right: -80px; }
/* Fallback for browsers without overflow: clip — keep the glows inside the box. */
@supports not (overflow-x: clip) {
  .sesar-quotes::before { left: 0; }
  .sesar-quotes::after { right: 0; }
}

.sesar-quotes-track {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Room for the badge that overhangs the card. */
  padding: 28px 0 4px;
}
.sesar-quotes-track::-webkit-scrollbar { display: none; }

.sesar-quote {
  position: relative;
  flex: 0 0 100%;
  /* The slide is a flex basis of 100%, so its padding has to sit inside that width or the
     text runs past the card's right edge. */
  box-sizing: border-box;
  scroll-snap-align: start;
  background: var(--wp--preset--gradient--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 24px;
  padding: clamp(28px, 4vw, 48px);
  box-shadow: var(--wp--preset--shadow--premium);
}
.sesar-quote-badge {
  position: absolute;
  top: -24px; left: 32px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--wp--preset--color--brand);
  color: var(--wp--preset--color--brand-ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 40px hsl(45 100% 60% / .15);
}
/* Section paragraph rules are more specific than a lone class, so the pull-quote was
   inheriting muted grey instead of the foreground colour live uses. */
.sesar-quotes .sesar-quote-lead {
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--wp--preset--color--contrast);
  margin: 12px 0 26px;
}
.sesar-quotes .sesar-quote-body { color: var(--wp--preset--color--muted); line-height: 1.75; margin: 0 0 16px; }
.sesar-quote-by {
  display: flex; align-items: center; gap: 16px;
  margin-top: 26px; padding-top: 24px;
  border-top: 1px solid var(--wp--preset--color--border);
}
.sesar-quote-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: hsl(45 100% 60% / .1);
  color: var(--wp--preset--color--brand);
  font-size: 20px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.sesar-quote-who b { display: block; font-weight: 600; color: var(--wp--preset--color--contrast); }
.sesar-quote-who i { display: block; font-style: normal; font-size: 14px; color: var(--wp--preset--color--muted); }

.sesar-quotes-nav {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 32px;
}
.sesar-quote-arrow {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--surface-raised);
  color: var(--wp--preset--color--contrast);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.sesar-quote-arrow:hover {
  border-color: hsl(45 100% 60% / .5);
  color: var(--wp--preset--color--brand);
  background: var(--wp--preset--color--surface);
}
.sesar-quote-dots { display: flex; gap: 8px; align-items: center; }
.sesar-quote-dot {
  width: 8px; height: 8px;
  padding: 0; border: 0; cursor: pointer;
  border-radius: 999px;
  background: hsl(0 0% 65% / .3);
  transition: width .2s, background .2s;
}
.sesar-quote-dot:hover { background: hsl(0 0% 65% / .5); }
.sesar-quote-dot.is-current { width: 24px; background: var(--wp--preset--color--brand); }

/* Without the script the track is still a swipeable list, so hide the controls it drives. */
.no-js .sesar-quotes-nav { display: none; }

/* ------------------------------------------------------------- Gravity Forms
   GF 2.9 renders with its "Orbital" theme (gform-theme--framework), not the older
   gravity-theme classes, and it is designed to be recoloured through its own custom
   properties. Setting those handles every state — hover, focus, error, disabled —
   consistently, instead of overriding each control by hand. */
.gform_wrapper.gform-theme,
.gform_wrapper .gform-theme--framework {
  /* Controls */
  --gf-ctrl-bg-color: var(--wp--preset--color--input);
  --gf-ctrl-bg-color-hover: var(--wp--preset--color--input);
  --gf-ctrl-bg-color-focus: var(--wp--preset--color--input);
  --gf-ctrl-border-color: var(--wp--preset--color--border);
  --gf-ctrl-border-color-hover: hsl(45 100% 60% / .4);
  --gf-ctrl-border-color-focus: var(--wp--preset--color--brand);
  --gf-ctrl-border-color-error: var(--wp--preset--color--destructive);
  --gf-ctrl-color: var(--wp--preset--color--contrast);
  --gf-ctrl-color-hover: var(--wp--preset--color--contrast);
  --gf-ctrl-color-focus: var(--wp--preset--color--contrast);
  --gf-ctrl-placeholder-color: var(--wp--preset--color--muted);

  /* Labels and helper text */
  --gf-ctrl-label-color-primary: var(--wp--preset--color--contrast);
  --gf-ctrl-label-color-secondary: var(--wp--preset--color--muted);
  --gf-ctrl-label-color-tertiary: var(--wp--preset--color--muted);
  --gf-ctrl-label-color-req: var(--wp--preset--color--brand);
  --gf-ctrl-desc-color: var(--wp--preset--color--muted);

  /* Submit button */
  --gf-ctrl-btn-bg-color-primary: var(--wp--preset--color--brand);
  --gf-ctrl-btn-bg-color-hover-primary: var(--wp--preset--color--brand-soft);
  --gf-ctrl-btn-bg-color-focus-primary: var(--wp--preset--color--brand-soft);
  --gf-ctrl-btn-color-primary: var(--wp--preset--color--brand-ink);
  --gf-ctrl-btn-color-hover-primary: var(--wp--preset--color--brand-ink);
  --gf-ctrl-btn-color-focus-primary: var(--wp--preset--color--brand-ink);
  --gf-ctrl-btn-border-color-primary: var(--wp--preset--color--brand);
  --gf-ctrl-btn-border-color-hover-primary: var(--wp--preset--color--brand-soft);

  /* Neutrals GF uses for text and rules outside the controls themselves. */
  --gf-color-primary: var(--wp--preset--color--brand);
  --gf-color-primary-contrast: var(--wp--preset--color--brand-ink);
  --gf-color-primary-darker: var(--wp--preset--color--brand-soft);
  --gf-color-primary-lighter: var(--wp--preset--color--brand-soft);
  --gf-color-out-ctrl-light: var(--wp--preset--color--base);
  --gf-color-out-ctrl-dark: var(--wp--preset--color--contrast);
  --gf-color-out-ctrl-dark-darker: var(--wp--preset--color--contrast);
  --gf-color-out-ctrl-dark-lighter: var(--wp--preset--color--muted);
  --gf-color-danger: var(--wp--preset--color--destructive);
}

/* Shape and rhythm, which are not exposed as theme variables. */
.gform_wrapper .gform_fields { row-gap: 22px; }
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="url"],
.gform_wrapper select,
.gform_wrapper textarea {
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15px;
}
.gform_wrapper textarea { min-height: 140px; line-height: 1.6; }
.gform_wrapper .gform_button {
  border-radius: 12px;
  padding: 14px 26px;
  font-weight: 700;
  cursor: pointer;
}
.gform_wrapper .gform_button:hover { box-shadow: 0 0 40px hsl(45 100% 60% / .15); }
.gform_wrapper .gfield_radio input,
.gform_wrapper .gfield_checkbox input { accent-color: var(--wp--preset--color--brand); }

.gform_confirmation_message {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-left: 3px solid var(--wp--preset--color--brand);
  border-radius: 12px;
  padding: 20px 24px;
  color: var(--wp--preset--color--contrast);
}

/* The datepicker is appended to the body, outside the themed wrapper. */
#ui-datepicker-div {
  background: var(--wp--preset--color--surface-raised);
  border: 1px solid var(--wp--preset--color--border);
  color: var(--wp--preset--color--contrast);
}
#ui-datepicker-div a { color: var(--wp--preset--color--contrast); }
#ui-datepicker-div .ui-state-active { background: var(--wp--preset--color--brand); color: var(--wp--preset--color--brand-ink); }

/* A single-column form needs a readable measure. */
.sesar-sec.is-form .sesar-inner { max-width: 720px; }

/* Gravity Forms prints a per-form <style> block keyed on #gform_wrapper_{id}, so its
   defaults outrank any class-based rule here no matter how specific. Overriding the
   handful of colour variables is the only way to win that without hard-coding form ids,
   and it is contained to custom properties rather than to real declarations. */
.gform_wrapper.gform-theme {
  --gf-color-out-ctrl-dark: var(--wp--preset--color--contrast) !important;
  --gf-color-out-ctrl-dark-darker: var(--wp--preset--color--contrast) !important;
  --gf-color-out-ctrl-dark-lighter: var(--wp--preset--color--muted) !important;
  --gf-color-out-ctrl-light: var(--wp--preset--color--base) !important;
  --gf-ctrl-label-color-primary: var(--wp--preset--color--contrast) !important;
  /* Choice labels (radio/checkbox) take the secondary colour, so this has to stay
     legible rather than muted; helper text uses --gf-ctrl-desc-color instead. */
  --gf-ctrl-label-color-secondary: var(--wp--preset--color--contrast) !important;
  --gf-ctrl-label-color-req: var(--wp--preset--color--brand) !important;
  --gf-ctrl-desc-color: var(--wp--preset--color--muted) !important;
  --gf-ctrl-color: var(--wp--preset--color--contrast) !important;
  --gf-ctrl-bg-color: var(--wp--preset--color--input) !important;
  --gf-ctrl-border-color: var(--wp--preset--color--border) !important;
  --gf-ctrl-placeholder-color: var(--wp--preset--color--muted) !important;
}

/* The datepicker trigger is a dark icon image, invisible against a dark input. */
.gform_wrapper .ui-datepicker-trigger,
.gform_wrapper img.ui-datepicker-trigger {
  filter: invert(1) brightness(1.6);
  opacity: .75;
  cursor: pointer;
}
.gform_wrapper .ui-datepicker-trigger:hover { opacity: 1; }
.gform_wrapper .gfield_radio .gchoice,
.gform_wrapper .gfield_checkbox .gchoice { margin-bottom: 6px; }

/* ------------------------------------------------------------ ROI calculator
   Live: inputs card on the left, a gold ROI card and an annual-savings card on the
   right, then "How You Save" as a four-card grid underneath. */
.sesar-roi { margin-top: 44px; }
.sesar-roi-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .sesar-roi-grid { grid-template-columns: 1.1fr 1fr; }
}
.sesar-roi-panel {
  background: var(--wp--preset--gradient--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 16px;
  padding: clamp(22px, 3vw, 32px);
}
.sesar-roi-panel h3 { font-size: 20px; margin: 0 0 24px; }
.sesar-roi-field { margin-bottom: 26px; }
.sesar-roi-field:last-child { margin-bottom: 0; }
.sesar-roi-field-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 10px;
}
.sesar-roi-field-head label { font-size: 14px; font-weight: 500; color: var(--wp--preset--color--contrast); }
.sesar-roi-field-head output { font-weight: 700; color: var(--wp--preset--color--brand); }
.sesar-roi-scale {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--wp--preset--color--muted);
  margin-top: 6px;
}

/* Range input, styled in both engines — the default control is unreadable on dark. */
.sesar-roi-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--wp--preset--color--brand) 0 var(--fill, 50%),
    var(--wp--preset--color--border) var(--fill, 50%) 100%
  );
  outline: none; cursor: pointer;
}
.sesar-roi-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--wp--preset--color--brand);
  border: 3px solid var(--wp--preset--color--base);
  box-shadow: 0 0 0 1px var(--wp--preset--color--brand);
  cursor: pointer;
}
.sesar-roi-range::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--wp--preset--color--brand);
  border: 3px solid var(--wp--preset--color--base);
  cursor: pointer;
}
.sesar-roi-range:focus-visible { box-shadow: 0 0 0 3px hsl(45 100% 60% / .25); }

.sesar-roi-results { display: grid; gap: 16px; }
.sesar-roi-headline {
  background: var(--wp--preset--color--brand);
  color: var(--wp--preset--color--brand-ink);
  border-radius: 16px;
  padding: clamp(22px, 3vw, 32px);
}
.sesar-roi-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.sesar-roi-row span { opacity: .8; font-size: 15px; }
.sesar-roi-row b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.sesar-roi-row.is-total {
  border-top: 1px solid hsl(220 25% 8% / .2);
  padding-top: 16px; margin-top: 18px; margin-bottom: 0;
}
.sesar-roi-row.is-total span { opacity: 1; font-size: 17px; font-weight: 600; }
.sesar-roi-row.is-total b { font-size: 30px; }

.sesar-roi-annual {
  background: var(--wp--preset--gradient--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 16px;
  padding: clamp(20px, 3vw, 28px);
  display: flex;
  align-items: center;
  gap: 18px;
}
.sesar-roi-annual-icon {
  width: 56px; height: 56px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: hsl(45 100% 60% / .1);
  color: var(--wp--preset--color--brand);
  display: flex; align-items: center; justify-content: center;
}
.sesar-roi .sesar-roi-annual p { margin: 0; font-size: 14px; color: var(--wp--preset--color--muted); }
/* Needs to outrank `.sesar-roi .sesar-roi-annual p`, which sets the muted label colour
   and was flattening the gradient to solid grey. */
.sesar-roi .sesar-roi-annual p.sesar-roi-annual-value {
  margin-top: 6px !important;
  font-size: clamp(28px, 3.4vw, 34px);
  font-weight: 800;
  letter-spacing: -.02em;
  background: var(--wp--preset--gradient--brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sesar-roi-breakdown-title { text-align: center; font-size: 20px; margin: 40px 0 22px; }
.sesar-roi-breakdown {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .sesar-roi-breakdown { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .sesar-roi-breakdown { grid-template-columns: repeat(4, 1fr); } }
.sesar-roi-card {
  background: var(--wp--preset--gradient--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 14px;
  padding: 20px;
}
.sesar-roi-card-icon { color: var(--wp--preset--color--brand); display: block; margin-bottom: 12px; }
.sesar-roi .sesar-roi-card-label { margin: 0 0 4px; font-weight: 600; color: var(--wp--preset--color--contrast); }
.sesar-roi .sesar-roi-card-desc { margin: 0 0 12px; font-size: 12px; line-height: 1.55; color: var(--wp--preset--color--muted); }
.sesar-roi .sesar-roi-card p.sesar-roi-card-value { margin: 0; font-size: 20px; font-weight: 700; color: var(--wp--preset--color--brand); }
.sesar-roi .sesar-roi-note {
  text-align: center;
  max-width: 42rem;
  margin: 32px auto 0;
  color: var(--wp--preset--color--muted);
}
.sesar-roi-note strong { color: var(--wp--preset--color--contrast); }

/* --------------------------------------------------------------- icon chips
   Live renders these as a compact icon+label grid. They reached the export as a run
   of bare one-line paragraphs, so without this they read as a wall of plain text. */
.sesar-chips {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  margin-top: 28px;
}
@media (min-width: 620px) { .sesar-chips { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .sesar-chips { grid-template-columns: repeat(4, 1fr); } }
.sesar-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  background: var(--wp--preset--color--surface);
  font-size: 15px;
  font-weight: 500;
  color: var(--wp--preset--color--contrast);
}
.sesar-chip-icon {
  color: var(--wp--preset--color--brand);
  display: flex;
  flex: 0 0 auto;
}

/* -------------------------------------------------------------------- video
   Both self-hosted clips and YouTube embeds sit in a 16:9 frame that matches the
   surrounding card radius. aspect-ratio keeps the box reserved before the media
   loads, so the page does not jump. */
.sesar-video {
  margin: 32px auto 0;
  max-width: 900px;
  display: flex;
  justify-content: center;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--surface);
}
/* No forced 16:9 and no object-fit: sesar-intro-video.mp4 is a 480x848 PORTRAIT clip, so
   cropping it to landscape would cut the content out. Live sets width:100% with no cap,
   which upscales that 480px source to 1022px wide and 2076px tall — blurry and taller than
   two screens. Capping the height instead keeps the clip near its native size and centres
   it; landscape clips are unaffected because their height never reaches the cap. */
.sesar-video video {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 70vh;
  height: auto;
  margin: 0 auto;
}
.sesar-video.is-embed {
  position: relative;
  aspect-ratio: 16 / 9;
}
.sesar-video.is-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ------------------------------------------------------- Features dropdown
   Live shows an icon, a label and a one-line description per item. The core
   submenu is a plain link list, so these rules lay out the injected markup. */
.sesar-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
  background: var(--wp--preset--color--surface-raised);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 14px;
  padding: 8px;
  box-shadow: var(--wp--preset--shadow--premium);
  /* Core sizes the submenu to max-content, which at 200px wrapped every two-word label
     onto a second line and made the panel needlessly tall. */
  width: 320px;
  min-width: 320px;
  max-width: none;
}
.sesar-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--wp--preset--color--contrast);
  transition: background .15s, color .15s;
}
.sesar-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: hsl(45 100% 60% / .08);
  color: var(--wp--preset--color--brand);
}
.sesar-nav-icon {
  color: var(--wp--preset--color--brand);
  flex: 0 0 auto;
  margin-top: 2px;
}
.sesar-nav-text { display: flex; flex-direction: column; gap: 2px; }
.sesar-nav-desc {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--wp--preset--color--muted);
  white-space: normal;
}
/* The dropdown is wider than a normal menu item, so let it size to its content. */
.sesar-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item { width: 100%; }

/* Core pins the open submenu to width:auto / min-width:200px via
   `.has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] + …`, which is more
   specific than a plain container rule. Matching the same shape is the only way to set the
   width without !important — at 200px every two-word label wrapped. */
.sesar-header .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container {
  width: 320px;
  min-width: 320px;
  max-width: none;
}

/* --------------------------------------------------- mobile navigation overlay
   The block navigation's overlay ships with a light background and its own layout.
   Unstyled it rendered as a white sheet with the links running off the right edge
   on a dark site. */
.sesar-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  padding: 24px 20px 40px;
}
.sesar-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding-top: 12px;
}
.sesar-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.sesar-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  width: 100%;
  min-width: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.sesar-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  width: 100%;
}
.sesar-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 8px;
  font-size: 17px;
  color: var(--wp--preset--color--contrast);
  border-bottom: 1px solid var(--wp--preset--color--border);
}
/* Nested feature links read as children of Features, not as top-level items. */
.sesar-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding-left: 20px;
  font-size: 15px;
  border-bottom: 0;
}
.sesar-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open .sesar-nav-desc { display: none; }
.sesar-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle { color: var(--wp--preset--color--contrast); }
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
  color: var(--wp--preset--color--contrast);
}
/* The two header CTAs should still read as buttons in the overlay. */
.sesar-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open .is-cta-primary .wp-block-navigation-item__content {
  background: var(--wp--preset--color--brand);
  color: var(--wp--preset--color--brand-ink);
  border-radius: 12px;
  justify-content: center;
  margin-top: 12px;
  border-bottom: 0;
  font-weight: 700;
}
.sesar-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open .is-cta-outline .wp-block-navigation-item__content {
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  justify-content: center;
  margin-top: 12px;
  font-weight: 600;
}

/* The header's backdrop-filter makes it the containing block for any fixed-position
   descendant, so the mobile menu overlay — position:fixed; inset:0 — was being clipped to
   the 64px header instead of filling the viewport. The blur only exists to frost content
   scrolling underneath, which is irrelevant while a full-screen menu covers the page. */
.sesar-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ------------------------------------------------ accounting integrations panel
   Two columns on desktop: prose and benefits left, three platform cards right, each
   outlined in that platform's own brand colour (passed in as --acct). */
.sesar-acct {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
  max-width: 1100px;
  margin: 44px auto 0;
}
@media (min-width: 900px) {
  .sesar-acct { grid-template-columns: 1fr 1fr; gap: 64px; }
}
.sesar-acct-col p { color: var(--wp--preset--color--muted); line-height: 1.75; margin: 0 0 18px; }
.sesar-acct-col ul { margin: 22px 0 0; }
.is-brandname { color: var(--wp--preset--color--brand); font-weight: 600; }

.sesar-acct-cards { display: flex; flex-direction: column; gap: 20px; }
.sesar-acct-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px;
  border-radius: 16px;
  border: 2px solid var(--acct, var(--wp--preset--color--border));
  background: var(--wp--preset--gradient--surface);
  text-decoration: none;
  transition: box-shadow .2s, transform .2s;
}
.sesar-acct-card:hover {
  box-shadow: var(--wp--preset--shadow--premium);
  transform: translateY(-2px);
}
.sesar-acct-logo {
  width: 56px; height: 56px;
  flex: 0 0 auto;
  border-radius: 12px;
  border: 1px solid var(--acct);
  background: color-mix(in srgb, var(--acct) 10%, transparent);
  color: var(--acct);
  font-size: 20px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}
.sesar-acct-text { display: flex; flex-direction: column; gap: 2px; }
.sesar-acct-text b { font-size: 18px; font-weight: 700; color: var(--acct); }
.sesar-acct-card:hover .sesar-acct-text b { text-decoration: underline; }
.sesar-acct-text i { font-style: normal; font-size: 14px; color: var(--wp--preset--color--muted); }
.sesar-acct-caption {
  text-align: center;
  font-size: 14px;
  font-style: italic;
  color: var(--wp--preset--color--muted);
  margin: 8px 0 0;
}
.sesar-acct-note {
  max-width: 900px;
  margin: 56px auto 0;
  padding: 30px;
  text-align: center;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 16px;
  background: var(--wp--preset--gradient--surface);
}
.sesar-acct-note p { margin: 0; color: var(--wp--preset--color--muted); line-height: 1.75; }

/* The benefits list sits inside a raw HTML block, so the theme's usual list rules do not
   reach it — it rendered with default bullets and the tick on its own line. */
.sesar-acct-col ul {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}
.sesar-acct-col ul li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 12px;
  color: var(--wp--preset--color--muted);
  line-height: 1.6;
}
.sesar-acct-col ul li .sesar-icon {
  color: var(--wp--preset--color--brand);
  flex: 0 0 auto;
  margin-top: 2px;
}

/* --------------------------------------------------------- before/after rows
   Each pair is one card split in two: the old way with a red cross, the new with a
   gold tick. Flattened to alternating paragraphs the two were indistinguishable. */
.sesar-ba { display: flex; flex-direction: column; gap: 14px; margin-top: 32px; }
.sesar-ba-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 14px;
  background: var(--wp--preset--gradient--surface);
}
@media (min-width: 780px) {
  .sesar-ba-row { grid-template-columns: 1fr 1fr; gap: 24px; }
}
.sesar-ba-side { display: flex; align-items: flex-start; gap: 12px; }
.sesar-ba-side > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.sesar-ba-side i {
  font-style: normal;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}
.sesar-ba-side b { font-weight: 500; color: var(--wp--preset--color--contrast); line-height: 1.5; }
.sesar-ba-mark { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.is-before .sesar-ba-mark {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--wp--preset--color--destructive);
  color: #fff;
  font-size: 12px; font-weight: 700;
  margin-top: 2px;
}
.is-after .sesar-ba-mark { color: var(--wp--preset--color--brand); margin-top: 1px; }

/* ------------------------------------------------------ admin cost calculator
   Number inputs on the left, four money outputs stacked on the right, the last of
   them picked out in the brand colour as live does. */
.sesar-admin {
  max-width: 900px;
  margin: 40px auto 0;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 18px;
  background: var(--wp--preset--gradient--surface);
}
.sesar-admin-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 820px) { .sesar-admin-grid { grid-template-columns: 1fr 1fr; gap: 36px; } }
.sesar-admin-fields { display: flex; flex-direction: column; gap: 18px; }
.sesar-admin-field { display: flex; flex-direction: column; gap: 8px; }
.sesar-admin-field label { font-size: 14px; font-weight: 500; color: var(--wp--preset--color--contrast); }
.sesar-admin-input {
  background: var(--wp--preset--color--input);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  color: var(--wp--preset--color--contrast);
  padding: 12px 14px;
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;
}
.sesar-admin-input:focus {
  outline: none;
  border-color: var(--wp--preset--color--brand);
  box-shadow: 0 0 0 3px hsl(45 100% 60% / .18);
}
.sesar-admin-outs { display: flex; flex-direction: column; gap: 14px; }
.sesar-admin-out {
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--wp--preset--color--surface);
}
.sesar-admin-out span { display: block; font-size: 14px; color: var(--wp--preset--color--muted); }
.sesar-admin-out b { display: block; font-size: 24px; font-weight: 700; color: var(--wp--preset--color--contrast); }
.sesar-admin-out.is-highlight {
  border: 2px solid var(--wp--preset--color--brand);
  background: hsl(45 100% 60% / .1);
}
.sesar-admin-out.is-highlight span { color: var(--wp--preset--color--brand); }
.sesar-admin-out.is-highlight b { font-size: 30px; color: var(--wp--preset--color--brand); }

/* Attribution runs to one line on the homepage (role only) and three on the feature pages
   (person, role, location) — the same component, fed different data. */
.sesar-quote-who u {
  display: block;
  text-decoration: none;
  font-size: 14px;
  color: var(--wp--preset--color--brand);
}

/* ------------------------------------------------- AI receptionist voice demo
   Live makes the mascot itself the control: a gold-bordered card with "Tap to chat"
   underneath, roughly half the column width and centred. The ElevenLabs embed is
   ~1.5MB so it is fetched on first tap, not on page load. */
.sesar-convai { margin-top: 28px; text-align: center; }

.sesar-convai-stage {
  position: relative;
  display: inline-block;
  max-width: min(420px, 60%);
  margin: 0 auto;
}
.sesar-convai-tap {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.sesar-convai-tap:disabled { cursor: default; }
.sesar-convai-tap[hidden] { display: none; }
.sesar-convai-tap:disabled { cursor: default; }

.sesar-convai-frame {
  display: block;
  overflow: hidden;
  border: 2px solid hsl(45 100% 60% / .6);
  border-radius: 16px;
  transition: border-color .3s, box-shadow .3s;
}
.sesar-convai-tap:hover .sesar-convai-frame,
.sesar-convai-tap:focus-visible .sesar-convai-frame {
  border-color: var(--wp--preset--color--brand);
  box-shadow: 0 0 40px hsl(45 100% 60% / .15);
}
.sesar-convai-media {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  transition: transform .3s;
}
.sesar-convai-tap:hover .sesar-convai-media { transform: scale(1.05); }

/* A button now, not a caption: the words are the call to action and people click them.
   Reset the browser's button chrome and keep the underline that says "this does something". */
.sesar-convai-label {
  display: block;
  margin: 10px auto 0;
  padding: 4px 6px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--wp--preset--color--brand);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  border-radius: 6px;
}

.sesar-convai-label:hover { text-decoration-thickness: 2px; }

.sesar-convai-label:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand);
  outline-offset: 2px;
}

/* While connecting it reports progress rather than offering an action. */
.sesar-convai-label:disabled {
  cursor: default;
  text-decoration: none;
  color: var(--wp--preset--color--muted);
}
.sesar-convai-note[hidden] { display: none; }
.sesar-convai-note {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--wp--preset--color--muted);
}
.sesar-convai-mount { margin-top: 18px; }
/* The message itself is set in JS so it can name the actual problem; this only colours it. */
.sesar-convai.is-failed .sesar-convai-note { color: var(--wp--preset--color--destructive); }

/* The clip is paused by default and plays on hover, so the page does not stream video
   to every visitor who scrolls past. */
@media (prefers-reduced-motion: reduce) {
  .sesar-convai-tap:hover .sesar-convai-media { transform: none; }
}

/* The conversation runs in place, so the connected state sits under the mascot rather than
   in a floating panel. */
.sesar-convai-live {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
}
.sesar-convai-live[hidden] { display: none; }
.sesar-convai-pulse {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--wp--preset--color--brand);
  animation: sesar-pulse 1.4s ease-in-out infinite;
}
@keyframes sesar-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.8); }
}
@media (prefers-reduced-motion: reduce) {
  .sesar-convai-pulse { animation: none; }
}
.sesar-convai-status { font-size: 14px; font-weight: 500; color: var(--wp--preset--color--contrast); }
.sesar-convai-end {
  border: 1px solid var(--wp--preset--color--destructive);
  background: transparent;
  color: var(--wp--preset--color--destructive);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.sesar-convai-end:hover { background: hsl(4 86% 58% / .12); }
/* The border glows while a conversation is running. */
.sesar-convai[data-state="connected"] .sesar-convai-frame {
  border-color: var(--wp--preset--color--brand);
  box-shadow: 0 0 40px hsl(45 100% 60% / .2);
}

/* Mute control for the mascot clip. It sits over the corner of the frame rather than inside
   the tap target, which cannot contain another button. */
.sesar-convai-mute[hidden] { display: none; }

.sesar-convai-mute {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid hsl(45 100% 60% / .4);
  border-radius: 50%;
  background: hsl(220 25% 8% / .72);
  backdrop-filter: blur(6px);
  color: var(--wp--preset--color--contrast);
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.sesar-convai-mute:hover {
  border-color: var(--wp--preset--color--brand);
  color: var(--wp--preset--color--brand);
}
/* One icon or the other, never both. */
.sesar-convai-mute .is-off { display: none; }
.sesar-convai.is-muted .sesar-convai-mute .is-on { display: none; }
.sesar-convai.is-muted .sesar-convai-mute .is-off { display: flex; }

.sesar-convai-label[hidden] { display: none; }

/* ---------------------------------------------------------------- hosted embed
   Frames SeSar's own sign-up flow inside a page section. The flow carries its own
   site header, so the wrapper clips that off the top rather than showing a second
   one; --sesar-embed-crop is how far up the frame is pulled.

   The frame's own background is the same navy as this site, so no seam shows where
   one ends and the other begins — which is why there is no card or border here. */
.sesar-embed {
  position: relative;
  overflow: hidden;
  height: var(--sesar-embed-height, 900px);
  border-radius: 14px;
  /* Wider than the reading column it sits in. The flow lays its bullets and its form side
     by side above ~1000px; squeezed into the text measure it stacks them instead, which
     doubles the height and reads as an accident rather than a panel. */
  width: min(1180px, 100vw - 40px);
  margin-inline: calc(50% - min(590px, 50vw - 20px));
}

/* The section exists only to hold the frame, so it does not need the padding a section of
   text does. */
.sesar-sec.is-embed .sesar-inner { padding-block: 0; }

.sesar-embed-frame {
  display: block;
  width: 100%;
  /* Taller than the wrapper by exactly the crop, so the visible area still reaches
     the bottom of the flow after the top has been pulled out of view. */
  height: calc(var(--sesar-embed-height, 900px) + var(--sesar-embed-crop, 0px));
  margin-top: calc(-1 * var(--sesar-embed-crop, 0px));
  border: 0;
}

@media (max-width: 782px) {
  /* Stacked, the flow is roughly 400px taller than it is side by side. The allowance is
     deliberately past what the first step needs: the frame cannot tell us how tall the
     later steps are, and spare navy below the fold costs nothing when the frame and the
     page share a background, where a scrollbar inside a payment form costs a sign-up. */
  .sesar-embed { height: calc(var(--sesar-embed-height, 900px) + 400px); }
  .sesar-embed-frame { height: calc(var(--sesar-embed-height, 900px) + 400px + var(--sesar-embed-crop, 0px)); }
}

/* ------------------------------------------------------------------- section note
   An aside about a whole section — "Note: after booking you'll receive…" — set below
   the cards it refers to rather than inside the last one. Framed like live's: a panel
   on the raised surface with the lead word carrying the foreground colour. */
/* Matched at the same depth as the section-lede rule above, which caps a section's direct
   paragraphs at a 64ch reading measure. The note is a panel spanning the grid it belongs to,
   not a line of prose, and at plain `.sesar-note` it lost and stopped 400px short. */
.sesar-sec .sesar-inner > p.sesar-note,
.sesar-note {
  /* border-box so the padding and border sit inside the 100%, otherwise the panel overhangs
     the grid it is meant to line up with by exactly its own padding. */
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-top: 32px;
  padding: 20px 24px;
  background: var(--wp--preset--color--surface, #1b2130);
  border: 1px solid var(--wp--preset--color--line-default, rgba(255, 255, 255, .1));
  border-radius: 12px;
  color: var(--wp--preset--color--ink-300, rgba(255, 255, 255, .65));
  font-size: 15px;
  line-height: 1.6;
  text-align: left;
}

.sesar-note strong { color: var(--wp--preset--color--contrast, #fafafa); }

/* ------------------------------------------------------- card grid of one
   A grid column stretches to fill its track, so a set reduced to a single card
   spanned the full content width with its text hugging the left edge — it read as
   a layout fault rather than a deliberate single card. Sizing it like one column
   of the grid it belongs to, centred, makes it look intended.

   Applies wherever a set ends up with one card; today that is the two places the
   AI Chatbot and Business Telecoms cards were removed from. */
.sesar-grid:has(> .sesar-card:only-child) {
  max-width: 460px;
  margin-inline: auto;
}

/* …but in a left-aligned section it stays on the left edge with everything else. Centred
   there it floated in the middle of a column of flush-left copy. */
.sesar-sec.is-flush .sesar-grid:has(> .sesar-card:only-child) { margin-inline: 0; }

/* ══════════════════════ Split hero: copy beside a mock-up panel ══════════════════════
   Live builds this hero as two columns — the pitch on the left, a mocked-up phone call on
   the right. The scrape saw only the panel's text, so it arrived as loose paragraphs under
   the lede. */

.sesar-hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

@media (max-width: 980px) {
  .sesar-hero-split { grid-template-columns: minmax(0, 1fr); }
}

/* The benefit statement above the H1. */
.sesar-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  margin-bottom: 22px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--wp--preset--color--brand) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--brand) 30%, transparent);
  color: var(--wp--preset--color--brand);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}

.sesar-hero-badge .sesar-icon { flex: 0 0 auto; }

/* The H1 in a split hero has a column of its own, so the 18ch cap that keeps a full-width
   heading from running away is too tight here. */
.sesar-hero-split .sesar-hero-copy h1 { max-width: 14ch; }
.sesar-hero-split .sesar-hero-copy > p { max-width: 46ch; }

/* ---- the mocked call ---- */
.sesar-callpanel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(24px, 3vw, 44px);
  border-radius: 26px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--wp--preset--color--brand) 16%, transparent),
    color-mix(in srgb, var(--wp--preset--color--brand) 6%, transparent));
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--brand) 22%, transparent);
}

/* The robot badge live hangs off the panel's top-right corner. */
.sesar-callpanel-bot {
  position: absolute;
  top: -18px;
  right: -18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--wp--preset--color--brand);
  color: var(--wp--preset--color--brand-ink, #0f131a);
  box-shadow: 0 14px 34px -12px rgb(0 0 0 / .65);
}

.sesar-callcard {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--wp--preset--color--base) 82%, transparent);
  border: 1px solid var(--wp--preset--color--border);
  backdrop-filter: blur(6px);
}

/* The customer's line is tinted, so the two voices in the exchange read apart. */
.sesar-callcard.is-accent {
  background: color-mix(in srgb, var(--wp--preset--color--brand) 12%, transparent);
  border-color: color-mix(in srgb, var(--wp--preset--color--brand) 26%, transparent);
}

.sesar-callcard-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--wp--preset--color--brand) 14%, transparent);
  color: var(--wp--preset--color--brand);
}

.sesar-callcard-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--wp--preset--color--contrast);
  font-weight: 600;
}

.sesar-callcard.is-accent .sesar-callcard-body,
.sesar-callcard:not(:first-child) .sesar-callcard-body { font-weight: 400; }

.sesar-callcard-caption {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--wp--preset--color--muted);
}

/* ---- the gold benefits band ---- */
.sesar-benefitbar {
  background: var(--wp--preset--color--brand);
  color: var(--wp--preset--color--brand-ink, #0f131a);
  padding: 18px clamp(16px, 4vw, 32px);
}

.sesar-benefitbar ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Live's own measurements — max-w-7xl and gap-x-8. At the 1200px/38px this started with,
     the six items needed 1274px and the last one dropped to a line of its own. */
  gap: 12px 32px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.sesar-benefitbar li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.sesar-benefitbar li::before { content: none; }
.sesar-benefitbar .sesar-icon { flex: 0 0 auto; opacity: .8; }

/* ═══════════════ Card furniture recovered from the components ═══════════════
   A step numeral, a price and a corner badge — all of which lived in the JSX and so
   never reached the scraped DOM. The pricing card in particular went live naming no
   figure at all. */

.sesar-card.has-step,
.sesar-card.has-badge { position: relative; }

/* The ghosted "01" live draws behind each how-it-works step. */
.sesar-card-step {
  display: block;
  font-size: clamp(44px, 5vw, 64px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: color-mix(in srgb, var(--wp--preset--color--brand) 22%, transparent);
  margin-bottom: 6px;
}

.sesar-card-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 14px 0 4px;
}

.sesar-card-price b {
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--wp--preset--color--contrast);
}

.sesar-card-price span {
  font-size: 15px;
  color: var(--wp--preset--color--muted);
}

.sesar-card-pricenote {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--wp--preset--color--brand);
}

/* The "Unlimited Minutes" pill in the pricing card's top corner. */
.sesar-card-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--wp--preset--color--brand);
  color: var(--wp--preset--color--brand-ink, #0f131a);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

/* Room for the badge so it never sits over the heading. */
.sesar-card.has-badge > h3 { padding-right: 150px; }

.sesar-card.is-priced {
  border-color: color-mix(in srgb, var(--wp--preset--color--brand) 45%, var(--wp--preset--color--border));
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--wp--preset--color--brand) 7%, var(--wp--preset--color--base)),
    var(--wp--preset--color--base));
}

@media (max-width: 600px) {
  /* A 150px reservation is most of a phone's width; the badge wraps under instead. */
  .sesar-card-badge { position: static; margin-bottom: 12px; }
  .sesar-card.has-badge > h3 { padding-right: 0; }
}

/* ═══════════════════════════ Pain points ═══════════════════════════
   "If any of this sounds familiar" — the problems a workshop has before SeSar. Live
   tints these warm rather than gold: they are the things going wrong, and the same gold
   as the feature cards would read as another list of benefits. */

.sesar-pain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

/* Matched with three classes so it beats `.sesar-sec .sesar-inner > ul > li`, the site's
   general bullet rule. That rule strips the browser's list indent and sets its own gap,
   alignment, line-height and colour — at a plain `.sesar-pain` it was winning all of them,
   so the icons sat hard against the card edge and the text came out muted and loosely set.
   Only the properties it does not touch — the border, radius and background — were landing,
   which is why the cards still looked like cards. */
.sesar-sec .sesar-pain-grid .sesar-pain {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 20px 22px;
  border-radius: 16px;
  background: linear-gradient(135deg,
    var(--wp--preset--color--surface),
    color-mix(in srgb, var(--wp--preset--color--surface) 80%, var(--wp--preset--color--base)));
  border: 1px solid var(--wp--preset--color--border);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--wp--preset--color--contrast);
  text-align: left;
}

.sesar-sec .sesar-pain-grid .sesar-pain::before { content: none; }

.sesar-pain-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: color-mix(in srgb, #f0662f 22%, transparent);
  color: #ff8a5c;
}

@media (max-width: 980px) {
  /* The badge hangs off the panel corner, as live draws it. At the desktop -18px it cleared
     the viewport edge by a pixel on a phone; tucking it fully inside instead put it on top of
     the first call card. A smaller overhang keeps the look and collides with neither. */
  .sesar-callpanel-bot {
    top: -10px;
    right: -8px;
    width: 46px;
    height: 46px;
  }
}

/* ═════════════════ Emphasis line and quote panel ═════════════════
   Live builds this section as an argument that lands: three grey paragraphs, then the
   punchline in white, then the quote in a gold-edged panel. The scrape flattened all of
   it to identical grey paragraphs. */

.sesar-sec .sesar-inner > .sesar-emphasis,
.sesar-emphasis {
  max-width: 64ch;
  margin: 20px 0 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--wp--preset--color--contrast);
}

.sesar-callout {
  box-sizing: border-box;
  width: 100%;
  max-width: 64ch;
  margin: 32px auto 0;
  padding: 28px 32px;
  border-radius: 18px;
  /* Gold-edged rather than the usual hairline: this is the line live wants read twice. */
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--brand) 32%, transparent);
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--wp--preset--color--brand) 6%, var(--wp--preset--color--surface)),
    var(--wp--preset--color--surface));
}

.sesar-callout-quote {
  margin: 0 0 10px;
  font-size: 18px;
  font-style: italic;
  line-height: 1.55;
  color: var(--wp--preset--color--contrast);
}

.sesar-callout-body {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--wp--preset--color--muted);
}

.sesar-callout-body + .sesar-callout-body { margin-top: 8px; }

/* The buttons that close the section sit under the panel, not centred like a CTA band. */
.sesar-sec .sesar-inner > .sesar-hero-actions { margin-top: 28px; }

/* Live alternates alignment on purpose: sections that make an argument run left in a narrow
   column, sections that survey or summarise are centred. `is-flush` marks the left ones, set
   from the component rather than guessed — nothing in the content says which is which.

   Keyed on a class rather than `:has(.sesar-callout)`, which only caught the one section that
   happened to carry a quote panel and left its two neighbours half-centred: heading centred,
   body left, which is what read as broken. */
.sesar-sec.is-flush .sesar-inner { text-align: left; }

/* text-align has to be stated on the heading and paragraphs themselves: the section rules
   centre them directly, so setting it on the wrapper alone left both still centred inside
   boxes that were correctly flush left. */
.sesar-sec.is-flush .sesar-inner > h2,
.sesar-sec.is-flush .sesar-inner > p {
  text-align: left;
  margin-inline: 0;
}

.sesar-sec.is-flush .sesar-inner > h2 { max-width: 30ch; }
.sesar-sec.is-flush .sesar-inner > p { max-width: 64ch; }

/* ═══════════════ Numbered steps panel ═══════════════
   Live pairs each step with the detail under it inside one panel. Flattened, the six
   sentences arrived as a single card with no way to tell step from explanation. */

.sesar-steps {
  box-sizing: border-box;
  width: 100%;
  max-width: 64ch;
  margin: 32px auto 0;
  padding: 28px 32px;
  border-radius: 18px;
  border: 1px solid var(--wp--preset--color--border);
  background: linear-gradient(140deg,
    var(--wp--preset--color--surface),
    color-mix(in srgb, var(--wp--preset--color--surface) 80%, var(--wp--preset--color--base)));
  text-align: left;
}

/* A panel centres with the section it sits in; only a flush-left section pulls it left. Left
   under a centred heading it read as a stray block rather than part of the section. */
.sesar-sec.is-flush .sesar-steps,
.sesar-sec.is-flush .sesar-callout { margin-inline: 0; }

.sesar-steps-title {
  margin: 0 0 18px;
  font-size: 19px;
  font-weight: 700;
  color: var(--wp--preset--color--contrast);
}

.sesar-step-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; }

.sesar-sec .sesar-steps .sesar-step-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
  padding: 0;
}

.sesar-sec .sesar-steps .sesar-step-row::before { content: none; }

.sesar-step-n {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* A pill, not a fixed circle: the case study's timeline labels each step "Week 2-4" or
     "Month 3-6" rather than "2", and those overflowed a 40px disc. A single digit still
     renders circular because the min-width and height match. */
  min-width: 40px;
  width: auto;
  padding: 0 12px;
  box-sizing: border-box;
  white-space: nowrap;
  height: 40px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--wp--preset--color--brand) 20%, transparent);
  color: var(--wp--preset--color--brand);
  font-weight: 700;
  font-size: 15px;
}

.sesar-step-row b {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--wp--preset--color--contrast);
}

.sesar-step-row i {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 14px;
  line-height: 1.5;
  color: var(--wp--preset--color--muted);
}

/* ═══════════════ Comparison card tones ═══════════════
   Two cards showing the old way and the new way. Rendered neutral they read as two equally
   good options; live tints the manual one warm and the automated one gold so the contrast
   is the point. */

.sesar-card.is-negative {
  border-color: color-mix(in srgb, #f0662f 38%, var(--wp--preset--color--border));
  background: color-mix(in srgb, #f0662f 7%, var(--wp--preset--color--base));
}

.sesar-card.is-negative > h3 { color: #ff8a5c; }
.sesar-card.is-negative .sesar-tile { background: color-mix(in srgb, #f0662f 20%, transparent); color: #ff8a5c; }

.sesar-card.is-positive {
  border-color: color-mix(in srgb, var(--wp--preset--color--brand) 38%, var(--wp--preset--color--border));
  background: color-mix(in srgb, var(--wp--preset--color--brand) 6%, var(--wp--preset--color--base));
}

.sesar-card.is-positive > h3 { color: var(--wp--preset--color--brand); }

/* The cross markers in the old-way card take its warm tone, not the gold of a benefit list. */
.sesar-card.is-negative li .sesar-icon { color: #ff8a5c; }

/* ═══════════ Hero proof row ═══════════
   Three short claims under the hero buttons. A list, because that is what it is. */
.sesar-hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.sesar-hero-proof li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--wp--preset--color--muted);
}

.sesar-hero-proof li::before { content: none; }
.sesar-hero-proof .sesar-icon { flex: 0 0 auto; color: var(--wp--preset--color--brand); }

/* A hero that centres puts its buttons and proof row on the centre line too. */
.sesar-hero.is-centred .sesar-inner { text-align: center; }
.sesar-hero.is-centred .sesar-inner > h1 { margin-inline: auto; }
.sesar-hero.is-centred .sesar-inner > p { margin-inline: auto; }
.sesar-hero.is-centred .sesar-hero-actions,
.sesar-hero.is-centred .sesar-hero-proof,
.sesar-hero.is-centred .wp-block-buttons { justify-content: center; }
.sesar-hero.is-centred .sesar-hero-badge { margin-inline: auto; }

/* ═══════════ Pull quote ═══════════
   Live sets its customer quote in a panel with an oversized quote mark above it, not as the
   theme's default indented blockquote. */
.sesar-sec blockquote.wp-block-quote {
  box-sizing: border-box;
  max-width: 68ch;
  margin: 8px auto 0;
  padding: 40px 44px;
  border: 1px solid var(--wp--preset--color--border);
  border-left: 1px solid var(--wp--preset--color--border);
  border-radius: 20px;
  background: linear-gradient(140deg,
    var(--wp--preset--color--surface),
    color-mix(in srgb, var(--wp--preset--color--surface) 78%, var(--wp--preset--color--base)));
  text-align: left;
  position: relative;
}

.sesar-sec blockquote.wp-block-quote::before {
  content: "\201C";
  display: block;
  font-size: 68px;
  line-height: .8;
  margin-bottom: 8px;
  color: color-mix(in srgb, var(--wp--preset--color--brand) 42%, transparent);
}

.sesar-sec blockquote.wp-block-quote p {
  margin: 0;
  font-size: clamp(19px, 2.2vw, 23px);
  line-height: 1.5;
  color: var(--wp--preset--color--contrast);
}

.sesar-sec blockquote.wp-block-quote cite {
  display: block;
  margin-top: 20px;
  font-size: 14px;
  font-style: normal;
  color: var(--wp--preset--color--muted);
}

/* ═══════════════ Pricing plans ═══════════════
   Live sets the two plans side by side as priced cards. The scrape saw a heading, two stray
   paragraphs and a bullet list per plan, so they arrived stacked as full-width sections with
   the price, the corner badge and the in-card trial button missing entirely. */

.sesar-sec.is-plans .sesar-inner { --sesar-measure: 1080px; }

.sesar-sec .sesar-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  /* `.sesar-inner > *` pins children left so a readability cap cannot re-centre them; the
     plan grid is the full measure and does want centring. */
  margin-inline: auto;
}

.sesar-plan {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 40px 36px;
  border-radius: 24px;
  border: 1px solid var(--wp--preset--color--border);
  background: linear-gradient(135deg,
    var(--wp--preset--color--surface),
    color-mix(in srgb, var(--wp--preset--color--surface) 78%, var(--wp--preset--color--base)));
  text-align: center;
}

/* The gold bloom live blurs into the card corner. Decorative, so it sits behind everything
   and never takes a pointer event. */
.sesar-plan::after {
  content: "";
  position: absolute;
  inset: -90px -90px auto auto;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--wp--preset--color--brand) 14%, transparent);
  filter: blur(40px);
  pointer-events: none;
}

.sesar-plan.is-featured {
  border-color: color-mix(in srgb, var(--wp--preset--color--brand) 38%, transparent);
  box-shadow: 0 0 40px hsl(45 100% 60% / .15);
}

.sesar-plan > * { position: relative; z-index: 1; }

.sesar-plan-badge {
  position: absolute;
  top: 16px; right: 16px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--wp--preset--color--brand);
  color: var(--wp--preset--color--brand-ink);
  font-size: 12px;
  font-weight: 700;
}

/* `.sesar-sec h2` sets its own size, margin and measure, so a bare class loses to it. */
.sesar-sec .sesar-plan-name {
  margin: 0 0 6px;
  max-width: none;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--wp--preset--color--contrast);
}

.sesar-plan-audience { margin: 0; font-size: 14px; color: var(--wp--preset--color--muted); }

.sesar-plan-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin: 26px 0 0;
}
.sesar-plan-price b {
  font-size: 52px;
  line-height: 1;
  font-weight: 700;
  background: var(--wp--preset--gradient--brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sesar-plan-price span { font-size: 20px; color: var(--wp--preset--color--muted); }

.sesar-plan-note { margin: 8px 0 0; font-size: 14px; color: var(--wp--preset--color--muted); }

/* Full width inside the card. `align-self` rather than `width: 100%`: the button is a
   content-box inline-flex, so a percentage width measures wider than the card it sits in. */
.sesar-plan-cta { margin-top: 26px; align-self: stretch; }

.sesar-plan-feats {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--wp--preset--color--border);
  text-align: left;
}
.sesar-sec .sesar-plan-feats h3 {
  margin: 0 0 16px;
  max-width: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--wp--preset--color--contrast);
}
.sesar-plan-feats ul {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 12px;
}
.sesar-sec .sesar-plan-feats li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--wp--preset--color--contrast);
}
.sesar-sec .sesar-plan-feats li::before { content: none; }
/* `border-box` so the padding stays inside the 20px disc rather than growing it. */
.sesar-plan-feats svg {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 20px; height: 20px;
  padding: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--wp--preset--color--brand) 20%, transparent);
  color: var(--wp--preset--color--brand);
}

.sesar-sec .sesar-plans-foot {
  margin: 28px auto 0;
  text-align: center;
  font-size: 14px;
  color: var(--wp--preset--color--muted);
}

@media (max-width: 860px) {
  .sesar-sec .sesar-plans { grid-template-columns: 1fr; gap: 20px; }
  .sesar-plan { padding: 32px 24px; }
  .sesar-plan-price b { font-size: 44px; }
}

/* ═══════════════ Section heading icons ═══════════════
   Live gives some section headings a tile: a column beside the heading on the setup steps,
   stacked above it on the features carousel. Because those headings are real h2s the
   composer files each as its own section, and a section had no icon slot — so all seven
   were dropped. */

.sesar-tile.is-sec {
  width: 64px; height: 64px; border-radius: 16px;
  background: hsl(45 100% 60% / .10);
}

/* Stacked above the heading. */
.sesar-sec.is-iconsec.is-tile-above .sesar-tile.is-sec { margin-bottom: 22px; }

/* A left column the heading and everything under it sits beside. Grid rather than a flex
   wrapper: the section's children are separate blocks, and this places the tile against all
   of them without moving any of them into a container. */
@media (min-width: 720px) {
  .sesar-sec.is-iconsec.is-tile-left .sesar-inner {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 26px;
    align-items: start;
  }
  /* Placed explicitly, not auto-flowed. `grid-row: 1 / -1` resolves against the EXPLICIT
     grid, which is one row tall here, so the tile freed column 1 on every later row and the
     lede dropped into it as a four-word-wide sliver beside the list. */
  .sesar-sec.is-iconsec.is-tile-left .sesar-inner > * { grid-column: 2; }
  .sesar-sec.is-iconsec.is-tile-left .sesar-inner > .sesar-tile.is-sec {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
  }
}

/* The steps are panels on live, stacked down a narrow column — not full-bleed bands. */
.sesar-sec.is-iconsec.is-tile-left { padding-block: var(--wp--preset--spacing--70); }
.sesar-sec.is-iconsec.is-tile-left .sesar-inner {
  box-sizing: border-box;
  max-width: 980px;
  padding: 34px clamp(20px, 4vw, 38px);
  border-radius: 18px;
  border: 1px solid var(--wp--preset--color--border);
  background: linear-gradient(135deg,
    var(--wp--preset--color--surface),
    color-mix(in srgb, var(--wp--preset--color--surface) 78%, var(--wp--preset--color--base)));
}
/* Panels in a run sit close together; the run as a whole keeps the band's breathing room,
   so only the joins between panels tighten. */
.sesar-sec.is-iconsec.is-tile-left + .sesar-sec.is-iconsec.is-tile-left { padding-top: 16px; }
.sesar-sec.is-iconsec.is-tile-left:has(+ .sesar-sec.is-iconsec.is-tile-left) { padding-bottom: 16px; }

.sesar-sec.is-iconsec .sesar-inner > h2 { max-width: none; margin-top: 0; }

/* A run of panels sits on ONE ground. The composer alternates section surfaces, so four
   consecutive panel-sections striped the page behind them where live has a single band. */
.sesar-sec.is-iconsec.is-tile-left { background-color: var(--wp--preset--color--base); }

/* A chip row of one-word steps sets its icon over the label, five across — live's
   Design / Build / Optimisation / Mobile Setup / Going Live band. */
.sesar-chips.is-stack { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px)  { .sesar-chips.is-stack { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .sesar-chips.is-stack { grid-template-columns: repeat(5, 1fr); } }
.sesar-chips.is-stack .sesar-chip {
  flex-direction: column;
  gap: 8px;
  padding: 20px 14px;
  text-align: center;
}

/* Three across for the wordier row, as live sets it. */
@media (min-width: 1000px) { .sesar-chips.is-row { grid-template-columns: repeat(3, 1fr); } }

/* A chip row centres with the section it sits in — `.sesar-inner > *` pins children left. */
.sesar-sec .sesar-chips { margin-inline: auto; }
.sesar-sec.is-flush .sesar-chips { margin-inline: 0; }

/* ═══════════════ Related pages grid ═══════════════
   Four equal cards, each a whole link. Scraped, this arrived as loose headings and
   paragraphs with a link on the first card only. */

.sesar-sec .sesar-relgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 40px auto 0;
}
@media (min-width: 640px)  { .sesar-sec .sesar-relgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .sesar-sec .sesar-relgrid { grid-template-columns: repeat(4, 1fr); } }

.sesar-relcard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  border-radius: 12px;
  border: 1px solid var(--wp--preset--color--border);
  background: var(--wp--preset--color--base);
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.sesar-relcard:hover {
  border-color: color-mix(in srgb, var(--wp--preset--color--brand) 45%, transparent);
  box-shadow: 0 0 30px hsl(45 100% 60% / .10);
  text-decoration: none;
}
.sesar-relcard-title { font-size: 17px; font-weight: 700; color: var(--wp--preset--color--contrast); }
.sesar-relcard-desc  { font-size: 14px; line-height: 1.5; color: var(--wp--preset--color--muted); }
/* Pinned to the foot so the link sits on one line across cards of unequal text length. */
.sesar-relcard-more  {
  margin-top: auto;
  padding-top: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--wp--preset--color--brand);
}
.sesar-sec.is-white .sesar-relcard { background: var(--wp--preset--color--surface); }

/* A section that carries an icon tile runs LEFT — live stacks tile, heading, lede and list
   in the left column of a two-column grid. Centring the heading while the tile stayed left
   left the icon orphaned in the corner, 400px from the words it belongs to. */
.sesar-sec.is-iconsec .sesar-inner > h2,
.sesar-sec.is-iconsec .sesar-inner > h2 + p {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}

/* Live sets these feature sections as two columns — the tile, heading, lede and list on the
   left, the app screenshot on the right, capped at 200px because it is a tall phone shot.
   Uncapped it rendered 787x1600 and made each section 2,250px deep. */
.sesar-sec.is-iconsec.is-tile-above .sesar-inner > figure { margin: 0; }
.sesar-sec.is-iconsec.is-tile-above .sesar-inner > figure img {
  max-width: 200px;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--wp--preset--color--border);
}

@media (min-width: 900px) {
  .sesar-sec.is-iconsec.is-tile-above .sesar-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    column-gap: 48px;
    align-items: center;
  }
  /* Explicit placement, not auto-flow — the same trap the setup-step panels hit, where a
     row-spanning cell freed its column on later rows and the lede dropped into it. */
  .sesar-sec.is-iconsec.is-tile-above .sesar-inner > * { grid-column: 1; }
  .sesar-sec.is-iconsec.is-tile-above .sesar-inner > figure {
    grid-column: 2;
    grid-row: 1 / span 20;
    justify-self: end;
  }
}

/* ═══════════════ Action and contact rows ═══════════════
   Live renders both as markup, so neither reached the scrape: the sitemap's "Quick Actions"
   shipped as a heading over a stray em-dash and the location page's "Get in Touch" as bare
   bold text over empty space. */

/* Unscoped: a recovered button row lands in the hero as well as in a section, and rules
   keyed on `.sesar-sec` left the hero's row as stacked block anchors. */
.sesar-actionblock { margin: 28px auto 0; }
.sesar-sec.is-flush .sesar-actionblock { margin-inline: 0; }
.sesar-hero .sesar-actionblock { margin: 30px 0 0; }
.sesar-actionrow-title {
  margin: 0;
  text-align: center;
  font-size: 19px;
  font-weight: 700;
  color: var(--wp--preset--color--contrast);
}
.sesar-sec.is-flush .sesar-actionrow-title { text-align: left; }
.sesar-actionrow-title + .sesar-contactrow,
.sesar-actionrow-title + .sesar-actionrow { margin-top: 20px; }

.sesar-actionrow,
.sesar-contactrow {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
}
/* A section's row centres with the heading above it; the hero's follows the hero, which
   live leaves left (`flex flex-wrap gap-4`, no justify-center). */
.sesar-sec .sesar-actionrow,
.sesar-sec .sesar-contactrow { justify-content: center; }
.sesar-sec.is-flush .sesar-actionrow,
.sesar-sec.is-flush .sesar-contactrow { justify-content: flex-start; margin-inline: 0; }
.sesar-hero.is-centred .sesar-actionrow { justify-content: center; }

.sesar-actionrow .sesar-btn { gap: 10px; }

.sesar-contactrow { gap: 26px; }
.sesar-contactrow a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--wp--preset--color--muted);
  text-decoration: none;
}
.sesar-contactrow a:hover { color: var(--wp--preset--color--brand); }
.sesar-contactrow svg { color: var(--wp--preset--color--brand); flex: 0 0 auto; }

/* Full-bleed bands butt together. WordPress's block gap put 24px between them, and because
   the gap shows the page ground it read as a stripe between two same-coloured sections.
   Each band carries its own padding, so no gap is needed. */
.sesar-main .sesar-sec { margin-block: 0; }

/* ═══════════════ Closing CTA button row ═══════════════
   A section's button pair centres with the heading above it (live: `justify-center`); only a
   flush-left section pulls it left. The hero's own row is untouched — its alignment follows
   the hero. */
.sesar-sec .sesar-hero-actions { justify-content: center; }
.sesar-sec.is-flush .sesar-hero-actions { justify-content: flex-start; }

/* The second button here is light rather than outlined. Against the dark band an outlined
   button reads as absent, so the pair looked like one button and a label. */
.sesar-sec .sesar-hero-actions .sesar-btn.is-outline {
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--brand-ink);
  border-color: transparent;
}
.sesar-sec .sesar-hero-actions .sesar-btn.is-outline:hover {
  background: color-mix(in srgb, var(--wp--preset--color--contrast) 88%, var(--wp--preset--color--base));
  color: var(--wp--preset--color--brand-ink);
  border-color: transparent;
}

/* A card's own value — the email address, the phone number — which live wraps in a
   mailto/tel link and the scrape therefore dropped. */
.sesar-card-value { margin: 0; font-size: 15px; line-height: 1.5; }
.sesar-card-value a { color: var(--wp--preset--color--brand); text-decoration: none; }
.sesar-card-value a:hover { text-decoration: underline; }

/* Contact cards size to their own content. Keyed on the value they carry rather than on the
   page: a grid holding two one-line cards beside a long "what happens next" panel stretched
   both to its height, leaving 500px of empty box under a phone number. */
.sesar-grid:has(.sesar-card-value) { align-items: start; }
/* Two rules pin a card to its row's full height — `height: 100%` on the card and
   `align-self: stretch` on the grid child. Setting `align-items: start` on the grid alone
   left both in force, so the cards stayed 630px tall and the measurement said "start" while
   the page said otherwise. */
.sesar-grid:has(.sesar-card-value) > .sesar-card { height: auto; align-self: start; }

/* ═══════════════ Split hero ═══════════════
   Live's feature heroes are a two-column grid: badge, heading, lede, buttons and the row of
   ticks on the left, the mascot on the right at `max-w-sm`. Rendered in one column the
   mascot ran full width between the lede and the buttons, pushing the call to action below
   the fold. */
@media (min-width: 900px) {
  .sesar-hero.is-split .sesar-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    column-gap: 56px;
    align-items: center;
  }
  /* Placed explicitly rather than auto-flowed — a row-spanning cell frees its column on
     later rows and the next element drops into it. */
  .sesar-hero.is-split .sesar-inner > * { grid-column: 1; }
  .sesar-hero.is-split .sesar-inner > figure {
    grid-column: 2;
    grid-row: 1 / span 20;
    align-self: center;
    margin: 0;
  }
}
.sesar-hero.is-split .sesar-inner > figure img { max-width: 384px; height: auto; margin-inline: auto; display: block; }

/* ═══════════════ Illustration beside the copy ═══════════════
   Live sets these benefits sections as two columns with the mascot on the left. The image
   arrives before the heading in the DOM, so it had been filed into the previous section's
   last card — blowing that row out and leaving this one as text beside an empty half-band. */
.sesar-sec.is-imgsplit .sesar-inner > figure { margin: 0; }
.sesar-sec.is-imgsplit .sesar-inner > figure img {
  max-width: 360px;
  height: auto;
  margin-inline: auto;
  display: block;
}
@media (min-width: 900px) {
  .sesar-sec.is-imgsplit .sesar-inner {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    column-gap: 56px;
    align-items: center;
  }
  /* Explicit placement: a row-spanning cell otherwise frees its column on later rows and
     the next element drops into it. */
  .sesar-sec.is-imgsplit .sesar-inner > * { grid-column: 2; }
  .sesar-sec.is-imgsplit .sesar-inner > figure { grid-column: 1; grid-row: 1 / span 20; align-self: center; }
  /* The copy runs left beside the image rather than centring over the whole band. */
  .sesar-sec.is-imgsplit .sesar-inner > h2,
  .sesar-sec.is-imgsplit .sesar-inner > h2 + p { text-align: left; margin-inline: 0; max-width: none; }
}

/* ═══════════════ Pull quote ═══════════════
   Live gives the case study a full-width quote with the customer beside it. The scrape had
   merged it into the last timeline card, where it wrapped at three words a line. */
.sesar-pullquote {
  box-sizing: border-box;
  max-width: 860px;
  margin: 36px auto 0;
  padding: 36px clamp(24px, 4vw, 44px);
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--brand) 24%, transparent);
  background: linear-gradient(140deg,
    var(--wp--preset--color--surface),
    color-mix(in srgb, var(--wp--preset--color--surface) 80%, var(--wp--preset--color--base)));
}
.sesar-sec.is-flush .sesar-pullquote { margin-inline: 0; }
.sesar-pullquote blockquote {
  margin: 0 0 22px;
  padding: 0;
  border: 0;
  font-size: clamp(19px, 2.2vw, 25px);
  line-height: 1.45;
  font-weight: 500;
  color: var(--wp--preset--color--contrast);
}
.sesar-pullquote figcaption { display: flex; align-items: center; gap: 14px; }
.sesar-pullquote-mark {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--wp--preset--color--brand) 20%, transparent);
  color: var(--wp--preset--color--brand);
  font-weight: 700;
}
.sesar-pullquote figcaption b { display: block; color: var(--wp--preset--color--contrast); font-size: 16px; }
.sesar-pullquote figcaption i { display: block; font-style: normal; font-size: 14px; color: var(--wp--preset--color--muted); }

/* ═══════════════ Cookie consent ═══════════════
   Pinned to the foot of the viewport, above everything. Accept and reject are the same size
   and sit side by side: a reject that is harder to reach than accept is not a free choice. */

.sesar-consent {
  position: fixed;
  z-index: 9999;
  left: 0; right: 0; bottom: 0;
  box-sizing: border-box;
  padding: clamp(16px, 2.5vw, 22px);
  background: color-mix(in srgb, var(--wp--preset--color--surface) 96%, transparent);
  border-top: 1px solid var(--wp--preset--color--border);
  box-shadow: 0 -18px 50px hsl(0 0% 0% / .45);
  backdrop-filter: blur(8px);
}

.sesar-consent-inner {
  max-width: 1200px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
}

.sesar-consent-copy { flex: 1 1 420px; min-width: 0; }
.sesar-consent-copy h2 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--wp--preset--color--contrast);
}
.sesar-consent-copy p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--wp--preset--color--muted);
  max-width: 78ch;
}
.sesar-consent-copy a { color: var(--wp--preset--color--brand); }

.sesar-consent-actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* Equal weight: same padding, same font size, differing only in fill. */
.sesar-consent-actions .sesar-btn { padding: 13px 22px; font-size: 15px; }

@media (max-width: 720px) {
  /* Trimmed rather than restyled: at full size the banner covered the whole of a phone
     screen, which is more of the page than a notice needs to take. */
  .sesar-consent { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }
  .sesar-consent-inner { flex-direction: column; align-items: stretch; gap: 14px; }
  /* `flex: 1 1 420px` on the copy is a 420px WIDTH in a row and a 420px HEIGHT in a column,
     which is why the banner stood half a phone screen tall with a gap in the middle of it. */
  .sesar-consent-copy { flex: 0 0 auto; }
  .sesar-consent-copy h2 { font-size: 16px; }
  .sesar-consent-copy p { font-size: 13px; line-height: 1.5; }
  .sesar-consent-actions .sesar-btn { flex: 1 1 auto; justify-content: center; padding: 12px 14px; font-size: 14px; }
}

/* The footer link that reopens it. */
.sesar-consent-reopen {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}
.sesar-consent-reopen:hover { color: var(--wp--preset--color--brand); }