:root {
  /* Core surfaces */
  --color-bg:            #ffffff;
  --color-bg-alt:        #f5f5f7;
  --color-bg-elevated:   #fbfbfd;
  --color-bg-dark:       #000000;

  /* Text */
  --color-text:          #1d1d1f;
  --color-text-secondary:#6e6e73;
  --color-text-tertiary: #86868b;
  --color-text-on-dark:  #f5f5f7;
  --color-text-on-dark-secondary: #a1a1a6;

  /* Accent */
  --color-accent:        #0071e3;
  --color-accent-hover:  #0077ed;
  --color-accent-link:   #2997ff;

  /* Lines */
  --color-divider:       #d2d2d7;
  --color-divider-light: #e8e8ed;

  /* Nav */
  --color-nav-bg:        rgba(255, 255, 255, 0.72);
  --color-nav-text:      #1d1d1f;

  --color-focus-ring:    #0071e3;

  /* Font */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --lh-tight:  1.04;
  --lh-snug:   1.08;
  --lh-normal: 1.47;

  --ls-headline:-0.018em;
  --ls-hero:    -0.025em;

  /* Layout */
  --max-width:      1100px;
  --max-width-text: 720px;
  --gutter:         22px;

  --section-pad-y:        120px;
  --section-pad-y-tablet:  90px;
  --section-pad-y-mobile:  64px;

  --space-2: 8px;  --space-3:12px; --space-4:16px;
  --space-6:24px;  --space-8:32px; --space-12:48px; --space-16:64px;

  --ease-out: cubic-bezier(0.28, 0.11, 0.32, 1);
  --dur: 0.8s;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: var(--lh-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, picture, video { max-width: 100%; display: block; }
a { color: var(--color-accent-link); text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: var(--fw-semibold); letter-spacing: var(--ls-headline); }
p { margin: 0; }
::selection { background: rgba(0,113,227,0.2); }

/* ---------- Layout primitives ---------- */
.section { padding: var(--section-pad-y) 0; background: var(--color-bg); }
.section--alt   { background: var(--color-bg-alt); }
.section--dark  { background: var(--color-bg-dark); color: var(--color-text-on-dark); }
.section--charcoal { background: #1d1d1f; color: var(--color-text-on-dark); }
.section--charcoal .section-headline { color: var(--color-text-on-dark); }
.section--charcoal .eyebrow { color: var(--color-accent-link); }
.section--charcoal .subhead { color: var(--color-text-on-dark-secondary); }
.section--charcoal .link-chevron { color: var(--color-accent-link); }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); }
.text-center { text-align: center; }

@media (max-width: 1068px) { .section { padding: var(--section-pad-y-tablet) 0; } }
@media (max-width: 733px)  { .section { padding: var(--section-pad-y-mobile) 0; } }

/* ---------- Typography roles ---------- */
.hero-headline {
  font-size: clamp(44px, 8.5vw, 88px);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-hero);
  color: var(--color-text);
  max-width: 14ch;
  margin: 0 auto;
}
.section-headline {
  font-size: clamp(34px, 5.4vw, 56px);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-headline);
  color: var(--color-text);
}
.section--dark .section-headline { color: var(--color-text-on-dark); }
.section--dark .eyebrow { color: var(--color-accent-link); }
.eyebrow {
  font-size: clamp(17px, 2.4vw, 21px);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}
.subhead {
  font-size: clamp(19px, 2.6vw, 26px);
  font-weight: var(--fw-regular);
  line-height: 1.3;
  color: var(--color-text-secondary);
  max-width: var(--max-width-text);
  margin-left: auto; margin-right: auto;
}
.section--dark .subhead { color: var(--color-text-on-dark-secondary); }
.section-headline + .subhead { margin-top: var(--space-4); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 9999; height: 48px;
  background: var(--color-nav-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.nav__inner {
  max-width: 1024px; margin: 0 auto; height: 100%; padding: 0 22px;
  display: flex; align-items: center; justify-content: space-between;
}
.nav__brand { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: var(--fw-semibold); color: var(--color-text); }
.nav__brand img { height: 22px; width: auto; }
.nav__links { display: flex; gap: 32px; align-items: center; }
.nav__link {
  font-size: 12px; font-weight: var(--fw-regular); color: var(--color-nav-text);
  opacity: 0.82; transition: opacity 0.2s ease;
}
.nav__link:hover { opacity: 1; }
.nav__cta {
  font-size: 12px; font-weight: var(--fw-regular); color: #fff;
  background: var(--color-accent); padding: 5px 12px; border-radius: 980px;
  transition: background-color 0.2s ease;
}
.nav__cta:hover { background: var(--color-accent-hover); color: #fff; }
.nav__toggle { display: none; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav__toggle span { display: block; width: 18px; height: 1.5px; background: var(--color-text); margin: 4px 0; transition: transform 0.25s ease, opacity 0.25s ease; }

@media (max-width: 833px) {
  .nav__links {
    position: fixed; inset: 48px 0 auto 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: rgba(255,255,255,0.96);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    padding: 8px 22px 24px; border-bottom: 1px solid var(--color-divider);
    transform: translateY(-110%); transition: transform 0.3s var(--ease-out);
    max-height: calc(100vh - 48px); overflow-y: auto;
  }
  .nav__links.is-open { transform: translateY(0); }
  .nav__link, .nav__cta { font-size: 17px; padding: 14px 0; width: 100%; }
  .nav__cta { display: inline-block; margin-top: 10px; padding: 12px 22px; width: auto; }
  .nav__toggle { display: block; }
}

/* ---------- Buttons & links ---------- */
.cta-row { display: flex; gap: var(--space-8); justify-content: center; align-items: center; margin-top: var(--space-8); flex-wrap: wrap; }
.btn {
  display: inline-block; font-size: 17px; font-weight: var(--fw-regular); line-height: 1.18;
  padding: 12px 24px; border-radius: 980px; cursor: pointer;
  border: 1px solid transparent; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.btn--primary { background: var(--color-accent); color: #fff; }
.btn--primary:hover { background: var(--color-accent-hover); color: #fff; }
.btn--secondary { background: transparent; color: var(--color-accent); border-color: var(--color-accent); }
.btn--secondary:hover { background: var(--color-accent); color: #fff; }
.btn--large { font-size: 19px; padding: 15px 34px; }
.section--dark .btn--secondary { color: var(--color-text-on-dark); background: rgba(255,255,255,0.1); border-color: transparent; }
.section--dark .btn--secondary:hover { background: rgba(255,255,255,0.18); color: #fff; border-color: transparent; }

.link-chevron { display: inline-flex; align-items: center; font-size: 19px; color: var(--color-accent-link); }
.section--dark .link-chevron { color: var(--color-accent-link); }
.link-chevron:hover { text-decoration: underline; }
.link-chevron::after { content: "\203A"; margin-left: 4px; font-size: 1.1em; line-height: 1; transition: transform 0.2s ease; }
.link-chevron:hover::after { transform: translateX(3px); }

.btn:focus-visible, .link-chevron:focus-visible, .nav__link:focus-visible, .nav__cta:focus-visible {
  outline: 3px solid var(--color-focus-ring); outline-offset: 3px; border-radius: 8px;
}

/* ---------- Hero ---------- */
.hero { position: relative; padding: 92px 0 0; background: linear-gradient(180deg, #fbfbfd 0%, #ffffff 70%); overflow: hidden; text-align: center; }
.hero .container { position: relative; z-index: 2; }
.hero-sub { font-size: clamp(19px, 2.6vw, 26px); color: var(--color-text-secondary); line-height: 1.3; max-width: 640px; margin: var(--space-6) auto 0; font-weight: var(--fw-regular); }
.hero-trust { margin-top: var(--space-6); font-size: 15px; color: var(--color-text-tertiary); }
.hero-trust a { color: var(--color-accent-link); }
.hero-trust a:hover { text-decoration: underline; }
.hero-bandwagon { margin-top: var(--space-3); font-size: 15px; font-weight: var(--fw-medium); color: var(--color-text-secondary); }
.hero-bandwagon .stars { color: #fbbc04; letter-spacing: 1px; margin-right: 6px; }

/* ---------- Before / After website slider (Apple-clean drag-to-compare) ---------- */
.ba-wrap { margin-top: var(--space-12); }
.ba-caption { text-align: center; margin-bottom: var(--space-8); }
.ba-caption .eyebrow { margin-bottom: var(--space-2); }
.ba-caption .subhead { font-size: clamp(17px, 2.2vw, 22px); }
.ba {
  position: relative; width: 100%; max-width: 980px; margin: 0 auto;
  aspect-ratio: 1280 / 820; border-radius: 24px; overflow: hidden;
  background: var(--color-bg-alt);
  box-shadow: 0 30px 80px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.06);
  border: 1px solid var(--color-divider-light);
  touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none;
}
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.ba__img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; pointer-events: none; }
/* AFTER sits on top, clipped from the right by the divider position */
.ba__after { z-index: 2; clip-path: inset(0 0 0 50%); will-change: clip-path; }
/* Corner pill labels */
.ba__label {
  position: absolute; top: 14px; z-index: 4; font-size: 12px; font-weight: var(--fw-semibold);
  letter-spacing: 0.02em; color: #fff; background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 6px 13px; border-radius: 980px; pointer-events: none;
}
.ba__label--before { left: 14px; }
.ba__label--after  { right: 14px; z-index: 4; }
/* Divider line + circular handle */
.ba__divider {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; z-index: 3;
  background: rgba(255,255,255,0.95); box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
  transform: translateX(-50%); pointer-events: none;
}
.ba__handle {
  position: absolute; top: 50%; left: 50%; z-index: 5;
  width: 46px; height: 46px; border-radius: 50%; transform: translate(-50%, -50%);
  background: rgba(255,255,255,0.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.28), 0 0 0 1px rgba(0,0,0,0.05);
  display: flex; align-items: center; justify-content: center; cursor: ew-resize;
  transition: transform 0.12s ease;
}
.ba:active .ba__handle, .ba__handle:active { transform: translate(-50%, -50%) scale(1.06); }
.ba__handle svg { width: 22px; height: 22px; color: #1d1d1f; }
.ba:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 4px; }
.ba__skeleton { position: absolute; inset: 0; z-index: 0; background: linear-gradient(110deg, #f0f0f3 30%, #f7f7fa 50%, #f0f0f3 70%); }
@media (max-width: 733px) {
  .ba { border-radius: 18px; }
  .ba__handle { width: 40px; height: 40px; }
}
/* ---------- Before/After carousel (multiple niches, slide between) ---------- */
.ba-railwrap { position: relative; }
.ba-rail {
  position: relative;
  display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding: 6px 2px 12px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.ba-rail::-webkit-scrollbar { display: none; }
.ba-slide { flex: 0 0 min(880px, 88%); scroll-snap-align: center; will-change: opacity; }
.ba-slide__label { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px 2px;
  font-size: 13px; font-weight: var(--fw-semibold); letter-spacing: -.01em; color: var(--color-text); }
.ba-slide__label i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); flex: 0 0 auto; }
.ba-rail .ba { max-width: none; margin: 0; transform-origin: center center; will-change: transform; }
.ba-nav {
  position: absolute; top: calc(50% + 14px); transform: translateY(-50%); z-index: 6;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--color-divider);
  background: rgba(255,255,255,0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.14); transition: transform .15s ease; padding: 0;
}
.ba-nav:hover { transform: translateY(-50%) scale(1.07); }
.ba-nav--prev { left: -8px; }
.ba-nav--next { right: -8px; }
.ba-nav svg { width: 20px; height: 20px; color: #1d1d1f; }
.ba-dots { display: flex; justify-content: center; gap: 9px; margin-top: 18px; }
.ba-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-divider); border: 0; padding: 0; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.ba-dot.is-active { background: var(--color-accent); transform: scale(1.3); }
@media (max-width: 733px) { .ba-nav { display: none; } .ba-slide { flex: 0 0 92%; } }

/* Big hero image (Apple-style full-bleed product shot) */
.hero-photo {
  margin-top: var(--space-16);
  width: 100%;
  position: relative;
}
.hero-photo img {
  width: 100%;
  height: clamp(360px, 56vh, 680px);
  object-fit: cover;
  object-position: center 38%;
}

/* ---------- Big image bands ---------- */
.media-band { position: relative; }
.media-band img,
.media-band video { width: 100%; height: clamp(420px, 64vh, 760px); object-fit: cover; display: block; }
.media-band__overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; text-align: center;
  padding: clamp(40px, 8vw, 96px) 22px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.66) 100%);
  color: #fff;
}
.media-band__overlay.is-top {
  justify-content: flex-start;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 55%);
}
.media-band__overlay.is-center {
  justify-content: center;
  background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.55) 100%);
}
.media-band__overlay.is-center .subhead { color: rgba(255,255,255,0.9); margin-top: var(--space-4); }
.media-band--cta img { height: clamp(480px, 70vh, 820px); }
.media-band--cta .btn--secondary { background: rgba(255,255,255,0.14); color: #fff; border-color: transparent; }
.media-band--cta .btn--secondary:hover { background: rgba(255,255,255,0.24); }
.media-band__overlay .eyebrow { color: #fff; opacity: 0.85; }
.media-band__overlay .section-headline { color: #fff; max-width: 18ch; }
.media-band__overlay .subhead { color: rgba(255,255,255,0.88); }
.media-band__overlay .link-chevron { color: #fff; }

/* ============================================================
   PREMIUM STATEMENT BAND — cinematic-editorial. Scoped to
   .media-band--premium ONLY; base .media-band stays untouched. */
.media-band--premium { isolation: isolate; background: #070809; overflow: hidden; }
.media-band--premium img {
  height: clamp(540px, 74vh, 840px);
  filter: brightness(0.92) contrast(1.06) saturate(0.98);
  transform-origin: 64% 36%; will-change: transform;
}
.media-band--premium .media-band__overlay {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.36) 0%, rgba(0,0,0,0) 26%),
    linear-gradient(118deg, rgba(6,8,11,0.88) 0%, rgba(6,8,11,0.70) 30%, rgba(6,8,11,0.24) 56%, rgba(6,8,11,0) 76%),
    radial-gradient(125% 135% at 78% 22%, rgba(0,0,0,0) 44%, rgba(0,0,0,0.42) 100%);
  align-items: flex-start; text-align: left;
  padding: clamp(44px, 8vw, 100px) clamp(24px, 7vw, 104px);
}
.media-band--premium .band-copy { display: flex; flex-direction: column; max-width: 30rem; }
.media-band--premium .eyebrow {
  display: flex; align-items: center; margin: 0 0 clamp(16px, 2.4vw, 24px);
  font-size: clamp(11px, 1.05vw, 13px); font-weight: var(--fw-semibold);
  letter-spacing: 0.34em; text-transform: uppercase; color: #fff; opacity: 1;
}
.media-band--premium .band-eyebrow__text { flex: 0 0 auto; }
.media-band--premium .eyebrow::after {
  content: ""; flex: 1 1 auto; max-width: clamp(40px, 6vw, 72px);
  margin-left: 16px; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 100%);
}
.media-band--premium .section-headline {
  margin: 0; max-width: 16ch; font-weight: var(--fw-semibold);
  font-size: clamp(2.4rem, 5.4vw, 4.25rem); line-height: 1.02;
  letter-spacing: -0.022em; color: #fff; text-wrap: balance;
  text-shadow: 0 1px 40px rgba(0,0,0,0.45);
}
.media-band--premium .subhead {
  margin: clamp(18px, 2.6vw, 28px) 0 0; max-width: 36ch;
  font-size: clamp(1rem, 1.55vw, 1.25rem); font-weight: var(--fw-regular);
  line-height: 1.5; letter-spacing: -0.003em; color: rgba(255,255,255,0.82);
}
html.js .media-band--premium img { animation: band-kenburns 26s ease-out both; }
@keyframes band-kenburns { from { transform: scale(1.07); } to { transform: scale(1.0); } }
html.js .media-band--premium.reveal { transform: none; }
html.js .media-band--premium .eyebrow,
html.js .media-band--premium .section-headline,
html.js .media-band--premium .subhead { opacity: 0; transform: translateY(16px); }
html.js .media-band--premium.is-visible .eyebrow,
html.js .media-band--premium.is-visible .section-headline,
html.js .media-band--premium.is-visible .subhead {
  opacity: 1; transform: none;
  transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
html.js .media-band--premium.is-visible .eyebrow          { transition-delay: 0.10s; }
html.js .media-band--premium.is-visible .section-headline { transition-delay: 0.24s; }
html.js .media-band--premium.is-visible .subhead          { transition-delay: 0.42s; }
@media (prefers-reduced-motion: reduce) {
  html.js .media-band--premium img { animation: none; transform: none; }
  html.js .media-band--premium .eyebrow,
  html.js .media-band--premium .section-headline,
  html.js .media-band--premium .subhead { opacity: 1 !important; transform: none !important; transition: none !important; }
}
@media (max-width: 640px) {
  .media-band--premium .media-band__overlay {
    background:
      linear-gradient(180deg, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0) 24%),
      linear-gradient(180deg, rgba(6,8,11,0) 30%, rgba(6,8,11,0.56) 62%, rgba(6,8,11,0.92) 100%),
      radial-gradient(140% 120% at 70% 14%, rgba(0,0,0,0) 46%, rgba(0,0,0,0.40) 100%);
    padding-left: clamp(22px, 7vw, 32px); padding-right: clamp(22px, 7vw, 32px);
  }
  .media-band--premium .eyebrow { letter-spacing: 0.26em; }
  .media-band--premium .band-copy { max-width: 100%; }
}

/* ---------- Apple-style bento service lineup ---------- */
.bento { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:var(--space-12); text-align:left; }
.bento-tile { position:relative; border-radius:24px; padding:32px; overflow:hidden; display:flex; flex-direction:column; min-height:300px; }
.bento-tile--wide { grid-column:1 / -1; flex-direction:row; align-items:center; gap:36px; }
.bento-tile--light { background:var(--color-bg-alt); color:var(--color-text); }
.bento-tile--dark { background:#1d1d1f; color:#f5f5f7; }
.bento-name { font-size:24px; font-weight:var(--fw-semibold); letter-spacing:var(--ls-headline); line-height:1.1; margin:0; }
.bento-sub { font-size:15.5px; line-height:1.45; color:var(--color-text-secondary); margin:9px 0 0; max-width:42ch; }
.bento-tile--dark .bento-sub { color:#a1a1a6; }
.bento-head { margin-bottom:24px; }
.bento-art { margin-top:auto; }
.bento-tile--wide .bento-head { margin-bottom:0; flex:1 1 0; }
.bento-tile--wide .bento-art { margin-top:0; flex:1 1 0; min-width:0; }
/* call card */
.bento-call { background:#0c0c0e; border:1px solid #2c2c2e; border-radius:18px; padding:16px 18px; box-shadow:0 20px 50px rgba(0,0,0,.35); }
.bento-call__top { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:#f5f5f7; }
.bento-call__dot { width:8px; height:8px; border-radius:50%; background:#34c759; box-shadow:0 0 0 3px rgba(52,199,89,.2); }
.bento-call__wave { display:flex; align-items:center; gap:4px; height:38px; margin:15px 0; }
.bento-call__wave i { flex:1; background:linear-gradient(180deg,#5ac8fa,#0071e3); border-radius:3px; }
.bento-call__line { font-size:13.5px; line-height:1.4; color:#c7c7cc; background:#1c1c1e; border-radius:12px; border-bottom-left-radius:4px; padding:10px 12px; }
/* chat bubbles */
.bento-chat { display:flex; flex-direction:column; gap:8px; }
.bento-bub { max-width:82%; font-size:14px; line-height:1.35; padding:10px 13px; border-radius:16px; }
.bento-bub--in { align-self:flex-start; background:#e9e9eb; color:#1d1d1f; border-bottom-left-radius:5px; }
.bento-bub--out { align-self:flex-end; background:var(--color-accent); color:#fff; border-bottom-right-radius:5px; }
.bento-missed { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--color-text-tertiary); margin-bottom:2px; }
.bento-missed__ic { display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:#ff3b30; color:#fff; font-size:11px; line-height:1; }
/* review card */
.bento-rev { background:#fff; color:#1d1d1f; border-radius:16px; padding:16px 18px; box-shadow:0 18px 44px rgba(0,0,0,.3); }
.bento-rev__stars { color:#fbbc04; font-size:16px; letter-spacing:2px; line-height:1; }
.bento-rev__q { font-size:13.5px; line-height:1.45; margin:9px 0 12px; }
.bento-rev__src { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--color-text-tertiary); }
.bento-g { width:16px; height:16px; flex:0 0 auto; border-radius:50%; background:conic-gradient(#ea4335 0 25%,#fbbc04 25% 50%,#34a853 50% 75%,#4285f4 75% 100%); -webkit-mask:radial-gradient(circle 4.5px at 50% 50%,transparent 98%,#000 100%); mask:radial-gradient(circle 4.5px at 50% 50%,transparent 98%,#000 100%); }
/* mini browser */
.bento-web { border-radius:14px; overflow:hidden; border:1px solid var(--color-divider-light); background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.10); }
.bento-web__bar { display:flex; align-items:center; gap:6px; padding:9px 12px; background:#f0f0f3; border-bottom:1px solid var(--color-divider-light); }
.bento-web__bar>span { width:8px; height:8px; border-radius:50%; background:#d2d2d7; flex:0 0 auto; }
.bento-web__url { margin-left:8px; font-size:10px; color:#86868b; background:#fff; border-radius:6px; padding:3px 10px; flex:1; }
.bento-web__body { padding:14px; }
.bento-web__hero { height:52px; border-radius:8px; background:linear-gradient(120deg,#0071e3,#5ac8fa); }
.bento-web__row { display:flex; gap:8px; margin-top:9px; }
.bento-web__row>div { flex:1; height:30px; border-radius:8px; background:#eef0f3; }
/* dashboard mini card */
.bento-dashcard { background:#0c0c0e; border:1px solid #2c2c2e; border-radius:18px; padding:18px; box-shadow:0 20px 50px rgba(0,0,0,.35); }
.bento-dashcard__top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.bento-dashcard__top span:first-child { font-size:12.5px; font-weight:600; color:#a1a1a6; }
.bento-dashcard__pill { font-size:12px; font-weight:700; color:#34c759; background:rgba(52,199,89,.14); border-radius:980px; padding:3px 9px; }
.bento-dashcard__amt { font-size:30px; font-weight:700; letter-spacing:-1px; color:#fff; margin:4px 0 4px; font-variant-numeric:tabular-nums; }
.bento-spark { display:block; width:100%; height:auto; margin-top:6px; }
/* photo-background tile */
.bento-tile--photo { color:#fff; justify-content:flex-end; }
.bento-tile--photo .bento-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.bento-tile--photo .bento-scrim { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.30) 44%, rgba(0,0,0,0.86) 100%); }
.bento-tile--photo .bento-head { position:relative; z-index:2; margin:auto 0 0; }
.bento-tile--photo .bento-name { color:#fff; }
.bento-tile--photo .bento-sub { color:rgba(255,255,255,0.86); }
@media (max-width:760px){
  .bento { grid-template-columns:1fr; }
  .bento-tile--wide { grid-column:auto; flex-direction:column; align-items:stretch; gap:0; }
  .bento-tile--wide .bento-head { margin-bottom:24px; }
  .bento-tile--wide .bento-art { margin-top:auto; }
  .bento-tile { min-height:0; padding:28px 24px; }
}
/* Centered photo inside a padded section */
.photo-figure { margin-top: var(--space-12); border-radius: 24px; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,0.14); }
.photo-figure img { width: 100%; height: clamp(340px, 50vh, 560px); object-fit: cover; }

/* ---------- Apple-clean conversion funnel (web design product graphic) ---------- */
.funnel { margin: var(--space-16) auto 0; max-width: 720px; text-align: center; }
.funnel__caption {
  font-size: clamp(15px, 2vw, 17px); font-weight: var(--fw-medium);
  color: var(--color-text-tertiary); letter-spacing: 0.01em;
  margin-bottom: var(--space-8);
}
.funnel__stages { display: flex; flex-direction: column; align-items: center; }
.funnel__stage {
  width: 100%; border-radius: 20px; color: #fff;
  padding: 26px 28px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 18px 40px rgba(0,0,0,0.14), 0 2px 6px rgba(0,0,0,0.06);
}
.funnel__name {
  font-size: clamp(19px, 2.6vw, 24px); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-headline); line-height: 1.1;
}
.funnel__sub {
  font-size: clamp(12px, 1.7vw, 14px); font-weight: var(--fw-regular);
  color: rgba(255,255,255,0.82); margin-top: 7px; line-height: 1.35;
}
/* Funnel taper: each stage a little narrower than the one above (desktop) */
.funnel__stage--1 { max-width: 100%;  background: linear-gradient(135deg, #0a2540 0%, #103a66 100%); }
.funnel__stage--2 { max-width: 90%;   background: linear-gradient(135deg, #0a5bd0 0%, #1aa9b0 100%); }
.funnel__stage--3 { max-width: 80%;   background: linear-gradient(135deg, #1e9e5a 0%, #34c759 100%); }
.funnel__stage--4 { max-width: 70%;   background: linear-gradient(135deg, #f08a00 0%, #ff9f0a 100%); }
.funnel__stage--5 { max-width: 60%;   background: linear-gradient(135deg, #e0a200 0%, #f5c518 100%); }
.funnel__chevron {
  display: flex; align-items: center; justify-content: center;
  color: var(--color-divider); margin: 9px 0;
}
.funnel__chevron svg { width: 24px; height: 24px; display: block; }
@media (max-width: 560px) {
  /* On mobile, bars go full-width and stack cleanly (no taper). */
  .funnel__stage { max-width: 100% !important; padding: 22px 20px; }
}

/* ---------- Mockup: Google review WALL ---------- */
.reviewwall {
  margin: var(--space-16) auto 0; max-width: 1000px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: left;
}
.rw-card {
  background: #fff; border: 1px solid var(--color-divider-light); border-radius: 20px;
  padding: 24px 22px 22px; box-shadow: 0 12px 36px rgba(0,0,0,0.07);
  display: flex; flex-direction: column;
}
.rw-card__top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.rw-avatar { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; color: #fff; font-size: 18px; font-weight: var(--fw-semibold); display: flex; align-items: center; justify-content: center; }
.rw-avatar.a1 { background: linear-gradient(140deg, #0071e3, #34c759); }
.rw-avatar.a2 { background: linear-gradient(140deg, #ff6b6b, #f59e0b); }
.rw-avatar.a3 { background: linear-gradient(140deg, #7c3aed, #2997ff); }
.rw-avatar.a4 { background: linear-gradient(140deg, #0a9396, #34c759); }
.rw-avatar.a5 { background: linear-gradient(140deg, #d97757, #fbbc04); }
.rw-avatar.a6 { background: linear-gradient(140deg, #2563eb, #06b6d4); }
.rw-card__who { min-width: 0; }
.rw-card__name { font-size: 15px; font-weight: var(--fw-semibold); color: var(--color-text); }
.rw-card__when { font-size: 12px; color: var(--color-text-tertiary); margin-top: 1px; }
.rw-card__stars { font-size: 17px; letter-spacing: 2px; color: #fbbc04; line-height: 1; margin-bottom: 10px; }
.rw-card__quote { font-size: 15px; line-height: 1.5; color: var(--color-text); flex: 1; }
.rw-card__src { display: flex; align-items: center; gap: 7px; margin-top: 16px; font-size: 12px; font-weight: var(--fw-medium); color: var(--color-text-tertiary); }
.rw-g {
  width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%;
  background:
    conic-gradient(#ea4335 0 25%, #fbbc04 25% 50%, #34a853 50% 75%, #4285f4 75% 100%);
  -webkit-mask: radial-gradient(circle 5px at 50% 50%, transparent 98%, #000 100%);
          mask: radial-gradient(circle 5px at 50% 50%, transparent 98%, #000 100%);
}
@media (max-width: 833px) { .reviewwall { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .reviewwall { grid-template-columns: 1fr; max-width: 440px; } }

/* ---------- Scoped phone dashboard (inlined from 0-DASHBOARD-MOCKUP, dash- prefixed) ---------- */
.dash-stage { margin: var(--space-16) auto 0; display: flex; align-items: center; justify-content: center; }
.dash-phone { --dash-ink:#0f1b33; --dash-muted:#7a869a; --dash-line:#eef1f6; --dash-blue:#2f6bff; --dash-green:#1e9e5a;
  width: 320px; max-width: 88vw; background:#0b0d12; border-radius:50px; padding:12px;
  box-shadow:0 40px 90px rgba(0,0,0,.45), 0 0 0 2px #20242e inset; }
.dash-screen { background:#f5f7fb; border-radius:42px; overflow:hidden; position:relative; text-align:left; }
.dash-notch { position:absolute; top:10px; left:50%; transform:translateX(-50%); width:120px; height:26px; background:#0b0d12; border-radius:16px; z-index:5; }
.dash-statusbar { display:flex; justify-content:space-between; align-items:center; padding:14px 26px 6px; font-size:13px; font-weight:700; color:var(--dash-ink); }
.dash-hdr { padding:6px 22px 14px; }
.dash-hdr .dash-biz { font-size:12px; color:var(--dash-muted); font-weight:600; letter-spacing:.3px; }
.dash-hdr .dash-live { display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--dash-green); font-weight:800; text-transform:uppercase; letter-spacing:.6px; }
.dash-hdr .dash-live .dash-dot { width:7px; height:7px; border-radius:50%; background:var(--dash-green); box-shadow:0 0 0 3px rgba(30,158,90,.18); }
.dash-hdr h3 { font-size:21px; color:var(--dash-ink); font-weight:800; margin-top:3px; letter-spacing:-.3px; }
.dash-body { padding:0 16px 22px; }
.dash-card { background:#fff; border:1px solid var(--dash-line); border-radius:18px; padding:16px; margin-bottom:12px; box-shadow:0 6px 18px rgba(15,27,51,.04); }
.dash-rev-top { display:flex; justify-content:space-between; align-items:flex-end; }
.dash-rev-label { font-size:12px; color:var(--dash-muted); font-weight:600; }
.dash-rev-amt { font-size:30px; color:var(--dash-ink); font-weight:900; letter-spacing:-1px; margin-top:2px; }
.dash-pill { display:inline-flex; align-items:center; gap:4px; background:#e6f6ed; color:var(--dash-green); font-weight:800; font-size:13px; padding:5px 10px; border-radius:20px; }
.dash-chart { margin-top:12px; }
.dash-months { display:flex; justify-content:space-between; font-size:10px; color:var(--dash-muted); margin-top:6px; padding:0 2px; }
.dash-tiles { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.dash-tile { background:#fff; border:1px solid var(--dash-line); border-radius:16px; padding:13px 14px; }
.dash-tile .dash-t-l { font-size:11px; color:var(--dash-muted); font-weight:600; }
.dash-tile .dash-t-v { font-size:22px; color:var(--dash-ink); font-weight:900; letter-spacing:-.5px; margin-top:2px; }
.dash-tile .dash-t-up { font-size:12px; color:var(--dash-green); font-weight:800; margin-top:2px; }
.dash-row2 { display:grid; grid-template-columns:1.3fr 1fr; gap:12px; }
.dash-bars { display:flex; align-items:flex-end; gap:7px; height:70px; margin-top:12px; }
.dash-bars span { flex:1; background:linear-gradient(180deg,#5b8cff,#2f6bff); border-radius:5px 5px 0 0; }
.dash-mini-label { font-size:11px; color:var(--dash-muted); font-weight:700; }
.dash-donut-wrap { display:flex; align-items:center; justify-content:center; margin-top:8px; }
.dash-legend { font-size:10px; color:var(--dash-muted); margin-top:8px; line-height:1.7; }
.dash-legend i { display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:5px; }

/* ---------- MacBook mockup (landscape dashboard) ---------- */
.mac-stage { margin: var(--space-16) auto 0; display:flex; align-items:flex-end; justify-content:center; gap:30px; flex-wrap:wrap; }
.mac-stage .mac { width:560px; max-width:92vw; margin:0; }
.mac-stage .dash-phone { margin:0; flex:0 0 auto; zoom:0.72; }
@media (max-width:980px){ .mac-stage { flex-direction:column; align-items:center; gap:34px; } .mac-stage .mac { width:min(560px,92vw); } .mac-stage .dash-phone { zoom:1; } }
.mac { width:780px; max-width:94vw; }
.mac__lid { background:#17181c; border:1px solid #303236; border-radius:18px 18px 8px 8px; padding:12px 12px 14px; box-shadow:0 34px 80px rgba(0,0,0,.34); }
.mac__cam { width:5px; height:5px; border-radius:50%; background:#33363b; margin:0 auto 8px; }
.mac__screen { position:relative; background:#f5f7fb; border-radius:6px; overflow:hidden; aspect-ratio:16/10; }
.mac__glare { position:absolute; inset:0; z-index:3; pointer-events:none; background:linear-gradient(118deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 38%); }
.mac__base { position:relative; height:14px; width:116%; margin:0 -8%; background:linear-gradient(180deg,#e5e7ea 0%, #c2c5cb 52%, #a7aab0 100%); border-radius:0 0 13px 13px; box-shadow:0 18px 24px rgba(0,0,0,.18); }
.mac__base::after { content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:128px; height:8px; background:#bcbfc5; border-radius:0 0 9px 9px; }
.macui { --dash-ink:#0f1b33; --dash-muted:#7a869a; --dash-line:#eef1f6; --dash-blue:#2f6bff; --dash-green:#1e9e5a; position:absolute; inset:0; display:flex; flex-direction:column; background:#f5f7fb; text-align:left; }
.macui__bar { display:flex; align-items:center; gap:10px; padding:9px 14px; background:#fff; border-bottom:1px solid #e7eaf0; }
.macui__dots { display:flex; gap:6px; }
.macui__dots i { width:10px; height:10px; border-radius:50%; }
.macui__title { font-size:12px; font-weight:700; color:var(--dash-ink); }
.macui__live { margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--dash-green); }
.macui__live i { width:7px; height:7px; border-radius:50%; background:var(--dash-green); box-shadow:0 0 0 3px rgba(30,158,90,.18); }
.macui__head { padding:13px 18px 0; }
.macui__biz { font-size:11px; font-weight:700; letter-spacing:.4px; color:var(--dash-muted); }
.macui__h { font-size:19px; font-weight:800; letter-spacing:-.3px; color:var(--dash-ink); margin-top:2px; }
.macui__body { flex:1; min-height:0; display:grid; grid-template-columns:1.55fr 1fr; gap:14px; padding:13px 18px 18px; }
.macui__side { display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; gap:12px; }
.macui .dash-card { margin:0; height:100%; display:flex; flex-direction:column; }
.macui .dash-chart { flex:1; min-height:0; display:flex; flex-direction:column; }
.macui .dash-chart svg { flex:1; width:100%; min-height:60px; height:auto; }
.macui .dash-tile { display:flex; flex-direction:column; justify-content:center; }
@media (max-width:760px){
  .mac__base { width:120%; margin:0 -10%; }
  .macui__body { grid-template-columns:1fr; gap:10px; padding:12px 14px 14px; }
  .macui__h { font-size:16px; }
}

/* Section background that reads as climbing affluence/growth */
.section--growth { background: linear-gradient(180deg, #eef3fb 0%, #f5f8ff 40%, #ffffff 100%); }

/* ---------- Mockup: capacity command center (multi-metric line dashboard) ---------- */
.cap-card{box-sizing:border-box;width:100%;max-width:1000px;margin:var(--space-16) auto 0;background:#15171c;border:1px solid #2a2d34;border-radius:28px;box-shadow:0 40px 100px rgba(0,0,0,.28);padding:34px 38px;font-family:var(--font-sans);color:#f5f5f7;text-align:left;-webkit-font-smoothing:antialiased}
.cap-card *{box-sizing:border-box}
.cap-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.cap-title{font-size:19px;font-weight:var(--fw-semibold,600);letter-spacing:-.022em;margin:0;color:#f5f5f7}
.cap-status{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:var(--fw-medium,500);color:#a1a1a6;letter-spacing:-.01em;white-space:nowrap}
.cap-pulse{width:8px;height:8px;border-radius:50%;background:#30d158;box-shadow:0 0 0 3px rgba(48,209,88,.18);flex:none}
.cap-hero{margin-bottom:6px}
.cap-hero-label{font-size:13px;font-weight:var(--fw-medium,500);color:#8a8d94;letter-spacing:-.006em;margin:0 0 6px}
.cap-hero-row{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.cap-hero-val{font-size:42px;line-height:1;font-weight:var(--fw-semibold,600);letter-spacing:-.022em;color:#fff;margin:0;font-variant-numeric:tabular-nums}
.cap-hero-pill{display:inline-flex;align-items:center;gap:4px;background:rgba(48,209,88,.16);color:#30d158;font-size:14px;font-weight:var(--fw-semibold,600);line-height:1;padding:6px 11px 6px 9px;border-radius:980px;letter-spacing:-.006em}
.cap-hero-pill svg{display:block}
.cap-hero-cap{font-size:13px;font-weight:var(--fw-regular,400);color:#a1a1a6;margin:8px 0 0;letter-spacing:-.006em}
.cap-kpis{display:flex;gap:12px;margin:22px 0 26px}
.cap-kpi{flex:1 1 0;min-width:0;background:#20232a;border:1px solid #2a2d34;border-radius:16px;padding:13px 15px 14px}
.cap-kpi-top{display:flex;align-items:center;gap:7px;margin-bottom:8px}
.cap-dot{width:9px;height:9px;border-radius:50%;flex:none}
.cap-kpi-label{font-size:12.5px;font-weight:var(--fw-medium,500);color:#a1a1a6;letter-spacing:-.006em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cap-kpi-val{font-size:24px;font-weight:var(--fw-semibold,600);letter-spacing:-.028em;line-height:1.04;color:#fff;font-variant-numeric:tabular-nums}
.cap-kpi-delta{display:inline-flex;align-items:center;gap:3px;margin-top:8px;font-size:12.5px;font-weight:var(--fw-semibold,600);letter-spacing:-.008em;color:#30d158}
.cap-kpi-delta svg{display:block}
.cap-kpi-delta .cap-since{font-weight:var(--fw-regular,400);color:#8a8d94}
.cap-legend{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:14px}
.cap-leg{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:var(--fw-medium,500);color:#a1a1a6;letter-spacing:-.006em}
.cap-leg i{width:11px;height:3px;border-radius:2px;flex:none}
.cap-chart{display:block;width:100%;height:auto;overflow:visible}
.cap-throttle{margin-top:28px;padding:20px 22px;background:#20232a;border:1px solid #2a2d34;border-radius:20px}
.cap-th-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:15px}
.cap-th-label{font-size:13.5px;font-weight:var(--fw-semibold,600);letter-spacing:-.012em;color:#f5f5f7}
.cap-th-read{font-size:13.5px;font-weight:var(--fw-semibold,600);letter-spacing:-.012em;color:#0a84ff;white-space:nowrap}
.cap-th-track{position:relative;height:11px;border-radius:980px;background:#3a3d44;margin:0 13px}
.cap-th-fill{position:absolute;left:0;top:0;bottom:0;width:82%;border-radius:980px;background:#0a84ff}
.cap-th-knob{position:absolute;top:50%;left:82%;width:26px;height:26px;border-radius:50%;background:#fff;border:1px solid #3a3d44;box-shadow:0 1px 3px rgba(0,0,0,.4),0 4px 10px rgba(0,0,0,.3);transform:translate(-50%,-50%)}
.cap-th-ends{display:flex;justify-content:space-between;margin-top:13px;font-size:12px;font-weight:var(--fw-medium,500);color:#8a8d94;letter-spacing:-.004em}
@media (max-width:640px){.cap-card{padding:26px 20px;border-radius:24px}.cap-head{gap:10px}.cap-hero-val{font-size:36px}.cap-kpis{gap:8px}.cap-kpi{padding:11px 12px 12px}.cap-kpi-val{font-size:21px}.cap-kpi-label{font-size:11.5px}.cap-legend{gap:14px;row-gap:8px}}
@media (max-width:430px){.cap-kpis{flex-wrap:wrap;gap:8px}.cap-kpi{flex:1 1 100%}.cap-th-head{flex-wrap:wrap;gap:4px 12px}}
html.js .cap-line{stroke-dasharray:var(--cap-len,640);stroke-dashoffset:var(--cap-len,640);animation:cap-draw 1.5s cubic-bezier(.42,0,.2,1) forwards}
html.js .cap-line.cap-l2{animation-delay:.12s}
html.js .cap-line.cap-l3{animation-delay:.24s}
html.js .cap-area{opacity:0;animation:cap-fade 1s ease-out .55s forwards}
html.js .cap-end{opacity:0;animation:cap-fade .5s ease-out 1.25s forwards}
@keyframes cap-draw{to{stroke-dashoffset:0}}
@keyframes cap-fade{to{opacity:1}}
@media (prefers-reduced-motion:reduce){html.js .cap-line,html.js .cap-area,html.js .cap-end{animation:none;stroke-dashoffset:0;opacity:1}}

/* ---------- Reveal (enhancement only; content visible by default) ---------- */
html.js .reveal { opacity: 0; transform: translateY(30px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); will-change: opacity, transform; }
html.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Fun effects (Apple-style, enhancement only) ---------- */
html { scroll-behavior: smooth; }
.media-band { overflow: hidden; }
html.js .media-band:not(.media-band--premium) img { transform: scale(1.14); will-change: transform; }
@media (hover: hover) {
  html.js .bento-tile, html.js .rw-card { transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
  html.js .bento-tile:hover { transform: translateY(-5px); }
  html.js .rw-card:hover { transform: translateY(-5px); box-shadow: 0 24px 54px rgba(0,0,0,.13); }
  html.js .bento-tile--photo .bento-bg { transition: transform .7s var(--ease-out); }
  html.js .bento-tile--photo:hover .bento-bg { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .media-band:not(.media-band--premium) img { transform: none !important; }
  html.js .bento-tile:hover, html.js .rw-card:hover { transform: none !important; }
  html.js .bento-tile--photo:hover .bento-bg { transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Footer ---------- */
.footer { background: var(--color-bg-alt); color: var(--color-text-tertiary); font-size: 14px; padding: 48px 0 28px; }
.footer__inner { max-width: var(--max-width); margin: 0 auto; padding: 0 22px; }
.footer__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.footer__brand img { height: 24px; }
.footer__brand strong { color: var(--color-text); font-size: 15px; }
.footer__tag { font-size: 13px; color: var(--color-text-tertiary); max-width: 480px; line-height: 1.5; padding-bottom: 28px; border-bottom: 1px solid var(--color-divider); margin-bottom: 28px; }
.footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 40px; padding-bottom: 28px; border-bottom: 1px solid var(--color-divider); }
.footer__col h4 { font-size: 12px; font-weight: var(--fw-semibold); color: var(--color-text); margin-bottom: 12px; }
.footer__col ul { list-style: none; padding: 0; margin: 0; }
.footer__col li { margin-bottom: 9px; }
.footer__col a { font-size: 12px; color: var(--color-text-secondary); line-height: 1.33; }
.footer__col a:hover { color: var(--color-text); text-decoration: underline; }
.footer__fineprint { padding-top: 18px; font-size: 12px; color: var(--color-text-tertiary); line-height: 1.55; }
.footer__legalbar { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--color-divider); margin-top: 16px; }
.footer__legalbar .copy { font-size: 12px; color: var(--color-text-tertiary); }
.footer__legalbar nav { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.footer__legalbar a { font-size: 12px; color: var(--color-text-secondary); }
.footer__legalbar a:hover { color: var(--color-text); }
@media (max-width: 733px) { .footer__cols { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Mobile sticky CTA bar ---------- */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998; display: none;
  background: rgba(255,255,255,0.9); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--color-divider); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); gap: 10px;
}
.mobile-cta .btn { flex: 1; text-align: center; padding: 13px 14px; font-size: 16px; }
.mobile-cta .btn--secondary { background: #fff; }
@media (max-width: 833px) { .mobile-cta { display: flex; } body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); } }

/* ============================================================
   SHARED APPLE PAGE COMPONENTS (used across all redesigned pages)
   ============================================================ */
.lede { font-size: clamp(19px, 2.3vw, 25px); line-height: 1.45; color: var(--color-text-secondary); max-width: 760px; margin: var(--space-6) auto 0; font-weight: var(--fw-regular); }
.prose { max-width: 720px; margin: var(--space-8) auto 0; text-align: left; }
.prose p { font-size: 18px; line-height: 1.62; color: var(--color-text-secondary); margin: 0 0 var(--space-6); }
.prose a { color: var(--color-accent); }
.chips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: var(--space-8); }
.chip { font-size: 13px; font-weight: var(--fw-medium); color: var(--color-text-secondary); background: var(--color-bg-alt); border: 1px solid var(--color-divider-light); border-radius: 980px; padding: 7px 15px; }
.grid { display: grid; gap: 18px; margin-top: var(--space-12); text-align: left; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.card { background: var(--color-bg-alt); border: 1px solid var(--color-divider-light); border-radius: 22px; padding: 30px 28px; }
.card h3 { font-size: 21px; font-weight: var(--fw-semibold); letter-spacing: var(--ls-headline); margin: 0 0 9px; color: var(--color-text); }
.card p { font-size: 16px; line-height: 1.55; color: var(--color-text-secondary); margin: 0; }
.card__num { display: inline-block; font-size: 13px; font-weight: var(--fw-semibold); color: var(--color-accent); margin-bottom: 12px; letter-spacing: .02em; }
.card__ic { font-size: 26px; line-height: 1; margin-bottom: 14px; display: block; }
.card--dark { background: #1d1d1f; border-color: #2a2d34; }
.card--dark h3 { color: #f5f5f7; }
.card--dark p { color: #a1a1a6; }
.section--charcoal .card { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
.section--charcoal .card h3 { color: #f5f5f7; }
.section--charcoal .card p { color: var(--color-text-on-dark-secondary); }
.statrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 48px; margin-top: var(--space-12); }
.stat { text-align: center; }
.stat b { display: block; font-size: clamp(34px, 5vw, 52px); font-weight: var(--fw-semibold); letter-spacing: var(--ls-hero); color: var(--color-text); line-height: 1; }
.stat span { display: block; margin-top: 8px; font-size: 15px; color: var(--color-text-secondary); }
@media (max-width: 833px) { .grid--2, .grid--3 { grid-template-columns: 1fr; } .statrow { gap: 28px; } }

/* ============================================================
   DEVICE FEATURE MOCKUPS — variety (call screen, SMS, reviews, site)
   ============================================================ */
/* iPhone — AI receptionist call screen (dark) */
.dash-phone--call .dash-screen { background: radial-gradient(120% 75% at 50% 0%, #1d2738 0%, #0a0d14 60%); }
.callui { display:flex; flex-direction:column; min-height:560px; padding:42px 18px 20px; text-align:center; color:#fff; position:relative; }
.callui__live { display:inline-flex; align-items:center; gap:6px; align-self:center; font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:#30d158; }
.callui__live span { width:7px; height:7px; border-radius:50%; background:#30d158; box-shadow:0 0 0 3px rgba(48,209,88,.2); }
.callui__avatar { width:82px; height:82px; border-radius:50%; margin:20px auto 14px; background:linear-gradient(140deg,#0a84ff,#5ac8fa); display:grid; place-items:center; font-size:32px; box-shadow:0 12px 32px rgba(10,132,255,.45); }
.callui__name { font-size:22px; font-weight:600; letter-spacing:-.02em; }
.callui__num { font-size:13px; color:#a1a1a6; margin-top:3px; }
.callui__timer { font-size:13px; color:#30d158; margin-top:8px; font-variant-numeric:tabular-nums; }
.callui__wave { display:flex; align-items:center; justify-content:center; gap:4px; height:30px; margin:16px 0 4px; }
.callui__wave i { width:3px; border-radius:3px; background:linear-gradient(180deg,#5ac8fa,#0a84ff); }
.callui__tr { margin-top:auto; display:flex; flex-direction:column; gap:8px; text-align:left; }
.callui__line { font-size:12.5px; line-height:1.4; padding:9px 12px; border-radius:15px; max-width:90%; }
.callui__line--them { background:#1c1c1e; color:#e8e8ea; align-self:flex-start; border-bottom-left-radius:4px; }
.callui__line--ai { background:#0a84ff; color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.callui__actions { display:flex; justify-content:center; gap:30px; margin-top:18px; }
.callui__btn { width:52px; height:52px; border-radius:50%; display:grid; place-items:center; font-size:20px; }
.callui__btn--red { background:#ff3b30; } .callui__btn--green { background:#30d158; }
/* iPhone — SMS / text-bot thread (light Messages style) */
.smsui { display:flex; flex-direction:column; min-height:560px; padding:40px 0 16px; background:#fff; }
.smsui__bar { text-align:center; padding:6px 0 12px; border-bottom:1px solid #ececf0; }
.smsui__bar b { font-size:14px; color:#1d1d1f; } .smsui__bar span { display:block; font-size:11px; color:#86868b; }
.smsui__body { flex:1; display:flex; flex-direction:column; gap:8px; padding:14px 14px 0; }
.smsui__b { max-width:78%; font-size:13.5px; line-height:1.35; padding:9px 13px; border-radius:17px; }
.smsui__b--in { align-self:flex-start; background:#e9e9eb; color:#1d1d1f; border-bottom-left-radius:5px; }
.smsui__b--out { align-self:flex-end; background:#34c759; color:#fff; border-bottom-right-radius:5px; }
.smsui__meta { align-self:center; font-size:10.5px; color:#86868b; margin:4px 0; }

/* ============================================================
   DEVICE FEATURE MOCKUPS — round 2
   .siteui  = a live local-business website inside the MacBook
   .reviewui = Google reviews + AI owner replies inside iPhone
   ============================================================ */

/* --- Website-in-browser (sits inside .mac__screen in place of .macui) --- */
.siteui { position:absolute; inset:0; display:flex; flex-direction:column; background:#fff; text-align:left; overflow:hidden; }
.siteui__bar { display:flex; align-items:center; gap:10px; padding:8px 12px; background:#e9ecf1; border-bottom:1px solid #d9dde4; }
.siteui__dots { display:flex; gap:6px; }
.siteui__dots i { width:10px; height:10px; border-radius:50%; }
.siteui__url { flex:1; display:flex; align-items:center; gap:7px; background:#fff; border:1px solid #d3d8e0; border-radius:8px; padding:5px 11px; font-size:11px; color:#5b6473; font-weight:600; }
.siteui__url svg { width:11px; height:11px; flex:0 0 auto; color:#1e9e5a; }
.siteui__page { flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; }
.siteui__nav { display:flex; align-items:center; gap:14px; padding:11px 22px; border-bottom:1px solid #eef1f6; }
.siteui__brand { font-size:13px; font-weight:800; letter-spacing:-.2px; color:#0f1b33; margin-right:auto; }
.siteui__nav a { font-size:11px; color:#5b6473; font-weight:600; }
.siteui__navcta { background:#0071e3; color:#fff !important; padding:5px 11px; border-radius:20px; font-size:11px; font-weight:700; }
.siteui__hero { padding:30px 26px 24px; background:radial-gradient(120% 130% at 80% -10%, #eaf3ff 0%, #fff 60%); }
.siteui__eyebrow { font-size:10px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:#0071e3; }
.siteui__h { font-size:27px; line-height:1.04; font-weight:800; letter-spacing:-.5px; color:#0f1b33; margin:7px 0 9px; max-width:80%; }
.siteui__sub { font-size:12px; color:#5b6473; max-width:72%; line-height:1.45; }
.siteui__btns { display:flex; gap:9px; margin-top:14px; }
.siteui__btns b { font-size:11px; font-weight:700; padding:7px 15px; border-radius:20px; }
.siteui__btns b:first-child { background:#0071e3; color:#fff; }
.siteui__btns b:last-child { background:#f1f3f7; color:#0f1b33; }
.siteui__row { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; padding:16px 26px 22px; }
.siteui__tile { border:1px solid #eef1f6; border-radius:11px; padding:12px; background:#fafbfd; }
.siteui__tile span { font-size:17px; }
.siteui__tile b { display:block; font-size:11.5px; color:#0f1b33; margin:6px 0 3px; }
.siteui__tile p { font-size:10px; color:#7a869a; line-height:1.35; margin:0; }

/* --- Google reviews + AI owner reply (sits inside iPhone .dash-screen) --- */
.dash-phone--review .dash-screen { background:#f2f3f5; }
.reviewui { display:flex; flex-direction:column; min-height:560px; padding:40px 0 14px; }
.reviewui__top { display:flex; align-items:center; gap:11px; padding:6px 16px 14px; border-bottom:1px solid #e5e7ec; }
.reviewui__g { font-size:20px; font-weight:800; letter-spacing:-.5px; }
.reviewui__g i { font-style:normal; }
.reviewui__g i:nth-child(1){color:#4285F4;} .reviewui__g i:nth-child(2){color:#EA4335;} .reviewui__g i:nth-child(3){color:#FBBC05;} .reviewui__g i:nth-child(4){color:#4285F4;} .reviewui__g i:nth-child(5){color:#34A853;} .reviewui__g i:nth-child(6){color:#EA4335;}
.reviewui__score { display:flex; flex-direction:column; }
.reviewui__score b { font-size:15px; color:#1d1d1f; line-height:1; }
.reviewui__stars { color:#fbbc05; font-size:12px; letter-spacing:1px; margin-top:2px; }
.reviewui__score span { font-size:11px; color:#86868b; margin-top:2px; }
.reviewui__list { flex:1; display:flex; flex-direction:column; gap:11px; padding:14px 14px 0; overflow:hidden; }
.reviewui__card { background:#fff; border:1px solid #eceef2; border-radius:14px; padding:12px 13px; box-shadow:0 4px 14px rgba(15,27,51,.04); }
.reviewui__who { display:flex; align-items:center; gap:9px; }
.reviewui__av { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:12px; font-weight:700; }
.reviewui__nm { font-size:12.5px; font-weight:700; color:#1d1d1f; }
.reviewui__nm span { display:block; color:#fbbc05; font-size:11px; letter-spacing:1px; font-weight:400; }
.reviewui__tx { font-size:11.5px; color:#3a3f47; line-height:1.45; margin:8px 0 0; }
.reviewui__reply { margin-top:10px; background:#f0f6ff; border-left:3px solid #0071e3; border-radius:8px; padding:8px 10px; }
.reviewui__reply b { font-size:10px; font-weight:800; letter-spacing:.3px; color:#0071e3; text-transform:uppercase; display:flex; align-items:center; gap:5px; }
.reviewui__reply p { font-size:11px; color:#3a3f47; line-height:1.4; margin:5px 0 0; }

/* --- Missed-call banner (sits at top of .smsui__body) --- */
.smsui__missed { display:flex; align-items:center; gap:9px; background:#fff1f0; border:1px solid #ffd9d6; border-radius:12px; padding:9px 12px; margin-bottom:4px; }
.smsui__missed i { width:30px; height:30px; border-radius:50%; background:#ff3b30; color:#fff; display:grid; place-items:center; font-size:14px; font-style:normal; flex:0 0 auto; }
.smsui__missed b { display:block; font-size:12.5px; color:#1d1d1f; }
.smsui__missed span { display:block; font-size:10.5px; color:#86868b; }

/* --- Phone trio: three feature phones in a row (overview pages) --- */
.phone-trio { margin: var(--space-16) auto 0; display:flex; align-items:flex-end; justify-content:center; gap:18px; flex-wrap:nowrap; }
.phone-trio .dash-phone { flex:0 0 auto; zoom:0.6; margin:0; }
.phone-trio .dash-phone:nth-child(2) { zoom:0.66; }
@media (max-width:900px){ .phone-trio { flex-wrap:wrap; gap:26px; } .phone-trio .dash-phone, .phone-trio .dash-phone:nth-child(2) { zoom:0.82; } }

/* ============================================================
   PRICING TIERS + FORM (content pages)
   ============================================================ */
.tiers { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:var(--space-12); text-align:left; align-items:stretch; }
@media (max-width:1080px){ .tiers { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .tiers { grid-template-columns:1fr; } }
.tier { display:flex; flex-direction:column; background:#fff; border:1px solid #e6e8ee; border-radius:22px; padding:26px 22px; transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.tier:hover { transform:translateY(-4px); box-shadow:0 22px 50px rgba(15,27,51,.10); }
.tier--featured { border:1.5px solid var(--color-accent); box-shadow:0 22px 60px rgba(0,113,227,.16); position:relative; }
.tier__flag { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--color-accent); color:#fff; font-size:11px; font-weight:700; letter-spacing:.3px; padding:5px 13px; border-radius:20px; white-space:nowrap; }
.tier__name { font-size:21px; font-weight:700; letter-spacing:-.02em; color:var(--color-text); }
.tier__pitch { font-size:13.5px; color:var(--color-text-secondary); margin:4px 0 14px; min-height:38px; }
.tier__price { font-size:40px; font-weight:700; letter-spacing:-.03em; color:var(--color-text); line-height:1; }
.tier__price span { font-size:15px; font-weight:500; color:var(--color-text-secondary); letter-spacing:0; }
.tier__list { list-style:none; padding:0; margin:18px 0 22px; display:flex; flex-direction:column; gap:10px; }
.tier__list li { font-size:13.5px; line-height:1.4; color:var(--color-text); padding-left:24px; position:relative; }
.tier__list li::before { content:"✓"; position:absolute; left:0; top:0; color:var(--color-accent); font-weight:800; }
.tier__list li b { color:var(--color-text-secondary); font-weight:500; }
.tier__why { font-size:12px; color:var(--color-text-secondary); line-height:1.45; margin:0 0 18px; padding-top:14px; border-top:1px solid var(--color-divider); }
.tier .btn { margin-top:auto; width:100%; }

/* Vendor-stack comparison */
.vstack { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:var(--space-8) 0 4px; }
.vstack .vchip { background:#fff; border:1px solid var(--color-divider); border-radius:12px; padding:11px 15px; font-size:13px; color:var(--color-text); }
.vstack .vchip s { color:var(--color-text-secondary); }
.vstack .vchip b { color:var(--color-text); }

/* Apple-clean form */
.form { max-width:560px; margin:var(--space-12) auto 0; text-align:left; display:flex; flex-direction:column; gap:16px; }
.form__row { display:flex; flex-direction:column; gap:7px; }
.form label.lbl { font-size:13px; font-weight:600; color:var(--color-text); }
.form input, .form textarea, .form select { font-family:inherit; font-size:16px; color:var(--color-text); background:#fff; border:1px solid #d2d5dc; border-radius:13px; padding:13px 15px; transition:border-color .2s var(--ease-out), box-shadow .2s var(--ease-out); width:100%; box-sizing:border-box; }
.form input:focus, .form textarea:focus, .form select:focus { outline:none; border-color:var(--color-accent); box-shadow:0 0 0 4px rgba(0,113,227,.14); }
.form textarea { resize:vertical; min-height:108px; }
.form .consent { display:flex; gap:10px; align-items:flex-start; font-size:12px; color:var(--color-text-secondary); line-height:1.45; }
.form .consent input { width:18px; height:18px; flex:0 0 auto; margin-top:2px; }
.form .btn { width:100%; margin-top:4px; }
.contact-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:40px; }
@media (max-width:760px){ .contact-cards { grid-template-columns:1fr; } }
.contact-card { background:#fff; border:1px solid var(--color-divider); border-radius:18px; padding:22px; text-align:center; }
.contact-card .card__ic { margin:0 auto 10px; }
.contact-card b { display:block; font-size:16px; color:var(--color-text); margin-bottom:4px; }
.contact-card a { font-size:14px; }

/* Integration / chip groups */
.intgroup { text-align:left; margin-top:40px; }
.intgroup h3 { font-size:14px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; color:var(--color-text-secondary); margin:0 0 12px; }
.intgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:880px){ .intgrid { grid-template-columns:repeat(2,1fr); } }
.intcard { background:#fff; border:1px solid var(--color-divider); border-radius:14px; padding:14px 16px; }
.intcard b { display:block; font-size:14px; color:var(--color-text); }
.intcard span { font-size:12px; color:var(--color-text-secondary); }

/* ============================================================
   HOMEPAGE SHOWCASE A — Apple 2x2 product grid ("The lineup")
   ============================================================ */
.lineup__head { text-align:center; max-width:720px; margin:0 auto var(--space-16); }
.lineup__head .subhead { margin-top:var(--space-4); }
.lineup__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-6); }

.lineup-tile {
  position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
  border-radius:28px; overflow:hidden; min-height:600px; padding:56px 32px 0; isolation:isolate;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.lineup-tile:hover { transform:translateY(-4px); box-shadow:0 30px 64px -26px rgba(0,0,0,.32); }
.lineup-tile--light { background:linear-gradient(180deg,#eef4fd 0%,#f5f7fb 42%,#f5f5f7 100%); color:var(--color-text); }
.lineup-tile--light.lineup-tile--alt { background:linear-gradient(180deg,#f0f1f4 0%,#f7f7f9 46%,#f5f5f7 100%); }
.lineup-tile--dark { background:#000; color:var(--color-text-on-dark); }
.lineup-tile--dark.lineup-tile--charcoal { background:radial-gradient(120% 90% at 50% -8%,#23252b 0%,#000 64%); }

.lineup-tile__copy { max-width:420px; }
.lineup-tile__title { font-size:36px; line-height:1.06; letter-spacing:var(--ls-headline); font-weight:var(--fw-semibold); margin:0; }
.lineup-tile--dark .lineup-tile__title { color:#fff; }
.lineup-tile__sub { font-size:19px; line-height:1.42; letter-spacing:-.012em; margin:12px 0 0; color:var(--color-text-secondary); }
.lineup-tile--dark .lineup-tile__sub { color:var(--color-text-on-dark-secondary); }
.lineup-tile__ctas { display:flex; gap:22px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:22px; }

.lineup-link { display:inline-flex; align-items:center; font-size:19px; line-height:1; letter-spacing:-.012em; color:var(--color-accent-link); font-weight:var(--fw-regular); }
.lineup-link::after { content:"\203A"; margin-left:5px; font-size:1.18em; line-height:1; transition:transform .2s var(--ease-out); }
.lineup-link:hover { text-decoration:underline; }
.lineup-link:hover::after { transform:translateX(3px); }
.lineup-link--muted { color:var(--color-text); }
.lineup-tile--dark .lineup-link { color:var(--color-accent-link); }
.lineup-tile--dark .lineup-link--muted { color:#fff; }
.lineup-link:focus-visible { outline:2px solid var(--color-accent); outline-offset:3px; border-radius:4px; }

.lineup-tile__art { position:relative; flex:1; width:100%; margin-top:auto; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; }
/* zoom (not transform:scale) so the box actually shrinks and the bezels never clip */
.lineup-art-phone { zoom:0.62; }
.lineup-art-mac { width:100%; display:flex; justify-content:center; }
.lineup-art-mac .mac { width:560px; margin:0; zoom:0.84; }

/* cinematic full-bleed photo tile (Apple "Privacy"-style) */
.lineup-tile--photo { justify-content:flex-start; }
.lineup-tile__bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:transform 1.2s var(--ease-out); }
.lineup-tile--photo:hover .lineup-tile__bg { transform:scale(1.05); }
.lineup-tile__scrim { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(8,10,15,.66) 0%,rgba(8,10,15,.26) 42%,rgba(8,10,15,.40) 100%); }
.lineup-tile--photo .lineup-tile__copy { position:relative; z-index:2; }
.lineup-tile--photo .lineup-tile__title { color:#fff; }
.lineup-tile--photo .lineup-tile__sub { color:rgba(255,255,255,.88); }
.lineup-tile--photo .lineup-link, .lineup-tile--photo .lineup-link--muted { color:#fff; }

@media (max-width:1100px){ .lineup-tile { min-height:560px; } }
@media (max-width:820px){
  .lineup__grid { grid-template-columns:1fr; gap:var(--space-4); }
  .lineup-tile { min-height:540px; padding:44px 24px 0; }
  .lineup-tile__title { font-size:30px; }
  .lineup-tile__sub { font-size:17px; }
  .lineup-link { font-size:17px; }
  .lineup-art-phone { zoom:0.72; }
  .lineup-art-mac .mac { width:480px; zoom:0.9; }
}
@media (prefers-reduced-motion:reduce){
  .lineup-tile, .lineup-tile__bg { transition:none; }
  .lineup-tile:hover { transform:none; }
}

/* ============================================================
   HOMEPAGE SHOWCASE B — Apple featured swipe rail ("Endless lineup")
   ============================================================ */
.lineup-sec { padding:var(--section-pad-y) 0; overflow:hidden; }
.lineup-sec__head { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-8); margin-bottom:var(--space-12); flex-wrap:wrap; }
.lineup-sec__intro { max-width:640px; }
.lineup-sec__nav { display:flex; gap:var(--space-3); }
.lineup-arrow { width:48px; height:48px; border-radius:50%; border:none; background:var(--color-bg-alt); color:var(--color-text); font-size:19px; line-height:1; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background .3s var(--ease-out),opacity .3s var(--ease-out),transform .2s var(--ease-out); }
.lineup-arrow:hover { background:var(--color-divider-light); }
.lineup-arrow:active { transform:scale(.94); }
.lineup-arrow:disabled { opacity:.32; cursor:default; background:var(--color-bg-alt); }
.lineup-arrow:focus-visible { outline:2px solid var(--color-accent); outline-offset:3px; }
.lineup-rail-wrap { margin:0 calc(var(--gutter) * -1); }
.lineup-rail { display:flex; gap:var(--space-6); overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:8px var(--gutter) 28px; scrollbar-width:none; -ms-overflow-style:none; }
.lineup-rail::-webkit-scrollbar { display:none; width:0; height:0; }
.lineup-card { flex:0 0 460px; width:460px; max-width:84vw; scroll-snap-align:center; border-radius:28px; overflow:hidden; position:relative; display:flex; flex-direction:column; min-height:620px; background:var(--color-bg-alt); box-shadow:0 1px 2px rgba(0,0,0,.04),0 18px 48px -22px rgba(0,0,0,.22); transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out); }
.lineup-card:hover { transform:translateY(-6px); box-shadow:0 1px 2px rgba(0,0,0,.05),0 30px 64px -26px rgba(0,0,0,.3); }
.lineup-card--dark { background:radial-gradient(120% 90% at 50% -8%,#23252b 0%,#000 66%); }
.lineup-card--blue { background:linear-gradient(170deg,#0a3a82 0%,#0071e3 100%); }
.lineup-card--soft { background:linear-gradient(180deg,#fbfbfd 0%,#eef0f4 100%); }
.lineup-card__copy { position:relative; z-index:2; padding:40px 40px 14px; display:flex; flex-direction:column; gap:10px; }
.lineup-card__eyebrow { font-size:12px; font-weight:var(--fw-semibold); letter-spacing:.06em; text-transform:uppercase; color:var(--color-accent); }
.lineup-card--dark .lineup-card__eyebrow { color:#7fb6ff; }
.lineup-card--blue .lineup-card__eyebrow { color:#cfe4ff; }
.lineup-card__title { font-size:30px; line-height:1.06; letter-spacing:var(--ls-headline); font-weight:var(--fw-semibold); color:var(--color-text); margin:0; }
.lineup-card__sub { font-size:18px; line-height:1.32; letter-spacing:-.01em; color:var(--color-text-secondary); margin:0; max-width:330px; }
.lineup-card--dark .lineup-card__title { color:var(--color-text-on-dark); }
.lineup-card--dark .lineup-card__sub { color:var(--color-text-on-dark-secondary); }
.lineup-card--blue .lineup-card__title { color:#fff; }
.lineup-card--blue .lineup-card__sub { color:#dcebff; }
.lineup-card__cta { margin-top:6px; }
.lineup-card__link { display:inline-flex; align-items:center; gap:5px; font-size:16px; font-weight:var(--fw-regular); color:var(--color-accent); text-decoration:none; transition:gap .25s var(--ease-out); }
.lineup-card__link:hover { gap:9px; }
.lineup-card__link .lineup-chev { transition:transform .25s var(--ease-out); }
.lineup-card__link:hover .lineup-chev { transform:translateX(2px); }
.lineup-card--dark .lineup-card__link { color:var(--color-accent-link); }
.lineup-card--blue .lineup-card__link { color:#fff; }
.lineup-card__art { position:relative; z-index:1; margin-top:auto; flex:1 1 auto; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; min-height:300px; }
.lineup-stage { position:relative; display:flex; align-items:flex-end; justify-content:center; width:100%; height:100%; }
/* zoom-based device scaling — never clips the laptop bezel */
.lineup-stage--phone .dash-phone { zoom:0.74; }
.lineup-stage--mac .mac { zoom:0.56; }
.lineup-sec__dots { display:flex; justify-content:center; gap:9px; margin-top:8px; }
.lineup-dot { width:7px; height:7px; border-radius:50%; background:var(--color-divider); border:none; padding:0; cursor:pointer; transition:background .3s var(--ease-out),width .3s var(--ease-out); }
.lineup-dot.is-active { background:var(--color-text-tertiary); width:22px; border-radius:4px; }
.lineup-dot:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; }
.lineup-sec__hint { text-align:center; font-size:13px; color:var(--color-text-tertiary); margin-top:18px; letter-spacing:-.01em; }
@media (max-width:820px){
  .lineup-sec__nav { display:none; }
  .lineup-card { flex-basis:84vw; width:84vw; min-height:560px; }
  .lineup-card__title { font-size:26px; }
  .lineup-card__sub { font-size:17px; }
  .lineup-sec__head { margin-bottom:var(--space-8); }
}
@media (prefers-reduced-motion:reduce){
  .lineup-rail { scroll-behavior:auto; }
  .lineup-card, .lineup-card__link, .lineup-arrow, .lineup-dot { transition:none; }
}

/* ===== media (photo/video) rail cards ===== */
.lineup-card__media { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:0; }
.lineup-card--media .lineup-card__art { position:absolute; inset:0; margin:0; min-height:0; z-index:0; overflow:hidden; }
.lineup-card--media .lineup-card__copy { margin-top:auto; z-index:2; padding:120px 36px 36px; background:linear-gradient(0deg, rgba(6,8,14,.88) 0%, rgba(6,8,14,.46) 52%, rgba(6,8,14,0) 100%); }
.lineup-card--media .lineup-card__title { color:#fff; }
.lineup-card--media .lineup-card__sub { color:rgba(255,255,255,.88); }
.lineup-card--media .lineup-card__eyebrow { color:#cfe0ff; }
.lineup-card--media .lineup-card__link { color:#fff; }
.lineup-card--media .lineup-card__media { transition:transform 1.4s var(--ease-out); }
.lineup-card--media:hover .lineup-card__media { transform:scale(1.06); }
@media (prefers-reduced-motion:reduce){ .lineup-card--media .lineup-card__media{transition:none;} .lineup-card--media:hover .lineup-card__media{transform:none;} }

/* ===== LIVE product-UI animations + map mockup (rail cards) ===== */
@keyframes lc-wave { 0%,100%{transform:scaleY(.32)} 50%{transform:scaleY(1)} }
.lineup-card .callui__wave i { animation:lc-wave 1.1s ease-in-out infinite; transform-origin:center bottom; }
.lineup-card .callui__wave i:nth-child(2n){ animation-duration:.85s } .lineup-card .callui__wave i:nth-child(3n){ animation-duration:1.35s } .lineup-card .callui__wave i:nth-child(4n){ animation-duration:.95s } .lineup-card .callui__wave i:nth-child(5n){ animation-duration:1.15s }
@keyframes lc-livedot { 0%{box-shadow:0 0 0 0 rgba(48,209,88,.55)} 70%,100%{box-shadow:0 0 0 7px rgba(48,209,88,0)} }
.lineup-card .callui__live span { animation:lc-livedot 1.7s ease-out infinite; }
.lineup-card .macui__live i { animation:lc-livedot 1.7s ease-out infinite; }
/* SMS typing indicator */
.smsui__typing { align-self:flex-start; display:inline-flex; gap:4px; background:#e9e9eb; padding:10px 12px; border-radius:16px; border-bottom-left-radius:5px; margin-top:2px; }
.smsui__typing i { width:6px; height:6px; border-radius:50%; background:#9b9ba1; }
.lineup-card .smsui__typing i { animation:lc-typing 1.25s infinite ease-in-out; }
.lineup-card .smsui__typing i:nth-child(2){ animation-delay:.18s } .lineup-card .smsui__typing i:nth-child(3){ animation-delay:.36s }
@keyframes lc-typing { 0%,60%,100%{opacity:.35; transform:translateY(0)} 30%{opacity:1; transform:translateY(-3px)} }
/* review stars shimmer */
@keyframes lc-shimmer { 0%,100%{opacity:.82} 50%{opacity:1; text-shadow:0 0 9px rgba(251,188,5,.65)} }
.lineup-card .reviewui__stars { animation:lc-shimmer 2.3s ease-in-out infinite; }
/* dashboard chart draw */
@keyframes lc-draw { from{stroke-dashoffset:620} to{stroke-dashoffset:0} }
.lineup-card .macui .dash-chart path[stroke]{ stroke-dasharray:620; animation:lc-draw 3.4s ease-in-out infinite alternate; }
/* website cta pulse */
@keyframes lc-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.07)} }
.lineup-card .siteui__navcta { animation:lc-pulse 2.1s ease-in-out infinite; transform-origin:center; }

/* ---- Local map / Google Business mockup (Get Found Locally) ---- */
.dash-phone--map .dash-screen { background:#dde6ef; }
.mapui { position:relative; display:flex; flex-direction:column; min-height:560px; overflow:hidden; }
.mapui__map { position:absolute; inset:0; background:linear-gradient(150deg,#eaf0f6 0%,#dbe5ef 60%,#d2ddea 100%); }
.mapui__map i { position:absolute; display:block; }
.mapui__road { background:#ffffff; opacity:.95; border-radius:2px; }
.mapui__road--h1 { top:26%; left:-6%; width:112%; height:9px; transform:rotate(-4deg); }
.mapui__road--h2 { top:62%; left:-6%; width:112%; height:7px; transform:rotate(3deg); }
.mapui__road--v1 { top:-6%; left:34%; width:8px; height:112%; transform:rotate(6deg); }
.mapui__road--v2 { top:-6%; left:70%; width:6px; height:112%; transform:rotate(-5deg); }
.mapui__park { top:66%; left:6%; width:30%; height:24%; background:#cde9d3; border-radius:10px; }
.mapui__water { top:4%; left:60%; width:48%; height:26%; background:#c6dbf0; border-radius:14px; transform:rotate(-8deg); }
.mapui__pin { position:absolute; top:40%; left:50%; width:26px; height:26px; margin:-26px 0 0 -13px; background:#ea4335; border-radius:50% 50% 50% 50%/60% 60% 40% 40%; transform:rotate(45deg); box-shadow:0 6px 12px rgba(0,0,0,.28); z-index:3; }
.mapui__pin::after { content:""; position:absolute; inset:8px; background:#fff; border-radius:50%; }
.mapui__pulse { position:absolute; top:40%; left:50%; width:26px; height:26px; margin:-26px 0 0 -13px; border-radius:50%; background:rgba(234,67,53,.30); z-index:2; }
.lineup-card .mapui__pulse { animation:lc-radar 2.1s ease-out infinite; }
@keyframes lc-radar { 0%{transform:scale(.5); opacity:.7} 100%{transform:scale(4.4); opacity:0} }
.mapui__card { position:relative; z-index:4; margin:auto 14px 16px; background:#fff; border-radius:15px; padding:13px 14px; box-shadow:0 10px 28px rgba(15,27,51,.16); }
.mapui__rank { display:inline-block; background:#1e9e5a; color:#fff; font-size:10px; font-weight:800; letter-spacing:.4px; padding:3px 9px; border-radius:20px; text-transform:uppercase; }
.mapui__name { font-size:15.5px; font-weight:700; color:#1d1d1f; margin:9px 0 2px; }
.mapui__row { display:flex; align-items:center; gap:6px; font-size:12px; color:#6e6e73; }
.mapui__stars { color:#fbbc05; font-size:13px; letter-spacing:1px; }
.mapui__open { color:#1e9e5a; font-weight:700; }

@media (prefers-reduced-motion:reduce){
  .lineup-card .callui__wave i, .lineup-card .callui__live span, .lineup-card .macui__live i,
  .lineup-card .smsui__typing i, .lineup-card .reviewui__stars, .lineup-card .macui .dash-chart path[stroke],
  .lineup-card .siteui__navcta, .lineup-card .mapui__pulse { animation:none; }
}

/* ===== sleek unified card format (match AI Agent Development) + smaller ===== */
.lineup-card { flex-basis:408px; width:408px; min-height:548px; }
@media (max-width:820px){ .lineup-card{ flex-basis:82vw; width:82vw; min-height:512px; } }
.lineup-stage--phone .dash-phone { zoom:0.8; }
.lineup-stage--mac .mac { zoom:0.5; }
/* UI cards: dark, visual fills, copy overlaid at bottom (like --media) */
.lineup-card--ui { background:radial-gradient(125% 95% at 50% -12%, #1c2433 0%, #06080d 72%); }
.lineup-card--ui .lineup-card__art { position:absolute; inset:0; margin:0; min-height:0; z-index:0; align-items:flex-start; padding-top:32px; }
.lineup-card--ui .lineup-card__copy { position:relative; margin-top:auto; z-index:2; padding:108px 30px 32px; background:linear-gradient(0deg, rgba(4,6,11,.95) 0%, rgba(4,6,11,.58) 52%, rgba(4,6,11,0) 100%); }
.lineup-card--ui .lineup-card__eyebrow { color:#7fb6ff; }
.lineup-card--ui .lineup-card__title { color:#fff; }
.lineup-card--ui .lineup-card__sub { color:rgba(255,255,255,.86); }
.lineup-card--ui .lineup-card__link { color:#fff; }
/* mac UIs sit a touch lower/centered since they're short */
.lineup-card--ui .lineup-stage--mac { align-self:center; margin-top:54px; }
/* keep the map business card above the copy overlay */
.lineup-card--ui .mapui { min-height:520px; }

/* ===== v2: two-zone sleek cards — phone fully visible up top, copy clean below, soft cohesive colors ===== */
.lineup-card--ui {
  background: radial-gradient(140% 120% at 50% -8%, #2b3547 0%, #19202c 46%, #0c1118 100%);
  display:flex; flex-direction:column-reverse;
  box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 24px 60px -28px rgba(0,0,0,.6);
}
/* device gets the top zone, centered, fully visible (no overlap with copy) */
.lineup-card--ui .lineup-card__art {
  position:relative; inset:auto; flex:1 1 auto; min-height:0; margin:0;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  padding:30px 0 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 84%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 84%, transparent 100%);
}
/* copy in its own clean band at the bottom — no gradient slab, no collision */
.lineup-card--ui .lineup-card__copy {
  position:relative; z-index:2; margin:0; padding:4px 30px 32px; background:none;
}
.lineup-card--ui .lineup-card__eyebrow { color:#74b0ff; }
.lineup-card--ui .lineup-card__title { color:#fff; }
.lineup-card--ui .lineup-card__sub { color:rgba(255,255,255,.78); }
.lineup-card--ui .lineup-card__link { color:#cfe0ff; }
.lineup-card--ui .lineup-card__link:hover { color:#fff; }
/* smaller, well-fit devices */
.lineup-stage--phone .dash-phone { zoom:0.64; }
.lineup-stage--mac .mac { zoom:0.5; }
.lineup-card--ui .lineup-stage--mac { margin-top:0; }
.lineup-card--ui .mapui { min-height:520px; }
/* soften the white app screens against the dark card (rounded + gentle ring) */
.lineup-card--ui .dash-phone { filter: drop-shadow(0 18px 40px rgba(0,0,0,.45)); }

/* new feature mockups */
.dash-phone--pay .dash-screen{background:#f5f7fb;}
.payui{display:flex;flex-direction:column;min-height:560px;padding:38px 0 14px;background:linear-gradient(180deg,#f5f7fb 0%,#eef1f8 38%,#f5f7fb 100%);font-feature-settings:"tnum" 1;}
.payui__top{display:flex;align-items:center;justify-content:space-between;padding:10px 18px 14px;}
.payui__brand{display:flex;align-items:center;gap:8px;}
.payui__logo{width:26px;height:26px;border-radius:8px;background:linear-gradient(140deg,#7a73ff,#635bff);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700;box-shadow:0 4px 10px rgba(99,91,255,.35);}
.payui__brandtxt{font-size:13px;font-weight:600;color:#1d1d1f;letter-spacing:-.2px;}
.payui__live{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:#119a55;background:#e6f8ee;padding:4px 9px 4px 7px;border-radius:20px;}
.payui__livedot{width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18);}
.payui__hero{margin:2px 16px 16px;background:#fff;border-radius:22px;padding:24px 20px 20px;text-align:center;box-shadow:0 1px 0 rgba(17,24,39,.04),0 14px 34px -16px rgba(28,32,55,.30);border:1px solid #eef0f6;}
.payui__check{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;background:linear-gradient(150deg,#34d27a,#1faf5d);display:flex;align-items:center;justify-content:center;color:#fff;font-size:30px;line-height:1;box-shadow:0 8px 22px -6px rgba(31,175,93,.55),inset 0 1px 0 rgba(255,255,255,.4);}
.payui__check span{transform:translateY(-1px);}
.payui__amt{font-size:38px;font-weight:700;color:#0f1320;letter-spacing:-1.4px;line-height:1;}
.payui__amt sup{font-size:19px;font-weight:600;top:-14px;margin-right:1px;color:#3a3f55;}
.payui__paid{display:inline-flex;align-items:center;gap:6px;margin-top:11px;font-size:12px;font-weight:600;color:#119a55;background:#e9f9f0;padding:5px 12px;border-radius:20px;}
.payui__paid b{font-weight:700;}
.payui__cust{display:flex;align-items:center;gap:11px;margin-top:18px;padding-top:16px;border-top:1px solid #f0f1f5;text-align:left;}
.payui__av{width:36px;height:36px;border-radius:11px;background:#eef0fe;color:#534ab7;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;}
.payui__custmeta{flex:1;min-width:0;}
.payui__custname{font-size:13px;font-weight:600;color:#1d1d1f;line-height:1.2;}
.payui__custsub{font-size:11px;color:#8a8f9c;margin-top:2px;}
.payui__card{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:#3a3f55;background:#f4f5fb;padding:6px 9px;border-radius:9px;border:1px solid #eceef6;}
.payui__visa{font-size:10px;font-weight:800;color:#635bff;letter-spacing:.4px;}
.payui__list{margin:0 16px;flex:1;}
.payui__lhead{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 9px;}
.payui__lhead b{font-size:12.5px;font-weight:600;color:#1d1d1f;}
.payui__lhead span{font-size:11px;color:#9ca1ae;font-weight:500;}
.payui__row{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid #eef0f6;border-radius:15px;padding:11px 13px;margin-bottom:8px;box-shadow:0 6px 16px -14px rgba(28,32,55,.4);}
.payui__rav{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;}
.payui__rav--a{background:#eaf6ef;color:#1c8f53;}
.payui__rav--b{background:#eef0fe;color:#534ab7;}
.payui__rav--c{background:#fdf0e8;color:#c2541f;}
.payui__rmeta{flex:1;min-width:0;}
.payui__rname{font-size:12.5px;font-weight:600;color:#1d1d1f;line-height:1.2;}
.payui__rsub{font-size:10.5px;color:#9298a4;margin-top:2px;}
.payui__rright{text-align:right;flex-shrink:0;}
.payui__ramt{font-size:13px;font-weight:700;color:#0f1320;letter-spacing:-.3px;}
.payui__pill{display:inline-block;margin-top:3px;font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:20px;letter-spacing:.2px;}
.payui__pill--paid{background:#e6f8ee;color:#119a55;}
.payui__pill--pend{background:#fff3e2;color:#b5740c;}
.dash-phone--portal .dash-screen{background:#f4f6fb;}
.portalui{display:flex;flex-direction:column;min-height:560px;background:#f4f6fb;font-feature-settings:"ss01";}
.portalui__hero{padding:46px 18px 20px;background:linear-gradient(165deg,#2563eb 0%,#1e40af 100%);color:#fff;border-bottom-left-radius:24px;border-bottom-right-radius:24px;box-shadow:0 10px 24px -10px rgba(37,99,235,.55);}
.portalui__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.portalui__brand{display:flex;align-items:center;gap:9px;}
.portalui__logo{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.16);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;letter-spacing:.3px;border:1px solid rgba(255,255,255,.22);}
.portalui__bname{font-size:13px;font-weight:600;letter-spacing:.2px;}
.portalui__bsub{font-size:9.5px;color:rgba(255,255,255,.72);letter-spacing:.4px;text-transform:uppercase;margin-top:1px;}
.portalui__avatar{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;}
.portalui__greet{font-size:12px;color:rgba(255,255,255,.78);letter-spacing:.2px;}
.portalui__name{font-size:23px;font-weight:600;letter-spacing:-.3px;margin-top:2px;line-height:1.1;}
.portalui__appt{margin:-26px 16px 0;background:#fff;border-radius:18px;padding:15px 16px;box-shadow:0 12px 30px -14px rgba(20,40,90,.28),0 0 0 1px rgba(20,40,90,.04);position:relative;z-index:2;}
.portalui__appt-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;}
.portalui__appt-label{font-size:10.5px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:#8a93a6;}
.portalui__pill{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;color:#15803d;background:#e7f7ee;padding:3px 9px;border-radius:20px;letter-spacing:.2px;}
.portalui__dot{width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18);}
.portalui__appt-body{display:flex;align-items:center;gap:13px;}
.portalui__cal{width:50px;height:54px;border-radius:13px;background:#eef3ff;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;border:1px solid #dde7ff;}
.portalui__cal-m{font-size:9.5px;font-weight:700;letter-spacing:1px;color:#2563eb;text-transform:uppercase;}
.portalui__cal-d{font-size:23px;font-weight:600;color:#1e293b;line-height:1;margin-top:1px;}
.portalui__appt-info{flex:1;min-width:0;}
.portalui__appt-title{font-size:14.5px;font-weight:600;color:#1e293b;letter-spacing:-.1px;}
.portalui__appt-meta{font-size:11.5px;color:#7b8597;margin-top:3px;display:flex;align-items:center;gap:5px;}
.portalui__appt-with{font-size:11px;color:#9aa3b4;margin-top:5px;}
.portalui__appt-btn{margin-top:13px;width:100%;text-align:center;font-size:12.5px;font-weight:600;color:#2563eb;background:#eef3ff;border-radius:11px;padding:9px 0;letter-spacing:.1px;}
.portalui__section{padding:18px 16px 4px;font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:#9aa3b4;}
.portalui__tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 16px;}
.portalui__tile{background:#fff;border-radius:15px;padding:13px;box-shadow:0 4px 14px -10px rgba(20,40,90,.22),0 0 0 1px rgba(20,40,90,.035);position:relative;}
.portalui__ticon{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:16px;margin-bottom:9px;}
.portalui__ticon--book{background:#eef3ff;color:#2563eb;}
.portalui__ticon--pay{background:#edfaf1;color:#16a34a;}
.portalui__ticon--msg{background:#f1eefe;color:#6d5bd8;}
.portalui__ticon--doc{background:#fff2e8;color:#ea7a3a;}
.portalui__tname{font-size:13px;font-weight:600;color:#1e293b;letter-spacing:-.1px;}
.portalui__tsub{font-size:10.5px;color:#9aa3b4;margin-top:2px;}
.portalui__badge{position:absolute;top:11px;right:11px;min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:#ff3b30;color:#fff;font-size:9.5px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.portalui__activity{padding:6px 16px 16px;}
.portalui__act-row{display:flex;align-items:center;gap:11px;background:#fff;border-radius:13px;padding:11px 13px;box-shadow:0 0 0 1px rgba(20,40,90,.035);}
.portalui__act-ic{width:30px;height:30px;border-radius:50%;background:#edfaf1;color:#16a34a;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
.portalui__act-txt{flex:1;min-width:0;}
.portalui__act-t{font-size:12px;font-weight:600;color:#1e293b;}
.portalui__act-s{font-size:10.5px;color:#9aa3b4;margin-top:1px;}
.portalui__act-amt{font-size:12.5px;font-weight:600;color:#16a34a;}
.dash-phone--inbox .dash-screen{background:#fff;}
.inboxui{display:flex;flex-direction:column;min-height:560px;background:#fff;font-feature-settings:"ss01";}
.inboxui__hdr{padding:46px 18px 12px;background:#fff;}
.inboxui__hrow{display:flex;align-items:center;justify-content:space-between;}
.inboxui__title{display:flex;align-items:baseline;gap:8px;}
.inboxui__title b{font-size:25px;font-weight:700;letter-spacing:-.4px;color:#0b0d12;}
.inboxui__count{font-size:12px;font-weight:600;color:#fff;background:#0a84ff;padding:2px 8px;border-radius:11px;transform:translateY(-2px);}
.inboxui__gear{width:30px;height:30px;border-radius:50%;background:#eef1f6;color:#5b6472;display:flex;align-items:center;justify-content:center;font-size:14px;}
.inboxui__search{margin:12px 0 2px;display:flex;align-items:center;gap:7px;background:#f1f3f7;border-radius:11px;padding:8px 11px;}
.inboxui__search span{font-size:13px;color:#9aa1ad;}
.inboxui__mag{font-size:13px;color:#9aa1ad;}
.inboxui__filters{display:flex;gap:7px;padding:11px 18px 4px;background:#fff;}
.inboxui__chip{font-size:12px;font-weight:600;color:#5b6472;background:#f1f3f7;padding:5px 12px;border-radius:13px;white-space:nowrap;}
.inboxui__chip--on{background:#0b0d12;color:#fff;}
.inboxui__list{flex:1;background:#fff;padding:2px 0 0;}
.inboxui__row{display:flex;gap:11px;padding:11px 16px;position:relative;}
.inboxui__row--unread{background:#f7faff;}
.inboxui__row+.inboxui__row{border-top:1px solid #f0f1f4;}
.inboxui__av{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:#fff;position:relative;}
.inboxui__ch{position:absolute;right:-3px;bottom:-3px;width:18px;height:18px;border-radius:50%;border:2px solid #fff;display:flex;align-items:center;justify-content:center;font-size:9px;color:#fff;font-weight:700;}
.inboxui__ch--sms{background:#34c759;}
.inboxui__ch--email{background:#0a84ff;}
.inboxui__ch--fb{background:#1877f2;}
.inboxui__ch--ig{background:#e1306c;}
.inboxui__ch--wa{background:#25d366;}
.inboxui__ch--call{background:#5b6472;}
.inboxui__body{flex:1;min-width:0;}
.inboxui__top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:2px;}
.inboxui__name{font-size:14.5px;font-weight:600;color:#0b0d12;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.inboxui__name--read{font-weight:500;color:#1d1d1f;}
.inboxui__time{font-size:11.5px;color:#9aa1ad;flex-shrink:0;}
.inboxui__time--unread{color:#0a84ff;font-weight:600;}
.inboxui__msg{font-size:12.5px;line-height:1.35;color:#7a818d;display:flex;align-items:center;gap:5px;}
.inboxui__msg--unread{color:#3a4250;font-weight:500;}
.inboxui__msg p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.inboxui__tag{font-size:10px;font-weight:700;letter-spacing:.3px;padding:1px 5px;border-radius:4px;flex-shrink:0;}
.inboxui__tag--sms{background:#e4f8ea;color:#1e8e3e;}
.inboxui__tag--email{background:#e4f0ff;color:#0a66c2;}
.inboxui__tag--fb{background:#e4eeff;color:#1877f2;}
.inboxui__tag--ig{background:#fde4ee;color:#c1306c;}
.inboxui__tag--wa{background:#e0f8ea;color:#1aa84e;}
.inboxui__tag--call{background:#eef1f6;color:#5b6472;}
.inboxui__dot{width:9px;height:9px;border-radius:50%;background:#0a84ff;flex-shrink:0;align-self:center;}
.inboxui__pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:#1e8e3e;font-weight:600;}
.inboxui__pulse{width:6px;height:6px;border-radius:50%;background:#34c759;}
.dash-phone--crm .dash-screen{background:#f5f7fb;}
.crmui{display:flex;flex-direction:column;min-height:560px;background:#f5f7fb;font-feature-settings:"cv01","ss01";}
.crmui__hdr{padding:46px 18px 12px;background:linear-gradient(180deg,#ffffff 0%,#fbfcfe 100%);border-bottom:1px solid #eceff5;}
.crmui__top{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:13px;}
.crmui__eyebrow{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#8a93a6;margin:0 0 3px;}
.crmui__h1{font-size:23px;font-weight:700;letter-spacing:-.02em;color:#0f1320;margin:0;line-height:1;}
.crmui__count{display:flex;flex-direction:column;align-items:flex-end;line-height:1;}
.crmui__count b{font-size:19px;font-weight:700;color:#0f1320;letter-spacing:-.01em;}
.crmui__count span{font-size:10.5px;font-weight:600;color:#9aa2b3;margin-top:3px;letter-spacing:.02em;}
.crmui__search{display:flex;align-items:center;gap:8px;background:#f0f2f7;border:1px solid #e7eaf1;border-radius:11px;padding:9px 12px;}
.crmui__search-i{font-size:14px;color:#a3aab9;}
.crmui__search input,.crmui__search-ph{flex:1;font-size:13.5px;color:#aeb4c2;font-weight:500;}
.crmui__filters{display:flex;gap:7px;padding:12px 18px 6px;background:#f5f7fb;overflow:hidden;}
.crmui__chip{font-size:11.5px;font-weight:600;padding:6px 12px;border-radius:20px;white-space:nowrap;letter-spacing:.01em;}
.crmui__chip--on{background:#0f1320;color:#fff;}
.crmui__chip--off{background:#fff;color:#7a8295;border:1px solid #e7eaf1;}
.crmui__list{flex:1;display:flex;flex-direction:column;padding:6px 12px 0;}
.crmui__row{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #eef0f6;border-radius:15px;padding:11px 13px;margin-bottom:8px;box-shadow:0 1px 2px rgba(15,19,32,.03);}
.crmui__av{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;letter-spacing:.01em;color:#fff;flex-shrink:0;}
.crmui__av--a{background:linear-gradient(135deg,#635bff,#8b85ff);}
.crmui__av--b{background:linear-gradient(135deg,#0a84ff,#5fb6ff);}
.crmui__av--c{background:linear-gradient(135deg,#34c759,#6fe08a);}
.crmui__av--d{background:linear-gradient(135deg,#ff9f0a,#ffc560);}
.crmui__av--e{background:linear-gradient(135deg,#ff375f,#ff7a96);}
.crmui__mid{flex:1;min-width:0;}
.crmui__name{font-size:14.5px;font-weight:600;color:#11151f;letter-spacing:-.01em;margin:0 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.crmui__tagrow{display:flex;align-items:center;gap:6px;}
.crmui__tag{font-size:10px;font-weight:700;padding:2.5px 8px;border-radius:6px;letter-spacing:.03em;text-transform:uppercase;}
.crmui__tag--new{background:#eaf1ff;color:#1f5fd4;}
.crmui__tag--vip{background:#f0ecff;color:#5b4ad8;}
.crmui__tag--rep{background:#e7f8ee;color:#1f9d4d;}
.crmui__meta{font-size:11px;font-weight:500;color:#9aa2b3;white-space:nowrap;}
.crmui__score{display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0;}
.crmui__ring{position:relative;width:38px;height:38px;}
.crmui__ring svg{transform:rotate(-90deg);display:block;}
.crmui__ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;color:#11151f;letter-spacing:-.02em;}
.crmui__scorelbl{font-size:8.5px;font-weight:700;color:#b2b9c6;letter-spacing:.08em;text-transform:uppercase;}
.dash-phone--pipe .dash-screen{background:#f4f6fb;}
.pipeui{display:flex;flex-direction:column;min-height:560px;padding:44px 0 18px;background:#f4f6fb;font-feature-settings:"tnum" 1;}
.pipeui__head{padding:2px 18px 14px;}
.pipeui__eyebrow{display:flex;align-items:center;justify-content:space-between;}
.pipeui__eyebrow span{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#8b93a7;}
.pipeui__live{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:#13a05a;background:#e4f7ec;padding:4px 9px;border-radius:999px;}
.pipeui__dot{width:6px;height:6px;border-radius:50%;background:#1fc26b;box-shadow:0 0 0 3px rgba(31,194,107,.22);}
.pipeui__total{font-size:34px;font-weight:700;letter-spacing:-.02em;color:#0d1426;margin-top:9px;line-height:1;}
.pipeui__totalsub{margin-top:6px;font-size:12.5px;color:#8b93a7;}
.pipeui__totalsub b{color:#13a05a;font-weight:600;}
.pipeui__body{flex:1;display:flex;flex-direction:column;gap:12px;padding:4px 14px 0;overflow:hidden;}
.pipeui__stage{background:#fff;border:1px solid #eceef4;border-radius:16px;padding:11px 11px 8px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 6px 18px -12px rgba(16,24,40,.18);}
.pipeui__shead{display:flex;align-items:center;justify-content:space-between;padding:1px 3px 9px;}
.pipeui__sleft{display:flex;align-items:center;gap:8px;}
.pipeui__pip{width:8px;height:8px;border-radius:3px;}
.pipeui__pip--new{background:#3a86ff;}
.pipeui__pip--quote{background:#7b61ff;}
.pipeui__pip--won{background:#1fc26b;}
.pipeui__sname{font-size:13.5px;font-weight:600;color:#0d1426;}
.pipeui__count{font-size:11px;font-weight:600;color:#6b7488;background:#f1f3f8;border-radius:999px;padding:2px 7px;}
.pipeui__samt{font-size:13px;font-weight:700;color:#0d1426;letter-spacing:-.01em;}
.pipeui__deal{display:flex;align-items:center;gap:9px;padding:7px 4px;border-top:1px solid #f3f4f8;}
.pipeui__deal:first-of-type{border-top:none;}
.pipeui__av{width:30px;height:30px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;letter-spacing:.01em;}
.pipeui__meta{flex:1;min-width:0;}
.pipeui__dname{font-size:13px;font-weight:600;color:#1a2238;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pipeui__dtag{font-size:11px;color:#9aa1b2;margin-top:1px;}
.pipeui__dval{font-size:13px;font-weight:700;color:#0d1426;letter-spacing:-.01em;flex-shrink:0;}
.pipeui__dval--won{color:#13a05a;}
.pipeui__wtag{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;color:#13a05a;background:#e4f7ec;padding:2px 6px;border-radius:6px;margin-top:2px;}
.dash-phone--email .dash-screen{background:#f5f7fb;}
.emailui{display:flex;flex-direction:column;min-height:560px;padding:46px 0 14px;background:#f5f7fb;font-feature-settings:"ss01";}
.emailui__top{padding:0 18px 12px;display:flex;align-items:center;justify-content:space-between;}
.emailui__top h1{font-size:19px;font-weight:600;color:#0b1020;margin:0;letter-spacing:-0.4px;}
.emailui__compose{width:30px;height:30px;border-radius:9px;background:#1f6feb;color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:300;line-height:1;box-shadow:0 2px 8px rgba(31,111,235,0.32);}
.emailui__card{margin:0 14px 12px;background:#fff;border-radius:18px;padding:15px 15px 14px;box-shadow:0 1px 2px rgba(15,19,32,0.05),0 6px 18px rgba(15,19,32,0.06);border:1px solid rgba(15,19,32,0.04);}
.emailui__crow{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;}
.emailui__sender{display:flex;align-items:center;gap:9px;}
.emailui__logo{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#1f6feb,#5b9bff);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;letter-spacing:-0.3px;}
.emailui__sname{font-size:12px;font-weight:600;color:#0b1020;line-height:1.15;}
.emailui__smeta{font-size:10.5px;color:#9aa1ad;margin-top:1px;}
.emailui__sent{display:flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;color:#17865a;background:#e7f7ee;padding:4px 9px;border-radius:20px;}
.emailui__sent i{width:5px;height:5px;border-radius:50%;background:#23b06f;display:inline-block;}
.emailui__subjl{font-size:9.5px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;color:#aeb4bf;margin-bottom:3px;}
.emailui__subj{font-size:14.5px;font-weight:600;color:#0b1020;line-height:1.3;letter-spacing:-0.2px;}
.emailui__aud{display:flex;align-items:center;gap:6px;margin-top:11px;padding-top:11px;border-top:1px solid #f0f1f4;font-size:11.5px;color:#6b7280;}
.emailui__aud b{color:#0b1020;font-weight:600;}
.emailui__audtag{margin-left:auto;font-size:10px;font-weight:600;color:#1f6feb;background:#eaf2ff;padding:3px 8px;border-radius:7px;}
.emailui__stats{margin:0 14px 12px;display:flex;gap:10px;}
.emailui__stat{flex:1;background:#fff;border-radius:16px;padding:13px 13px 12px;box-shadow:0 1px 2px rgba(15,19,32,0.05),0 4px 14px rgba(15,19,32,0.05);border:1px solid rgba(15,19,32,0.04);}
.emailui__sl{font-size:10.5px;font-weight:600;color:#9aa1ad;letter-spacing:0.2px;margin-bottom:5px;display:flex;align-items:center;gap:4px;}
.emailui__sn{font-size:27px;font-weight:700;color:#0b1020;letter-spacing:-1px;line-height:1;}
.emailui__sn span{font-size:14px;font-weight:600;color:#aeb4bf;letter-spacing:-0.3px;}
.emailui__delta{font-size:10px;font-weight:600;color:#17865a;margin-top:5px;}
.emailui__bars{display:flex;align-items:flex-end;gap:3px;height:22px;margin-top:7px;}
.emailui__bars span{flex:1;border-radius:2px 2px 0 0;background:#1f6feb;opacity:0.85;}
.emailui__bars span:nth-child(4){background:#5b9bff;}
.emailui__preview{margin:0 14px;background:#fff;border-radius:18px;padding:13px 14px 14px;box-shadow:0 1px 2px rgba(15,19,32,0.05),0 6px 18px rgba(15,19,32,0.06);border:1px solid rgba(15,19,32,0.04);}
.emailui__phead{font-size:9.5px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;color:#aeb4bf;margin-bottom:9px;}
.emailui__thumb{border:1px solid #eef0f3;border-radius:12px;overflow:hidden;}
.emailui__tbanner{height:42px;background:linear-gradient(135deg,#0b1020,#21304f);display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:600;letter-spacing:0.3px;}
.emailui__tbody{padding:10px 11px 11px;}
.emailui__tline{height:6px;border-radius:4px;background:#e9ebef;margin-bottom:6px;}
.emailui__tline.w1{width:62%;background:#d6dae1;height:7px;}
.emailui__tline.w2{width:100%;}
.emailui__tline.w3{width:84%;}
.emailui__tbtn{margin-top:9px;display:inline-block;font-size:9.5px;font-weight:600;color:#fff;background:#1f6feb;padding:5px 12px;border-radius:7px;}
.dash-phone--social .dash-screen{background:#f5f7fb;}
.socialui{display:flex;flex-direction:column;min-height:560px;padding:40px 0 14px;background:#f5f7fb;color:#1d1d1f;-webkit-font-smoothing:antialiased;}
.socialui__head{padding:8px 18px 12px;}
.socialui__eyebrow{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#6e6e76;}
.socialui__live{display:inline-flex;align-items:center;gap:4px;margin-left:auto;font-size:10px;font-weight:700;color:#0a8f3c;background:#e7f7ec;padding:3px 8px;border-radius:20px;letter-spacing:0;}
.socialui__live::before{content:"";width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18);}
.socialui__title{margin:9px 0 0;font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.15;}
.socialui__sub{margin:3px 0 0;font-size:12.5px;color:#86868b;}
.socialui__week{display:flex;gap:5px;padding:14px 18px 6px;}
.socialui__day{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:7px 0 6px;border-radius:13px;background:#fff;border:1px solid #ececf0;}
.socialui__day b{font-size:10px;font-weight:600;color:#a0a0a8;letter-spacing:.03em;}
.socialui__day i{font-style:normal;font-size:13px;font-weight:600;color:#3a3a40;}
.socialui__day--on{background:linear-gradient(160deg,#635bff,#8a7bff);border-color:#635bff;}
.socialui__day--on b,.socialui__day--on i{color:#fff;}
.socialui__dot{width:5px;height:5px;border-radius:50%;background:#d6d6dd;}
.socialui__day--on .socialui__dot{background:#fff;}
.socialui__day--has .socialui__dot{background:#635bff;}
.socialui__listhead{display:flex;align-items:baseline;padding:14px 18px 9px;}
.socialui__listhead b{font-size:13px;font-weight:700;}
.socialui__listhead span{margin-left:auto;font-size:11px;font-weight:600;color:#635bff;}
.socialui__list{display:flex;flex-direction:column;gap:9px;padding:0 14px;}
.socialui__post{display:flex;gap:10px;padding:10px;background:#fff;border:1px solid #ececf0;border-radius:15px;}
.socialui__thumb{flex:none;width:50px;height:50px;border-radius:11px;position:relative;overflow:hidden;}
.socialui__thumb--a{background:linear-gradient(135deg,#ff9a3c,#ff5e7e);}
.socialui__thumb--b{background:linear-gradient(135deg,#3ec6ff,#635bff);}
.socialui__thumb--c{background:linear-gradient(135deg,#34c759,#0a8f3c);}
.socialui__plat{position:absolute;bottom:-3px;right:-3px;width:21px;height:21px;border-radius:50%;border:2.5px solid #fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#fff;}
.socialui__plat--fb{background:#1877f2;}
.socialui__plat--ig{background:linear-gradient(45deg,#f9ce34,#ee2a7b 45%,#6228d7);}
.socialui__plat--gg{background:#fff;color:#4285f4;border-color:#ececf0;}
.socialui__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;justify-content:center;}
.socialui__cap{font-size:12.5px;font-weight:600;line-height:1.3;color:#1d1d1f;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.socialui__meta{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:#8a8a90;}
.socialui__chip{display:inline-flex;align-items:center;gap:3px;color:#0a8f3c;background:#e7f7ec;padding:2px 7px;border-radius:20px;}
.socialui__chip::before{content:"";width:5px;height:5px;border-radius:50%;background:#22c55e;}
.socialui__chip--q{color:#7a5a00;background:#fdf2d6;}
.socialui__chip--q::before{background:#f0b429;}
.socialui__when{color:#8a8a90;}
.dash-phone--flow .dash-screen{background:#f6f7fb;}
.flowui{display:flex;flex-direction:column;min-height:560px;padding:46px 0 14px;background:linear-gradient(180deg,#f6f7fb 0%,#eef0f7 100%);font-feature-settings:"ss01";}
.flowui__top{display:flex;align-items:center;justify-content:space-between;padding:0 18px 12px;}
.flowui__title b{display:block;font-size:15px;font-weight:600;color:#0f1320;letter-spacing:-.2px;}
.flowui__title span{display:block;font-size:11px;color:#8a8f9e;margin-top:1px;}
.flowui__live{display:flex;align-items:center;gap:5px;background:#eaf7ee;border:1px solid #cdeed7;padding:4px 9px 4px 7px;border-radius:20px;}
.flowui__live i{width:7px;height:7px;border-radius:50%;background:#34c759;box-shadow:0 0 0 3px rgba(52,199,89,.18);}
.flowui__live b{font-size:11px;font-weight:600;color:#1f8a3b;letter-spacing:.1px;}
.flowui__rail{flex:1;display:flex;flex-direction:column;align-items:center;padding:6px 16px 0;}
.flowui__node{position:relative;width:100%;background:#fff;border:1px solid #e7e9f1;border-radius:16px;padding:13px 14px;display:flex;align-items:center;gap:12px;box-shadow:0 1px 2px rgba(16,19,32,.04),0 8px 20px rgba(16,19,32,.05);}
.flowui__node--trigger{border-color:#dfe2ff;box-shadow:0 1px 2px rgba(99,91,255,.06),0 10px 24px rgba(99,91,255,.10);}
.flowui__ic{flex:0 0 38px;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:17px;}
.flowui__ic--trig{background:linear-gradient(180deg,#7b74ff,#635bff);color:#fff;box-shadow:0 4px 10px rgba(99,91,255,.32);}
.flowui__ic--text{background:#e9f5ee;color:#1f8a3b;}
.flowui__ic--wait{background:#fff3e0;color:#d98817;}
.flowui__ic--book{background:#ebf1ff;color:#3b6ef5;}
.flowui__meta{flex:1;min-width:0;}
.flowui__kick{display:block;font-size:9.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;margin-bottom:2px;}
.flowui__kick--trig{color:#635bff;}
.flowui__kick--act{color:#a9adba;}
.flowui__name{display:block;font-size:13.5px;font-weight:600;color:#171a24;letter-spacing:-.1px;line-height:1.2;}
.flowui__desc{display:block;font-size:11px;color:#8a8f9e;margin-top:2px;line-height:1.25;}
.flowui__chk{flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:#34c759;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 5px rgba(52,199,89,.3);}
.flowui__conn{position:relative;height:30px;width:2px;}
.flowui__conn::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:repeating-linear-gradient(180deg,#c8ccdd 0 5px,transparent 5px 10px);}
.flowui__dot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:18px;height:18px;border-radius:50%;background:#fff;border:1px solid #e1e4ef;display:flex;align-items:center;justify-content:center;font-size:10px;color:#a4a9ba;box-shadow:0 1px 3px rgba(16,19,32,.07);}
.flowui__foot{margin-top:14px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #e7e9f1;border-radius:14px;height:48px;box-shadow:0 6px 16px rgba(16,19,32,.05);margin-left:16px;margin-right:16px;}
.flowui__foot-l b{display:block;font-size:12px;font-weight:600;color:#171a24;}
.flowui__foot-l span{display:block;font-size:10.5px;color:#9296a4;margin-top:1px;}
.flowui__tog{position:relative;width:42px;height:25px;border-radius:14px;background:#34c759;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);}
.flowui__tog::after{content:"";position:absolute;top:2.5px;right:2.5px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);}
.inboxui{min-height:560px;}
.crmui__filters{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;}
.crmui__filters::-webkit-scrollbar{display:none;}

/* ===== uniform phone size for ALL rail cards ===== */
.lineup-card .dash-screen { height:560px; }
.lineup-card .dash-screen > :last-child { min-height:560px; max-height:560px; overflow:hidden; }
.lineup-stage--phone .dash-phone { zoom:0.64; }

/* ===== Web Design — mobile website phone UI ===== */
.dash-phone--mweb .dash-screen { background:#ffffff; }
.webmui { display:flex; flex-direction:column; min-height:560px; background:#fff; }
.webmui__bar { display:flex; align-items:center; justify-content:space-between; padding:42px 16px 12px; border-bottom:1px solid #f0f1f5; }
.webmui__brand { font-size:14px; font-weight:800; letter-spacing:-.3px; color:#0f1b33; }
.webmui__menu { display:flex; flex-direction:column; gap:3px; }
.webmui__menu i { width:17px; height:2px; border-radius:2px; background:#0f1b33; display:block; }
.webmui__hero { padding:18px 18px 4px; background:radial-gradient(120% 90% at 85% 0%, #e9f3ff 0%, #fff 62%); }
.webmui__eyebrow { font-size:10px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:#0071e3; }
.webmui__h { font-size:25px; font-weight:800; letter-spacing:-.6px; color:#0f1b33; margin:7px 0 6px; line-height:1.04; }
.webmui__sub { font-size:12px; color:#5b6473; line-height:1.4; }
.webmui__btns { display:flex; gap:8px; margin:14px 0 4px; }
.webmui__btns b { font-size:11px; font-weight:700; padding:9px 15px; border-radius:20px; }
.webmui__btns b:first-child { background:#0071e3; color:#fff; }
.webmui__btns b:last-child { background:#f1f3f7; color:#0f1b33; }
.webmui__img { height:92px; margin:14px 16px 0; border-radius:14px; background:#cfe0f5 url('img/apple/band-shore.jpg') center/cover no-repeat; position:relative; overflow:hidden; }
.webmui__img::after { content:""; position:absolute; inset:0; background:radial-gradient(80% 60% at 30% 20%, rgba(255,255,255,.35), transparent); }
.webmui__row { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:14px 16px 0; }
.webmui__tile { border:1px solid #eef1f6; border-radius:12px; padding:11px; background:#fafbfd; }
.webmui__tile span { font-size:15px; } .webmui__tile b { display:block; font-size:11px; color:#0f1b33; margin:5px 0 2px; } .webmui__tile p { font-size:9.5px; color:#7a869a; margin:0; line-height:1.3; }
.webmui__cta { margin:auto 16px 16px; background:#0071e3; color:#fff; text-align:center; font-size:12px; font-weight:700; padding:12px; border-radius:14px; }

/* ===== Command Center — mobile dashboard phone UI ===== */
.dash-phone--cc .dash-screen { background:#0a0e16; }
.ccmui { display:flex; flex-direction:column; min-height:560px; padding:40px 0 14px; background:linear-gradient(180deg,#101626 0%,#0a0e16 100%); color:#fff; }
.ccmui__hd { padding:8px 18px 10px; }
.ccmui__biz { font-size:10px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:#62748f; }
.ccmui__h { font-size:17px; font-weight:700; letter-spacing:-.2px; margin-top:3px; }
.ccmui__rev { margin:4px 16px 0; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); border-radius:16px; padding:15px 15px 6px; }
.ccmui__rt { display:flex; align-items:flex-start; justify-content:space-between; }
.ccmui__rl { font-size:11px; color:#9fb0c7; } .ccmui__amt { font-size:27px; font-weight:700; letter-spacing:-.6px; margin-top:3px; }
.ccmui__pill { font-size:10px; font-weight:700; color:#34d27a; background:rgba(52,210,122,.15); padding:4px 9px; border-radius:20px; }
.ccmui__spark { display:block; width:100%; height:46px; margin-top:8px; }
.ccmui__tiles { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:14px 16px 0; }
.ccmui__tile { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:12px; }
.ccmui__n { font-size:20px; font-weight:700; letter-spacing:-.4px; } .ccmui__l { font-size:10px; color:#8aa0bd; margin-top:3px; } .ccmui__u { font-size:9.5px; color:#34d27a; margin-top:4px; }

/* ===================== VARIED CARD SYSTEM (colors + treatments) ===================== */
/* --- color skins (bg + text) --- */
.lc-dark   { background:radial-gradient(135% 120% at 50% -8%, #2b3547 0%, #0c1118 72%); }
.lc-navy   { background:linear-gradient(165deg,#17345f 0%,#0a1a36 100%); }
.lc-blue   { background:linear-gradient(160deg,#2079ef 0%,#0b53c7 100%); }
.lc-indigo { background:linear-gradient(160deg,#7b73ff 0%,#4f46cf 100%); }
.lc-teal   { background:linear-gradient(160deg,#15a8bf 0%,#0b7588 100%); }
.lc-green  { background:linear-gradient(160deg,#21bd78 0%,#0e8a4f 100%); }
.lc-purple { background:linear-gradient(160deg,#9d61f2 0%,#6a3fc4 100%); }
.lc-light  { background:linear-gradient(180deg,#ffffff 0%,#eef2f8 100%); }
.lc-cloud  { background:linear-gradient(165deg,#eef3f9 0%,#dbe6f2 100%); }
/* default text = white (dark/colored skins) */
.lineup-card[class*="lc-"] .lineup-card__title { color:#fff; }
.lineup-card[class*="lc-"] .lineup-card__sub   { color:rgba(255,255,255,.82); }
.lineup-card[class*="lc-"] .lineup-card__link  { color:#fff; }
.lc-dark .lineup-card__eyebrow, .lc-navy .lineup-card__eyebrow { color:#7fb6ff; }
.lc-blue .lineup-card__eyebrow, .lc-indigo .lineup-card__eyebrow, .lc-teal .lineup-card__eyebrow,
.lc-green .lineup-card__eyebrow, .lc-purple .lineup-card__eyebrow { color:rgba(255,255,255,.9); }
/* light skins → dark text */
.lc-light .lineup-card__title, .lc-cloud .lineup-card__title { color:#0f1320; }
.lc-light .lineup-card__sub,   .lc-cloud .lineup-card__sub   { color:#5b6473; }
.lc-light .lineup-card__eyebrow,.lc-cloud .lineup-card__eyebrow{ color:#0071e3; }
.lc-light .lineup-card__link,  .lc-cloud .lineup-card__link  { color:#0071e3; }

/* --- treatment: PHONE (device floats top, copy clean below) --- */
.lc-phone { display:flex; flex-direction:column-reverse; }
.lc-phone .lineup-card__art { position:relative; flex:1 1 auto; min-height:0; margin:0; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:30px 0 0;
  -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 100%); mask-image:linear-gradient(180deg,#000 82%,transparent 100%); }
.lc-phone .lineup-card__copy { position:relative; z-index:2; margin:0; padding:6px 28px 30px; }

/* --- treatment: SCREEN (frameless app UI fills the card, copy in a bottom band) --- */
.lc-screen { display:flex; flex-direction:column-reverse; }
.lc-screen .lineup-card__art { position:relative; flex:1 1 auto; min-height:0; margin:0; padding:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 84%,transparent 100%); mask-image:linear-gradient(180deg,#000 84%,transparent 100%); }
.lc-screen .lc-fill { position:absolute; left:0; right:0; top:0; bottom:0; overflow:hidden; }
.lc-screen .lc-fill > * { width:100% !important; min-height:100% !important; border-radius:0 !important; }
.lc-screen .lineup-card__copy { position:relative; z-index:2; margin:0; padding:16px 26px 26px; }
/* lift the copy band on a soft scrim so it reads on any UI color */
.lc-dark.lc-screen .lineup-card__copy, .lc-navy.lc-screen .lineup-card__copy { background:linear-gradient(0deg, rgba(8,11,18,.96) 38%, rgba(8,11,18,0)); margin-top:-30px; padding-top:34px; }
.lc-blue.lc-screen .lineup-card__copy, .lc-indigo.lc-screen .lineup-card__copy, .lc-teal.lc-screen .lineup-card__copy, .lc-green.lc-screen .lineup-card__copy, .lc-purple.lc-screen .lineup-card__copy { background:linear-gradient(0deg, rgba(0,0,0,.34) 40%, rgba(0,0,0,0)); margin-top:-30px; padding-top:34px; }
.lc-light.lc-screen .lineup-card__copy { background:linear-gradient(0deg,#fff 60%, rgba(255,255,255,0)); margin-top:-26px; padding-top:30px; }
.lc-cloud.lc-screen .lineup-card__copy { background:linear-gradient(0deg,#e7eef7 60%, rgba(231,238,247,0)); margin-top:-26px; padding-top:30px; }

/* --- treatment: MEDIA (full-bleed video, copy overlaid) — reuse old --media look --- */
.lc-media { position:relative; }
.lc-media .lineup-card__art { position:absolute; inset:0; margin:0; min-height:0; z-index:0; overflow:hidden; }
.lc-media .lineup-card__media { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.lc-media .lineup-card__copy { position:relative; z-index:2; margin-top:auto; padding:120px 28px 30px; background:linear-gradient(0deg, rgba(4,6,11,.92) 0%, rgba(4,6,11,.5) 52%, rgba(4,6,11,0) 100%); }
.lc-media .lineup-card__media { transition:transform 1.4s var(--ease-out); }
.lc-media:hover .lineup-card__media { transform:scale(1.06); }

.lc-phone .dash-phone{zoom:0.62;}
.lc-screen .lc-fill > *{box-shadow:none;}

/* ===== robust frameless SCREEN treatment (top-aligned, reliable) ===== */
.lc-screen .lineup-card__art { position:relative; flex:1 1 auto; min-height:0; margin:0; padding:0; overflow:hidden; display:flex; align-items:flex-start; justify-content:center;
  -webkit-mask-image:linear-gradient(180deg,#000 84%,transparent 100%); mask-image:linear-gradient(180deg,#000 84%,transparent 100%); }
.lc-screen .lc-fill { width:100%; }
.lc-screen .lc-fill > * { width:100% !important; min-height:0 !important; max-height:none !important; border-radius:0 !important; }

/* ===== screen treatment FINAL: in-flow, top-anchored (overrides absolute) ===== */
.lc-screen { flex-direction:column-reverse !important; }
.lc-screen .lineup-card__art { display:block !important; position:relative; flex:1 1 auto; min-height:0; margin:0; padding:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 86%,transparent 100%); mask-image:linear-gradient(180deg,#000 86%,transparent 100%); }
.lc-screen .lc-fill { position:static !important; width:100% !important; }
.lc-screen .lc-fill > * { width:100% !important; min-height:0 !important; max-height:none !important; border-radius:0 !important; }

/* ===== homepage 3-up lineup (replaces the swipe rail) ===== */
.lineup-3up{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;margin-top:var(--space-12);}
.lineup-3up .lineup-card{width:auto !important;flex:none !important;max-width:none !important;min-height:540px;scroll-snap-align:none;}
@media (max-width:900px){ .lineup-3up{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto;} }

/* ===== detailed 3-up pricing tiers ===== */
.tiers { grid-template-columns:repeat(3,1fr) !important; }
@media (max-width:1080px){ .tiers { grid-template-columns:1fr !important; max-width:540px; margin-left:auto; margin-right:auto; } }
.tier__one { font-size:11.5px; color:var(--color-text-tertiary); margin:6px 0 0; font-style:italic; }
.tier__list li b { display:block; color:var(--color-text); font-weight:600; font-size:13.5px; }
.tier__note { display:block; font-size:12px; line-height:1.42; color:var(--color-text-secondary); margin-top:3px; font-weight:400; }
.tier__list li.tier__base b { color:var(--color-accent); }

/* ===== FAQ accordion (Apple) — for service hubs + SEO pages ===== */
.faq{ max-width:760px; margin:0 auto; text-align:left; }
.faq details{ border-bottom:1px solid var(--color-divider); }
.faq summary{ cursor:pointer; list-style:none; padding:22px 2px; font-size:19px; font-weight:600; color:var(--color-text); display:flex; justify-content:space-between; gap:18px; align-items:center; letter-spacing:-.01em; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-size:26px; line-height:1; color:var(--color-text-tertiary); font-weight:300; flex:0 0 auto; }
.faq details[open] summary::after{ content:"\2212"; }
.faq__a{ padding:0 2px 24px; font-size:17px; line-height:1.62; color:var(--color-text-secondary); max-width:680px; }
.faq__a a{ color:var(--color-accent); }
/* ===== testimonials (Apple) ===== */
.testi-card{ display:flex; flex-direction:column; gap:13px; text-align:left; height:100%; }
.testi-card .testi__stars{ color:#fbbc05; font-size:15px; letter-spacing:3px; }
.testi-card .testi__q{ font-size:16.5px; line-height:1.5; color:var(--color-text); font-weight:500; }
.testi-card .testi__who{ margin-top:auto; padding-top:6px; font-size:14px; color:var(--color-text-secondary); display:flex; align-items:center; gap:10px; }
.testi-card .testi__av{ width:36px; height:36px; border-radius:50%; background:var(--color-accent); color:#fff; display:grid; place-items:center; font-weight:600; font-size:15px; flex:0 0 auto; }
.testi-card .testi__g{ display:block; font-size:12px; color:var(--color-text-tertiary); margin-top:1px; }
/* ===== price callout (Apple) ===== */
.price-callout{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:6px 16px; background:var(--color-bg-alt); border:1px solid var(--color-divider); border-radius:22px; padding:30px 28px; max-width:720px; margin:0 auto; text-align:center; }
.price-callout b{ font-size:34px; font-weight:700; letter-spacing:-.02em; color:var(--color-text); line-height:1; }
.price-callout span{ font-size:16px; color:var(--color-text-secondary); }