/* Mainline-inspired public system for Buytena. Uses the site fonts only. */
.mainline-page {
  --ml-ink: #06152b;
  --ml-muted: #4f5d73;
  --ml-line: #e2e8f0;
  --ml-surface: #ffffff;
  --ml-soft: #f7f9fc;
  --ml-orange: #f97316;
  --ml-orange-dark: #ea580c;
  --ml-navy: #06152b;
  --ml-panel: #0a1628;
  background: var(--ml-surface);
  color: var(--ml-ink);
  font-family: var(--font-sans);
}

/* The floating pill navbar lives in css/mainline-header.css (loaded globally). */
.mainline-home { margin: .625rem; overflow: hidden; border-radius: 8px; background: #fff; }

.mainline-container {
  width: min(100% - 2.5rem, 72rem);
  margin-inline: auto;
}

.mainline-hero {
  overflow: hidden;
  padding: 8rem 0 5.5rem;
  background: radial-gradient(circle at 50% 0%, rgb(12 31 68 / 0.08), transparent 34rem), linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
  text-align: center;
}

.mainline-hero__inner {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.mainline-pill,
.mainline-section-heading small,
.mainline-quote small,
.mainline-final-cta small,
.mainline-pricing article > small {
  color: var(--ml-orange-dark);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.mainline-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid rgb(12 31 68 / 0.25);
  border-radius: 999px;
  background: rgb(12 31 68 / 0.06);
}

.mainline-pill span {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--ml-orange);
  box-shadow: 0 0 0 4px rgb(12 31 68 / 0.18);
}

.mainline-hero h1 {
  max-width: 58rem;
  margin: 1.5rem auto 0;
  color: var(--ml-ink);
  font-size: clamp(3rem, 7vw, 6.25rem);
  font-weight: 600;
  letter-spacing: -0.075em;
  line-height: 0.98;
  text-wrap: balance;
}

.mainline-hero h1 em {
  color: var(--ml-orange);
  font-style: normal;
}

.mainline-hero__lead {
  max-width: 38rem;
  margin: 1.75rem auto 0;
  color: var(--ml-muted);
  font-size: 1.125rem;
  line-height: 1.65;
}

.mainline-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

.mainline-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 2.9rem;
  padding: 0.75rem 1.1rem;
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.mainline-button:hover {
  transform: translateY(-2px);
}

.mainline-button--primary {
  background: #0e2247;
  color: #ffffff;
  box-shadow: 0 12px 25px -15px rgb(12 31 68 / 0.4);
}

.mainline-button--primary:hover {
  background: #12295a;
  color: #ffffff;
}

.mainline-button--ghost {
  border-color: var(--ml-line);
  background: #fff;
  color: var(--ml-ink);
}

.mainline-button--ghost:hover {
  border-color: var(--ml-ink);
  color: var(--ml-ink);
}

.mainline-button--light {
  background: #fff;
  color: var(--ml-navy);
}

.mainline-hero__note {
  margin-top: 1rem;
  color: var(--ml-muted);
  font-size: 0.75rem;
}

.mainline-product-window {
  width: min(100%, 64rem);
  margin-top: 4.5rem;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 35px 70px -42px rgb(6 21 43 / 0.65), 0 0 0 10px rgb(6 21 43 / 0.025);
  text-align: left;
  transform: perspective(1400px) rotateX(2deg);
}

.mainline-window-bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  height: 2.4rem;
  padding: 0 0.8rem;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}

.mainline-window-bar span { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #cbd5e1; }
.mainline-window-bar span:first-child { background: #2d4d84; }
.mainline-window-bar b { margin-inline: auto; color: #94a3b8; font-size: 0.65rem; font-weight: 500; }
.mainline-window-body { display: grid; grid-template-columns: 10rem 1fr; min-height: 20rem; }
.mainline-window-body aside { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.25rem 0.85rem; background: var(--ml-navy); color: #fff; }
.mainline-window-body aside strong { margin-bottom: 1.5rem; color: #fff; font-size: 1rem; letter-spacing: -0.04em; }
.mainline-window-body aside small { padding: 0.55rem 0.65rem; color: #a9b7cb; font-size: 0.7rem; }
.mainline-window-body aside small:first-of-type { background: rgb(12 31 68 / 0.35); border-radius: 0.35rem; color: #fff; }
.mainline-window-content { padding: 1.5rem; background: #fff; }
.mainline-window-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.mainline-window-heading small, .mainline-stats small, .mainline-chart > small { color: #94a3b8; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; }
.mainline-window-heading h2 { margin-top: 0.4rem; color: var(--ml-ink); font-size: 1.2rem; font-weight: 600; letter-spacing: -0.04em; }
.mainline-window-heading i { color: #94a3b8; font-size: 0.7rem; font-style: normal; }
.mainline-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-top: 1.5rem; }
.mainline-stats > div { padding: 0.9rem; border: 1px solid #e2e8f0; border-radius: 6px; }
.mainline-stats strong { display: block; margin-top: 0.45rem; color: var(--ml-ink); font-size: 1.35rem; letter-spacing: -0.04em; }
.mainline-stats span { color: #16845b; font-size: 0.65rem; }
.mainline-chart { margin-top: 1rem; padding: 0.9rem; border: 1px solid #e2e8f0; border-radius: 6px; }
.mainline-chart__bars { display: flex; align-items: end; gap: 0.55rem; height: 5.5rem; margin-top: 0.75rem; }
.mainline-chart__bars i { flex: 1; min-height: 0.5rem; border-radius: 0.2rem 0.2rem 0 0; background: linear-gradient(180deg, var(--ml-orange), #6486bd); }

.mainline-proof { border-top: 1px solid var(--ml-line); border-bottom: 1px solid var(--ml-line); background: #fff; }
.mainline-proof .mainline-container { padding: 1.6rem 0; text-align: center; }
.mainline-proof p { margin-bottom: 1rem; color: #94a3b8; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.mainline-proof div div { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 1rem; color: #94a3b8; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; }

.mainline-section { padding: 7rem 0; background: #fff; }
.mainline-section--soft, .mainline-section--faq { background: var(--ml-soft); }
.mainline-section-heading { max-width: 42rem; margin-bottom: 3rem; text-align: center; }
.mainline-section-heading--left { margin-right: 0; text-align: left; }
.mainline-section-heading h2 { margin-top: 1rem; color: var(--ml-ink); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 600; letter-spacing: -0.065em; line-height: 1.04; text-wrap: balance; }
.mainline-section-heading p { margin-top: 1rem; color: var(--ml-muted); font-size: 1rem; line-height: 1.65; }
.mainline-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.mainline-feature-grid article { padding: 1.5rem; border: 1px solid var(--ml-line); border-radius: 8px; background: #fff; transition: transform 180ms ease, box-shadow 180ms ease; }
.mainline-feature-grid article:hover { transform: translateY(-4px); box-shadow: 0 18px 35px -28px rgb(6 21 43 / 0.65); }
.mainline-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 6px; background: var(--ml-navy); color: #fff; font-size: 1.2rem; }
.mainline-feature-grid h3 { margin-top: 1.5rem; color: var(--ml-ink); font-size: 1.1rem; font-weight: 600; }
.mainline-feature-grid p { min-height: 5rem; margin-top: 0.65rem; color: var(--ml-muted); font-size: 0.9rem; line-height: 1.6; }
.mainline-feature-grid a { color: var(--ml-orange-dark); font-size: 0.85rem; font-weight: 600; }
.mainline-feature-grid a span { margin-left: 0.35rem; }

.mainline-split, .mainline-showcase, .mainline-faq { display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: 6rem; }
.mainline-steps { display: grid; gap: 0; }
.mainline-steps > div { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--ml-line); }
.mainline-steps b { color: var(--ml-orange-dark); font-size: 0.75rem; }
.mainline-steps span { display: grid; gap: 0.4rem; color: var(--ml-muted); font-size: 0.9rem; line-height: 1.5; }
.mainline-steps strong { color: var(--ml-ink); font-size: 1rem; }
.mainline-showcase__copy ul { display: grid; gap: 0.75rem; margin-top: 1.5rem; color: var(--ml-ink); font-size: 0.9rem; }
.mainline-showcase__copy li span { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; margin-right: 0.5rem; border-radius: 50%; background: rgb(22 132 91 / 0.1); color: #16845b; font-size: 0.7rem; }
.mainline-list-card { padding: 0.75rem; border: 1px solid var(--ml-line); border-radius: 8px; background: #fff; box-shadow: 0 25px 60px -45px rgb(6 21 43 / 0.8); }
.mainline-list-card header, .mainline-list-card > div { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem; }
.mainline-list-card header { justify-content: space-between; border-bottom: 1px solid var(--ml-line); color: var(--ml-ink); font-size: 0.9rem; }
.mainline-list-card header span { color: var(--ml-orange-dark); font-size: 0.7rem; }
.mainline-list-card > div { border-bottom: 1px solid #eef2f7; }
.mainline-list-card > div:last-child { border-bottom: 0; }
.mainline-list-card i { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: 50%; background: #e7eef7; color: var(--ml-navy); font-size: 0.65rem; font-style: normal; font-weight: 700; }
.mainline-list-card > div > span { display: grid; gap: 0.25rem; min-width: 0; flex: 1; }
.mainline-list-card strong { color: var(--ml-ink); font-size: 0.8rem; }
.mainline-list-card small { color: var(--ml-muted); font-size: 0.7rem; }
.mainline-list-card b { padding: 0.35rem 0.55rem; border-radius: 0.35rem; background: rgb(12 31 68 / 0.08); color: var(--ml-orange-dark); font-size: 0.65rem; }

.mainline-section--dark { background: var(--ml-navy); color: #fff; }
.mainline-quote { text-align: center; }
.mainline-quote small { color: #2d4d84; }
.mainline-quote blockquote { max-width: 52rem; margin: 1.5rem auto; color: #fff; font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 500; letter-spacing: -0.06em; line-height: 1.05; }
.mainline-quote p { color: #a9b7cb; }

.mainline-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.mainline-pricing article { display: flex; flex-direction: column; min-height: 20rem; padding: 1.5rem; border: 1px solid var(--ml-line); border-radius: 8px; }
.mainline-pricing--featured { border: 2px solid var(--ml-orange) !important; box-shadow: 0 20px 45px -38px rgb(12 31 68 / 0.35); }
.mainline-pricing h3 { margin-top: 1.5rem; color: var(--ml-ink); font-size: 1.55rem; letter-spacing: -0.05em; }
.mainline-pricing h3 span { color: var(--ml-muted); font-size: 0.75rem; font-weight: 400; letter-spacing: 0; }
.mainline-pricing p { min-height: 4rem; margin-top: 0.75rem; color: var(--ml-muted); font-size: 0.9rem; line-height: 1.55; }
.mainline-pricing .mainline-button { margin-top: auto; }

.mainline-faq { align-items: start; }
.mainline-faq > div:last-child { border-top: 1px solid var(--ml-line); }
.mainline-faq details { border-bottom: 1px solid var(--ml-line); }
.mainline-faq summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; color: var(--ml-ink); cursor: pointer; font-size: 0.95rem; font-weight: 600; list-style: none; }
.mainline-faq summary::-webkit-details-marker { display: none; }
.mainline-faq summary::after { content: '+'; color: var(--ml-orange-dark); font-size: 1.2rem; font-weight: 400; }
.mainline-faq details[open] summary::after { content: '−'; }
.mainline-faq details p { max-width: 38rem; padding: 0 2rem 1.25rem 0; color: var(--ml-muted); font-size: 0.9rem; line-height: 1.6; }
.mainline-faq a { color: var(--ml-orange-dark); font-weight: 600; }

.mainline-final-cta { padding: 7rem 0; background: linear-gradient(135deg, var(--ml-orange), #2d4d84); text-align: center; }
.mainline-final-cta small { color: rgb(255 255 255 / 0.75); }
.mainline-final-cta h2 { max-width: 44rem; margin: 1rem auto 2rem; color: #fff; font-size: clamp(2.25rem, 5vw, 4.5rem); font-weight: 600; letter-spacing: -0.07em; line-height: 1; }

@media (max-width: 800px) {
  .mainline-container { width: min(100% - 2rem, 42rem); }
  .mainline-hero { padding: 5rem 0 3rem; }
  .mainline-hero h1 { font-size: clamp(2.75rem, 13vw, 4.5rem); }
  .mainline-product-window { margin-top: 3rem; transform: none; }
  .mainline-window-body { grid-template-columns: 1fr; }
  .mainline-window-body aside { display: none; }
  .mainline-window-heading { display: block; }
  .mainline-window-heading i { display: block; margin-top: 0.5rem; }
  .mainline-stats { grid-template-columns: 1fr; }
  .mainline-stats > div:not(:first-child) { display: none; }
  .mainline-section { padding: 4.5rem 0; }
  .mainline-feature-grid, .mainline-pricing, .mainline-split, .mainline-showcase, .mainline-faq { grid-template-columns: 1fr; gap: 2.5rem; }
  .mainline-section-heading { margin-bottom: 2rem; }
  .mainline-feature-grid p { min-height: auto; }
  .mainline-proof div div { gap: 0.75rem 1.25rem; }
}

@media (max-width: 640px) {
  .mainline-home { margin: .4rem; border-radius: 8px; }
}

@media (min-width: 801px) {
  .mainline-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 2rem 5rem;
    text-align: left;
  }
  .mainline-hero__inner > .mainline-pill,
  .mainline-hero__inner > h1,
  .mainline-hero__inner > .mainline-hero__lead,
  .mainline-hero__inner > .mainline-actions,
  .mainline-hero__inner > .mainline-hero__note { grid-column: 1; }
  .mainline-hero__inner > .mainline-pill { grid-row: 1; }
  .mainline-hero__inner > h1 { grid-row: 2; }
  .mainline-hero__inner > .mainline-hero__lead { grid-row: 3; }
  .mainline-hero__inner > .mainline-hero__features { grid-column: 2; grid-row: 1 / span 5; }
  .mainline-hero__inner > .mainline-actions { grid-row: 4; justify-content: flex-start; }
  .mainline-hero__inner > .mainline-hero__note { grid-row: 5; text-align: left; }
  .mainline-hero__inner > div:last-child { grid-column: 1 / -1; grid-row: 6; }
  .mainline-hero__features { position: relative; display: grid; gap: 1.25rem; padding-left: 2.5rem; }
  .mainline-hero__features > div { display: flex; gap: 1rem; }
  .mainline-hero__features b { width: 1.25rem; font-size: 1.1rem; }
  .mainline-hero__features span { display: grid; gap: .2rem; color: var(--ml-muted); font-size: .85rem; line-height: 1.45; }
  .mainline-hero__features strong { color: var(--ml-ink); font-size: .95rem; }
  .mainline-hero__features::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; border-left: 1px dashed #cbd5e1; }
}

@media (prefers-reduced-motion: reduce) {
  .mainline-button, .mainline-feature-grid article { transition: none; }
  .mainline-button:hover, .mainline-feature-grid article:hover { transform: none; }
}

/* Direct Mainline source layout adapted to Buytena copy. */
.mainline-reference-shell,.mainline-reference-bottom{position:relative;margin:10px 16px 0;overflow:hidden;border-radius:8px;background:linear-gradient(to bottom,#fafafc 0%,#fff 30%,#fff 100%)}
.mainline-reference-hero{position:relative;background:#ffffff}
.mainline-reference-hero::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.05;border-radius:inherit;background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E")}
.mainline-reference-hero>*{position:relative;z-index:1}
.mainline-reference-container{width:min(100% - 48px,1220px);margin-inline:auto}
.mainline-reference-hero{padding:176px 0 64px}.mainline-reference-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.mainline-reference-hero h1{max-width:640px;font-size:clamp(2.5rem,5vw,4.5rem);line-height:1.05;letter-spacing:-.06em}.mainline-reference-hero p{max-width:580px;margin-top:20px;color:#565e6b;font-size:clamp(1.1rem,2vw,1.65rem);line-height:1.35}.mainline-reference-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}.mainline-reference-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:6px;font-size:.9rem;font-weight:600}.mainline-reference-button-primary{background:#0e2247;color:#fff}.mainline-reference-button-outline{border:1px solid #d8dde6;background:#fff}.mainline-reference-hero-list{position:relative;display:grid;gap:20px;padding-left:40px}.mainline-reference-hero-list:before{content:'';position:absolute;left:0;top:0;bottom:0;border-left:1px dashed #ccd3dd}.mainline-reference-hero-list>div{display:flex;gap:16px}.mainline-reference-hero-list b{width:20px;font-size:20px;color:#ea580c}.mainline-reference-hero-list span{display:grid;gap:3px;color:#565e6b;font-size:.875rem;line-height:1.4}.mainline-reference-hero-list strong{color:#0e2247;font-size:1rem}.mainline-reference-hero-image{margin-top:90px}.mainline-reference-hero-image img{display:block;width:100%;height:auto;border-radius:8px;box-shadow:0 20px 40px -28px #1118}.mainline-reference-logos{padding:80px 0;text-align:center}.mainline-reference-logos h2{font-size:clamp(1.5rem,3vw,2.3rem);letter-spacing:-.04em}.mainline-reference-logos p{color:#5c6a82}.mainline-reference-logos div div{display:flex;justify-content:space-around;flex-wrap:wrap;gap:22px;margin-top:42px;color:#56627a;font-size:.75rem;font-weight:700;letter-spacing:.12em}.mainline-reference-section{padding:112px 0}.mainline-reference-rule{border-top:1px dashed #d1d7e0;padding-top:14px;text-align:center;color:#ea580c;font:600 .75rem var(--font-mono);letter-spacing:.12em}.mainline-reference-heading{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;max-width:950px;margin:82px auto 52px}.mainline-reference-heading h2,.mainline-reference-resource>div>h2{font-size:clamp(2rem,4vw,3.5rem);line-height:1.05;letter-spacing:-.06em}.mainline-reference-heading p{color:#565e6b;line-height:1.5}.mainline-reference-feature-card{display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden;border:1px solid #dde2ea;border-radius:8px;background:#fff}.mainline-reference-feature-card article{padding:22px;border-right:1px dashed #d1d7e0}.mainline-reference-feature-card article:last-child{border-right:0}.mainline-reference-feature-card img{width:100%;height:220px;object-fit:contain;object-position:left top}.mainline-reference-feature-card h3{margin-top:16px;font-size:1.35rem;line-height:1.1}.mainline-reference-feature-card a{display:flex;justify-content:space-between;margin-top:28px;font-weight:600}.mainline-reference-resource{background:#f6f8fb}.mainline-reference-resource>div>h2{text-align:center;max-width:900px;margin:0 auto 64px}.mainline-reference-resource-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px dashed #d1d7e0;border-bottom:1px dashed #d1d7e0}.mainline-reference-resource-grid-three{grid-template-columns:repeat(3,1fr);border-top:0}.mainline-reference-resource-grid article{min-height:300px;padding:30px;border-right:1px dashed #d1d7e0}.mainline-reference-resource-grid article:last-child{border-right:0}.mainline-reference-resource-grid h3{display:inline;font-size:1rem}.mainline-reference-resource-grid p{display:inline;color:#565e6b}.mainline-reference-resource-grid img{display:block;max-width:100%;max-height:220px;margin:34px auto 0;object-fit:contain}.mainline-reference-logo-cloud{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:64px}.mainline-reference-logo-cloud span{display:grid;place-items:center;width:68px;height:68px;border-radius:8px;background:#fff;font-size:.7rem;font-weight:700}.mainline-reference-testimonial{padding:112px 0;background:#0a1628;color:#fff;text-align:center}.mainline-reference-testimonial small{color:#f97316;letter-spacing:.15em}.mainline-reference-testimonial blockquote{max-width:850px;margin:24px auto;font-size:clamp(2rem,4vw,3.5rem);line-height:1.05;letter-spacing:-.06em}.mainline-reference-testimonial p{color:#fff}.mainline-reference-bottom{margin-top:0;border-radius:8px 8px 0 0}.mainline-reference-pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.mainline-reference-pricing article{display:flex;flex-direction:column;min-height:300px;padding:24px;border:1px solid #dde2ea;border-radius:8px}.mainline-reference-pricing article.featured{border:2px solid #0e2247}.mainline-reference-pricing article>small{color:#ea580c;font-weight:700;letter-spacing:.1em}.mainline-reference-pricing h3{margin-top:24px;font-size:1.6rem}.mainline-reference-pricing h3 span{font-size:.8rem;color:#565e6b;font-weight:400}.mainline-reference-pricing p{margin-top:12px;color:#565e6b}.mainline-reference-pricing a{margin-top:auto;font-weight:600}.mainline-reference-faq{background:#f6f8fb}.mainline-reference-faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}.mainline-reference-faq h2{font-size:clamp(2rem,4vw,3.5rem);letter-spacing:-.06em}.mainline-reference-faq p{margin-top:14px;color:#565e6b}.mainline-reference-faq a{font-weight:600}.mainline-reference-faq details{border-top:1px solid #dbe0e9;padding:20px 0}.mainline-reference-faq summary{display:flex;justify-content:space-between;font-weight:600;cursor:pointer;list-style:none}.mainline-reference-faq summary:after{content:'+';color:#ea580c}.mainline-reference-faq details[open] summary:after{content:'-';color:#ea580c}.mainline-reference-faq details p{padding-right:32px}.mainline-reference-final{padding:112px 0;background:#fff;text-align:center}.mainline-reference-final h2{max-width:700px;margin:0 auto 32px;font-size:clamp(2.4rem,5vw,4.4rem);line-height:1;letter-spacing:-.06em}.mainline-reference-button-light{background:#0a1628;color:#fff}
@media(max-width:800px){.mainline-reference-container{width:min(100% - 32px,600px)}.mainline-reference-hero{padding-top:120px}.mainline-reference-hero-grid,.mainline-reference-heading,.mainline-reference-faq-grid{grid-template-columns:1fr;gap:34px}.mainline-reference-hero-list{padding:28px 0 0;border-top:1px dashed #ccd3dd}.mainline-reference-hero-list:before{display:none}.mainline-reference-hero-image{margin-top:44px}.mainline-reference-section{padding:72px 0}.mainline-reference-feature-card,.mainline-reference-resource-grid,.mainline-reference-resource-grid-three,.mainline-reference-pricing{grid-template-columns:1fr}.mainline-reference-feature-card article,.mainline-reference-resource-grid article{border-right:0;border-bottom:1px dashed #d1d7e0}.mainline-reference-feature-card article:last-child,.mainline-reference-resource-grid article:last-child{border-bottom:0}.mainline-reference-heading{margin-top:48px}}

/* Pricing polish: make the choice hierarchy clear without leaving the
   restrained Mainline visual system. */
.mainline-reference-pricing article { position: relative; min-height: 350px; padding: 30px; background: rgb(255 255 255 / .78); transition: transform .2s ease, box-shadow .2s ease; }
.mainline-reference-pricing article:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -28px rgb(25 27 27 / .7); }
.mainline-reference-pricing article.featured { border-color: #0e2247; background: #ffffff; box-shadow: 0 18px 36px -30px rgb(14 34 71 / .18); }
.mainline-reference-pricing article.featured:before { content: 'MOST POPULAR'; position: absolute; top: -13px; right: 22px; padding: 5px 9px; border-radius: 999px; background: #ea580c; color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .1em; }
.mainline-reference-pricing small { color: #73766f; font-size: .7rem; }
.mainline-reference-pricing article.featured small { color: #746d2d; }
.mainline-reference-pricing h3 { margin-top: 18px; font-size: clamp(1.55rem, 2.3vw, 2rem); letter-spacing: -.045em; }
.mainline-reference-pricing h3 span { white-space: nowrap; }
.mainline-reference-pricing p { min-height: 56px; line-height: 1.55; }
.mainline-reference-pricing p:after { display: block; margin-top: 18px; color: #555a55; font-size: .78rem; font-weight: 600; }
.mainline-reference-pricing article:nth-child(1) p:after { content: '✓ Customer list  ·  ✓ Reminder templates'; }
.mainline-reference-pricing article:nth-child(2) p:after { content: '✓ SMS & WhatsApp  ·  ✓ Retention insights'; }
.mainline-reference-pricing article:nth-child(3) p:after { content: '✓ Custom workflows  ·  ✓ Priority support'; }
.mainline-reference-pricing a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 28px; border: 1px solid #d8dde6; border-radius: 6px; background: #fff; padding: 0 16px; color: #0a1628; }
.mainline-reference-pricing article.featured a { border-color: #0a1628; background: #0a1628; color: #fff; }
.mainline-reference-pricing a:after { content: '  →'; margin-left: 6px; }

/* ============================================================
   Faithful Mainline layout for the Buytena landing page.
   ============================================================ */

/* Logos strip -------------------------------------------------- */
.mainline-logos { padding: 96px 0; text-align: center; }
.mainline-logos h2 { color: #18181b; font-size: clamp(1.5rem, 3vw, 2.3rem); letter-spacing: -.04em; line-height: 1.2; }
.mainline-logos h2 span { color: #68748a; }

/* Clean flowing list: icon + word, dot separated, centered wrap */
.mainline-logos__line {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: 14px 26px;
	max-width: 960px; margin: 48px auto 0;
	color: #565e6b;
	font-size: .9rem; font-weight: 600; letter-spacing: .03em;
}
.mainline-logos__item { display: inline-flex; align-items: center; gap: 8px; }
.mainline-logos__item:not(:last-child)::after {
	content: '';
	width: 4px; height: 4px; border-radius: 50%;
	margin-left: 26px;
	background: #d1d7e0;
}
.mainline-logos__item .ml-ico {
	width: 18px; height: 18px; display: block;
	fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
	color: #ea580c;
}
.mainline-logos__more { color: #18181b; font-weight: 700; }
.mainline-logos__more .ml-ico { color: #ea580c; }
.mainline-logos__item .ml-ico-drop { animation: ml-bob 2.6s ease-in-out infinite; }
.mainline-logos__item .ml-ico-spa { animation: ml-pulse 3.2s ease-in-out infinite; }
.mainline-logos__item .ml-ico-pill { animation: ml-spin 6s linear infinite; transform-origin: 50% 50%; }
.mainline-logos__item .ml-ico-gym { animation: ml-rock 2.2s ease-in-out infinite; }
.mainline-logos__item .ml-ico-sub { animation: ml-spin 4s linear infinite; transform-origin: 50% 50%; }
.mainline-logos__item .ml-ico-clean { animation: ml-sway 2.8s ease-in-out infinite; transform-origin: 50% 20%; }
.mainline-logos__item .ml-ico-disp { animation: ml-breathe 3s ease-in-out infinite; }
.mainline-logos__item .ml-ico-beauty { animation: ml-sparkle 3.4s ease-in-out infinite; transform-origin: 50% 50%; }
.mainline-logos__item .ml-ico-delivery { animation: ml-shuttle 2.4s ease-in-out infinite; }
.mainline-logos__item .ml-ico-plus { animation: ml-pulse 3.4s ease-in-out infinite; }
@keyframes ml-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes ml-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes ml-spin { to { transform: rotate(360deg); } }
@keyframes ml-rock { 0%,100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
@keyframes ml-sway { 0%,100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes ml-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1, .93); } }
@keyframes ml-sparkle { 0%,100% { transform: rotate(0) scale(1); } 50% { transform: rotate(90deg) scale(1.08); } }
@keyframes ml-shuttle { 0%,100% { transform: translateX(-2px); } 50% { transform: translateX(2px); } }

/* Feature section ----------------------------------------------- */
.mainline-features { padding: 112px 0 128px; }
.mainline-measure { position: relative; text-align: center; }
.mainline-measure__line { border-top: 1px dashed #d1d7e0; }
.mainline-measure span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 0 12px; background: #fff; color: #18181b; font: 600 .8rem var(--font-display); letter-spacing: .18em; white-space: nowrap; }

.mainline-features__head { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; max-width: 880px; margin: 56px auto 0; }
.mainline-features__head h2 { color: #18181b; font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 600; letter-spacing: -.055em; line-height: 1.06; }
.mainline-features__head p { color: #565e6b; font-size: 1rem; line-height: 1.65; }

.mainline-feature-card { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 56px; overflow: hidden; border: 1px solid #e7e5dc; border-radius: 8px; background: #fff; }
.mainline-feature-card article { display: flex; flex-direction: column; min-width: 0; }
.mainline-feature-card article + article { border-left: 1px dashed #d8d6cc; }
.mainline-feature-card__img { position: relative; flex: 1; aspect-ratio: 1.28 / 1; overflow: hidden; background: #f6f6f1; }
.mainline-feature-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.mainline-feature-card__img:after { content: ''; position: absolute; inset: auto 0 0; height: 42%; background: linear-gradient(to top, #fff, rgb(255 255 255 / 0)); pointer-events: none; }
.mainline-feature-card__link { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 26px 28px 30px; }
.mainline-feature-card__link h3 { color: #18181b; font-size: clamp(1.35rem, 2vw, 1.65rem); font-weight: 600; letter-spacing: -.04em; line-height: 1.12; }
.mainline-feature-card__chev { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border: 1px solid #d8d6cc; border-radius: 50%; color: #18181b; font-size: 1.4rem; line-height: 1; transition: transform .2s ease, background-color .2s ease, color .2s ease; }
.mainline-feature-card__link:hover .mainline-feature-card__chev { transform: translateX(3px); }

/* How it works / resource-allocation section -------------------- */
.mainline-resource { overflow: hidden; padding: 0 0 128px; }
.mainline-resource > .mainline-reference-container > h2 { max-width: 54rem; margin: 0 auto; color: #18181b; font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 600; letter-spacing: -.06em; line-height: 1.05; text-align: center; }
.mainline-resource__grid { display: grid; border-top: 1px dashed #d1d7e0; }
.mainline-resource__grid--two { grid-template-columns: 1fr 1fr; }
.mainline-resource__grid--three { grid-template-columns: repeat(3, 1fr); }
.mainline-resource__item { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 56px 40px; }
.mainline-resource__grid--two .mainline-resource__item + .mainline-resource__item,
.mainline-resource__grid--three .mainline-resource__item + .mainline-resource__item { border-left: 1px dashed #d8d6cc; }
.mainline-resource__item h3 { color: #18181b; font-size: clamp(1.25rem, 1.8vw, 1.55rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.2; }
.mainline-resource__item h3 span { display: block; margin-top: 8px; color: #565e6b; font-size: .95rem; font-weight: 400; letter-spacing: 0; line-height: 1.55; }
.mainline-resource__image { margin-top: 36px; }
.mainline-resource__image img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 24px 48px -34px rgb(20 25 30 / .9); }

/* Pricing checklists -------------------------------------------- */
.mainline-pricing__desc { min-height: 56px; color: #565e6b; line-height: 1.55; }
.mainline-pricing__list { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.mainline-pricing__list li { position: relative; padding-left: 26px; color: #4c4f4c; font-size: .88rem; line-height: 1.5; }
.mainline-pricing__list li:before { content: '✓'; position: absolute; top: 0; left: 0; color: #16845b; font-weight: 700; }

/* FAQ categories ------------------------------------------------- */
.mainline-faq__groups { display: grid; gap: 44px; }
.mainline-faq__group h3 { margin: 0; padding-bottom: 14px; border-bottom: 1px solid #d8d6cc; color: #68748a; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mainline-faq__group details:first-of-type { border-top: 0; padding-top: 4px; }
.mainline-faq__group summary { gap: 16px; }
.mainline-faq__group summary::after { content: '+'; color: #a1771f; font-size: 1.15rem; font-weight: 500; }
.mainline-faq__group details[open] summary::after { content: '−'; }

/* Responsive ------------------------------------------------------ */
@media (max-width: 800px) {
	.mainline-features { padding: 72px 0 84px; }
	.mainline-features__head { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
	.mainline-feature-card { grid-template-columns: 1fr; margin-top: 40px; border-radius: 8px; }
	.mainline-feature-card article + article { border-top: 1px dashed #d8d6cc; border-left: 0; }
	.mainline-feature-card__img { aspect-ratio: 1.4 / 1; }
	.mainline-resource { padding-bottom: 84px; }
	.mainline-resource__grid--two,
	.mainline-resource__grid--three { grid-template-columns: 1fr; }
	.mainline-resource__item { padding: 40px 8px; }
	.mainline-resource__grid--two .mainline-resource__item + .mainline-resource__item,
	.mainline-resource__grid--three .mainline-resource__item + .mainline-resource__item { border-top: 1px dashed #d8d6cc; border-left: 0; }
	.mainline-logos__line { gap: 12px 20px; margin-top: 40px; font-size: .82rem; }
	.mainline-logos__item:not(:last-child)::after { margin-left: 20px; }
	.mainline-logos { padding: 72px 0; }
}

@media (max-width: 640px) {
	.mainline-measure span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.mainline-feature-card__chev { transition: none; }
	.mainline-feature-card__link:hover .mainline-feature-card__chev { transform: none; }
	.mainline-logos__item .ml-ico { animation: none !important; }
}

/* ============================================================
   About & Contact pages — Mainline reference layout.
   ============================================================ */

/* Shared small-caps eyebrow label */
.mainline-about-hero__label {
	display: inline-block;
	margin-bottom: 1.1rem;
	color: #a1771f;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
}

/* About hero ------------------------------------------------ */
.mainline-about-hero { padding: 176px 0 112px; }
.mainline-about-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
}
.mainline-about-hero__copy h1 {
	max-width: 640px;
	color: #18181b;
	font-size: clamp(2.5rem, 5vw, 4.5rem);
	line-height: 1.05;
	letter-spacing: -.06em;
}
.mainline-about-hero__copy > p {
	max-width: 580px;
	margin-top: 20px;
	color: #565e6b;
	font-size: clamp(1.1rem, 2vw, 1.5rem);
	line-height: 1.35;
}
.mainline-about-hero__body { max-width: 560px; margin-top: 36px; }
.mainline-about-hero__body p { color: #565e6b; font-size: .98rem; line-height: 1.7; }
.mainline-about-hero__body p + p { margin-top: 1.1rem; }

.mainline-about-hero__stats {
	position: relative;
	display: grid;
	gap: 30px;
	padding-left: 44px;
}
.mainline-about-hero__stats::before {
	content: '';
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	border-left: 1px dashed #ccd3dd;
}
.mainline-about-hero__stats > div { display: grid; gap: 5px; }
.mainline-about-hero__stats b {
	color: #18181b;
	font-size: clamp(1.9rem, 3vw, 2.75rem);
	font-weight: 600;
	letter-spacing: -.03em;
}
.mainline-about-hero__stats span { color: #68748a; font-size: .92rem; }

/* About story (alternating images + text) -------------------- */
.mainline-about-story { padding: 0 0 112px; }
.mainline-about-story__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 72px;
	align-items: end;
}
.mainline-about-story__col { display: grid; gap: 56px; }
.mainline-about-story__images { display: grid; gap: 24px; }
.mainline-about-story__img {
	aspect-ratio: 2 / 1.5;
	overflow: hidden;
	border-radius: 8px;
	background: #eef1f6;
}
.mainline-about-story__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mainline-about-story__text h2 {
	color: #18181b;
	font-size: 2.25rem;
	font-weight: 600;
	letter-spacing: -.04em;
}
.mainline-about-story__text p {
	max-width: 34rem;
	margin-top: 22px;
	color: #565e6b;
	font-size: 1.02rem;
	line-height: 1.7;
}
.mainline-about-story__cta { margin-top: 30px; }

/* About values ---------------------------------------------- */
.mainline-about-values { padding: 72px 0 112px; }
.mainline-about-values h2 {
	color: #18181b;
	font-size: clamp(1.9rem, 3.4vw, 2.8rem);
	font-weight: 600;
	letter-spacing: -.055em;
}
.mainline-about-values__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 44px;
}
.mainline-about-values article {
	padding: 28px;
	border: 1px solid #d8d6cc;
	border-radius: 8px;
	background: #fff;
	transition: transform .2s ease, box-shadow .2s ease;
}
.mainline-about-values article:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 34px -28px rgb(25 27 27 / .7);
}
.mainline-about-values b {
	color: #a1771f;
	font: 600 .75rem var(--font-mono);
	letter-spacing: .14em;
}
.mainline-about-values h3 { margin-top: 14px; color: #18181b; font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; }
.mainline-about-values p { margin-top: 10px; color: #565e6b; font-size: .9rem; line-height: 1.6; }

/* Contact ---------------------------------------------------- */
.mainline-contact { padding: 176px 0 112px; }
.mainline-contact__inner { max-width: 46rem; }
.mainline-contact__head { text-align: center; }
.mainline-contact__head h1 {
	color: #18181b;
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 600;
	letter-spacing: -.05em;
}
.mainline-contact__head p {
	max-width: 40rem;
	margin: 14px auto 0;
	color: #565e6b;
	font-size: 1rem;
	line-height: 1.6;
}

.mainline-contact__channels {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 28px;
	margin-top: 72px;
}
.mainline-contact__channels h2 { color: #18181b; font-size: .98rem; font-weight: 600; }
.mainline-contact__channel-body {
	display: grid;
	gap: 3px;
	margin-top: 10px;
	color: #18181b;
	font-size: .9rem;
	line-height: 1.5;
}
.mainline-contact__muted { color: #68748a; text-decoration: none; font-size: .9rem; }
.mainline-contact__muted:hover { color: #18181b; }
.mainline-contact__link { color: #565e6b; text-decoration: underline; text-underline-offset: 3px; }
.mainline-contact__link:hover { color: #18181b; }
.mainline-contact__channel-body--row { display: flex; gap: 14px; }

.mainline-contact__rule { margin: 64px 0; border-top: 1px dashed #d1d7e0; }

.mainline-contact__form-wrap h2 { color: #18181b; font-size: 1.1rem; font-weight: 600; }

.mainline-contact-form { display: grid; gap: 16px; margin-top: 20px; }
.mainline-contact-form__field { display: grid; gap: 6px; }
.mainline-contact-form__label { color: #18181b; font-size: .85rem; font-weight: 600; }
.mainline-contact-form__req { color: #c2410c; }
.mainline-contact-form__input {
	width: 100%;
	min-height: 44px;
	padding: 8px 14px;
	border: 1px solid #d8dde6;
	border-radius: 6px;
	background: #fff;
	color: #18181b;
	font: 500 .9rem var(--font-sans);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.mainline-contact-form__input::placeholder { color: #a1a5a0; }
.mainline-contact-form__input:not(:disabled):not(select):focus,
.mainline-contact-form__input:focus-visible {
	outline: 0;
	border-color: #18181b;
	box-shadow: 0 0 0 3px rgb(6 21 43 / .08);
}
.mainline-contact-form__textarea { min-height: 130px; resize: none; line-height: 1.5; }
.mainline-contact-form__checkbox { width: 1rem; height: 1rem; accent-color: #0e2247; }
.mainline-contact-form__field--agree { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.mainline-contact-form__agree-label { color: #555a55; font-size: .85rem; }
.mainline-contact-form__field--submit { display: flex; justify-content: flex-end; margin-top: 4px; }

/* Contact customer-stories split ----------------------------- */
.mainline-contact-tale {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: 80px;
	align-items: start;
	margin-top: 112px;
	padding-top: 64px;
	border-top: 1px dashed #d1d7e0;
}
.mainline-contact-tale__head h2 {
	margin-top: 16px;
	color: #18181b;
	font-size: clamp(1.6rem, 2.6vw, 2.2rem);
	font-weight: 600;
	letter-spacing: -.04em;
	line-height: 1.12;
}
.mainline-contact-tale__head p { margin-top: 14px; color: #565e6b; font-size: .95rem; line-height: 1.6; }

/* Responsive -------------------------------------------------- */
@media (max-width: 860px) {
	.mainline-about-hero,
	.mainline-contact { padding-top: 130px; }
	.mainline-about-hero__grid,
	.mainline-about-story__grid,
	.mainline-contact-tale { grid-template-columns: 1fr; gap: 48px; }
	.mainline-about-hero__stats {
		padding: 28px 0 0;
		border-top: 1px dashed #ccd3dd;
	}
	.mainline-about-hero__stats::before { display: none; }
	.mainline-about-values__grid { grid-template-columns: 1fr; }
	.mainline-contact__channels { gap: 24px; }
	.mainline-contact__rule { margin: 48px 0; }
	.mainline-contact-tale { margin-top: 80px; padding-top: 48px; gap: 40px; }
}

@media (prefers-reduced-motion: reduce) {
	.mainline-about-values article { transition: none; }
	.mainline-about-values article:hover { transform: none; box-shadow: none; }
}
/* Dark mode for the mainline pages (toggle in the navbar, html.dark). */
html.dark .mainline-page{background:#0e0f11;color:#f2f2f0}
html.dark .mainline-page .mainline-reference-shell,html.dark .mainline-page .mainline-reference-bottom{background:linear-gradient(to bottom,#101113 0%,#131417 30%,#131417 100%)}
html.dark .mainline-page .mainline-reference-hero h1,html.dark .mainline-page .mainline-reference-heading h2,html.dark .mainline-page .mainline-reference-resource>div>h2,html.dark .mainline-page .mainline-reference-faq h2,html.dark .mainline-page .mainline-reference-final h2{color:#f4f4f0}
	html.dark .mainline-page .mainline-reference-hero{background:#060f1e}
html.dark .mainline-page .mainline-reference-hero p,html.dark .mainline-page .mainline-reference-heading p,html.dark .mainline-page .mainline-reference-faq p,html.dark .mainline-page .mainline-reference-pricing p{color:#b6bbc2}
html.dark .mainline-page .mainline-reference-hero-list span{color:#b6bbc2}
html.dark .mainline-page .mainline-reference-hero-list strong{color:#f4f4f0}
html.dark .mainline-page .mainline-reference-button-outline{border-color:#2b2d31;background:#16171a;color:#f4f4f0}
html.dark .mainline-page .mainline-reference-logos h2{color:#f4f4f0}
html.dark .mainline-page .mainline-reference-logos p,html.dark .mainline-page .mainline-reference-logos div div,html.dark .mainline-page .mainline-reference-rule{color:#9ba3ad}
html.dark .mainline-page .mainline-reference-feature-card,html.dark .mainline-page .mainline-reference-pricing article{background:#16171a;border-color:#2b2d31}
html.dark .mainline-page .mainline-reference-feature-card h3,html.dark .mainline-page .mainline-reference-pricing h3{color:#f4f4f0}
html.dark .mainline-page .mainline-reference-feature-card a,html.dark .mainline-page .mainline-reference-pricing a,html.dark .mainline-page .mainline-reference-faq a,html.dark .mainline-page .mainline-reference-final a{color:#e5e6e2}
html.dark .mainline-page .mainline-reference-resource,html.dark .mainline-page .mainline-reference-faq{background:#16171a}
html.dark .mainline-page .mainline-reference-resource-grid article h3{color:#f4f4f0}
html.dark .mainline-page .mainline-reference-feature-card article{border-right-color:#2b2d31}
html.dark .mainline-page .mainline-reference-feature-card article:last-child,html.dark .mainline-page .mainline-reference-resource-grid article:last-child{border-right-color:#2b2d31}
html.dark .mainline-page .mainline-reference-faq details{border-top-color:#2b2d31}
html.dark .mainline-page .mainline-reference-pricing small{color:#b9bcaf}
html.dark .mainline-page .mainline-reference-pricing article.featured{border-color:#5a6b8c}
	html.dark .mainline-page .mainline-reference-testimonial{background:#060f1e}
	
html.dark .mainline-page .mainline-reference-final{background:#12151c}
html.dark .mainline-page .mainline-reference-final h2{color:#f4f6f9}

.mainline-reference-feature-card a,.mainline-reference-pricing a,.mainline-reference-faq a{color:#0e2247}
.mainline-reference-feature-card a:hover,.mainline-reference-pricing a:hover,.mainline-reference-faq a:hover{color:#ea580c}

/* ============================================================
   Dark mode: legacy mainline sections (hardcoded light colors).
   ============================================================ */
html.dark .mainline-page .mainline-logos h2,html.dark .mainline-page .mainline-features__head h2,html.dark .mainline-page .mainline-feature-card__link h3,html.dark .mainline-page .mainline-resource > .mainline-reference-container > h2,html.dark .mainline-page .mainline-resource__item h3,html.dark .mainline-page .mainline-feature-grid h3,html.dark .mainline-page .mainline-steps strong,html.dark .mainline-page .mainline-list-card header,html.dark .mainline-page .mainline-list-card strong,html.dark .mainline-page .mainline-pricing h3,html.dark .mainline-page .mainline-faq summary{color:#fff}
html.dark .mainline-page .mainline-features__head p,html.dark .mainline-page .mainline-resource__item h3 span,html.dark .mainline-page .mainline-pricing__desc,html.dark .mainline-page .mainline-feature-grid p,html.dark .mainline-page .mainline-steps span,html.dark .mainline-page .mainline-list-card small,html.dark .mainline-page .mainline-pricing p,html.dark .mainline-page .mainline-pricing h3 span,html.dark .mainline-page .mainline-faq details p{color:#eef1f5}
html.dark .mainline-page .mainline-logos h2 span,html.dark .mainline-page .mainline-logos__line,html.dark .mainline-page .mainline-logos__more,html.dark .mainline-page .mainline-measure span,html.dark .mainline-page .mainline-pricing__list li,html.dark .mainline-page .mainline-faq__group h3{color:#adb6c2}
html.dark .mainline-page .mainline-logos__item .ml-ico{color:#ea580c}
html.dark .mainline-page .mainline-logos__item:not(:last-child)::after{background:#2b2d31}
html.dark .mainline-page .mainline-measure__line,html.dark .mainline-page .mainline-resource__grid,html.dark .mainline-page .mainline-steps > div,html.dark .mainline-page .mainline-faq details,html.dark .mainline-page .mainline-faq__group h3{color:inherit}
html.dark .mainline-page .mainline-feature-card,html.dark .mainline-page .mainline-feature-grid article,html.dark .mainline-page .mainline-list-card,html.dark .mainline-page .mainline-pricing article{background:#16171a;border-color:#2b2d31}
html.dark .mainline-page .mainline-feature-card article + article,html.dark .mainline-page .mainline-resource__item + .mainline-resource__item{border-left-color:#2b2d31}
html.dark .mainline-page .mainline-feature-card__img{background:#12151c}
html.dark .mainline-page .mainline-feature-card__img:after{background:linear-gradient(to top,#16171a,rgb(22 23 26 / 0))}
html.dark .mainline-page .mainline-feature-card__chev{border-color:#2b2d31;color:#eef1f5}
html.dark .mainline-page .mainline-list-card > div{border-bottom-color:#2b2d31}
html.dark .mainline-page .mainline-list-card i{background:#1d2530;color:#cdd9ea}
html.dark .mainline-page p{color:#eef1f5}

/* Dark mode: about + contact pages */
html.dark .mainline-page .mainline-about-hero__label,html.dark .mainline-page .mainline-about-values b{color:#f97316}
html.dark .mainline-page .mainline-about-hero__copy h1,html.dark .mainline-page .mainline-about-story__text h2,html.dark .mainline-page .mainline-about-values h2,html.dark .mainline-page .mainline-about-values h3,html.dark .mainline-page .mainline-contact__head h1,html.dark .mainline-page .mainline-contact__channels h2,html.dark .mainline-page .mainline-contact__form-wrap h2{color:#fff}
html.dark .mainline-page .mainline-about-hero__stats b{color:#fff}
html.dark .mainline-page .mainline-about-hero__stats span,html.dark .mainline-page .mainline-contact__muted,html.dark .mainline-page .mainline-contact__link{color:#adb6c2}
html.dark .mainline-page .mainline-contact__muted:hover,html.dark .mainline-page .mainline-contact__link:hover{color:#eef1f5}
html.dark .mainline-page .mainline-about-hero__stats::before{border-left-color:#2b2d31}
html.dark .mainline-page .mainline-about-story__img{background:#12151c}
html.dark .mainline-page .mainline-about-values article{background:#16171a;border-color:#2b2d31}
html.dark .mainline-page .mainline-contact__rule{border-top-color:#2b2d31}
html.dark .mainline-page .mainline-contact-form__label{color:#eef1f5}
html.dark .mainline-page .mainline-contact-form__req{color:#f97316}
html.dark .mainline-page .mainline-contact-form__input{background:#16171a;border-color:#2b2d31;color:#eef1f5}
html.dark .mainline-page .mainline-contact-form__input::placeholder{color:#6b7788}

/* ============================================================
   Landing additions: illustrated feature cards, how-it-works,
   WhatsApp mockup, differentiation. Original UI preserved.
   ============================================================ */
.mainline-features--illustrated .mainline-feature-card__img img { object-fit: contain; object-position: center; padding: 22px; }
@media (min-width: 801px) {
	.mainline-features--illustrated .mainline-feature-card { grid-template-columns: repeat(5, 1fr); }
}

/* How it works: 3 steps + WhatsApp mockup ---------------------- */
.mainline-hiw__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: start; margin-top: 56px; }
.mainline-hiw__steps { display: grid; gap: 18px; }
.mainline-hiw__step { display: flex; gap: 18px; align-items: flex-start; padding: 24px; border: none; border-radius: 8px; background: #fff; }
.mainline-hiw__num { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #0e2247; color: #fff; font-weight: 700; font-size: .95rem; }
.mainline-hiw__copy { flex: 1; }
.mainline-hiw__copy h3 { color: #18181b; font-size: 1.05rem; font-weight: 600; }
.mainline-hiw__copy p { margin-top: 6px; color: #565e6b; font-size: .9rem; line-height: 1.6; }
.mainline-hiw__icon { flex: none; width: 84px; height: 84px; object-fit: contain; }
.mainline-hiw__mock { margin-top: 4px; }
.mainline-hiw__caption { margin-top: 14px; color: #8a93a3; font-size: .8rem; text-align: center; }

.wa-phone { max-width: 320px; margin: 0 auto; border-radius: 2px; background: #ece5dd; box-shadow: 0 30px 50px -30px rgb(12 18 32 / .45); }
.wa-phone__bar { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; background: #075e54; border-radius: 2px; }
.wa-phone__head { display: flex; align-items: center; gap: 10px; color: #fff; }
.wa-phone__av { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #128c7e; font-size: .72rem; font-weight: 700; }
.wa-phone__meta { display: grid; line-height: 1.15; }
.wa-phone__meta small { font-size: .72rem; color: #d3e5e1; }
.wa-phone__icons { color: #dbe9e6; font-size: 1rem; letter-spacing: 2px; }
.wa-phone__screen { padding: 18px 14px 24px; min-height: 230px; display: flex; align-items: flex-start; }
.wa-chat { width: 100%; }
.wa-bubble { position: relative; max-width: 260px; margin-left: auto; padding: 8px 12px; background: #dcf8c6; border-radius: 8px; box-shadow: 0 1px 1px rgb(0 0 0 / .08); }
.wa-bubble::before { content: ''; position: absolute; right: -6px; top: 10px; width: 10px; height: 10px; background: #dcf8c6; transform: skewY(45deg); }
.wa-bubble p { color: #111b21; font-size: .85rem; line-height: 1.5; }
.wa-bubble b { font-weight: 600; }
.wa-bubble__meta { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 2px; font-size: .68rem; color: #8696a0; }
.wa-check { color: #53bdeb; font-weight: 700; font-size: .68rem; }
.wa-typing { display: inline-flex; align-items: center; gap: 4px; margin-top: 14px; padding: 8px 12px; background: #fff; border-radius: 8px; color: #8696a0; font-size: .72rem; }
.wa-typing span { width: 6px; height: 6px; border-radius: 50%; background: #a7a7a7; display: inline-block; animation: waBlink 1.2s infinite; }
.wa-typing span:nth-child(2) { animation-delay: .2s; }
.wa-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes waBlink { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }

/* Pay-as-you-go credits pricing (matches live /pricing) ----------- */
@media (min-width: 801px) {
	.mainline-pricing--wide { grid-template-columns: repeat(4, 1fr); }
}
.mainline-pricing__note { max-width: 640px; margin: 32px auto 0; text-align: center; color: #8a93a3; font-size: .85rem; line-height: 1.6; }

/* Differentiation ------------------------------------------------ */
.mainline-diff { padding: 112px 0 112px; }
.mainline-diff .mainline-reference-heading h2 span { color: #ea580c; }
.mainline-diff__grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 48px; border-top: 1px dashed #d1d7e0; border-bottom: 1px dashed #d1d7e0; }
.mainline-diff__col { padding: 34px 36px 40px; }
.mainline-diff__col + .mainline-diff__col { border-left: 1px dashed #d1d7e0; }
.mainline-diff__col h4 { color: #ea580c; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mainline-diff__col--new h4 { color: #0e2247; }
.mainline-diff__list { list-style: none; display: grid; gap: 13px; margin-top: 20px; }
.mainline-diff__list li { position: relative; padding-left: 22px; color: #565e6b; font-size: .95rem; line-height: 1.55; }
.mainline-diff__list li::before { position: absolute; left: 2px; top: 0; font-weight: 700; }
.mainline-diff__col--old .mainline-diff__list li::before { content: '×'; color: #ea580c; }
.mainline-diff__col--new .mainline-diff__list li::before { content: '✓'; color: #0e2247; }

/* About: story + points ------------------------------------------- */
.mainline-about-story__img--illustration { display: grid; place-items: center; }
.mainline-about-story__img--illustration img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 40px; }
.mainline-about-points { padding: 0 0 112px; }
.mainline-features-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 64px;
}
.mainline-features-grid article {
	padding: 26px;
	border: 1px solid #dde2ea;
	border-radius: 8px;
	background: #fff;
	transition: transform .2s ease, box-shadow .2s ease;
}
.mainline-features-grid article:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 34px -30px rgb(12 18 32 / .9);
}
.mainline-features-grid__img {
	height: 168px;
	display: grid;
	place-items: center;
	background: linear-gradient(180deg, #f7f9fc, #eff3f8);
	border-radius: 12px;
	overflow: hidden;
}
.mainline-features-grid__img img {
	width: auto;
	height: 134px;
	object-fit: contain;
}
.mainline-features-grid h3 {
	margin-top: 18px;
	color: #18181b;
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: -.02em;
}
.mainline-features-grid p {
	margin-top: 8px;
	color: #565e6b;
	font-size: .9rem;
	line-height: 1.6;
}
.mainline-about-points .mainline-features-grid { margin-top: 0; }
.mainline-about-points .mainline-features-grid__img { height: 184px; }

/* Testimonial: solid navy panel ---------------------------------- */
.mainline-reference-testimonial {
	background: #0a1628;
}

/* Responsive ------------------------------------------------------ */
@media (max-width: 800px) {
	.mainline-hiw__grid { grid-template-columns: 1fr; gap: 36px; }
	.mainline-diff { padding: 72px 0; }
	.mainline-diff__grid { grid-template-columns: 1fr; }
	.mainline-diff__col { padding: 22px 0; }
	.mainline-diff__col + .mainline-diff__col { border-left: 0; border-top: 1px dashed #d1d7e0; }
	.wa-phone { max-width: 280px; }
	.mainline-about-points { padding-bottom: 72px; }
	.mainline-features-grid { grid-template-columns: 1fr; }
	.mainline-features-grid article { transition: none; }
	.mainline-features-grid article:hover { transform: none; box-shadow: none; }
}
@media (max-width: 640px) {
	.mainline-hiw__step { flex-wrap: wrap; }
	.mainline-hiw__icon { width: 72px; height: 72px; }
}
@media (prefers-reduced-motion: reduce) {
	.wa-typing span { animation: none; opacity: 1; }
}

/* Dark mode: new landing additions -------------------------------- */
html.dark .mainline-page .mainline-hiw__step { background: #16171a; border-color: #2b2d31; }
html.dark .mainline-page .mainline-features-grid h3 { color: #fff; }
html.dark .mainline-page .mainline-features-grid p { color: #b6bbc2; }
html.dark .mainline-page .mainline-features-grid article,
html.dark .mainline-page .mainline-hiw__step,
html.dark .mainline-page .mainline-diff__col + .mainline-diff__col { border-color: #2b2d31; }
html.dark .mainline-page .mainline-features-grid article { background: #16171a; }
html.dark .mainline-page .mainline-features-grid__img { background: linear-gradient(180deg, #12151c, #0d0f14); }
html.dark .mainline-page .mainline-hiw__copy h3,
html.dark .mainline-page .mainline-diff .mainline-reference-heading h2 { color: #fff; }
html.dark .mainline-page .mainline-hiw__copy p,
html.dark .mainline-page .mainline-diff .mainline-reference-heading p,
html.dark .mainline-page .mainline-diff__list li { color: #cdd2da; }
html.dark .mainline-page .mainline-diff__grid,
html.dark .mainline-page .mainline-diff__col + .mainline-diff__col { border-color: #2b2d31; }
html.dark .mainline-page .mainline-diff__col--new h4 { color: #9cc2f0; }
html.dark .mainline-page .mainline-diff__col--old .mainline-diff__list li::before { color: #f97316; }
html.dark .mainline-page .mainline-diff__col--new .mainline-diff__list li::before { color: #9cc2f0; }

/* ============================================================
   Hero: flat white surface, no photo and no scrim. The display
   type therefore uses the normal ink colours, not white.
   ============================================================ */
.mainline-reference-hero-grid > div { position: relative; }
.mainline-reference-hero h1 { color: var(--ml-ink); }
.mainline-reference-hero p,
.mainline-reference-hero-list span { color: #565e6b; }
.mainline-reference-hero-list strong { color: #0e2247; }

.mainline-reference-testimonial .mainline-reference-container {
	width: min(100% - 48px, 880px);
	background: radial-gradient(closest-side at 50% 50%, rgb(7 17 32 / .8), rgb(7 17 32 / 0) 100%);
}

html.dark .mainline-page .mainline-reference-hero h1,
html.dark .mainline-page .mainline-reference-hero p,
html.dark .mainline-page .mainline-reference-hero-list span,
html.dark .mainline-page .mainline-reference-hero-list strong { color: #fff; }
html.dark .mainline-page .mainline-reference-testimonial p { color: #fff; }

@media (max-width: 640px) {
	.mainline-reference-testimonial .mainline-reference-container { width: min(100% - 32px, 880px); }
}

/* Reach: networks orbit ------------------------------------------- */
.mainline-reach { padding: 112px 0; text-align: center; }
.mainline-reach .mainline-reference-container { width: min(100% - 32px, 880px); }
.mainline-reach__eyebrow { color: #ea580c; font: 700 .75rem/1 var(--font-mono); letter-spacing: .15em; text-transform: uppercase; }
.mainline-reach h2 { margin-top: 14px; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.05; letter-spacing: -.06em; color: #18181b; }
.mainline-reach__lede { max-width: 640px; margin: 18px auto 0; color: #565e6b; font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.6; }

.mainline-reach__stage {
	position: relative;
	width: min(560px, 100%);
	aspect-ratio: 1;
	margin: 56px auto 0;
	background: radial-gradient(circle at 50% 50%, rgb(14 34 71 / .06), transparent 62%);
}
.mainline-reach__ring { position: absolute; left: 4%; top: 4%; width: 92%; height: 92%; border: 1px dashed #d1d7e0; border-radius: 50%; }
.mainline-reach__ring--inner { left: 24%; top: 24%; width: 52%; height: 52%; border: 1px dotted #d1d7e0; }
.mainline-reach__core {
	position: absolute; left: 50%; top: 50%;
	width: clamp(96px, 22vw, 132px); height: clamp(96px, 22vw, 132px);
	margin: calc(clamp(96px, 22vw, 132px) / -2) 0 0 calc(clamp(96px, 22vw, 132px) / -2);
	display: grid; place-items: center;
	border-radius: 50%; background: #0e2247; color: #fff;
	box-shadow: 0 24px 44px -28px rgb(12 18 32 / .75);
	animation: reach-breathe 3.2s ease-in-out infinite;
}
.mainline-reach__core svg { width: 42%; height: 42%; }
.mainline-reach__field { position: absolute; inset: 0; animation: reach-orbit 44s linear infinite; }
.mainline-reach__sat { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.mainline-reach__chip {
	position: absolute; left: 0; top: 0;
	width: clamp(54px, 13vw, 84px); height: clamp(54px, 13vw, 84px);
	margin-left: calc(clamp(54px, 13vw, 84px) / -2); margin-top: calc(clamp(54px, 13vw, 84px) / -2);
	display: grid; place-items: center;
	border-radius: 50%; background: #fff; overflow: hidden;
	box-shadow: 0 12px 26px -18px rgb(12 18 32 / .5);
	animation: reach-orbit 44s linear infinite reverse;
}
.mainline-reach__chip img { width: 62%; height: 62%; object-fit: contain; }
.mainline-reach__chip svg { width: 62%; height: 62%; color: #fff; }
.mainline-reach__chip--whatsapp { background: #25d366; }
.mainline-reach__note { margin-top: 34px; color: #8a93a3; font: 700 .75rem/1.6 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }

@keyframes reach-orbit { to { transform: rotate(360deg); } }
@keyframes reach-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }

html.dark .mainline-page .mainline-reach h2 { color: #f4f4f0; }
html.dark .mainline-page .mainline-reach__lede { color: #b6bbc2; }
html.dark .mainline-page .mainline-reach__ring { border-color: #2b2d31; }
html.dark .mainline-page .mainline-reach__stage { background: radial-gradient(circle at 50% 50%, rgb(244 244 240 / .04), transparent 62%); }

@media (max-width: 640px) {
	.mainline-reach { padding: 72px 0; }
	.mainline-reach__stage { margin-top: 44px; }
}
@media (prefers-reduced-motion: reduce) {
	.mainline-reach__field, .mainline-reach__chip, .mainline-reach__core { animation: none; }
}