/* Design tokens taken from the reference site's theme */
:root {
  --blue: #1f2236;
  --yellow: #e8a743;
  --dark-yellow: #c88318;
  --gray: #f1f1f1;
  --white: #fff;
  --black: #000;
  --text-gray: #c4c6cd;

  --title-font-size: 50px;
  --subtitle-font-size: 40px;
  --space-40: 40px;
  --border-radius-sm: 5px;
  --border-radius-md: 10px;

  /* Wordmark accent. Swap to the brand blue (#1a56ff) if the logo colors are fixed. */
  --logo-accent: var(--yellow);

  --font: "Sora", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --header-h: 100px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 10px); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.625;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.2; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }

.container { width: 100%; margin-inline: auto; padding-inline: 16px; }
.container-md { max-width: 960px; }
.container-lg { max-width: 1140px; }
.container-xl { max-width: 1320px; }
/* testimonial track runs wider than the page grid so each card gets room */
.container-wide { max-width: 1800px; }
.center { text-align: center; }

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  border-radius: var(--border-radius-sm);
  padding: 10px 22px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.3s;
}
.btn-yellow { background: var(--yellow); color: var(--white); }
.btn-yellow:hover { background: var(--dark-yellow); }
.btn-outline-blue {
  border-color: var(--blue);
  color: var(--blue);
  background: transparent;
  font-weight: 600;
}
.btn-outline-blue:hover { background: var(--blue); color: var(--white); }
.btn-lg { padding: 13px 30px; font-size: 19px; }
.btn-xl { padding: 14px 34px; font-size: 23px; }
.btn-block { display: flex; width: 100%; }
.btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* ---------------- header ---------------- */
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.header { display: flex; justify-content: center; background: var(--white); }
.header-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 1320px;
  height: var(--header-h);
  padding: 0 16px;
}

.logo {
  display: inline-flex;
  gap: 0.3em;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.logo-1 { color: var(--blue); }
.logo-2 { color: var(--logo-accent); }

.header-nav { display: none; align-items: center; height: 100%; margin-left: 24px; }
.header-link {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
  padding: 0 0 0 16px;
  margin-right: 5px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  color: var(--blue);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s;
}
.header-link:hover { color: var(--yellow); }
.header-link svg { width: 16px; height: 16px; }

.has-dropdown { position: relative; height: 100%; }
.dropdown {
  position: absolute;
  top: 100%;
  left: 8px;
  display: grid;
  min-width: 320px;
  padding: 8px;
  border-radius: var(--border-radius-md);
  background: var(--white);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
}
.dropdown[hidden] { display: none; }
.dropdown a {
  padding: 10px 15px;
  border-radius: var(--border-radius-md);
  text-decoration: none;
}
.dropdown a:hover { background: #fafafa; }
.dropdown strong { display: block; font-size: 15px; font-weight: 700; color: var(--blue); margin-bottom: 2px; }
.dropdown span { display: block; font-size: 14px; color: #666; line-height: 1.4; }

.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; height: 100%; }
.header-login { display: none; color: var(--yellow); padding-left: 0; }

.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 10px;
  border: 1px solid #e2e2e6;
  border-radius: 8px;
  background: var(--white);
  cursor: pointer;
}
.burger span { display: block; height: 2px; background: var(--blue); border-radius: 2px; }

.mobile-menu {
  display: grid;
  padding: 8px 16px 20px;
  border-top: 1px solid #eee;
  background: var(--white);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu a {
  height: 60px;
  display: flex;
  align-items: center;
  font-size: 22px;
  font-weight: 500;
  color: var(--blue);
  text-decoration: none;
}
.mobile-menu .mobile-cta { justify-content: center; height: auto; color: var(--white); }

/* ---------------- hero ---------------- */
.hero { background: var(--blue); }
.hero-inner {
  display: flex;
  justify-content: space-between;
  padding-top: var(--space-40);
  padding-bottom: var(--space-40);
}
.hero-content { max-width: 100%; }
.hero-title-div { display: flex; gap: 18px; margin-bottom: 15px; }
.hero-rule {
  flex: 0 0 3px;
  width: 3px;
  align-self: stretch;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.22);
}
.hero-title { color: var(--white); font-size: 34px; font-weight: 900; line-height: 1.2; }
.hero-text-div { display: flex; flex-direction: column; }
.hero-description {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-gray);
  margin-bottom: 30px;
}
.hero-button-div { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.hero-avatars { display: flex; }
.hero-avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 2px solid #fff;
  border-radius: 100%;
  /* fallback tint for the slots still waiting on real photos */
  background: linear-gradient(140deg, #4a4d63, #2b2e45);
}
/* real headshots fill the circle rather than letterboxing inside it */
img.hero-avatar { object-fit: cover; object-position: center 30%; }
.hero-avatar + .hero-avatar { margin-left: -0.5rem; }
.hero-button-div .btn { flex: 0 0 auto; }

.hero-credits {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin-top: 30px;
}
.hero-credit { display: flex; align-items: flex-end; margin: 10px 0; }
.credit-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin-right: 6px;
}
.credit-logo svg { width: 100%; height: 100%; display: block; }
.credit-title { font-size: 16px; font-weight: 600; color: var(--white); }
.credit-divider { display: none; }
.stars { color: var(--yellow); font-size: 18px; letter-spacing: 2px; line-height: 1.2; }

.hero-image { display: none; }

/* ---------------- hero stage ----------------
   Replaces the stock composite and its mocked screenshots with the product's
   own interface, playing the loop the copy promises: missed call, text back,
   booked job, review. Drawn in markup rather than shipped as a PNG, so it
   stays sharp, costs no image bytes on LCP, and can actually move.
   The finished state ships in the HTML — JS only hides it to replay it, so
   no-JS and reduced-motion visitors still get the whole story at once. */
.hero-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 881 / 732;
  /* one knob scales the whole composition; children size in em */
  font-size: clamp(9px, 1.02vw, 13px);
  line-height: 1.5;
}

/* ---- phone ---- */
.hs-phone {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  /* driven off the stage height, so the handset can never outgrow the slot
     the way a percentage width does once the stage gets narrow */
  height: 100%;
  width: auto;
  aspect-ratio: 300 / 620;
  background: #10121d;
  border-radius: 2.6em;
  padding: 0.62em;
  box-shadow: 0 2em 3.4em rgba(0, 0, 0, 0.45), 0 0 0 0.09em rgba(255, 255, 255, 0.09);
}
.hs-screen {
  position: relative;
  height: 100%;
  background: #fff;
  border-radius: 2.1em;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hs-notch {
  position: absolute;
  top: 0.62em;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 1.5em;
  background: #10121d;
  border-radius: 0 0 1em 1em;
  z-index: 3;
}
.hs-top {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 2.5em 1em 0.85em;
  border-bottom: 1px solid #e8eaee;
  background: #f7f8fa;
}
.hs-av {
  flex: 0 0 auto;
  width: 2.5em;
  height: 2.5em;
  border-radius: 100%;
  background: var(--blue);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.92em;
  font-weight: 700;
}
.hs-top strong { display: block; font-size: 1.02em; font-weight: 700; color: #1b1d24; }
.hs-top span { display: block; font-size: 0.86em; color: #8a8f99; }

.hs-thread {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  padding: 1em;
  overflow: hidden;
}
.hs-b {
  max-width: 84%;
  padding: 0.72em 0.9em;
  border-radius: 1.15em;
  font-size: 0.95em;
}
.hs-b.in {
  align-self: flex-start;
  background: #ebedf1;
  color: #22252c;
  border-bottom-left-radius: 0.3em;
}
.hs-b.out {
  align-self: flex-end;
  background: #2f6df6;
  color: #fff;
  border-bottom-right-radius: 0.3em;
}
.hs-tag {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.8em;
  font-weight: 600;
  color: #7d838e;
}
.hs-tag b { color: #2f9e5a; font-weight: 700; }

/* typing dots, same beat as a real thread */
.hs-typing {
  align-self: flex-start;
  display: flex;
  gap: 0.28em;
  padding: 0.85em 0.95em;
  background: #ebedf1;
  border-radius: 1.15em;
  border-bottom-left-radius: 0.3em;
}
.hs-typing i {
  width: 0.45em;
  height: 0.45em;
  border-radius: 100%;
  background: #9aa0aa;
  animation: hsBlink 1.25s infinite;
}
.hs-typing i:nth-child(2) { animation-delay: 0.18s; }
.hs-typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes hsBlink { 0%, 60%, 100% { opacity: 0.35; } 30% { opacity: 1; } }

/* ---- floating cards ---- */
.hs-card {
  position: absolute;
  right: 0;
  width: 57%;
  background: #fff;
  border-radius: 1.1em;
  padding: 1.15em 1.25em;
  box-shadow: 0 1.5em 2.8em rgba(0, 0, 0, 0.32);
}
.hs-alert { top: 2%; }
.hs-booked { top: 41%; right: 4%; }
.hs-review { bottom: 2%; }

.hs-card-top { display: flex; align-items: center; gap: 0.6em; }
.hs-dot {
  width: 0.62em;
  height: 0.62em;
  border-radius: 100%;
  background: #e0483d;
  box-shadow: 0 0 0 0.28em rgba(224, 72, 61, 0.18);
}
.hs-card h3 { font-size: 1.02em; font-weight: 800; color: #1b1d24; }
.hs-card .when { margin-left: auto; font-size: 0.84em; font-weight: 600; color: #9aa0aa; }
.hs-card p { margin-top: 0.5em; font-size: 0.92em; color: #5c626d; }
.hs-card p b { color: #1b1d24; font-weight: 700; }

.hs-booked { display: flex; align-items: center; gap: 0.8em; padding: 0.95em 1.15em; }
.hs-check {
  flex: 0 0 auto;
  width: 2.1em;
  height: 2.1em;
  border-radius: 100%;
  background: #2f9e5a;
  display: grid;
  place-items: center;
}
.hs-check svg { width: 1.1em; height: 1.1em; }
.hs-booked strong { display: block; font-size: 1em; font-weight: 800; color: #1b1d24; }
.hs-booked span { display: block; font-size: 0.88em; color: #6b717c; }

.hs-stars { color: var(--yellow); font-size: 1.15em; letter-spacing: 0.09em; }
.hs-review .src { display: flex; align-items: center; gap: 0.45em; margin-top: 0.6em; font-size: 0.86em; font-weight: 600; color: #8a8f99; }
.hs-review .src svg { width: 1.05em; height: 1.05em; }

/* ---- the replay ---- */
.hs-anim .hs-step { opacity: 0; transform: translateY(0.9em) scale(0.97); }
.hs-anim .hs-step.on {
  opacity: 1;
  transform: none;
  transition: opacity 0.42s ease, transform 0.42s cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* ---------------- section shells ---------------- */
.sec { position: relative; }
.sec-white { background: var(--white); }
.sec-gray { background: var(--gray); }
.sec-blue { background: var(--blue); }
.sec-gray, .sec-white, .sec-blue { padding-top: var(--space-40); padding-bottom: var(--space-40); }
.sec-tight { padding-top: 0; }

/* wave divider between sections */
.wave { display: block; width: 100%; height: auto; margin-bottom: -1px; margin-top: var(--space-40); }

.main-title {
  color: var(--blue);
  font-size: 28px;
  line-height: 1.2;
  font-weight: 900;
  text-align: center;
  padding: var(--space-40) 0;
}
.main-title .sub { display: block; font-size: 0.62em; font-weight: 700; margin-top: 8px; }
.main-title-light { color: var(--white); padding: 0 0 var(--space-40); }

/* ---------------- carousels ---------------- */
.carousel { position: relative; display: flex; align-items: center; margin: 0 1.5rem; }
.car-viewport { flex: 1; overflow: hidden; }
.car-track { display: flex; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.car-slide { display: flex; flex: 0 0 100%; padding: 0 12px; }
.carousel-3 .car-slide { flex: 0 0 33.333%; }

.car-ctrl {
  position: absolute;
  top: calc(50% - 25px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--yellow);
  cursor: pointer;
  transition: all 0.3s;
}
.car-ctrl svg { width: 50px; height: 50px; }
.car-ctrl:hover { color: var(--dark-yellow); }
.car-ctrl:disabled { opacity: 0.3; cursor: default; }
.car-prev { left: 0; margin-left: -2.5rem; }
.car-next { right: 0; margin-right: -2.5rem; }

/* testimonial card */
.t-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 14px;
  border-radius: var(--border-radius-md);
  background: var(--white);
  margin-bottom: 40px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
/* Fixed 250x210 well: portrait clips letterbox inside it, as on the reference */
.t-video {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 250px;
  max-width: 100%;
  height: 210px;
  border-radius: var(--border-radius-md);
  background: #000;
  margin-inline: auto;
  cursor: pointer;
}
.t-video video, .t-video img, .t-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--border-radius-md);
  object-fit: contain;
}
.t-video .play {
  width: 0;
  height: 0;
  border-left: 20px solid rgba(255, 255, 255, 0.9);
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  margin-left: 5px;
}
.t-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.t-card .stars { padding-left: 1rem; display: flex; align-items: center; margin-top: 12px; }
.t-quote { padding: 0 1rem; margin: 16px 0 0; font-size: 16px; }
/* pinned to the bottom so cards of differing quote length still line up */
.t-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
}
.t-name {
  font-weight: 900;
  color: var(--black);
  line-height: 1.2;
  font-size: 1rem;
  margin: 12px 0 0 20px;
}
.t-company {
  margin: 2px 0 0 20px;
  font-size: 13px;
  font-weight: 600;
  color: #6b6e7d;
  line-height: 1.3;
}
.t-link {
  display: inline-flex;
  align-items: flex-end;
  flex: 0 0 auto;
  white-space: nowrap;
  gap: 5px;
  margin: 12px 20px 0 20px;
  font-weight: 900;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--yellow);
  text-decoration: none;
  transition: all 0.3s;
}
.t-link svg { width: 20px; height: 20px; }
.t-link:hover { color: var(--dark-yellow); }

/* trade card */
.trade-card { text-align: center; padding: 0 0 1rem; border-radius: var(--border-radius-md); }
.trade-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
  background: #262940;
}
.trade-card p {
  margin-top: 12px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  text-transform: capitalize;
}

/* expandable "all trades" panel — 0fr/1fr animates to content height */
.trades-all {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 350ms ease, visibility 350ms;
}
.trades-all.is-open { grid-template-rows: 1fr; visibility: visible; }
.trades-all-inner { overflow: hidden; min-height: 0; }

.trades-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 20px;
  padding-top: var(--space-40);
}

/* ---------------- features ---------------- */
.feature {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: var(--space-40);
}
.feature-content { max-width: 100%; }
.feature-image {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: 24px;
  border: 1px dashed #d3d5dd;
  border-radius: var(--border-radius-md);
  color: #9498a8;
  font-size: 14px;
  font-weight: 600;
}
/* ---- device screenshots (bezel already baked into the PNG) ---- */
.feature-image-shot {
  border: 0;
  aspect-ratio: auto;
  display: flex;
  justify-content: center;
}
.feature-image-shot img {
  display: block;
  width: auto;
  /* height:auto is what keeps the width/height attributes from stretching the
     image once max-width kicks in — without it the mockups render distorted */
  height: auto;
  max-width: 100%;
  max-height: 620px;
  /* follows the device silhouette rather than boxing the transparent PNG */
  filter: drop-shadow(0 26px 40px rgba(10, 12, 18, 0.28));
}

/* ---- browser frame for embedded page demos ---- */
.feature-image-browser { border: 0; aspect-ratio: auto; display: block; }
.browser {
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 60px rgba(20, 22, 31, 0.22);
}
/* the demo is authored at 1000x700 and scaled to fit by script.js */
.browser-view { position: relative; width: 100%; aspect-ratio: 1000 / 700; overflow: hidden; }
.browser-view iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1000px;
  height: 700px;
  border: 0;
  transform-origin: 0 0;
}

/* ---- live phone demos, scaled to fit by script.js like the browser frame ---- */
.feature-image-phone { border: 0; aspect-ratio: auto; display: flex; justify-content: center; }
/* authored at 420x690 in demos/how-it-works/?only= */
.phone-view {
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 420 / 690;
  overflow: hidden;
}
.phone-view iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 420px;
  height: 690px;
  border: 0;
  transform-origin: 0 0;
}

.feature-title { color: var(--blue); font-size: 26px; font-weight: 700; line-height: 1.2; }
.feature-desc { font-size: 18px; font-style: italic; margin-top: 10px; }
.feature-list { margin-top: 24px; }
.fl-title { font-size: 16px; font-weight: 700; color: var(--yellow); margin: 0 0 5px 5px; }
.fl-desc { font-size: 15px; line-height: 1.625; margin-bottom: 10px; }
.feature .btn { margin-top: var(--space-40); width: 100%; }

/* ---------------- process ---------------- */
.process { display: grid; gap: 24px; }
.process-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  border-radius: var(--border-radius-md);
  background: var(--gray);
}
.process-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
  border-radius: 100%;
  background: var(--yellow);
  color: var(--white);
  font-size: 22px;
  font-weight: 900;
}
.process-title { font-size: 21px; font-weight: 700; margin-bottom: 1.25rem; color: var(--blue); }
.process-time { font-weight: 600; color: var(--yellow); }
.process-card p { font-size: 16px; }

/* ---------------- why choose us ---------------- */
.why-grid { display: grid; gap: 24px; }
.why-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1rem;
  border-radius: var(--border-radius-md);
  background: var(--blue);
}
.why-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  width: 50px;
  margin-bottom: 10px;
  border-radius: var(--border-radius-sm);
  background: rgba(255, 255, 255, 0.1);
  color: var(--yellow);
  font-size: 22px;
}
.why-title { margin-bottom: 10px; color: var(--white); font-size: 21px; font-weight: 700; }
.why-desc { font-size: 16px; margin-bottom: 10px; color: var(--white); }
.why-desc a { color: var(--yellow); text-decoration: none; transition: all 0.3s; }
.why-desc a:hover { color: var(--dark-yellow); }

/* ---------------- pricing ---------------- */
.price-wrap { display: flex; justify-content: center; padding-bottom: var(--space-40); }
.price-card {
  width: 100%;
  max-width: 460px;
  padding: 32px;
  border-radius: var(--border-radius-md);
  background: var(--white);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  text-align: center;
}
.price-badge {
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--border-radius-sm);
  background: var(--yellow);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.price { margin-top: 14px; }
.price-amt { font-size: 56px; font-weight: 900; color: var(--blue); line-height: 1; }
.price-per { font-size: 18px; font-weight: 600; color: #666; }
.price-note { margin-top: 8px; font-size: 14px; color: #666; }
.price-list { margin: 24px 0 28px; text-align: left; display: grid; gap: 10px; }
.price-list li { position: relative; padding-left: 28px; font-size: 16px; }
.price-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 18px;
  height: 18px;
  border-radius: 100%;
  background: var(--yellow)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")
    center / 11px 11px no-repeat;
}

/* ---------------- blog / press ---------------- */
.blog-sec { padding: 50px 0; }
.blog-header { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; margin-bottom: 2.5rem; }
.blog-eyebrow {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--yellow);
  margin-bottom: 0.4rem;
}
.blog-title { font-size: 28px; font-weight: 900; color: var(--blue); line-height: 1.15; }

.blog-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  height: 100%;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14); }
.blog-img {
  display: block;
  width: 100%;
  height: 180px;
  flex-shrink: 0;
  object-fit: cover;
  object-position: center 40%;
  background: var(--blue);
}
.blog-body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem; min-width: 0; }
.blog-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.blog-badge {
  padding: 3px 9px;
  border-radius: var(--border-radius-sm);
  background: var(--yellow);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.blog-date { font-size: 13px; color: #888; }
.blog-card-title { font-size: 17px; font-weight: 700; color: var(--blue); line-height: 1.35; margin-bottom: 0.6rem; }
.blog-author { font-size: 12px; color: #888; font-weight: 500; font-style: italic; margin-bottom: 0.4rem; }
.blog-excerpt { font-size: 14px; color: #555; line-height: 1.6; margin-bottom: 1rem; }
.blog-footer {
  margin-top: auto;
  border-top: 1px solid #eee;
  padding-top: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.blog-source { font-size: 12px; color: #999; font-weight: 500; }
.blog-read { font-size: 14px; font-weight: 600; color: var(--yellow); }

/* ---------------- partners ---------------- */
.sec-partners { padding-bottom: calc(var(--space-40) * 1.5); }
.carousel-partners .car-slide { flex: 0 0 50%; }
.partner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 112px;
  padding: 0 4px;
}
.carousel-partners .car-slide { padding: 0 6px; }
/* Every logo is pre-trimmed and centred on an identical 800x320 canvas with
   matched optical weight, so one uniform box is all the CSS needs to do. */
.partner img {
  display: block;
  width: 100%;
  max-width: 230px;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.85;
  transition: opacity 0.3s;
}
.partner img:hover { opacity: 1; }

/* ---------------- faq ---------------- */
.faq { padding-bottom: 24px; }
.faq-item {
  border-radius: var(--border-radius-md);
  margin-bottom: 24px;
  border: 1px solid #dee2e6;
  background: var(--white);
  overflow: hidden;
}
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  font-size: 19px;
  font-weight: 800;
  color: var(--blue);
  cursor: pointer;
  list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
  content: "";
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f2236' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s;
}
.faq-item[open] .faq-q::after { transform: rotate(180deg); }
.faq-a { padding: 0 20px 20px; display: grid; gap: 12px; font-size: 18px; }
.faq-list { display: grid; gap: 8px; padding-left: 22px; list-style: decimal; }

/* ---------------- cta ---------------- */
.cta-sec { padding-bottom: var(--space-40); }
.cta-wrapper {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  padding: 32px;
  margin: 0 10px;
  border-radius: var(--border-radius-md);
  background: var(--blue);
}
.cta-body { text-align: center; margin-top: 32px; }
.cta-title { color: var(--white); font-size: 28px; line-height: 1; margin-bottom: 10px; font-weight: 900; }
.cta-desc { color: var(--text-gray); font-size: 18px; margin-bottom: 30px; }
.cta-image { display: none; }

/* ---------------- footer ---------------- */
.footer { padding-top: 64px; background: var(--blue); }
.footer-big-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  margin-bottom: var(--space-40);
}
.footer-logo { justify-content: center; }
.footer .logo-1 { color: var(--white); }
.footer .logo-2 { color: var(--yellow); }
.footer-description {
  margin: 12px 0 20px;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
  text-align: center;
}

.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.footer-group { display: grid; gap: 6px; justify-items: center; }
.footer-title { font-size: 18px; font-weight: 700; margin-bottom: 1rem; color: var(--white); }
.footer-link { display: block; color: var(--text-gray); font-size: 16px; text-decoration: none; }
.footer-link:hover { text-decoration: underline; }

.footer-after {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  padding-bottom: 32px;
}
.footer-copy { color: var(--text-gray); font-size: 14px; }
.footer-compliance { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.footer-special { color: var(--text-gray); font-size: 13px; text-decoration: none; }
.footer-special:hover { text-decoration: underline; }

/* ================= responsive ================= */
@media (min-width: 768px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-card { flex-direction: row; }
  .blog-img { width: 260px; height: auto; min-height: 200px; align-self: stretch; }
  .blog-header { flex-direction: row; align-items: center; justify-content: space-between; }

  .process { grid-template-columns: repeat(3, 1fr); }
  .why-grid { grid-template-columns: repeat(3, 1fr); }
  .partners { grid-template-columns: repeat(5, 1fr); }

  .carousel-2 .car-slide { flex: 0 0 50%; }
  .carousel-partners .car-slide { flex: 0 0 20%; }
  .t-card { flex-direction: row; align-items: stretch; gap: 20px; padding: 20px; min-height: 250px; }
  .t-video { margin-inline: 0; align-self: center; }
  .t-card .stars { margin-top: 0; padding-left: 0; }
  .t-quote { padding: 0; margin-top: 14px; font-size: 18px; }
  .t-name, .t-company { margin-left: 0; }
}

@media (min-width: 992px) {
  .header-nav { display: flex; }
  .header-login { display: flex; }
  .burger { display: none; }
  .mobile-menu { display: none !important; }

  .main-title { font-size: var(--title-font-size); padding: calc(var(--space-40) * 2) 0; }
  .main-title-light { padding: calc(var(--space-40) * 2) 0 var(--space-40); }

  .hero-inner { padding-top: calc(var(--space-40) * 3); padding-bottom: calc(var(--space-40) * 3); }
  .hero-content { max-width: 52%; margin-right: calc(var(--space-40) / 2); }
  .hero-title { font-size: 4.8rem; }
  .hero-title-div { gap: 32px; margin-bottom: 50px; }
  /* description on the left, avatars + CTA stacked to its right */
  .hero-text-div { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 24px; }
  .hero-description { font-size: 1.25rem; margin-bottom: 0; max-width: 46ch; }
  .hero-button-div { flex-direction: column; align-items: flex-start; gap: 12px; padding-left: 4rem; }
  .hero-credits { margin-top: 75px; justify-content: flex-start; gap: 32px; }
  .credit-divider { display: block; width: 1px; align-self: stretch; background: rgba(255, 255, 255, 0.15); }
  /* landscape composite, so no forced portrait ratio and no placeholder frame */
  .hero-image {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 46%;
    flex: 0 0 46%;
    margin-top: -2rem;
    align-self: center;
  }
  .hero-image picture { display: block; width: 100%; }
  .hero-image img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.35));
  }

  .feature { flex-direction: row; align-items: center; gap: 40px; padding-bottom: calc(var(--space-40) * 2); }
  .feature-content { max-width: 55%; }
  .feature-image { max-width: 45%; flex: 0 0 45%; margin-bottom: 0; margin-right: 48px; }
  .feature-rev { flex-direction: row-reverse; }
  .feature-rev .feature-image { margin-right: 0; margin-left: 48px; }

  .feature-title { font-size: var(--subtitle-font-size); }
  .feature-desc { font-size: 20px; }
  .fl-title { font-size: 18px; }
  .fl-desc { font-size: 16px; }
  .feature .btn { width: auto; }

  .carousel { margin: 0 3.5rem; }
  .car-ctrl svg { width: 100px; height: 100px; }
  .car-ctrl { top: calc(50% - 50px); }
  .car-prev { margin-left: -4.5rem; }
  .car-next { margin-right: -4.5rem; }

  .blog-title { font-size: var(--title-font-size); }
  .cta-wrapper { flex-direction: row; padding: 24px; }
  .cta-body { padding-right: 128px; margin-top: 0; }
  .cta-title { font-size: var(--subtitle-font-size); }
  /* same cutout as the hero — the CTA panel is the same navy, so it sits flush */
  .cta-image {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 44%;
    flex: 0 0 44%;
  }
  .cta-image picture { display: block; width: 100%; }
  .cta-image img { width: 100%; height: auto; }

  .faq-q { font-size: 26px; font-weight: 600; }

  .footer-inner { flex-direction: row; align-items: flex-start; justify-content: space-between; }
  .footer-group { justify-items: start; margin-right: 3rem; }
  .footer-after { flex-direction: row; justify-content: space-between; }
  .footer-compliance { flex-wrap: nowrap; gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---- laptop demos, same scaling as the phone and browser frames ---- */
.feature-image-laptop { border: 0; aspect-ratio: auto; display: flex; justify-content: center; }

/* authored at 740x475 in demos/how-it-works/?only=web — the laptop at its cap
   with nothing beside it, measured flush so there is no dead space on any edge.
   The embed drops the phone column precisely so this column can go to the
   screen; at half the page width, fitting both left the site unreadable. The
   panel brings its own laptop frame, so this goes in bare rather than inside
   the .browser chrome. */
.web-view {
  position: relative;
  width: 100%;
  max-width: 740px;
  aspect-ratio: 740 / 475;
  overflow: hidden;
}
.web-view iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 740px;
  height: 475px;
  border: 0;
  transform-origin: 0 0;
}
/* authored at 820x530 in demos/how-it-works/?only= — matches the box the
   laptop is centred in, so there is no dead space above or below */
.laptop-view {
  position: relative;
  width: 100%;
  max-width: 820px;
  aspect-ratio: 820 / 530;
  overflow: hidden;
}
.laptop-view iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 820px;
  height: 530px;
  border: 0;
  transform-origin: 0 0;
}