/*
 * Inside website v2 components (.kiro/specs/website-facelift-v2/design.md).
 * Loaded after facelift.css. Every class is prefixed x- so it cannot collide
 * with the legacy components, which stay until every page is migrated.
 *
 * Colours come from .kiro/steering/website-visual-system.md (deck system):
 * dark canvas #263238, raised #31454F, attention #3B545F, border #526873,
 * text on dark #F8F9FC / #E1E6EB / #B7C3CC, accent teal #00BFA5.
 * Teal is never used as text on white (2.3:1); --x-teal-ink (#007F72, 5:1)
 * is used instead.
 */
:root {
  --x-canvas: #263238;
  --x-raised: #31454F;
  --x-attention: #3B545F;
  --x-border-dark: #526873;
  --x-head-dark: #F8F9FC;
  --x-body-dark: #E1E6EB;
  --x-muted-dark: #B7C3CC;
  --x-teal: #00BFA5;
  --x-teal-ink: #007F72;
  --x-teal-soft: #E6F8F5;
  --x-radius: 20px;
  --x-radius-sm: 14px;
  /* Visual-system rhythm is 96/64px; facelift.css deliberately tightened the
     site to 56-88px after the larger rhythm read as dead space. v2 follows
     the existing site band so rebuilt and legacy pages sit together. */
  --x-section: var(--facelift-section, clamp(56px, 6vw, 88px));
}

/* ── Section surfaces ─────────────────────────────────────────────────── */
.x-section { padding-block: var(--x-section); }
.x-section--soft { background: var(--facelift-soft, #f7faf9); }
.x-dark {
  background: var(--x-canvas);
  color: var(--x-body-dark);
}
.x-dark h1, .x-dark h2, .x-dark h3, .x-dark h4 { color: var(--x-head-dark); }
.x-dark a:not(.btn) { color: var(--x-teal); }
/* facelift.css sets .eyebrow to the deep teal (#007F72) with !important, which
   is ~2.4:1 on the dark canvas and nearly invisible. Use the diagram teal
   (#00BFA5, ~6:1 on #263238) on every dark v2 surface. */
.x-dark .eyebrow { color: var(--x-teal) !important; }
.x-dark .eyebrow::before { background: var(--x-teal) !important; }
.x-dark .btn-outline { background: transparent; color: var(--x-head-dark); border-color: var(--x-border-dark); }
.x-dark .btn-outline:hover { border-color: var(--x-head-dark); }
.x-section-head { max-width: var(--facelift-measure, 68ch); }
.x-section-head > * + * { margin-top: 0.75rem; }
/* Specificity (0,2,0) on purpose: list components (.x-related, .x-role-grid,
   .x-checklist) reset their own margin to 0 later in this file, which used to
   cancel this gap and left the cards touching the heading. */
.x-section .x-section-head + *, .x-section-head + * { margin-top: clamp(24px, 3vw, 36px); }

/* ── Direct answer (SEO rule 2: 40-60 words under the H1) ─────────────── */
.x-direct-answer {
  font-size: 1.15rem;
  line-height: 1.65;
  max-width: 64ch;
  margin-top: 1rem;
}

/* ── Availability badges. Decision 2026-10-23: no Beta labels on the site,
   so there is deliberately no --beta modifier. ───────────────────────── */
.x-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--fs-micro, 0.6875rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.6;
  white-space: nowrap;
  vertical-align: middle;
}
.x-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.x-badge--available { background: var(--x-teal-soft); color: var(--x-teal-ink); }
.x-dark .x-badge--available { background: rgba(0, 191, 165, 0.16); color: #7CE8D7; }
/* In the nav the badge sits after the product name inside <strong>. */
.mega-panel-link .x-badge { margin-left: 6px; font-size: 0.625rem; padding: 1px 7px; }
.mobile-submenu .x-badge { margin-left: 6px; }

/* ── Hero: dark, copy then d01 ───────────────────────────────────────────
   design.md puts d01 to the right of the copy. In a 7/12 column (~660px at
   1440) the 1200px-wide d01 renders its 14px labels at ~8px, and the 640px
   narrow file is 868px tall, so the hero stacks: copy on top, d01 full width
   beneath. .x-hero-grid--split restores the side-by-side layout for a
   diagram that stays legible at column width. */
.x-hero { padding-block: clamp(40px, 5vw, 64px); }
.x-hero-grid { display: grid; gap: clamp(24px, 3vw, 36px); }
.x-hero-copy { max-width: 760px; }
/* facelift.css forces every h1/h2 to a fixed size with !important (and caps
   h1 at 16ch on phones, which broke the v2 headline into 4-5 short lines).
   v2 components set their own heading sizes, so they need !important too. */
.x-hero h1 {
  font-size: clamp(2.25rem, 4.2vw, 3.4rem) !important;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
  max-width: 22ch;
}
.x-hero .eyebrow { margin-bottom: 12px; }
.x-hero .breadcrumbs { margin-bottom: 16px; }
.x-hero .x-direct-answer { color: var(--x-body-dark); margin-top: 16px; }
.x-hero .btn-row, .x-cta .btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
/* The hero diagram is the first image on the page: cap it so the copy, both
   buttons and most of the diagram fit in a 1440x900 first screen. */
.x-hero .x-diagram { max-width: min(100%, 1080px); }
@media (max-width: 767px) {
  .x-hero h1 { font-size: clamp(1.9rem, 8.2vw, 2.4rem) !important; max-width: none; }
  .x-hero .x-direct-answer { font-size: 1.02rem; }
}


/* ── Proof strip: capability facts, dot separators ────────────────────── */
.x-proof-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 0;
  margin: 0;
  padding: 18px 0;
  list-style: none;
  font-size: var(--fs-sm, 0.9375rem);
  font-weight: 500;
  border-block: 1px solid var(--facelift-border, #dfe7e5);
}
.x-proof-strip li { display: inline-flex; align-items: center; }
.x-proof-strip li + li::before {
  content: "";
  width: 5px; height: 5px; margin-inline: 14px;
  border-radius: 50%;
  background: var(--x-teal);
}
.x-dark .x-proof-strip { border-color: var(--x-border-dark); }


/* ── Diagram figure ──────────────────────────────────────────────────────
   The SVGs carry their own dark canvas and 20px radius, so the wrapper adds
   no border. Wide files have ~14px source text: they are only legible when
   shown close to their 1200px width, so the <picture> rule switches to the
   wide file at >= 1024px and the narrow file is shown below that, capped at
   its 640px source width so its text never shrinks between 640 and 1023px. */
.x-diagram { margin: 0; max-width: 1200px; }
.x-diagram img { display: block; width: 100%; height: auto; border-radius: var(--x-radius); }
.x-diagram figcaption { margin-top: 10px; font-size: var(--fs-xs, 0.8125rem); color: var(--facelift-muted, #5f6f76); }
.x-dark .x-diagram figcaption { color: var(--x-muted-dark); }
@media (max-width: 1023px) {
  .x-diagram { max-width: 640px; margin-inline: auto; }
}
/* A diagram on a dark section blends into it; give it an edge. */
.x-dark .x-diagram img { box-shadow: 0 0 0 1px var(--x-border-dark); }

/* ── Feature story: copy 5/12, diagram 7/12, alternating; copy first on mobile */
.x-story { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; }
.x-story + .x-story { margin-top: clamp(40px, 5vw, 72px); }
.x-story-copy > * + * { margin-top: 0.75rem; }
.x-story-copy h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.25; font-weight: 600; }
.x-story-copy p { max-width: 60ch; }
.x-story-copy .x-link { display: inline-flex; gap: 6px; margin-top: 1rem; font-weight: 600; color: var(--x-teal-ink); }
.x-dark .x-story-copy .x-link { color: var(--x-teal); }
/* Story diagrams use the 640px narrow file. Shown at full column width they
   rendered ~640px wide and up to ~870px tall, dwarfing the copy. Cap at 480px
   (source text 16-20px renders at 12-15px). Tall diagrams (narrow file more
   than 1.2x as tall as it is wide) use .x-story--stacked instead. */
.x-story .x-diagram { max-width: 480px; width: 100%; justify-self: center; }

@media (min-width: 1024px) {
  /* Equal columns now that story diagrams are capped at 480px. */
  .x-story { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .x-story--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .x-story--reverse .x-story-copy { order: 2; }
}

/* ── At a glance fact table ─────────────────────────────────────────── */
.x-glance {
  width: 100%;
  max-width: 820px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--facelift-border, #dfe7e5);
  border-radius: var(--x-radius-sm);
  overflow: hidden;
  font-size: var(--fs-sm, 0.9375rem);
}
.x-glance caption { text-align: left; font-weight: 600; padding-bottom: 10px; font-size: var(--fs-base, 1.0625rem); }
.x-glance th, .x-glance td { padding: 12px 16px; text-align: left; vertical-align: top; }
.x-glance th { width: 34%; font-weight: 600; background: var(--facelift-soft, #f7faf9); }
.x-glance tr + tr > * { border-top: 1px solid var(--facelift-border, #dfe7e5); }
@media (max-width: 479px) {
  .x-glance th, .x-glance td { display: block; width: auto; }
  .x-glance td { padding-top: 4px; }
  .x-glance tr + tr > td { border-top: 0; }
}

/* ── Role cards ───────────────────────────────────────────────────────── */
.x-role-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin: 0; padding: 0; list-style: none;
}
.x-role-grid li {
  padding: 18px 20px;
  border: 1px solid var(--facelift-border, #dfe7e5);
  border-radius: var(--x-radius-sm);
  background: #fff;
  font-size: var(--fs-sm, 0.9375rem);
}
.x-role-grid strong { display: block; margin-bottom: 4px; font-size: var(--fs-base, 1.0625rem); }

/* ── Department tiles (dark sections) ─────────────────────────────────── */
.x-dept-tiles {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin: 0; padding: 0; list-style: none;
}
.x-dept-tiles li {
  position: relative;
  padding: 16px 18px 16px 24px;
  border-radius: var(--x-radius-sm);
  background: var(--x-raised);
  border: 1px solid var(--x-border-dark);
  color: var(--x-head-dark);
  font-weight: 500;
}
.x-dept-tiles li::before {
  content: "";
  position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 4px; border-radius: 0 3px 3px 0;
  background: var(--x-teal);
}

/* ── FAQ: single column details/summary, works without JS ─────────────── */
.x-faq { max-width: 820px; border-top: 1px solid var(--facelift-border, #dfe7e5); }
.x-faq details { border-bottom: 1px solid var(--facelift-border, #dfe7e5); }
.x-faq summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: var(--fs-base, 1.0625rem);
}
.x-faq summary::-webkit-details-marker { display: none; }
.x-faq summary::after {
  content: "+";
  flex: none;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--facelift-border, #dfe7e5);
  font-weight: 500;
  line-height: 1;
}
.x-faq details[open] summary::after { content: "−"; }
.x-faq summary:focus-visible { outline: 2px solid var(--x-teal); outline-offset: 4px; border-radius: 6px; }
.x-faq .x-faq-answer { padding: 0 44px 20px 0; max-width: 68ch; }

/* ── CTA band ─────────────────────────────────────────────────────────── */
.x-cta { padding-block: clamp(48px, 6vw, 80px); text-align: center; }
.x-cta h2 { font-size: clamp(1.6rem, 3.2vw, 2.25rem) !important; line-height: 1.2; }
.x-cta p { max-width: 60ch; margin: 0.9rem auto 0; }
.x-cta .btn-row { justify-content: center; }

/* ── Video facade: 16:9, loads the YouTube iframe only on click ───────── */
.x-video {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 960px;
  border-radius: var(--x-radius);
  overflow: hidden;
  background: var(--x-canvas);
}
.x-video img, .x-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.x-video-play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  width: 100%;
  border: 0; padding: 0;
  background: linear-gradient(180deg, rgba(38, 50, 56, 0) 40%, rgba(38, 50, 56, 0.55));
  color: #fff;
  cursor: pointer;
  font: inherit;
}
.x-video-play span {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--x-teal);
  color: var(--x-canvas);
  font-weight: 600;
}
.x-video-play:focus-visible span { outline: 3px solid #fff; outline-offset: 3px; }

/* ── Two-panel comparison (Why Inside: record-centred vs shift-centred).
   Both panels have the same structure so the difference is the content,
   mirroring d02: dashed outline = disconnected, raised + teal = connected. */
.x-compare { display: grid; gap: 16px; }
@media (min-width: 768px) { .x-compare { grid-template-columns: 1fr 1fr; } }
.x-compare-panel { padding: 24px; border-radius: var(--x-radius); background: var(--x-canvas); color: var(--x-body-dark); }
.x-compare-panel h3 { color: var(--x-head-dark); font-size: var(--fs-lg, 1.1875rem); }
.x-compare-panel p { margin-top: 6px; color: var(--x-muted-dark); font-size: var(--fs-sm, 0.9375rem); }
.x-compare-panel ol { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.x-compare-panel li { padding: 10px 14px; border-radius: 10px; font-size: var(--fs-sm, 0.9375rem); }
.x-compare-panel--record li { border: 2px dashed var(--x-muted-dark); color: var(--x-muted-dark); }
.x-compare-panel--shift { box-shadow: inset 0 0 0 2.5px var(--x-teal); }
.x-compare-panel--shift li { background: var(--x-raised); border-left: 4px solid var(--x-teal); color: var(--x-head-dark); }

/* ── Breadcrumb on v2 pages (legacy .breadcrumbs colours, dark-safe) ─── */
.x-dark .breadcrumbs, .x-dark .breadcrumbs a { color: var(--x-body-dark); }
.x-dark .breadcrumbs a:hover { color: var(--x-teal); }

/* ── Fact table with a header row (Why Inside differentiators) ───────── */
.x-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm, 0.9375rem); background: #fff; border: 1px solid var(--facelift-border, #dfe7e5); border-radius: var(--x-radius-sm); overflow: hidden; }
.x-table tbody tr:last-child td { border-bottom: 0; }
.x-table th, .x-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--facelift-border, #dfe7e5); }
.x-table thead th { font-weight: 600; background: var(--facelift-soft, #f7faf9); }
.x-table td:first-child { font-weight: 600; min-width: 12ch; }
@media (max-width: 639px) {
  .x-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .x-table tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--facelift-border, #dfe7e5); }
  .x-table td { display: block; padding: 2px 0; border: 0; }
}

/* ── Reveal on scroll (only when motion is allowed; see v2.js) ────────── */
@media (prefers-reduced-motion: no-preference) {
  .x-reveal-ready .x-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
  .x-reveal-ready .x-reveal.is-visible { opacity: 1; transform: none; }
}

/* Book a demo: the second alternative line (manager walkthrough playlist)
   sits directly under "Prefer email instead?". */
.book-demo__alt + .book-demo__alt { margin-top: 6px; }

/* ── Checklist (capabilities, "how it works" steps) ───────────────────── */
.x-checklist { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.x-checklist li { position: relative; padding-left: 26px; font-size: var(--fs-sm, 0.9375rem); }
.x-checklist li::before {
  content: ""; position: absolute; left: 2px; top: 0.45em;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--x-teal-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23007F72' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
}
.x-checklist--grid { gap: 10px 28px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ── Connected modules and guides ─────────────────────────────────────── */
.x-related { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.x-related a {
  display: block; height: 100%;
  padding: 14px 18px;
  border: 1px solid var(--facelift-border, #dfe7e5);
  border-radius: var(--x-radius-sm);
  background: #fff;
  color: var(--facelift-ink, #263238);
  font-weight: 600;
  text-decoration: none;
}
.x-related a:hover { border-color: var(--x-teal); }
.x-related a span { display: block; margin-bottom: 2px; font-size: var(--fs-micro, 0.6875rem); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--x-teal-ink); }
.x-hero .x-badge { margin-bottom: 10px; }

/* ── Platform module map: Plan / Staff / Run / Pay / Foundation ───────── */
.x-module-map { display: grid; gap: 14px; margin-top: clamp(24px, 3vw, 36px); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.x-module-group { padding: 18px 20px; border-radius: var(--x-radius-sm); background: #fff; border: 1px solid var(--facelift-border, #dfe7e5); border-top: 4px solid var(--x-teal); }
.x-module-group h3 { font-size: var(--fs-base, 1.0625rem); }
.x-module-group ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.x-module-group a { font-size: var(--fs-sm, 0.9375rem); font-weight: 500; color: var(--facelift-ink, #263238); text-decoration: none; }
.x-module-group a:hover { color: var(--x-teal-ink); text-decoration: underline; }

/* ── Text links ("Guide: …  →", "Integrations →") ─────────────────────────
   One style everywhere: teal ink, semibold, arrow, underline on hover. */
.x-link { display: inline-flex; align-items: baseline; gap: 6px; font-weight: 600; color: var(--x-teal-ink); text-decoration: none; }
.x-link:hover { text-decoration: underline; }
.x-dark .x-link { color: var(--x-teal); }
.x-more { margin-top: 16px; }
.x-checklist + .x-more { margin-top: 18px; }

/* Stacked story: copy on top, then the diagram full width (wide file from
   1024px), for the tall lifecycle/flow diagrams d01, d02, d05, d07. */
.x-story.x-story--stacked, .x-story.x-story--stacked.x-story--reverse { grid-template-columns: minmax(0, 1fr); align-items: start; }
.x-story--stacked .x-story-copy { order: 0; max-width: 68ch; }
.x-story--stacked .x-diagram { max-width: min(100%, 1080px); justify-self: start; }

/* Pages that end on the dark CTA band: no white gap before the footer.
   facelift.css gives .site-footer a 72-120px top margin, meant for legacy
   pages whose last section is light. */
main:has(> .x-cta:last-child) + .site-footer { margin-top: 0 !important; }

/* ══ v2.1 components ═════════════════════════════════════════════════════ */

/* Simplified interface mockup (assets/mockups, styled by mockups.css). */
.x-mockup { width: 100%; max-width: 760px; justify-self: center; }
.x-dark .x-mockup .mk-cap { color: var(--x-muted-dark); }

/* Numbered "How it works" steps. */
.x-steps { counter-reset: xstep; margin: 1.25rem 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.x-steps li { counter-increment: xstep; position: relative; padding-left: 44px; font-size: var(--fs-sm, 0.9375rem); }
.x-steps li::before {
  content: counter(xstep); position: absolute; left: 0; top: -1px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--x-teal); color: var(--x-canvas); font-weight: 700; font-size: 0.85rem;
}
.x-steps strong { display: block; font-size: var(--fs-base, 1.0625rem); margin-bottom: 2px; }

/* Feature cards: name, body, "Used by". */
.x-feature-grid { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.x-feature-grid li { padding: 22px 22px 20px; border: 1px solid var(--facelift-border, #dfe7e5); border-radius: var(--x-radius-sm); background: #fff; display: flex; flex-direction: column; gap: 8px; }
.x-feature-grid h3 { font-size: var(--fs-lg, 1.1875rem); }
.x-feature-grid p { font-size: var(--fs-sm, 0.9375rem); margin: 0; }
.x-feature-grid .x-used-by { margin-top: auto; padding-top: 8px; font-size: var(--fs-xs, 0.8125rem); font-weight: 600; color: var(--x-teal-ink); }

/* Industry: team chips and demand-driver cards. */
.x-chips { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.x-chips li { padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--facelift-border, #dfe7e5); font-size: var(--fs-sm, 0.9375rem); font-weight: 500; }
.x-driver-cards { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.x-driver-cards li { padding: 18px 20px; border-radius: var(--x-radius-sm); background: #fff; border: 1px solid var(--facelift-border, #dfe7e5); border-top: 4px solid var(--x-teal); font-weight: 600; }

/* Industry: problem -> how Inside handles it -> link. */
.x-problem-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--facelift-border, #dfe7e5); }
.x-problem-rows li { display: grid; gap: 8px 32px; padding: 22px 0; border-bottom: 1px solid var(--facelift-border, #dfe7e5); }
.x-problem-rows h3 { font-size: var(--fs-lg, 1.1875rem); }
.x-problem-rows p { margin: 0 0 8px; max-width: 64ch; }
@media (min-width: 768px) { .x-problem-rows li { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }

/* Industry: supporting visuals stacked with a gap. */
.x-visual-stack { display: grid; gap: clamp(32px, 4vw, 56px); justify-items: center; }
.x-visual { width: 100%; display: grid; justify-items: center; }
.x-visual .x-mockup { max-width: 760px; }
.x-proof-line { margin-top: 12px; max-width: 64ch; text-align: center; font-size: var(--fs-sm, 0.9375rem); color: var(--facelift-muted, #5f6f76); }

/* Home: d01 on a dark band under the hero (desktop only — home.md shows
   only the m01 mockup on phones). */
.x-lifecycle-band { padding-block: 0 clamp(40px, 5vw, 64px); }
@media (max-width: 767px) { .x-lifecycle-band { display: none; } }
.x-hero-mockup { align-self: center; }

/* Home: video + proof card side by side. */
.x-proof-pair { display: grid; gap: clamp(28px, 4vw, 48px); align-items: start; }
@media (min-width: 1024px) { .x-proof-pair { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.x-proof-card > * + * { margin-top: 0.75rem; }
.x-proof-card .x-diagram { max-width: 480px; }
.x-caption { margin-top: 10px; font-size: var(--fs-xs, 0.8125rem); color: var(--facelift-muted, #5f6f76); }

/* Smaller mockups beside copy (Export Manager, Platform "three ways"). */
.x-mockup--small { max-width: 520px; }

/* Industry tiles that link (Home). */
.x-dept-tiles--links li { padding: 0; }
.x-dept-tiles--links a { display: block; padding: 16px 18px 16px 24px; color: var(--x-head-dark); text-decoration: none; font-weight: 500; }
.x-dept-tiles--links a:hover { color: var(--x-teal); }

/* Platform: module cards with a one-line description. */
.x-module-group a strong { display: block; font-weight: 600; }
.x-module-group a span { display: block; font-size: var(--fs-xs, 0.8125rem); color: var(--facelift-muted, #5f6f76); font-weight: 400; line-height: 1.45; }
.x-module-group ul { gap: 12px; }

/* Platform: three ways people use Inside. */
.x-ways { margin: 0; padding: 0; list-style: none; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
.x-ways li { display: grid; gap: 10px; }
.x-ways p { margin: 0; font-size: var(--fs-sm, 0.9375rem); }

/* ══ Mockup sizing (2026-10-23 review) ════════════════════════════════════
   The mockups are miniature product screens: below ~720px wide their grids
   squeeze (truncated names, chips overlapping). So:
   - Hero: copy first, mockup underneath at up to 920px. Never squeezed into
     a side column.
   - Stories with a mockup (.x-story--mock): copy 4/12, mockup 8/12 from
     1200px (~750px wide); below that, stacked with the mockup up to 880px.
   - Mobile keeps the mockups' own narrow layouts (container queries). */
.x-hero-grid--split { grid-template-columns: minmax(0, 1fr) !important; }
.x-hero-grid--split .x-mockup { max-width: 920px; justify-self: start; }
.x-hero:has(.x-hero-grid--split) { padding-bottom: clamp(40px, 5vw, 64px); }

.x-story.x-story--mock, .x-story.x-story--mock.x-story--reverse { grid-template-columns: minmax(0, 1fr); }
.x-story--mock .x-mockup { max-width: 880px; justify-self: center; }
.x-story--mock .x-story-copy { max-width: 68ch; order: 0; }
@media (min-width: 1200px) {
  .x-story.x-story--mock { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .x-story.x-story--mock.x-story--reverse { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .x-story--mock.x-story--reverse .x-story-copy { order: 2; }
  .x-story--mock .x-mockup { max-width: none; }
}

/* Platform "three ways": one row each, text beside a full-size mockup. */
.x-ways { grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); }
.x-ways li { gap: 16px; }
.x-ways .x-mockup { max-width: 880px; }
@media (min-width: 1200px) {
  .x-ways li { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; gap: 48px; }
  .x-ways .x-mockup { max-width: none; }
}

/* Industry supporting visuals and stacked mockups share the same cap. */
.x-visual .x-mockup { max-width: 880px; }

/* Home proof: video beside a light stat card (replaces the dark d13 box).
   The pilot thumbnail has its own black rounded frame baked in; scale it
   so that frame sits outside the crop. */
.x-proof-pair { align-items: center; }
.x-video img { transform: scale(1.14); }
.x-stat-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 1.25rem 0 0; }
.x-stat-pair div { padding: 16px 18px; border-radius: var(--x-radius-sm); border: 1px solid var(--facelift-border, #dfe7e5); background: #fff; }
.x-stat-pair div.is-after { border-color: var(--x-teal); background: var(--x-teal-soft); }
.x-stat-pair dt { font-size: var(--fs-xs, 0.8125rem); font-weight: 600; color: var(--facelift-muted, #5f6f76); }
.x-stat-pair dd { margin: 4px 0 0; font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 600; color: var(--facelift-ink, #263238); line-height: 1.2; }
.x-stat-pair .is-after dd { color: var(--x-teal-ink); }


/* Home proof: heading top-left, video left, one stat box + copy + link right. */
.x-proof-card { display: flex; flex-direction: column; gap: 14px; }
.x-proof-card > * + * { margin-top: 0; }
.x-stat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0; padding: 22px 24px; border-radius: var(--x-radius-sm); background: var(--x-canvas); color: var(--x-head-dark); }
.x-stat-before { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 600; color: var(--x-muted-dark); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(183, 195, 204, 0.6); }
.x-stat-arrow { font-size: 1.5rem; color: var(--x-teal); }
.x-stat-after { font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 700; color: var(--x-teal); }
.x-stat-label { flex-basis: 100%; font-size: var(--fs-xs, 0.8125rem); color: var(--x-muted-dark); }
.x-proof-card .x-more { margin-top: 4px; }

/* Home hero: the mockup is the only visual; centre it in the container. */
.x-hero-grid--split .x-mockup { justify-self: center; max-width: 1000px; }

/* Home proof (2026-10-23): stat box starts level with the top of the video,
   the copy follows, and the case-study link sits level with the bottom of
   the video frame. The caption sits under the video in its own row. */
.x-proof-pair {
  grid-template-areas: "media" "caption" "card";
  align-items: stretch;
  row-gap: 10px;
}
.x-proof-media { grid-area: media; }
.x-proof-caption { grid-area: caption; margin: 0; }
.x-proof-card { grid-area: card; margin-top: 18px; }
@media (min-width: 1024px) {
  .x-proof-pair {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "media card" "caption .";
    column-gap: clamp(28px, 4vw, 48px);
  }
  .x-proof-card { margin-top: 0; height: 100%; }
  .x-proof-card .x-more { margin-top: auto; }
}

/* ══ Resource guide (article) ════════════════════════════════════════════ */
.x-guide-head { padding-bottom: 8px; }
.x-guide-head h1 { max-width: 24ch; }
.x-guide-head .x-direct-answer { max-width: 72ch; }
.x-read-time { margin-top: 12px; font-size: var(--fs-xs, 0.8125rem); color: var(--facelift-muted, #5f6f76); }
.x-guide { display: grid; gap: 24px; padding-block: 24px var(--x-section); }
.x-toc details { border: 1px solid var(--facelift-border, #dfe7e5); border-radius: var(--x-radius-sm); background: var(--facelift-soft, #f7faf9); padding: 12px 16px; }
.x-toc summary { cursor: pointer; font-weight: 600; }
.x-toc ol { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: var(--fs-sm, 0.9375rem); }
.x-toc a { color: var(--facelift-ink, #263238); text-decoration: none; }
.x-toc a:hover { color: var(--x-teal-ink); text-decoration: underline; }
@media (min-width: 1024px) {
  .x-guide { grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; }
  .x-toc { position: sticky; top: 92px; }
  .x-toc details { background: none; border: 0; padding: 0; }
  .x-toc summary { pointer-events: none; list-style: none; font-size: var(--fs-xs, 0.8125rem); letter-spacing: 0.06em; text-transform: uppercase; color: var(--x-teal-ink); }
  .x-toc summary::-webkit-details-marker { display: none; }
}
.x-article > section { scroll-margin-top: 92px; }
.x-article > section + section { margin-top: clamp(40px, 5vw, 64px); }
.x-article h2 { font-size: clamp(1.5rem, 2.4vw, 2rem) !important; }
.x-article h3 { font-size: var(--fs-lg, 1.1875rem); }
.x-article p, .x-article ul, .x-article ol, .x-article h2, .x-article .table-scroll { max-width: 72ch; }
.x-article > section > * + * { margin-top: 1rem; }
.x-article .x-diagram { margin-top: 1.75rem; max-width: 100%; }
@media (max-width: 1023px) { .x-article .x-diagram { max-width: 640px; margin-inline: 0; } }
.x-guide-list { padding-left: 20px; display: grid; gap: 8px; }
.x-guide-steps { counter-reset: gstep; list-style: none; padding: 0; display: grid; gap: 16px; }
.x-guide-steps li { counter-increment: gstep; position: relative; padding-left: 48px; }
.x-guide-steps li::before { content: counter(gstep); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--x-teal); color: var(--x-canvas); font-weight: 700; }
.x-guide-steps p { margin-top: 4px; }

/* "How Inside handles it" callout. */
.x-callout { max-width: 72ch; margin-top: 1.75rem !important; padding: 20px 24px; border-radius: var(--x-radius); background: var(--facelift-soft, #f7faf9); border: 1px solid var(--facelift-border, #dfe7e5); border-left: 4px solid var(--x-teal); }
.x-callout p { margin: 0; }
.x-callout p + p { margin-top: 8px; }
.x-callout-label { font-size: var(--fs-xs, 0.8125rem); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--x-teal-ink); }

/* ══ Legacy pages on the v2 hero (tools/pages/legacy_to_v2.py) ═══════════
   The original hero illustrations are kept, shown under the copy at full
   container width on a rounded panel (they are light artwork). */
.x-hero-illus { margin: 0; width: 100%; }
/* Hero illustrations sit in a 300px band (178px on phones). object-fit:
   contain shows the whole artwork scaled to the band on its own #F3F3F3
   background, so nothing is cropped or zoomed (the old .hero-illus "cover"
   crop zoomed tightly-framed art such as Security & Data). */
.x-hero-illus img {
  display: block; width: 100%; height: auto;
  max-height: 300px; object-fit: contain;   /* whole artwork, never cropped or zoomed */
  border-radius: var(--x-radius);
  background: #F3F3F3;                       /* the illustrations' own background */
}
@media (max-width: 767px) { .x-hero-illus img { max-height: 178px; border-radius: 14px; } }
.x-hero-note { margin-top: 12px; color: var(--x-body-dark); max-width: 64ch; }
.x-dark .price-anchor { margin: 18px 0 0; color: var(--x-muted-dark); }
.x-dark .price-anchor strong { color: var(--x-head-dark); }
.x-dark .price-note { margin: 10px 0 0; max-width: 64ch; text-align: left; color: var(--x-muted-dark); font-size: var(--fs-xs, 0.8125rem); line-height: 1.7; }
.x-hero .breadcrumbs { margin-bottom: 18px; }