/* expressWAI: mobile-first styles (light theme only) */

:root {
  color-scheme: light;

  --navy: #13294B;
  --slate: #4A515B;
  --mist: #EEF0F2;
  --line: #D3D7DC;
  --blue: #1D63ED;         /* Moby blue: 5.17:1 on white, 4.53:1 on mist */

  --font-head: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Source Sans 3", system-ui, sans-serif;

  --radius: 10px;
  --gutter: 20px;
  --max: 1080px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  background: var(--mist);
  color: var(--slate);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-head);
  color: var(--navy);
  line-height: 1.12;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
h1 { font-weight: 800; font-size: clamp(2.4rem, 8vw, 4.25rem); letter-spacing: -0.02em; }
h2 { font-weight: 800; font-size: clamp(1.75rem, 5vw, 2.6rem); }
h3 { font-weight: 700; font-size: 1.25rem; }

p { margin: 0 0 1em; }
strong { color: var(--navy); }

/* Links on light backgrounds */
a {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
a:hover { color: var(--navy); }

:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.narrow { max-width: 760px; }

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--navy);
  color: #FFFFFF;
  font-weight: 700;
  border-radius: 6px;
}
.skip-link:focus { top: 12px; }

/* ---------- Buttons & links ---------- */

/* Default (light sections): navy button, white text */
.btn {
  display: inline-block;
  padding: 14px 24px;
  background: var(--navy);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid var(--navy);
  border-radius: 8px;
  transition: transform 0.12s ease, background-color 0.12s ease;
}
.btn:hover { color: #FFFFFF; background: var(--slate); border-color: var(--slate); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn-small { padding: 10px 16px; font-size: 1rem; }

.text-link { font-weight: 700; }

/* On navy backgrounds: blue button, white text */
.founding .btn,
.final-cta .btn {
  background: var(--blue);
  border-color: var(--blue);
  color: #FFFFFF;
}
.founding .btn:hover,
.final-cta .btn:hover {
  background: var(--mist);
  border-color: var(--mist);
  color: var(--navy);
}
.founding :focus-visible,
.final-cta :focus-visible,
.site-footer :focus-visible { outline-color: #FFFFFF; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--mist);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  flex-wrap: wrap;
}

.logo {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.5rem;
  text-decoration: none;
  color: var(--navy);
  letter-spacing: -0.02em;
}
.logo:hover { color: var(--navy); }
.logo-mark {
  background: var(--blue);
  color: #FFFFFF;
  padding: 0 0.18em;
  margin-left: 0.04em;
  border-radius: 3px;
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
  border-radius: 8px;
  font: 700 1rem var(--font-body);
  cursor: pointer;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--navy);
  position: relative;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }

.site-nav { width: 100%; }
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 8px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.site-nav a:not(.btn) {
  display: block;
  padding: 10px 0;
  font-weight: 600;
}
.site-nav .btn { margin-top: 8px; }

/* With JS on small screens, the menu collapses behind the toggle */
.js .nav-toggle { display: inline-flex; }
.js .site-nav { display: none; }
.js .site-nav.is-open { display: block; }

/* ---------- Sections ---------- */

.hero {
  position: relative;
  isolation: isolate;
  padding: 56px 0 64px;
}
/* Techy background: circuit traces (hero-bg.svg) over a faint dot grid.
   Faded out toward the text so it never competes with the headline. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    url("hero-bg.svg") right center / cover no-repeat,
    radial-gradient(rgba(29, 99, 237, 0.22) 1.1px, transparent 1.7px) 0 0 / 22px 22px;
  /* Phones: pattern only behind the phone, fading in below the text and out at the bottom */
  -webkit-mask-image: linear-gradient(to bottom, transparent 44%, #000 64%, #000 90%, transparent);
  mask-image: linear-gradient(to bottom, transparent 44%, #000 64%, #000 90%, transparent);
  pointer-events: none;
}
.hero h1 { text-wrap: balance; }
/* The headline sets the width; the paragraph below fills exactly that width */
.hero-text { width: fit-content; max-width: 100%; }
.hero-text .lead { width: 0; min-width: 100%; max-width: none; }
.lead {
  font-size: clamp(1.2rem, 3vw, 1.4rem);
  max-width: 38ch;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 28px;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Static phone in the hero: folded Galaxy Z Fold 8 ----------
   81.9 x 123.9 mm body, 5.5" 10:16 cover screen, hinge on the left edge */
.phone-demo {
  margin: 48px auto 0;
  width: 100%;
  max-width: 300px;
}
.phone {
  container: cover / inline-size;
  position: relative;
  aspect-ratio: 81.9 / 123.9;
  background: var(--navy);
  border-radius: 26px;
  padding: 11px 14px 11px 16px;
  box-shadow: 0 24px 48px -12px rgba(19, 41, 75, 0.35);
  --r-screen: 16px;
}
.phone::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  border-radius: 2px;
  background: var(--slate);
}
.phone-demo figcaption {
  margin-top: 16px;
  text-align: center;
  font-size: 0.95rem;
  text-wrap: balance;
}

/* ---------- "See it in action": folding Galaxy Z Fold 8 ---------- */
.demo { overflow-x: clip; }
.demo-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ---------- Folding phone: Samsung Galaxy Z Fold 8 ----------
   Unfolded: 161.4 x 123.9 mm, 7.6" 4:3 inner screen.
   Folded: 81.9 x 123.9 mm, 5.5" 10:16 cover screen, hinge on the left.
   Sizes inside use cqi (1% of the phone's unfolded width) so it scales as one piece. */
.fold {
  container: fold / inline-size;
  width: min(100%, 640px);
  perspective: 2200px;
  --bezel: clamp(7px, 2.2cqi, 14px);
  --r-body: clamp(14px, 4cqi, 26px);
  --r-screen: clamp(9px, 2.6cqi, 16px);
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
}
.fold-device {
  position: relative;
  aspect-ratio: 161.4 / 123.9;
  transform-style: preserve-3d;
  transition: transform 0.8s var(--ease);
}
.fold-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
}
.inner-half {
  height: 100%;
  background: #FFFFFF;
}

/* Right half: stays put */
.fold-right {
  left: 50%;
  padding: var(--bezel) var(--bezel) var(--bezel) 0;
  background: var(--navy);
  border-radius: 0 var(--r-body) var(--r-body) 0;
  box-shadow: 0 24px 48px -12px rgba(19, 41, 75, 0.35);
  transform: translateZ(-2px);
  transition: border-radius 0.2s;
}
.fold-right .inner-half {
  border-radius: 0 var(--r-screen) var(--r-screen) 0;
  box-shadow: inset 8px 0 10px -9px rgba(19, 41, 75, 0.10); /* crease */
}

/* Left half: swings around the hinge (its right edge) */
.fold-flap {
  left: 0;
  transform-origin: right center;
  transform-style: preserve-3d;
  transform: translateZ(-1px);
  transition: transform 0.8s var(--ease);
}
.flap-face {
  position: absolute;
  inset: 0;
  background: var(--navy);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flap-front {
  padding: var(--bezel) 0 var(--bezel) var(--bezel);
  border-radius: var(--r-body) 0 0 var(--r-body);
  box-shadow: 0 24px 48px -12px rgba(19, 41, 75, 0.35);
}
.flap-front .inner-half {
  border-radius: var(--r-screen) 0 0 var(--r-screen);
  box-shadow: inset -8px 0 10px -9px rgba(19, 41, 75, 0.10); /* crease */
}
/* The back of the left half is the cover screen */
.flap-back {
  container: cover / inline-size;
  transform: rotateY(180deg);
  padding: var(--bezel);
  border-radius: var(--r-body);
  box-shadow: 0 24px 48px -12px rgba(19, 41, 75, 0.35);
}
/* Hinge edge, seen on the left when folded */
.flap-back::before {
  content: "";
  position: absolute;
  left: calc(var(--bezel) * 0.35);
  top: 6%;
  bottom: 6%;
  width: 2px;
  border-radius: 2px;
  background: var(--slate);
}

/* Headline on the inner screen */
.fold-content {
  position: absolute;
  inset: var(--bezel);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 5cqi;
  text-align: center;
}
.fold-content h2 {
  font-size: clamp(24px, 6.4cqi, 42px);
  margin-bottom: 0.45em;
  text-wrap: balance;
}
.fold-content p {
  font-size: clamp(14px, 2.9cqi, 19px);
  line-height: 1.5;
  max-width: 30em;
  margin: 0;
  text-wrap: balance;
}
.fold-content > * {
  transition: opacity 0.5s ease 0.75s, transform 0.5s ease 0.75s;
}
.fold-content > p { transition-delay: 0.9s; }

/* Folded state (only when JavaScript is running; without it the phone stays open) */
.js .fold:not(.is-open) .fold-device { transform: translateX(-25%); transition-delay: 0.15s; }
.js .fold:not(.is-open) .fold-flap { transform: translateZ(-1px) rotateY(180deg); transition-delay: 0.15s; }
.js .fold:not(.is-open) .fold-right { border-radius: var(--r-body); transition-delay: 0.8s; }
.js .fold:not(.is-open) .fold-content > * {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.15s, transform 0.15s;
}

/* Cover screen: missed-call text example */
.phone-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #FFFFFF;
  border-radius: var(--r-screen);
  overflow: hidden;
  padding-top: clamp(16px, 9.44cqi, 26px);
  text-align: left;
}
.phone-notch {
  position: absolute;
  top: clamp(6px, 3.3cqi, 9px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(7px, 4.01cqi, 11px);
  height: clamp(7px, 4.01cqi, 11px);
  background: var(--navy);
  border-radius: 50%;
}
.chat-header {
  display: flex;
  align-items: center;
  gap: clamp(6px, 3.78cqi, 10px);
  padding: 2px clamp(8px, 5.19cqi, 14px) clamp(6px, 3.78cqi, 10px);
  border-bottom: 1px solid var(--line);
}
.chat-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: clamp(22px, 11.8cqi, 32px);
  height: clamp(22px, 11.8cqi, 32px);
  border-radius: 50%;
  background: var(--blue);
  color: #FFFFFF;
  font: 800 clamp(9px, 4.72cqi, 12.8px) var(--font-head);
}
.chat-name {
  color: var(--navy);
  font-weight: 700;
  font-size: clamp(11px, 5.31cqi, 14.4px);
}
.chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(5px, 2.6cqi, 7px);
  padding: clamp(8px, 4.48cqi, 12px) clamp(6px, 3.78cqi, 10px) clamp(10px, 5.9cqi, 16px);
  overflow: hidden;
}
.chat p { margin: 0; }
.chat-system {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--slate);
  font-size: clamp(9.5px, 4.72cqi, 12.8px);
  font-weight: 600;
  margin-bottom: 4px !important;
}
.chat-system svg { color: var(--slate); flex: none; width: 1.1em; height: 1.1em; }
.msg {
  max-width: 84%;
  padding: 0.6em 0.9em;
  font-size: clamp(10.5px, 5.31cqi, 14.4px);
  line-height: 1.35;
  color: var(--navy);
}
.msg-in {
  align-self: flex-start;
  background: var(--mist);
  border-radius: 1.25em 1.25em 1.25em 0.3em;
}
.msg-out {
  align-self: flex-end;
  background: var(--blue);
  color: #FFFFFF;
  border-radius: 1.25em 1.25em 0.3em 1.25em;
}
.chat-meta {
  align-self: flex-start;
  margin: -2px 0 4px 6px !important;
  color: var(--slate);
  font-size: clamp(9px, 4.48cqi, 12px);
}
/* Small phones: the cover screen only has room for the first message */
@container cover (max-width: 230px) {
  .msg-extra { display: none; }
}

/* Button under the phone (touch and keyboard users) */
.fold-toggle {
  margin-top: 18px;
  padding: 8px 16px;
  background: #FFFFFF;
  color: var(--navy);
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 600 0.95rem var(--font-body);
  cursor: pointer;
}
.fold-toggle:hover { border-color: var(--navy); }

@media (prefers-reduced-motion: reduce) {
  .fold-device,
  .fold-flap,
  .fold-right,
  .fold-content > * { transition: none !important; }
}

/* "Works with what you use" chips */
.works-with {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 32px;
}
.works-with p {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chips li {
  padding: 4px 14px;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--slate);
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Phones: full-width primary button, centered secondary link */
@media (max-width: 599px) {
  .hero-actions {
    align-self: stretch;
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions .btn { width: 100%; text-align: center; }
  .hero-actions .text-link { align-self: center; }
}

.section { padding: 64px 0; }
.section-tint { background: #FFFFFF; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.eyebrow {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.4em;
}

/* Sound familiar? */
.quote-grid {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.quote-card {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 22px 6px;
}
.quote-card blockquote { margin: 0; }
.quote-card p {
  color: var(--navy);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.45;
}

/* Start here */
.feature-grid {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}
.feature-card {
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-top: 6px solid var(--blue);
  border-radius: var(--radius);
  padding: 24px 24px 8px;
}
.feature-card h3 { font-size: 1.35rem; }

/* Also on the menu */
.menu-grid {
  display: grid;
  gap: 32px;
  margin-top: 24px;
}
.menu-group h3 {
  padding-bottom: 10px;
  border-bottom: 2px solid var(--navy);
}
.menu-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-group li {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.menu-group li:last-child { border-bottom: 0; }

/* How it works */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 24px 0 32px;
  padding: 0;
  display: grid;
  gap: 24px;
}
.step {
  counter-increment: step;
  position: relative;
  padding-left: 64px;
}
.step::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -2px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--navy);
  color: #FFFFFF;
  border: 3px solid var(--blue);
  border-radius: 50%;
  font: 800 1.25rem var(--font-head);
}
.step h3 { margin-top: 8px; margin-bottom: 0.3em; }

/* Founding clients: full navy band */
.founding {
  background: var(--navy);
  border-top: 6px solid var(--blue);
  color: var(--mist);
  padding: 56px 0;
}
.founding h2 {
  color: #FFFFFF;
  font-size: clamp(1.5rem, 4vw, 2rem);
}
.founding p { max-width: 60ch; margin-bottom: 28px; }

/* About */
.about {
  display: grid;
  gap: 24px;
  align-items: start;
}
.about p { max-width: 60ch; }
.headshot {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--navy);
}
.headshot-placeholder {
  display: grid;
  place-items: center;
  background: #FFFFFF;
  font-weight: 700;
  font-size: 0.95rem;
}

/* Questions */
.faq { margin-top: 24px; }
.faq details {
  border-bottom: 1px solid var(--navy);
}
.faq details:first-child { border-top: 1px solid var(--navy); }
.faq summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 20px 44px 20px 0;
  color: var(--navy);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq details p { padding-right: 44px; margin-bottom: 20px; }

/* Final call */
.final-cta {
  background: var(--navy);
  color: var(--mist);
  padding: 72px 0;
  text-align: center;
}
.final-cta h2 { color: #FFFFFF; }
.final-cta .lead { margin: 0 auto 28px; }

/* Footer */
.site-footer {
  background: var(--navy);
  color: var(--mist);
  border-top: 1px solid var(--slate);
  padding: 36px 0 44px;
}
.site-footer a { color: #FFFFFF; }
.site-footer a:hover { color: var(--mist); text-decoration-color: var(--blue); }
.footer-inner {
  display: grid;
  gap: 16px;
}
.logo-footer { color: #FFFFFF; margin: 0; }
.site-footer address { font-style: normal; line-height: 1.7; }
.copyright { margin: 0; font-size: 0.95rem; }

/* ---------- Larger screens ---------- */

@media (min-width: 720px) {
  :root { --gutter: 32px; }

  .js .nav-toggle { display: none; }
  .site-nav,
  .js .site-nav { display: block; width: auto; }
  .header-inner { flex-wrap: nowrap; min-height: 72px; }
  .site-nav ul {
    flex-direction: row;
    align-items: center;
    gap: 28px;
    padding: 0;
  }
  .site-nav a:not(.btn) { padding: 6px 0; }
  .site-nav .btn { margin-top: 0; }

  .works-with,
  .chips { flex-wrap: nowrap; }

  .hero { padding: 96px 0 104px; }
  .section { padding: 88px 0; }
  .founding { padding: 72px 0; }

  .quote-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .menu-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 56px; }
  .about { grid-template-columns: 160px 1fr; gap: 40px; }
  .headshot { width: 160px; height: 160px; }

  .footer-inner {
    grid-template-columns: auto 1fr auto;
    align-items: end;
    gap: 40px;
  }
}

@media (min-width: 960px) {
  /* Hero: text left, phone right */
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: center;
    gap: 56px;
  }
  .hero h1 { font-size: clamp(2.8rem, 4.6vw, 3.75rem); }
  /* Desktop: the pattern shows (1) in bands above and below the text, full width, and
     (2) on the right, starting where the phone column begins. The middle strip on the left, where the headline,
     paragraph, buttons and chips sit, stays clear. Edges fade out top and bottom. */
  .hero::before {
    -webkit-mask-image:
      linear-gradient(to bottom, transparent, #000 5%, #000 13%, transparent 21%, transparent 80%, #000 87%, #000 93%, transparent),
      linear-gradient(to right, transparent min(calc(50% + 160px), calc(100% - 380px)), #000 min(calc(50% + 230px), calc(100% - 310px))),
      linear-gradient(to bottom, transparent, #000 12%, #000 80%, transparent);
    -webkit-mask-composite: source-over, source-in, source-over;
    mask-image:
      linear-gradient(to bottom, transparent, #000 5%, #000 13%, transparent 21%, transparent 80%, #000 87%, #000 93%, transparent),
      linear-gradient(to right, transparent min(calc(50% + 160px), calc(100% - 380px)), #000 min(calc(50% + 230px), calc(100% - 310px))),
      linear-gradient(to bottom, transparent, #000 12%, #000 80%, transparent);
    mask-composite: add, intersect, add;
  }
  .phone-demo { margin: 0; }

  .feature-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .step { padding-left: 0; padding-top: 60px; }
  .step h3 { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
  .btn:hover,
  .btn:active { transform: none; }
}