@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap");
:root {
  --deep: #071b30;
  --navy: #0d2943;
  --blue: #163b5a;
  --ink: #163047;
  --muted: #5c7182;
  --aqua: #24bfd0;
  --line: #d8e6e9;
  --paper: #f6f9f8;
  --yellow: #ffe07a;
  --coral: #ff716c;
  --radius: 18px;
  /* header row (75px) + chapter bar (44px); used as scroll-margin on homepage anchors */
  --stick: 119px;
}
* {
  box-sizing: border-box;
}
/* A `1fr` track is minmax(auto, 1fr), so its auto minimum can push a column
   wider than its container on narrow screens. Let these layout grids shrink. */
.hero-main > *,
.explorer > *,
.feature-grid > *,
.reality-grid > *,
.why-grid > *,
.task-layout > *,
.story-layout > *,
.start-grid > *,
.contact-grid > *,
.pricing-layout > *,
.faq-grid > *,
.evaluation > * {
  min-width: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font:
    16px/1.55 "DM Sans",
    system-ui,
    sans-serif;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1,
h2,
h3 {
  font-family: "Space Grotesk", system-ui, sans-serif;
  line-height: 1.12;
  letter-spacing: -0.045em;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input {
  font: inherit;
}
button {
  cursor: pointer;
}
.container {
  width: min(1200px, calc(100% - 44px));
  margin: auto;
}
.skip {
  position: absolute;
  top: -100px;
  left: 10px;
  z-index: 100;
  background: white;
  padding: 12px;
}
.skip:focus {
  top: 10px;
}
:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 3px;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--deep);
  color: white;
  border-bottom: 1px solid #ffffff1f;
  transition: box-shadow 0.25s ease;
}
/* Lifts the header off the page once the reader has scrolled past the hero. */
.site-header.scrolled {
  box-shadow: 0 10px 28px #00101c59;
}
.header-row {
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.07em;
}
.logo img {
  object-fit: contain;
}
.logo span span {
  color: var(--aqua);
}
.primary,
.header-actions {
  display: flex;
  align-items: center;
  gap: 25px;
}
.primary {
  font-size: 0.86rem;
  font-weight: 700;
}
.primary a:hover,
.nav-trigger:hover {
  color: var(--aqua);
}
.header-actions {
  gap: 13px;
}
.quiet {
  font-size: 0.83rem;
  font-weight: 700;
}
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: var(--aqua);
  border: 1px solid var(--aqua);
  border-radius: 10px;
  color: #052437;
  padding: 13px 21px;
  font-weight: 800;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}
.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px #0a293a26;
}
.button:active {
  transform: translateY(0);
  box-shadow: none;
}
.button.small {
  padding: 10px 14px;
  font-size: 0.79rem;
}
.button.dark {
  background: var(--deep);
  border-color: var(--deep);
  color: #fff;
}
.button.dark:hover {
  background: #0d3244;
}
.button.outline {
  background: none;
  border-color: #7e99af;
  color: #fff;
}
.button.outline:hover {
  background: #ffffff14;
  border-color: #fff;
}
.nav-holder {
  height: 75px;
  display: flex;
  align-items: center;
}
.nav-trigger {
  background: none;
  border: 0;
  color: white;
  padding: 20px 0;
  font-weight: 700;
}
.nav-holder:hover .mega,
.nav-holder:focus-within .mega,
.nav-holder.open .mega {
  display: block;
}
.mega {
  display: none;
  position: absolute;
  top: 75px;
  left: 0;
  right: 0;
  /* Must outrank the chapter bar below it. Both are positioned children of the
     header, and the bar comes later in the DOM, so without this it paints on
     top of the open panel and eats the hover the moment the pointer leaves the
     trigger - closing the menu before it can be used. */
  z-index: 5;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 26px 45px #06162940;
  max-height: 75vh;
  overflow: auto;
}
.mega-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  border-bottom: 1px solid var(--line);
  padding: 27px 0 18px;
}
.mega-head h2 {
  margin: 5px 0 0;
  font-size: 1.6rem;
}
.mega-head > a {
  color: #087d91;
  font-weight: 800;
}
.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 23px 42px;
  padding: 25px 0 34px;
}
.mega-group h3 {
  font-family: "DM Sans", sans-serif;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #007f93;
  margin: 0 0 7px;
}
.mega-group p {
  font-size: 0.77rem;
  color: var(--muted);
  margin: 0 0 7px;
}
.mega-group a {
  display: block;
  padding: 5px 8px;
  margin-left: -8px;
  border-radius: 7px;
  font-size: 0.86rem;
  min-height: 30px;
}
.mega-group a:hover,
.mega-group a:focus-visible {
  background: #e8f7f7;
}
.mobile-button,
.mobile-menu {
  display: none;
}
/* Homepage chapter bar: a second row of the sticky header, not a separate nav. */
.chapters {
  background: #05192c;
  border-top: 1px solid #ffffff14;
  position: relative;
}
/* When the rail is wider than the window there is no scrollbar to hint at it,
   so fade whichever edge still has tabs hidden behind it and put a tappable
   arrow on top - otherwise nobody discovers that Pricing is off to the right. */
.chapters::before,
.chapters::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 64px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 1;
}
.chapters::before {
  left: 0;
  background: linear-gradient(to left, #05192c00, #05192c 78%);
}
.chapters::after {
  right: 0;
  background: linear-gradient(to right, #05192c00, #05192c 78%);
}
.chapters.is-scrollable:not(.at-end)::after,
.chapters.is-scrollable:not(.at-start)::before {
  opacity: 1;
}
.rail-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid #ffffff2e;
  border-radius: 50%;
  background: #0d2b45;
  color: #dbeaf1;
  font-size: 1rem;
  line-height: 1;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s,
    background 0.18s,
    border-color 0.18s;
}
.rail-arrow:hover {
  background: #17415f;
  border-color: var(--aqua);
}
.rail-arrow.prev {
  left: 6px;
}
.rail-arrow.next {
  right: 6px;
}
.chapters.is-scrollable:not(.at-end) .rail-arrow.next,
.chapters.is-scrollable:not(.at-start) .rail-arrow.prev {
  opacity: 1;
  visibility: visible;
}
.chapters .container {
  display: flex;
  align-items: center;
  gap: 26px;
  height: 44px;
  overflow-x: auto;
  scrollbar-width: none;
}
.chapters .container::-webkit-scrollbar {
  display: none;
}
.chapters a {
  display: flex;
  align-items: center;
  height: 44px;
  border-bottom: 2px solid transparent;
  color: #8fb0c2;
  font-size: 0.84rem;
  font-weight: 600;
  white-space: nowrap;
  transition:
    color 0.18s ease,
    border-color 0.18s ease;
}
.chapters a:focus-visible {
  outline-offset: -3px;
}
.chapters a:hover {
  color: #d6e7ee;
}
.chapters a.current {
  color: #fff;
  border-bottom-color: var(--aqua);
}
#problem,
#product,
#features,
#try,
#why {
  scroll-margin-top: var(--stick);
}
/* the alternative path sits apart from the numbered journey */
.chapters .talk {
  margin-left: auto;
  padding-left: 20px;
  border-left: 1px solid #ffffff1f;
}
.eyebrow {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 800;
  color: #007e92;
}
.eyebrow.light {
  color: #6ce0e6;
}
.field-label {
  font-size: 0.85rem;
  color: #4b6672;
  font-weight: 600;
}
.hero {
  background: var(--deep);
  color: white;
  position: relative;
  overflow: hidden;
}
.hero .container {
  position: relative;
  z-index: 1;
}
.hero-main {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 35px;
  align-items: center;
  padding: 81px 0 60px;
}
.hero h1 {
  font-size: clamp(3.2rem, 5vw, 5.3rem);
  max-width: 680px;
  margin: 14px 0 24px;
}
.hero p {
  font-size: 1.1rem;
  color: #bed2dc;
  max-width: 570px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 30px 0 14px;
}
.hero .subnote {
  font-size: 0.77rem;
  color: #9dbac8;
}
.hero-visual {
  position: relative;
  padding: 42px 20px 30px 0;
}
.hero-visual > .brand-cube {
  position: absolute;
  top: -37px;
  right: -5px;
  width: 155px;
  height: 155px;
  object-fit: contain;
  z-index: 2;
  filter: drop-shadow(0 15px 18px #00121f90);
}
.window {
  background: white;
  color: var(--ink);
  border: 1px solid #c9e3e5;
  border-radius: 17px;
  box-shadow: 0 25px 60px #0c315026;
  overflow: hidden;
}
.slot {
  display: block;
  /* width: 100% keeps min-height from driving width up via the aspect ratio,
     which otherwise overflows containers narrower than min-height x 1.6 */
  width: 100%;
  aspect-ratio: 16/10;
  min-height: 330px;
  overflow: hidden;
  background: #eef4f5;
}
.slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.hero-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  border-top: 1px solid #ffffff2b;
  padding: 22px 0 30px;
  color: #bdd4dc;
  font-size: 0.81rem;
}
.hero-bottom span {
  display: flex;
  align-items: center;
  gap: 7px;
}
.hero-bottom b {
  color: white;
}
.hero-bottom i {
  font-style: normal;
  color: var(--aqua);
}
/* Entrance reveals. Gated on .js so the page stays fully readable without
   scripting, and flattened entirely when reduced motion is requested. */
.js .reveal {
  opacity: 0;
  transform: translateY(12px);
}
.js .reveal.in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal.in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.section {
  padding: 91px 0;
}
.section.alt {
  background: var(--paper);
}
.section-head {
  max-width: 720px;
}
.section-head h2 {
  font-size: clamp(2.4rem, 3.5vw, 3.6rem);
  margin: 10px 0 18px;
}
.section-head p {
  color: var(--muted);
  font-size: 1.05rem;
}
.reality-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 50px;
  align-items: start;
}
.reality-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.reality-list li {
  padding: 16px 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 4px;
}
.reality-list b {
  font-family: "Space Grotesk";
  font-size: 1.05rem;
}
.reality-list span {
  color: var(--muted);
  font-size: 0.92rem;
}
.reality-fit {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 640px;
}
/* Feature explorer: what used to be the standalone features page, folded into
   the homepage as an area rail beside the features in the selected area. */
.explorer {
  display: grid;
  grid-template-columns: 274px 1fr;
  margin-top: 40px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: white;
  overflow: hidden;
  box-shadow: 0 18px 44px #0c31501a;
}
.explorer-side {
  background: #eaf3f1;
  border-right: 1px solid var(--line);
  padding: 22px 16px;
}
.explorer-side .eyebrow {
  display: block;
  padding: 0 12px 14px;
  color: #4e7280;
}
.explorer-areas {
  display: grid;
  gap: 2px;
}
.area {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 13px 14px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--ink);
  font-weight: 600;
  text-align: left;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}
.area svg {
  flex: none;
  color: #5c8494;
}
.area span {
  flex: 1;
}
.area em {
  font-style: normal;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
}
.area:hover {
  background: #ffffffa8;
}
.area[aria-selected="true"] {
  background: var(--navy);
  color: white;
}
.area[aria-selected="true"] svg {
  color: var(--aqua);
}
.area[aria-selected="true"] em {
  color: #9fc0cf;
}
.explorer-panels {
  min-width: 0;
}
.area-panel {
  padding: 30px 34px 34px;
}
.area-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.area-head h3 {
  font-size: 2rem;
  margin: 0;
}
.area-head span {
  flex: none;
  font-size: 0.82rem;
  color: var(--muted);
}
.area-desc {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 6px 0 0;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.area-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.area-list li + li {
  border-top: 1px solid var(--line);
}
.area-list a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 16px;
  padding: 18px 12px;
  margin: 0 -12px;
  border-radius: 12px;
  transition: background 0.18s ease;
}
.area-list b {
  grid-area: 1 / 1;
  font-family: "Space Grotesk";
  font-size: 1.12rem;
  letter-spacing: -0.025em;
}
.area-list span {
  grid-area: 2 / 1;
  color: var(--muted);
  font-size: 0.93rem;
}
.area-list i {
  grid-area: 1 / 2;
  font-style: normal;
  color: #7fa7b6;
  transition:
    transform 0.18s ease,
    color 0.18s ease;
}
.area-list a:hover {
  background: #f2faf9;
}
.area-list a:hover i {
  color: #007b90;
  transform: translate(2px, -2px);
}
.trial-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 34px;
}
.trial-act .subnote {
  font-size: 0.82rem;
  color: var(--muted);
}
.evaluation {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 17px;
  margin-top: 32px;
}
.evaluation div {
  border-top: 2px solid var(--aqua);
  padding: 19px 10px 0 0;
}
.evaluation b {
  font-family: "Space Grotesk";
  font-size: 1.2rem;
}
.evaluation p {
  color: var(--muted);
  font-size: 0.92rem;
  margin-top: 7px;
}
.why {
  background: var(--deep);
  color: white;
}
.why .section-head p {
  color: #b3cbd6;
}
.why-card {
  border: 1px solid #40708a;
  border-radius: 17px;
  padding: 25px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.why-card span {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 1.2rem;
  letter-spacing: -0.03em;
  color: var(--aqua);
}
.why-card strong {
  color: #cfe2e9;
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.6;
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 32px;
}
.cta {
  background: #dff3f2;
  padding: 85px 0;
  text-align: center;
}
.cta h2 {
  font-size: clamp(2.4rem, 3.6vw, 3.8rem);
  margin: 9px 0 17px;
}
.cta p {
  color: var(--muted);
  max-width: 620px;
  margin: 0 auto;
}
.cta .hero-actions {
  justify-content: center;
}
.cta .button.outline {
  border-color: #9cb5c0;
  color: var(--ink);
}
.cta .button.outline:hover {
  background: #ffffff;
  border-color: var(--ink);
}
.feature-hero {
  background: var(--deep);
  color: white;
  padding: 46px 0 60px;
}
.crumb {
  font-size: 0.8rem;
  color: #b6ccd6;
  margin-bottom: 45px;
}
.crumb a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.feature-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 55px;
  align-items: center;
}
.feature-hero h1 {
  font-size: clamp(2.9rem, 4.5vw, 4.8rem);
  margin: 12px 0 20px;
}
.feature-hero p {
  color: #bed3df;
  font-size: 1.09rem;
}
.feature-hero .window {
  transform: none;
}
.feature-hero .slot {
  min-height: 350px;
}
.feature-hero .button.outline {
  background: none;
}
.feature-intro {
  background: #e8f6f5;
  padding: 24px 0;
}
.feature-intro .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
}
.feature-intro strong {
  font: 700 1.2rem "Space Grotesk";
}
.feature-intro a {
  font-size: 0.82rem;
  color: #006e85;
  font-weight: 800;
}
.task-layout {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 60px;
  align-items: start;
  padding: 75px 0;
}
.task-list h2 {
  font-size: 2.3rem;
  margin-bottom: 25px;
}
.task-button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-left: 3px solid var(--line);
  padding: 14px 17px;
  margin: 3px 0;
  color: var(--muted);
}
.task-button.active {
  color: var(--ink);
  border-color: var(--aqua);
  background: #f0fafa;
}
.task-button b {
  display: block;
  font-size: 1rem;
  color: inherit;
}
.task-button span {
  display: block;
  font-size: 0.87rem;
  line-height: 1.4;
  margin-top: 5px;
}
.task-stage {
  position: sticky;
  top: 105px;
}
.task-stage .window {
  transform: none;
  box-shadow: 0 25px 50px #102e4829;
}
.task-stage .slot {
  min-height: 410px;
}
.task-caption {
  margin-top: 18px;
  font-size: 0.87rem;
  color: var(--muted);
}
.task-caption b {
  color: var(--ink);
}
.more {
  background: var(--paper);
  padding: 70px 0;
}
.more h2 {
  font-size: 2.2rem;
}
.more-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
.more a {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
  padding: 22px;
  font-weight: 800;
}
.more a span {
  display: block;
  color: var(--muted);
  font-weight: 400;
  font-size: 0.84rem;
  margin-top: 6px;
}
[hidden] {
  display: none !important;
}
footer {
  background: #061727;
  color: #b9cbd5;
  padding: 38px 0;
}
.foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 0.79rem;
}
.foot .logo {
  color: white;
  /* The header logo is an image plus a label, so .logo carries a flex gap. Here
     the bare "Echo" text and the <span>o</span> are two flex items, and that gap
     renders the wordmark as "Echo o". */
  gap: 0;
}
.foot .logo span {
  color: var(--aqua);
}
@media (max-width: 1050px) {
  .primary {
    gap: 13px;
  }
  .header-actions .quiet {
    display: none;
  }
  .mega-grid {
    padding: 25px 20px;
  }
  .hero-main {
    gap: 10px;
  }
}
@media (max-width: 860px) {
  .primary {
    display: none;
  }
  /* Keep the primary action visible on mobile and drop the secondary link
     instead - Contact is still in the menu and in its own page section. */
  .header-actions .quiet {
    display: none;
  }
  .header-actions .button.small {
    padding: 9px 12px;
    font-size: 0.75rem;
  }
  .mobile-button {
    display: block;
    background: none;
    color: white;
    border: 0;
    font-size: 1.5rem;
  }
  /* The open menu replaces the chapter bar rather than stacking above it. */
  .mobile-menu:not([hidden]) ~ .chapters {
    display: none;
  }
  .mobile-menu:not([hidden]) {
    display: block;
    max-height: calc(100vh - 75px);
    overflow: auto;
    background: #102b47;
    padding: 13px 23px 24px;
  }
  .mobile-menu > a,
  .mobile-menu summary {
    display: block;
    padding: 10px;
    color: white;
  }
  .mobile-menu details {
    border-top: 1px solid #ffffff2b;
  }
  .mobile-menu details a {
    display: block;
    color: #c7dce4;
    padding: 8px 0 8px 26px;
    font-size: 0.87rem;
  }
  .hero-main,
  .feature-grid,
  .reality-grid,
  .task-layout {
    grid-template-columns: 1fr;
  }
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* The area rail turns into a scrolling row of chips above the panel. */
  .explorer {
    grid-template-columns: 1fr;
  }
  .explorer-side {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 16px 14px;
  }
  .explorer-side .eyebrow {
    padding: 0 4px 10px;
  }
  .explorer-areas {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .explorer-areas::-webkit-scrollbar {
    display: none;
  }
  .area {
    width: auto;
    padding: 10px 14px;
    white-space: nowrap;
  }
  .area svg {
    display: none;
  }
  .area-panel {
    padding: 24px 22px 28px;
  }
  .hero-main {
    padding: 55px 0;
  }
  .hero-visual {
    max-width: 650px;
  }
  .task-stage {
    position: static;
  }
  .feature-intro .container {
    display: block;
  }
  .feature-intro a {
    display: block;
    margin-top: 8px;
  }
}
@media (max-width: 620px) {
  .container {
    width: calc(100% - 30px);
  }
  .hero h1,
  .feature-hero h1 {
    font-size: clamp(2.8rem, 12vw, 3.6rem);
  }
  .hero-main {
    padding: 42px 0 35px;
  }
  .hero-visual {
    padding: 25px 12px 15px 0;
  }
  .hero-visual > .brand-cube {
    width: 95px;
    height: 95px;
    top: -13px;
  }
  .slot,
  .feature-hero .slot,
  .task-stage .slot {
    min-height: 230px;
  }
  .hero-bottom {
    display: block;
  }
  .hero-bottom span {
    margin: 6px 0;
  }
  .hero-actions .button {
    width: 100%;
  }
  .section {
    padding: 64px 0;
  }
  .evaluation,
  .more-grid,
  .why-grid {
    grid-template-columns: 1fr;
  }
  .area-head h3 {
    font-size: 1.7rem;
  }
  :root {
    --stick: 115px;
  }
  .chapters .container,
  .chapters a {
    height: 40px;
  }
  .chapters .container {
    gap: 18px;
  }
  .chapters a {
    font-size: 0.8rem;
  }
  .feature-hero {
    padding: 33px 0 48px;
  }
  .crumb {
    margin-bottom: 25px;
  }
  .task-layout {
    padding: 45px 0;
  }
  .task-button {
    padding: 11px 13px;
  }
  .feature-intro strong {
    font-size: 1.05rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* V4: page-level treatments share typography and controls, with distinct stories. */
.feature-promise {
  display: inline-block;
  margin-top: 18px;
  padding: 0;
  background: none;
  border: 0;
  color: #80dfe6;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}
.feature-story {
  padding: 74px 0 82px;
  background: #fff;
  scroll-margin-top: 90px;
}
.story-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 65px;
  align-items: end;
  margin-bottom: 36px;
}
.story-head h2 {
  font-size: clamp(2rem, 3.2vw, 3.25rem);
  margin: 10px 0 0;
}
.story-head p {
  color: var(--muted);
  font-size: 1.03rem;
}
.story-layout {
  display: grid;
  grid-template-columns: 0.76fr 1.24fr;
  gap: 62px;
  align-items: start;
}
.story-layout .task-list {
  border-top: 1px solid var(--line);
}
.story-layout .task-stage {
  position: sticky;
  top: 104px;
}
.story-layout .task-stage .window {
  transform: none;
}
.story-layout .task-stage .slot {
  min-height: 390px;
}







.feature-story .task-button {
  border-left-width: 4px;
}
.feature-story .task-button.active {
  font-weight: 700;
}
.variant-finance.feature-hero {
  background: radial-gradient(circle at 80% 20%, #165260, var(--deep) 62%);
}


.variant-finance .task-button.active {
  border-left-color: #52ad85;
  background: #edf8f1;
}
.variant-journey.feature-hero {
  background: radial-gradient(circle at 85% 0, #353666, var(--deep) 60%);
}


.variant-journey .task-button.active {
  border-left-color: #8d82db;
  background: #f4f2fb;
}
.variant-two-role.feature-hero {
  background: radial-gradient(circle at 80% 0, #225a70, var(--deep) 60%);
}

.variant-report.feature-hero {
  background: radial-gradient(circle at 85% 0, #4d486d, var(--deep) 60%);
}


.variant-report .task-button.active {
  border-left-color: #9386c8;
  background: #f7f5fb;
}
.variant-scenario.feature-hero {
  background: radial-gradient(circle at 85% 0, #6b433d, var(--deep) 60%);
}


.variant-scenario .task-button.active {
  border-left-color: #df916c;
  background: #fff6f0;
}
.variant-people.feature-hero {
  background: radial-gradient(circle at 85% 0, #29516a, var(--deep) 60%);
}
@media (max-width: 860px) {
  .story-head,
  .story-layout {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .story-layout .task-stage {
    position: static;
  }
  .feature-story {
    padding: 55px 0;
  }
}
@media (max-width: 620px) {
  .story-layout .task-stage .slot {
    min-height: 225px;
  }
  .story-head h2 {
    font-size: 2.2rem;
  }

}

/* V6: integrated signup/contact, clearer navigation feedback and FAQ. */
.primary a.current,
.nav-trigger.current,
.header-actions a.current,
.mobile-menu a.current {
  color: var(--aqua);
}
.mega a.current {
  background: #def3f3;
  color: #075367;
  font-weight: 800;
}
.nav-trigger {
  position: relative;
}
.nav-trigger.current:after,
.primary > a.current:after {
  content: "";
  height: 3px;
  background: var(--aqua);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.primary > a {
  position: relative;
  display: flex;
  align-items: center;
  height: 75px;
}
.faq-section {
  background: #f3f8f7;
  scroll-margin-top: var(--stick);
}
.faq-grid {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 70px;
}
.faq-grid h2,
.start-grid h2,
.contact-grid h2 {
  font-size: clamp(2.3rem, 3.5vw, 3.6rem);
  margin: 10px 0 18px;
}
.faq-grid > div > p,
.start-grid > div > p,
.contact-grid > div > p {
  color: var(--muted);
}
.inline-link {
  color: #007b91;
  text-decoration: underline;
  text-underline-offset: 4px;
  font-weight: 800;
}
.faq-list {
  border-top: 1px solid #c8dcdf;
}
.faq-list details {
  border-bottom: 1px solid #c8dcdf;
  padding: 15px 0;
}
.faq-list summary {
  cursor: pointer;
  font-weight: 800;
  list-style: none;
  padding-right: 30px;
  position: relative;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary:after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 0;
  font-size: 1.3rem;
  line-height: 1;
  color: #0a8297;
  transition: transform 0.2s ease;
}
/* Rotating the + into an × animates; swapping the glyph for a − cannot. */
.faq-list details[open] summary:after {
  transform: rotate(45deg);
}
.faq-list summary:hover {
  color: #0a8297;
}
.faq-list details[open] > p {
  animation: faq-reveal 0.25s ease;
}
@keyframes faq-reveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
.faq-list p {
  color: var(--muted);
  margin: 13px 35px 4px 0;
  font-size: 0.94rem;
}
.start-section {
  background: #e4f5f4;
  scroll-margin-top: var(--stick);
}
.contact-section {
  background: #fff;
  scroll-margin-top: var(--stick);
}
.start-grid,
.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 70px;
  align-items: start;
}
.start-grid ul {
  padding-left: 20px;
  line-height: 2;
}
.form-note {
  font-size: 0.87rem;
  max-width: 500px;
}
.form-card {
  background: #fff;
  border: 1px solid #c9dfe3;
  border-radius: 18px;
  padding: 32px;
  box-shadow: 0 25px 55px #123e4e14;
}
.form-card h3 {
  font-size: 1.45rem;
  margin-bottom: 21px;
}
.form-card label {
  display: block;
  font-size: 0.83rem;
  font-weight: 800;
  margin: 12px 0 6px;
}
.form-card input,
.form-card textarea {
  width: 100%;
  border: 1px solid #a8c3cb;
  border-radius: 9px;
  padding: 12px 13px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}
.form-card input:focus,
.form-card textarea:focus {
  border-color: #0089a0;
}
.form-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.form-card button {
  width: 100%;
  margin-top: 22px;
}
.form-small {
  font-size: 0.75rem;
  color: var(--muted);
  margin: 13px 0 0;
}
.form-small a {
  text-decoration: underline;
}
.form-status {
  font-size: 0.83rem;
  color: #006c82;
}
.contact-methods {
  display: grid;
  gap: 9px;
  margin: 30px 0;
}
.contact-methods a {
  font-weight: 800;
  color: #007d92;
}
.contact-methods a:hover {
  text-decoration: underline;
}
@media (max-width: 860px) {
  .faq-grid,
  .start-grid,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .faq-section,
  .start-section,
  .contact-section {
    padding: 62px 0;
  }
}
@media (max-width: 620px) {
  .form-card {
    padding: 22px;
  }
  .form-pair {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* V7: immediate price and visitor-controlled value scenario. */
.pricing-section {
  background: #f2f8f8;
  scroll-margin-top: var(--stick);
}
.pricing-heading {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  align-items: end;
  margin-bottom: 35px;
}
.pricing-heading > div:first-child {
  max-width: 700px;
}
.pricing-heading h2 {
  font-size: clamp(2.3rem, 3.5vw, 3.65rem);
  margin: 10px 0 15px;
}
.pricing-heading p {
  color: var(--muted);
}
.price-stamp {
  background: var(--deep);
  color: white;
  border-radius: 16px;
  padding: 20px 28px;
  min-width: 185px;
  text-align: center;
}
.price-stamp span,
.price-stamp small {
  display: block;
  font-size: 0.77rem;
  color: #b6d1dc;
}
.price-stamp strong {
  display: block;
  font: 700 2.3rem "Space Grotesk";
  color: #77dde3;
}
.pricing-layout {
  display: grid;
  grid-template-columns: 1.23fr 0.77fr;
  gap: 24px;
  align-items: start;
}
.pricing-controls,
.pricing-result {
  background: white;
  border: 1px solid #d0e2e6;
  border-radius: 18px;
  padding: 29px;
}
.pricing-controls > label {
  display: block;
  font-weight: 800;
  margin-bottom: 7px;
}
.count-field {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}
.count-field input {
  width: 130px;
  padding: 12px;
  border: 1px solid #9dbfc6;
  border-radius: 9px;
  font-size: 1.3rem;
  font-weight: 800;
}
.count-field span {
  color: var(--muted);
}
.pricing-controls fieldset {
  padding: 0;
  border: 0;
  margin: 0;
}
.pricing-controls legend {
  font: 700 1.3rem "Space Grotesk";
  margin-bottom: 14px;
}
.core-row,
.module-option {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px;
  border: 1px solid #d5e5e8;
  border-radius: 10px;
  background: white;
}
.core-row {
  background: #eaf6f5;
  margin-bottom: 10px;
}
.core-row div,
.option-copy {
  flex: 1;
}
.core-row b,
.option-copy b {
  display: block;
  font-size: 0.89rem;
}
.core-row small,
.option-copy small {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
}
.core-row strong,
.module-option strong {
  font-size: 0.87rem;
  white-space: nowrap;
}
.core-row > span {
  font-size: 0.69rem;
  color: #117487;
}
.module-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.module-option {
  cursor: pointer;
  min-height: 85px;
}
.module-option:has(input:checked) {
  border-color: #26aebd;
  background: #f3fbfb;
}
.module-option.included-at-cap {
  border-style: dashed;
}
.module-option.included-at-cap strong {
  color: #007b8d;
}
.module-option.included-at-cap strong:after {
  content: " included";
  font-size: 0.7rem;
}
.module-option input {
  width: 18px;
  height: 18px;
  accent-color: #008da2;
  flex: none;
}
.pricing-result {
  position: sticky;
  top: 105px;
  background: var(--deep);
  color: white;
  border-color: var(--deep);
}
.pricing-result .eyebrow {
  color: #84dfe5;
}
.result-main {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 14px 0 2px;
}
.result-main strong {
  font: 700 clamp(2.7rem, 4.4vw, 4.7rem) "Space Grotesk";
  letter-spacing: -0.06em;
}
.result-main span {
  color: #aec7d1;
}
.pricing-result p {
  color: #c4d8df;
}
.cap-note,
.under-cap-note {
  border-top: 1px solid #ffffff33;
  padding: 15px 0;
  margin: 17px 0;
}
.cap-note b,
.cap-note span {
  display: block;
}
.cap-note span,
.under-cap-note {
  font-size: 0.83rem;
  color: #b4cdd5;
}
.pricing-result .button {
  width: 100%;
}
.estimate-note {
  display: block;
  color: #abc3cd;
  font-size: 0.73rem;
  margin-top: 13px;
}
.value-panel {
  margin-top: 22px;
  background: white;
  border: 1px solid #d0e2e6;
  border-radius: 16px;
  padding: 22px 27px;
}
.value-panel summary {
  font: 700 1.25rem "Space Grotesk";
  cursor: pointer;
}
.value-panel summary span {
  font: 700 0.72rem "DM Sans";
  text-transform: uppercase;
  color: #007d91;
  margin-left: 10px;
}
.value-panel > p {
  color: var(--muted);
  font-size: 0.88rem;
}
.value-inputs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.value-inputs label {
  font-size: 0.81rem;
  font-weight: 800;
}
.value-inputs input {
  display: block;
  width: 100%;
  padding: 11px;
  border: 1px solid #a6c2ca;
  border-radius: 8px;
  margin-top: 7px;
}
.value-result {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px;
  margin-top: 20px;
}
.value-result > div {
  background: #edf7f6;
  padding: 18px;
  border-radius: 11px;
}
.value-result small {
  display: block;
  color: var(--muted);
}
.value-result strong {
  font: 700 1.6rem "Space Grotesk";
}
@media (max-width: 1000px) {
  .pricing-layout {
    grid-template-columns: 1fr;
  }
  .pricing-result {
    position: static;
  }
}
@media (max-width: 700px) {
  .pricing-heading {
    display: block;
  }
  .price-stamp {
    display: inline-block;
    margin-top: 15px;
  }
  .module-grid,
  .value-inputs,
  .value-result {
    grid-template-columns: 1fr;
  }
  .pricing-controls,
  .pricing-result {
    padding: 20px;
  }
}

.value-result {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 700px) {
  .value-result {
    grid-template-columns: 1fr;
  }
}

/* V8: billing switch and time-first value estimate. */
.billing-switch {
  border: 0;
  padding: 0;
  margin: 21px 0 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.billing-switch legend {
  font-size: 0.76rem;
  color: #afcbd4;
  font-weight: 800;
  margin-bottom: 7px;
}
.billing-switch label {
  cursor: pointer;
  position: relative;
}
.billing-switch input {
  position: absolute;
  opacity: 0;
}
.billing-switch span {
  display: block;
  border: 1px solid #6e91a1;
  border-radius: 9px;
  padding: 9px 13px;
  color: #d3e6eb;
  font-weight: 800;
  font-size: 0.87rem;
}
.billing-switch small {
  font-size: 0.68rem;
  color: #8ee7c5;
  margin-left: 3px;
}
.billing-switch input:checked + span {
  background: #e5f7f4;
  color: #063344;
  border-color: #e5f7f4;
}
.billing-switch input:checked + span small {
  color: #00735a;
}
.billing-switch input:focus-visible + span {
  outline: 3px solid #ffe07a;
  outline-offset: 3px;
}
.billing-details {
  font-size: 0.86rem;
  color: #a9d6db;
  background: #ffffff12;
  border-radius: 9px;
  padding: 11px 13px;
}
.price-stamp small {
  max-width: 180px;
}
.value-heading h3 {
  font-size: clamp(1.5rem, 2.3vw, 2.35rem);
  margin: 8px 0;
}
.value-heading p {
  color: var(--muted);
}
.value-inputs {
  grid-template-columns: repeat(2, 1fr);
}
.value-inputs label small {
  color: var(--muted);
  font-weight: 500;
}
.tool-spend {
  margin: 20px 0;
  border-top: 1px solid var(--line);
  padding-top: 15px;
}
.tool-spend summary {
  font-size: 0.91rem;
  font-weight: 800;
  cursor: pointer;
}
.tool-spend summary span {
  color: #087e91;
  font-size: 0.72rem;
  text-transform: uppercase;
}
.tool-spend label {
  display: block;
  max-width: 420px;
  margin-top: 12px;
  font-size: 0.8rem;
  font-weight: 800;
}
.tool-spend input {
  display: block;
  width: 100%;
  padding: 11px;
  border: 1px solid #a6c2ca;
  border-radius: 8px;
  margin-top: 6px;
}
.value-result {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
  .value-result {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 700px) {
  .value-inputs,
  .value-result {
    grid-template-columns: 1fr;
  }
}

/* V9: compact estimator and narrow-screen audit. */
.pricing-heading {
  margin-bottom: 24px;
}
.pricing-heading p {
  max-width: 720px;
}
.pricing-layout {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
}
.module-grid {
  gap: 7px;
}
.module-option {
  min-height: 56px;
  padding: 10px 12px;
}
.module-option.included-at-cap strong:after {
  content: none;
}
.pricing-result .button {
  background: var(--aqua);
  color: #052437;
  border-color: var(--aqua);
}
.pricing-result .cap-note {
  font-size: 0.79rem;
  color: #c3dfe4;
}
.pricing-result [hidden] {
  display: none !important;
}
.value-panel {
  display: none;
}
@media (max-width: 1000px) {
  .pricing-layout {
    grid-template-columns: 1fr;
  }
  .pricing-result {
    position: static;
  }
}
@media (max-width: 700px) {
  .module-grid {
    grid-template-columns: 1fr;
  }
  .pricing-heading h2 {
    font-size: clamp(2rem, 8vw, 3rem);
  }
  .pricing-controls,
  .pricing-result {
    padding: 18px;
  }
  .core-row {
    flex-wrap: wrap;
  }
  .result-main {
    flex-wrap: wrap;
  }
  .result-main strong {
    font-size: clamp(2.4rem, 11vw, 4rem);
    overflow-wrap: anywhere;
  }
  .billing-switch {
    gap: 6px;
  }
  .billing-switch label {
    flex: 1;
  }
  .billing-switch span {
    text-align: center;
    white-space: normal;
    padding: 10px 7px;
  }
  .billing-switch small {
    display: block;
    margin: 0;
  }
  .site-header .header-row {
    height: 64px;
  }
  .mobile-menu:not([hidden]) {
    max-height: calc(100dvh - 64px);
  }
  .mobile-menu a,
  .mobile-menu summary {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .logo {
    font-size: 1.4rem;
  }
  .section {
    padding: 55px 0;
  }
  .footer,
  .foot {
    overflow-wrap: anywhere;
  }
}
@media (max-width: 380px) {
  .container {
    width: calc(100% - 24px);
  }
  .hero h1,
  .feature-hero h1 {
    font-size: 2.45rem;
  }
  .task-button {
    overflow-wrap: anywhere;
  }
  .count-field input {
    width: 105px;
  }
  .pricing-controls,
  .pricing-result {
    padding: 15px;
  }
  .module-option {
    gap: 8px;
    padding: 9px;
  }
  .billing-details {
    overflow-wrap: anywhere;
  }
}
body {
  overflow-x: clip;
}
img {
  max-width: 100%;
  height: auto;
}
button,
a,
summary {
  touch-action: manipulation;
}
.module-option:focus-within {
  outline: 3px solid #24bfd0;
  outline-offset: 2px;
}

/* V14 navigation: readable CTA and stable pointer/focus menu. */
.site-header .header-actions .button.small,
.site-header .header-actions .button.small.current {
  background: #24bfd0;
  color: #052437;
  border-color: #24bfd0;
}
.site-header .header-actions .button.small:hover {
  background: #80e3e8;
  color: #052437;
  border-color: #80e3e8;
}
.site-header .nav-holder::after {
  content: "";
  position: absolute;
  top: 74px;
  height: 12px;
  width: 100px;
  pointer-events: none;
}
.site-header .nav-holder:hover::after,
.site-header .nav-holder:focus-within::after {
  pointer-events: auto;
}
@media (max-width: 860px) {
  .site-header .nav-holder::after {
    display: none;
  }
}

/* Prerendered feature pages (tools/prerender.mjs) - crawlable static equivalents of the SPA's
   #/feature/<slug> routes. They reuse this stylesheet, so they only need the few rules the SPA's own
   layout does not already provide. */
.prerendered-feature main {
  padding: 40px 0 70px;
}
.prerendered-feature .lede {
  font-size: 1.15rem;
  color: var(--muted);
  max-width: 680px;
}
.prerendered-feature h1 {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  max-width: 900px;
  margin-bottom: 14px;
}
.prerendered-feature h2 {
  margin-top: 42px;
  font-size: 1.6rem;
}
.prerender-steps {
  max-width: 760px;
  padding-left: 20px;
}
.prerender-steps li {
  margin-bottom: 18px;
}
.prerender-steps h3 {
  font-size: 1.08rem;
  margin: 0 0 4px;
}
.prerender-steps p {
  color: var(--muted);
  margin: 0;
}
.prerender-related,
.prerender-areas {
  list-style: none;
  padding: 0;
  max-width: 900px;
}
.prerender-related li,
.prerender-areas li {
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.prerender-related a,
.prerender-areas a {
  font-weight: 700;
}
.prerender-related a:hover,
.prerender-areas a:hover {
  color: #007d90;
}
.prerender-cat {
  color: var(--muted);
  font-size: 0.9rem;
}
.prerendered-feature .crumb a {
  color: #007b90;
  font-weight: 700;
}