*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 400 16px/1.6 'Geist', system-ui, sans-serif;
  overflow-wrap: anywhere;
}

a {
  color: var(--accent);
}

a:hover {
  text-decoration-thickness: 2px;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* The accent ring is about 2.5:1 on navy; the light ink keeps it visible. */
footer :focus-visible {
  outline-color: var(--on-navy);
}

.container {
  width: 100%;
  /* F2's content is 1360px wide with the gutters outside it */
  max-width: calc(1360px + 2 * clamp(16px, 3vw, 40px));
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 40px);
}

.section {
  padding-top: 104px;
  padding-bottom: 24px;
}

h1,
h2,
h3 {
  margin: 0;
  max-width: 24ch;
  font-family: var(--display);
  font-weight: var(--dw);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h1 {
  font-size: var(--fs-h1);
}

h2 {
  font-size: var(--fs-h2);
}

p {
  max-width: 760px;
  margin: 20px 0 0;
  color: var(--ink2);
}

.lead {
  font-size: var(--fs-lead);
}

.eyebrow {
  margin: 0 0 20px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 500;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  max-width: 100%;
  padding: 10px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.btn--accent {
  background: var(--accent);
  color: var(--surface);
}

.btn--navy {
  background: var(--navy);
  color: var(--on-navy);
}

.btn--surface {
  background: var(--surface);
  border-color: var(--line2);
  color: var(--navy);
}

.btn--ghost {
  background: transparent;
  border-color: var(--line2);
  color: var(--accent);
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 14px;
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding-block: 22px;
}

.wordmark {
  color: var(--navy);
  font: 700 44px/1.1 Tinos, 'Times New Roman', serif;
  text-decoration: none;
}

/* the Circuit E in the accent colour, its strokes thickened to sit with the bold letters */
.wordmark .lg-mark {
  color: var(--accent);
}

.wordmark .lg-mark path,
.wordmark .lg-line {
  stroke-width: 11;
}

.header-inner .wordmark {
  font-size: 36px;
  letter-spacing: -0.01em;
}

.header-nav,
.nav-pill {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  max-width: 100%;
}

.header-nav {
  gap: 10px;
  font-size: 15px;
}

.nav-pill {
  gap: 0 22px;
  min-height: 46px;
  padding-inline: 22px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 8px 26px -16px color-mix(in srgb, var(--navy) 45%, transparent);
}

.nav-pill a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-block: 10px;
  color: var(--ink);
  text-decoration: none;
}

.nav-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border: 2px solid var(--accent);
  border-radius: 50%;
}

/* header menus: a panel under each pill item; a line with a ring per page echoes the Circuit E's prongs */
.nav-group {
  position: relative;
}

.nav-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.nav-caret {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 2px;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

/* the pill's dot fills like the menu's rings while its menu is hovered or open */
.nav-trigger:hover .nav-dot,
.nav-trigger[aria-expanded="true"] .nav-dot {
  background: var(--accent);
}

.nav-trigger[aria-expanded="true"] .nav-caret {
  margin-top: 3px;
  transform: rotate(225deg);
}

.nav-trigger[aria-expanded="false"] + .nav-panel {
  display: none;
}

.nav-panel {
  position: absolute;
  z-index: 10;
  top: calc(100% + 12px);
  left: -22px;
  display: grid;
  width: max-content;
  min-width: 280px;
  max-width: min(360px, calc(100vw - 32px));
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 24px 48px -28px color-mix(in srgb, var(--navy) 55%, transparent);
}

.nav-group:last-child .nav-panel {
  left: auto;
  right: -22px;
}

/* keeps the pointer inside the group while it crosses the gap to the panel */
.nav-panel::before {
  content: '';
  position: absolute;
  inset: -14px 0 auto;
  height: 14px;
}

.nav-panel::after {
  content: '';
  position: absolute;
  top: 28px;
  bottom: 28px;
  left: 31px;
  width: 1.5px;
  background: var(--accent-line);
}

.nav-panel a {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 10px 14px 10px 16px;
  border-radius: 14px;
  color: var(--ink);
  text-decoration: none;
}

.nav-panel a:hover,
.nav-panel a:focus-visible {
  background: var(--accent-soft);
}

.nav-ring {
  position: relative;
  z-index: 1;
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 4px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--surface);
}

.nav-ring::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 100%;
  width: 9px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}

.nav-panel a:hover .nav-ring,
.nav-panel a:focus-visible .nav-ring {
  background: var(--accent);
}

.nav-panel a:hover .nav-ring::after,
.nav-panel a:focus-visible .nav-ring::after {
  transform: scaleX(1);
}

.nav-item b {
  display: block;
  font-weight: 500;
}

.nav-item small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 13px;
}

.nav-roi {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 8px 26px -16px color-mix(in srgb, var(--navy) 45%, transparent);
  color: var(--ink);
  text-decoration: none;
}

.nav-roi:hover,
.nav-roi:focus-visible {
  background: var(--accent);
  color: var(--surface);
}

/* narrower headers keep Estimate ROI inside the Why Enterop menu */
@media (max-width: 899.98px) {
  .nav-roi {
    display: none;
  }
}

/* 1024-1279px: the centred logo leaves the pill about 400px, so it tightens to stay on one line (Geist sets wider than
   the old body font; wrapped, the pill dropped over the hero) */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .nav-pill {
    flex-wrap: nowrap;
    gap: 0 14px;
    padding-inline: 16px;
    font-size: 14px;
  }

  .nav-actions {
    font-size: 14px;
  }
}

/* tablet widths: a little tighter, so the pill and both buttons still share the row with the logo from 900px */
@media (min-width: 760px) and (max-width: 1023.98px) {
  .nav-pill {
    gap: 0 14px;
    padding-inline: 18px;
  }
}

/* the two buttons are one group; it only matters in the wide header below */
.nav-actions {
  display: contents;
}

/* wide header: the pill on the left, the logo truly centered (equal side columns), the buttons on the right. Narrower
   widths keep the logo left with the pill and buttons together on the right. The menus open under their triggers, so
   all of them align to the left edge of their trigger */
@media (min-width: 1024px) {
  .header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  .header-inner .wordmark {
    grid-column: 2;
    grid-row: 1;
  }

  .header-nav {
    display: contents;
  }

  .nav-pill {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .nav-actions {
    display: flex;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    gap: 10px;
    font-size: 15px;
  }

  .nav-group:last-child .nav-panel {
    left: -22px;
    right: auto;
  }
}

.menu-btn {
  display: none;
}

@media (max-width: 759.98px) {
  .header-inner {
    position: relative;
    flex-wrap: nowrap;
    padding-block: 14px;
  }

  .menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: 0 8px 26px -16px color-mix(in srgb, var(--navy) 45%, transparent);
    color: var(--ink);
    font: inherit;
    font-size: 15px;
    cursor: pointer;
  }

  /* chevron that flips while open */
  .menu-icon {
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

  .menu-btn[aria-expanded='true'] .menu-icon {
    margin-top: 4px;
    transform: rotate(225deg);
  }

  .header-nav {
    display: none;
    position: absolute;
    top: 100%;
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px 20px 20px;
    border-radius: 0 0 24px 24px;
    background: var(--surface);
    box-shadow: 0 24px 40px -24px color-mix(in srgb, var(--navy) 55%, transparent);
    font-size: 18px;
    /* an open group can be taller than a small phone: the menu scrolls itself, so its buttons stay reachable */
    max-height: calc(100vh - 76px);
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* the groups and buttons keep their size and stay in one column; the menu scrolls instead of squeezing or wrapping */
  .header-nav {
    flex-wrap: nowrap;
  }

  .header-nav > * {
    flex-shrink: 0;
  }

  .menu-btn[aria-expanded='true'] ~ .header-nav {
    display: flex;
  }

  .nav-pill {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-inline: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .nav-pill a {
    min-height: 52px;
    padding-block: 0;
  }

  /* phone: each menu opens inline under its name */
  .nav-trigger {
    width: 100%;
    min-height: 52px;
    padding: 0;
  }

  .nav-caret {
    margin-left: auto;
  }

  .nav-panel,
  .nav-group:last-child .nav-panel {
    position: relative;
    top: 0;
    left: 0;
    right: auto;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 0 0 8px;
    border: 0;
    box-shadow: none;
  }

  .nav-panel::after {
    left: 11.25px;
  }

  .nav-panel a {
    min-height: 52px;
    padding: 8px 8px 8px 6px;
  }

  .header-nav .btn {
    justify-content: center;
    min-height: 52px;
  }

  /* phone menu (Akshith, 2026-10-28): Estimate ROI is a button beside Request a Demo, not a link in the Why list */
  .nav-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 4px;
  }

  .nav-roi {
    display: inline-flex;
    justify-content: center;
    min-height: 52px;
    padding: 0 12px;
    border: 1px solid var(--line2);
    box-shadow: none;
    font-weight: 600;
  }

  .nav-actions .btn {
    padding-inline: 12px;
  }

  .nav-panel a[href='#roi'] {
    display: none;
  }
}

@media (max-width: 359.98px) {
  .nav-actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .menu-icon,
  .nav-caret {
    transition: transform 0.15s;
  }

  .nav-dot,
  .nav-roi {
    transition: background-color 0.15s, color 0.15s;
  }

  body > header {
    transition: background-color 0.25s, box-shadow 0.25s;
  }

  .nav-ring::after {
    transition: transform 0.18s var(--ease-out);
  }

  /* pressables press in slightly; menus fade and scale in from their trigger */
  .btn,
  .nav-roi {
    transition: transform 160ms var(--ease-out), background-color 0.15s, color 0.15s;
  }

  :is(.btn, .nav-roi, .intent-toggle, .ap-tab, .why-tab, .how__task, [data-platform-tab], .prod-card):active {
    transform: scale(0.97);
  }

  .nav-panel {
    transform-origin: top left;
    transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
  }

  .nav-group:last-child .nav-panel {
    transform-origin: top right;
  }

  @starting-style {
    .nav-panel {
      opacity: 0;
      transform: translateY(-4px) scale(0.98);
    }
  }
}

.hero .btn {
  margin-top: 28px;
}

#company {
  padding-top: 112px;
  padding-bottom: 24px;
}

#company h2 {
  max-width: 820px;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.company-layout,
.contact-card {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 56px;
}

.company-layout {
  margin-top: 32px;
}

.company-story {
  flex: 1 1 440px;
  min-width: 0;
  max-width: 820px;
}

.company-story p {
  margin-top: 14px;
  font-size: 17px;
}

.company-story .company-origin {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-weight: var(--dw);
  font-size: clamp(22px, 2vw, 27px);
  line-height: 1.45;
}

.company-origin + p {
  margin-top: 24px;
}

/* Request a Demo and the email side by side: two ways to reach the founders */
.footer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 22px;
}

.footer-actions .footer-email {
  margin-top: 0;
  text-decoration: none;
}

#contact {
  padding-top: 96px;
  padding-bottom: 104px;
}

.contact-card {
  padding: clamp(24px, 4vw, 52px);
  border: 1px solid var(--line);
  border-radius: 32px;
  background: var(--surface);
}

.contact-intro {
  flex: 1 1 300px;
  min-width: 0;
}

.contact-intro h2 {
  font-size: clamp(28px, 2.6vw, 38px);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.contact-intro p {
  margin-top: 16px;
  font-size: 17px;
}

/* what happens next, then the design-partner line: quieter notes under the invitation */
.contact-intro .contact-next {
  font-size: 15px;
  color: var(--muted);
}

.contact-intro .contact-stage {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--muted);
}

.contact-form {
  flex: 1.3 1 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-intents,
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.intent-toggle {
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--line2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  cursor: pointer;
  /* every colour moves together: text that switched first showed white on white for a moment */
  transition: background-color .2s, border-color .2s, color .2s, transform 160ms var(--ease-out);
}

.intent-toggle[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--surface);
}

.contact-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 14px;
}

.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
}

.contact-form input:not([type="hidden"]),
.contact-form textarea {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line2);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 400;
}

.contact-form textarea {
  padding-block: 12px;
  resize: vertical;
}

.contact-form textarea::placeholder,
.field-optional,
.contact-privacy {
  color: var(--muted);
  opacity: 1;
  font-weight: 400;
}

.contact-actions {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.contact-privacy {
  font-size: 13px;
}

.contact-status {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
}

.contact-status:not(:empty) {
  padding: 14px 18px;
  border: 1px solid var(--accent-line);
  border-radius: 14px;
  background: var(--accent-soft);
}

.contact-form .btn {
  align-self: flex-start;
  min-height: 48px;
  padding-inline: 28px;
}

.btn:disabled {
  cursor: wait;
}

.btn[hidden] {
  display: none;
}

footer {
  background: var(--navy);
  color: var(--on-navy);
}

footer .wordmark,
footer .wordmark .lg-mark {
  color: var(--on-navy);
}

.footer-container {
  padding-block: 64px 28px;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px 64px;
}

.footer-brand {
  flex: 1 1 300px;
  min-width: 0;
  max-width: 420px;
}

.footer-brand p {
  margin-top: 14px;
  font-family: var(--display);
  font-weight: var(--dw);
  font-size: 22px;
  line-height: 1.35;
  color: var(--on-navy);
}

.footer-nav {
  flex: 1 1 480px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 28px;
}

.footer-nav > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15px;
}

.footer-nav p {
  margin: 0 0 4px;
  color: var(--on-navy);
  font-size: 14px;
  font-weight: 600;
}

.footer-nav a {
  color: var(--on-navy-2);
  text-decoration: none;
}

/* touch screens: footer links are full 44px rows, not 22px lines of text */
@media (pointer: coarse) {
  .footer-nav a,
  .footer-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--surface) 14%, transparent);
  color: var(--on-navy-2);
  font-size: 14px;
}

/* the accent fails contrast on navy; links here take the footer's text colour */
.footer-bottom a {
  color: inherit;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* the contact form's spam trap: off screen for people, still in the form for bots */
.form-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Privacy page */
.legal-header {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.legal-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 18px;
}

.legal-header .wordmark {
  color: var(--navy);
  font-size: 34px;
}

.legal {
  max-width: calc(760px + 2 * clamp(16px, 3vw, 40px));
  padding-block: 64px 96px;
}

.legal h1 {
  font-size: var(--fs-h2);
}

.legal h2 {
  margin-top: 40px;
  font-size: 24px;
}

.legal p,
.legal li {
  color: var(--ink2);
  font-size: 17px;
  line-height: 1.65;
}

.legal ul {
  padding-left: 20px;
}

.legal-updated {
  color: var(--muted);
  font-size: 15px;
}

.legal-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink2);
}

.legal-footer .footer-bottom {
  margin-top: 0;
  padding-block: 20px;
  border-top: 0;
  color: var(--muted);
}

/* the privacy, terms and 404 pages fill the screen, so a short page has no gap under its footer */
body:has(> .legal-footer) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

body:has(> .legal-footer) > main {
  flex: 1 0 auto;
}

.field-error {
  color: var(--error);
  font-size: 13px;
  font-weight: 500;
}

.field-error:empty {
  display: none;
}

.contact-form input[aria-invalid='true'] {
  border-color: var(--error);
}

.field-hint {
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}

/* the footer's email reads as a way to reach us, not another section link */
.footer-email {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  color: var(--on-navy) !important;
}

.footer-email__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid color-mix(in srgb, var(--on-navy) 35%, transparent);
  border-radius: 50%;
}

.footer-email > span:last-child {
  display: flex;
  flex-direction: column;
  font-size: 17px;
  font-weight: 500;
}

.footer-email small {
  color: var(--on-navy-2);
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap; /* an address never breaks mid-word (body allows overflow-wrap: anywhere) */
}

.footer-email:hover .footer-email__icon {
  border-color: var(--on-navy);
}

/* founders, under Our story */
.founders {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.founder {
  display: flex;
  align-items: center;
  gap: 12px;
}

.founder__avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.founder__text {
  display: flex;
  flex-direction: column;
}

.founder__name {
  color: var(--ink);
  font-weight: 600;
}

.founder__role {
  color: var(--muted);
  font-size: 14px;
}

.nowrap {
  white-space: nowrap;
}

/* switched-in tab content fades up instead of appearing at once (shown by removing [hidden]) */
@media (prefers-reduced-motion: no-preference) {
  .why-pair,
  .why-diagram,
  [data-platform-panel],
  [data-platform-output] {
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
  }

  @starting-style {
    .why-pair,
    .why-diagram,
    [data-platform-panel],
    [data-platform-output] {
      opacity: 0;
      transform: translateY(4px);
    }
  }
}

/* Illustrations of a search bar or message box (hero question, demo search and composers) are pictures, not inputs:
   no text cursor, no selection, no pointer events, so nobody tries to click or type in them (founders, 2026-10-26). */
.f2-pill,
.ap-searchbar,
.ap-composer,
.platform-question {
  cursor: default;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}