/* Pink website: shared styles.
   Layout: full-width sections stacked like Wix Studio sections; content sits in a 1180px container,
   split into one or two columns. Mobile first, RTL throughout. */

:root {
  /* Brand */
  --brand: #EC1E77;        /* app icon pink */
  --pink: #E0156F;         /* buttons and accents, AA with white text */
  --pink-deep: #B10F57;    /* pink text on light backgrounds */
  --blush: #FDE7F0;        /* soft pink fills */

  /* Neutrals with a plum bias */
  --paper: #FFF7FA;
  --white: #FFFFFF;
  --ink: #2A1220;
  --ink-2: #634A58;
  --line: #F0DCE5;
  --rule: #F6E3EB;
  --band: #3B0F2C;         /* dark sections */
  --band-ink: #FCEAF2;

  /* WhatsApp vernacular, used only inside chat mockups */
  --wa-head: #008069;
  --wa-bg: #EFEAE2;
  --wa-in: #FFFFFF;
  --wa-out: #D9FDD3;
  --wa-link: #027EB5;

  --display: "Open Sans", "Arial Hebrew", system-ui, sans-serif;
  --body: "Open Sans", "Arial Hebrew", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius: 14px;
  --container: 1180px;
  --gutter: 20px;
}

body[data-theme="barbers"] {
  --paper: #F1F3F7;
  --ink: #15223B;
  --ink-2: #4D5A72;
  --line: #DCE2EC;
  --rule: #E3E8F0;
  --blush: #E6EBF4;
  --band: #101A2E;
  --band-ink: #E9EEF7;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
[id] { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--pink-deep); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.band :focus-visible, .site-footer :focus-visible { outline-color: var(--band-ink); }
.num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Skip link: the first Tab stop on every page, shown only when it has keyboard focus */
.skip-link { position: absolute; z-index: 100; top: 10px; inset-inline-start: 10px; padding: 10px 18px; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 600; text-decoration: none; translate: 0 calc(-100% - 20px); }
.skip-link:focus { translate: 0 0; }

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: 72px; }
.section.tight { padding-block: 48px; }
.section.white { background: var(--white); }
.section.blush { background: var(--blush); }
.section.band { background: var(--band); color: var(--band-ink); }
@media (min-width: 960px) { .section { padding-block: 104px; } }

/* Type */
h1, h2, h3 { margin: 0; text-wrap: balance; font-weight: 700; }
/* Four weights: 700 titles, 600 buttons, prices and emphasis, 500 navigation and labels, 400 text */
b, strong, th { font-weight: 600; }
.display {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.01em;
}
h1.display { font-size: clamp(40px, 7.2vw, 76px); }
h2.display { font-size: clamp(32px, 5.4vw, 54px); }
h3, .h3 { font-size: 22px; font-weight: 700; line-height: 1.3; }
.lede { font-size: 21px; color: var(--ink-2); max-width: 38ch; margin: 0; }
.band .lede { color: var(--band-ink); opacity: .85; }
.kicker { font-weight: 600; color: var(--pink-deep); font-size: 17px; margin: 0; }
.band .kicker { color: #FF8FBF; }
p { margin: 0; }
.stack { display: grid; gap: 16px; align-content: start; }
.stack.lg { gap: 24px; }
.center { text-align: center; justify-items: center; }
.center .lede { margin-inline: auto; }
.muted { color: var(--ink-2); }
.small { font-size: 15px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 26px;
  border-radius: var(--radius);
  font: 600 18px/1 var(--body);
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background-color .15s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--pink); color: #fff; box-shadow: 0 2px 0 var(--pink-deep); }
.btn-primary:hover { background: var(--pink-deep); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--white); }
.band .btn-ghost { color: var(--band-ink); border-color: var(--band-ink); }
.band .btn-ghost:hover { background: rgba(255, 255, 255, .08); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.fine { font-size: 15px; color: var(--ink-2); }
.band .fine { color: var(--band-ink); opacity: .75; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
/* frosted menubar: the page shows through, softly blurred */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header {
    background: rgba(255, 255, 255, .74);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
  }
}
.header-in { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: none; }
.logo img { width: auto; height: 37px; }
.site-footer .logo img { height: 42px; }
.nav { display: none; align-items: center; gap: 4px; margin-inline-start: 12px; }
.nav > a, .nav summary {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 17px;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  list-style: none;
}
.nav summary::-webkit-details-marker { display: none; }
.nav > a:hover, .nav summary:hover { background: var(--paper); }
.nav a[aria-current="page"] { color: var(--pink-deep); }
.dropdown { position: relative; }
.dropdown summary { display: inline-flex; align-items: center; gap: 6px; }
.dropdown summary::after { content: ""; width: 12px; height: 12px; background: currentColor; opacity: .7; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transition: rotate .2s ease; }
.dropdown[open] summary::after { rotate: 180deg; }
.dropdown-panel {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-start: 0;
  min-width: 440px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 40px -20px rgba(42, 18, 32, .35);
  padding: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.dropdown-panel a { padding: 9px 12px; border-radius: 9px; color: var(--ink); text-decoration: none; font-weight: 500; }
.dropdown-panel a:hover { background: var(--paper); }
.dropdown-panel a.new::after { content: "עמוד חדש"; font-size: 12px; font-weight: 600; color: var(--pink-deep); background: var(--blush); border-radius: 6px; padding: 1px 6px; margin-inline-start: 8px; }
/* Solutions mega menu: a full-width grid of what Pink does, each linking to where it's explained */
.header-in { position: relative; }
.dropdown.mega { position: static; }
.mega-panel { inset-inline: 0; top: calc(100% - 6px); min-width: 0; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 16px; }
.mega-panel .sol { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 12px; font-weight: 400; }
.sol svg { flex: none; width: 38px; height: 38px; padding: 8px; border-radius: 11px; background: var(--blush); color: var(--pink-deep); }
.sol span { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.sol b { display: block; margin-bottom: 3px; font-size: 16px; font-weight: 600; color: var(--ink); }
.header-actions { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
.header-actions .login { color: var(--ink); font-weight: 500; text-decoration: none; padding: 8px 10px; display: none; }
.header-actions .btn { min-height: 44px; padding: 0 18px; font-size: 17px; }
.menu-toggle { margin-inline-start: 4px; }
.menu-toggle > summary {
  list-style: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid var(--line);
  cursor: pointer;
}
.menu-toggle > summary::-webkit-details-marker { display: none; }
.menu-toggle > summary span, .menu-toggle > summary span::before, .menu-toggle > summary span::after {
  display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; content: "";
}
.menu-toggle > summary span::before { position: absolute; top: -6px; transition: top .2s ease, rotate .2s ease; }
.menu-toggle > summary span::after { position: absolute; top: 6px; transition: top .2s ease, rotate .2s ease; }
/* open: the three lines become a close mark */
.menu-toggle[open] > summary span { background: transparent; }
.menu-toggle[open] > summary span::before { top: 0; rotate: 45deg; }
.menu-toggle[open] > summary span::after { top: 0; rotate: -45deg; }
/* the mobile menu is a full-height sheet under the bar: four rows, two of them fold open, then the login button */
.mobile-panel {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  height: calc(100vh - 68px);
  height: calc(100dvh - 68px);
  background: var(--white);
  border-top: 1px solid var(--line);
  padding: 8px var(--gutter) 24px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-panel .m-link, .m-group > summary {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 60px; padding: 0 2px;
  font-size: 19px; font-weight: 600; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.m-group > summary { list-style: none; cursor: pointer; }
.m-group > summary::-webkit-details-marker { display: none; }
.m-group > summary::after {
  content: ""; width: 14px; height: 14px; background: var(--ink-2); transition: rotate .2s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.m-group[open] > summary { border-bottom-color: transparent; }
.m-group[open] > summary::after { rotate: 180deg; }
.mobile-types {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px;
  padding: 6px 14px; margin-bottom: 8px;
  background: var(--paper); border-radius: 14px;
}
.mobile-types a { padding: 11px 0; font-size: 16px; font-weight: 500; color: var(--ink-2); text-decoration: none; }
.mobile-panel a[aria-current="page"] { color: var(--pink-deep); }
.mobile-panel .m-login { margin-top: 20px; min-height: 52px; width: 100%; }
/* while the menu is open the page behind stays put, and the WhatsApp button steps aside */
body:has(.menu-toggle[open]) { overflow: hidden; }
@media (max-width: 999px) { body:has(.menu-toggle[open]) .wa-widget { display: none; } }
@media (min-width: 1000px) {
  .nav { display: flex; }
  .header-actions .login { display: inline-block; }
  .menu-toggle { display: none; }
}

/* Hero */
.hero { padding-block: 40px 64px; overflow: hidden; }
.hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) {
  .hero { padding-block: 64px 96px; }
  .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 56px; }
}
.hero .accent-line { display: block; }
.display.hero-title { font-size: clamp(40px, 6vw, 68px); margin-top: 10px; }
.hero .lede { margin-top: 20px; }
.hero .btn-row { margin-top: 28px; }
.hero .fine { margin-top: 12px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 28px; align-items: center; font-size: 15px; font-weight: 500; color: var(--ink-2); }
.hero-proof img { height: 30px; width: auto; }
.hero-proof span { display: inline-flex; align-items: center; gap: 8px; }
/* Blue verified tick, the badge WhatsApp shows next to verified business names */
.verified { width: 20px; height: 20px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10.00 0.80L12.04 2.37L14.60 2.03L15.59 4.41L17.97 5.40L17.63 7.96L19.20 10.00L17.63 12.04L17.97 14.60L15.59 15.59L14.60 17.97L12.04 17.63L10.00 19.20L7.96 17.63L5.40 17.97L4.41 15.59L2.03 14.60L2.37 12.04L0.80 10.00L2.37 7.96L2.03 5.40L4.41 4.41L5.40 2.03L7.96 2.37Z' fill='%231D9BF0' stroke='%231D9BF0' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M6.2 10.2l2.5 2.5 5.2-5.3' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Visual stage: photo with phone and floating cards */
.stage { position: relative; min-height: 600px; }
.stage-photo {
  position: absolute;
  inset-block: 0 56px;
  inset-inline: 72px 0;
  border-radius: 28px;
  overflow: hidden;
  background: var(--blush);
}
.stage-photo img { width: 100%; height: 100%; object-fit: cover; }
.stage .phone { position: absolute; z-index: 2; inset-inline-start: 0; bottom: 0; width: 262px; }
.stage .phone .phone-screen { height: 540px; }
.float-card {
  position: absolute;
  z-index: 3;
  background: var(--white);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 16px 34px -18px rgba(42, 18, 32, .45);
  font-size: 14.5px;
  line-height: 1.35;
  display: grid;
  gap: 2px;
  min-width: 190px;
}
.float-card b { font-size: 15.5px; }
.float-card .meta { color: var(--ink-2); font-size: 13.5px; }
.float-card .tag { justify-self: start; font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 1px 9px; background: #DDF5E6; color: #136B3D; margin-top: 4px; }
.float-card .amount { font-family: var(--display); font-size: 26px; line-height: 1.1; font-weight: 600; }
.fc-a { inset-inline-end: 16px; top: 28px; }
.fc-b { inset-inline-end: 16px; bottom: 96px; }
@media (max-width: 600px) {
  .stage { min-height: 540px; }
  .stage-photo { inset-inline: 40px 0; inset-block: 0 48px; }
  .stage .phone { width: 236px; }
  .stage .phone .phone-screen { height: 488px; }
  .stage .phone .wa-body { font-size: 12px; }
  .stage .phone .ios-bar { padding-inline: 18px; }
  .stage .phone .ios-island { width: 68px; }
  .stage .phone .ios-icons { gap: 3px; scale: .88; transform-origin: left center; }
  .float-card { min-width: 0; max-width: 170px; }
  .fc-a { inset-inline-end: 10px; top: 16px; }
  .fc-b { display: none; }
  .diary::before { inset-inline-start: 48px; }
  .diary-row { grid-template-columns: 48px 1fr; }
  .diary-head { padding-inline: 62px 16px; }
  .diary-row .e { padding-inline: 12px; font-size: 16px; gap: 8px; }
}

/* Phone and WhatsApp mockups: an iPhone showing the chat as the client sees it, in WhatsApp's light iOS look.
   Markup comes from _build/phone_markup.py. Icons are masks, so they take the colour of their element. */
.phone {
  width: 290px;
  padding: 8px;
  border-radius: 50px;
  background: linear-gradient(150deg, #55555B 0%, #1E1E21 20%, #0E0E10 62%, #2C2C30 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 46px 80px -40px rgba(42, 18, 32, .65), 0 18px 34px -26px rgba(42, 18, 32, .45);
}
.phone-screen {
  position: relative;
  height: 560px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 42px;
  color: #111B21;
  background: #EFE7DD url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.07' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 26c-5-6 3-11 6-5 3-6 11-1 6 5l-6 6z'/%3E%3Cpath d='M86 14l3 6 6 1-5 4 1 6-5-3-5 3 1-6-5-4 6-1z'/%3E%3Ccircle cx='70' cy='80' r='7'/%3E%3Cpath d='M14 86q8-8 16 0t16 0'/%3E%3Cpath d='M98 96l8 8M106 96l-8 8'/%3E%3Cpath d='M46 50h10M51 45v10'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 120px;
}
.phone-screen::after { content: ""; position: absolute; z-index: 4; bottom: 7px; left: 50%; translate: -50% 0; width: 104px; height: 4px; border-radius: 4px; background: #111B21; }

.ios-icons i, .wa-back, .wa-video, .wa-call, .wa-plus, .wa-cam, .wa-mic, .wa-ticks, .wa-btns span::before {
  display: block;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
}
.ios-bar { position: relative; z-index: 4; display: flex; justify-content: space-between; align-items: center; padding: 13px 20px 5px; background: #F6F6F6; font-size: 13px; font-weight: 600; }
.ios-island { position: absolute; top: 9px; left: 50%; translate: -50% 0; width: 76px; height: 23px; border-radius: 14px; background: #050505; }
.ios-icons { display: flex; align-items: center; gap: 4px; direction: ltr; }
.ios-icons .sig { width: 16px; height: 10px; --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Crect y='8' width='3' height='4' rx='1'/%3E%3Crect x='5' y='5.5' width='3' height='6.5' rx='1'/%3E%3Crect x='10' y='3' width='3' height='9' rx='1'/%3E%3Crect x='15' width='3' height='12' rx='1'/%3E%3C/svg%3E"); }
.ios-icons .wifi { width: 14px; height: 10px; --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M8 12l2.3-2.6a3.2 3.2 0 0 0-4.6 0z'/%3E%3Cpath d='M3.2 6.8a6.8 6.8 0 0 1 9.6 0l-1.5 1.7a4.6 4.6 0 0 0-6.6 0z'/%3E%3Cpath d='M.6 3.9a10.6 10.6 0 0 1 14.8 0l-1.5 1.7a8.4 8.4 0 0 0-11.8 0z'/%3E%3C/svg%3E"); }
.ios-icons .bat { width: 23px; height: 11px; --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12'%3E%3Crect x='.5' y='.5' width='22' height='11' rx='3' fill='none' stroke='%23000' opacity='.4'/%3E%3Crect x='2' y='2' width='17' height='8' rx='1.6'/%3E%3Cpath d='M24 4v4a2 2 0 0 0 0-4z' opacity='.4'/%3E%3C/svg%3E"); }

.wa-head { position: relative; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 3px 12px 9px; background: #F6F6F6; border-bottom: 1px solid rgba(17, 27, 33, .08); }
.wa-back { width: 10px; height: 17px; color: #007AFF; --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'%3E%3Cpath d='M2 2l8 8-8 8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.wa-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; flex: none; background: var(--blush); color: var(--pink-deep); font-weight: 600; font-size: 15px; }
.wa-avatar img { width: 100%; height: 100%; }
body[data-theme="barbers"] .wa-avatar { background: #E6EBF4; color: #15223B; }
.wa-who { flex: 1; min-width: 0; }
.wa-name { font-weight: 600; font-size: 14.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-status { font-size: 11.5px; line-height: 1.3; color: #5A6972; }
.wa-status.typing { color: #1DAA61; }
.wa-video, .wa-call { color: #007AFF; }
.wa-video { width: 22px; height: 22px; --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='6' width='14' height='12' rx='3' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M16 10.5l5-3v9l-5-3z' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.wa-call { width: 19px; height: 19px; --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 3.5l2.6.4 1.3 4-2 1.6a12 12 0 0 0 6 6l1.6-2 4 1.3.4 2.6c-.1 1.5-1.4 2.6-3 2.6C10.3 20 4 13.7 4 6.5c0-1.6 1.1-2.9 2.6-3z' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E"); }

.wa-body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; padding: 10px 11px 8px; font-size: 13px; line-height: 1.36; }
.wa-day { align-self: center; margin-bottom: 3px; padding: 2px 10px; border-radius: 8px; background: rgba(255, 255, 255, .92); color: #54656F; font-size: 11.5px; font-weight: 500; box-shadow: 0 1px .5px rgba(11, 20, 26, .12); }
.wa-msg { position: relative; max-width: 82%; padding: 6px 9px 4px; border-radius: 10px; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.wa-in { align-self: flex-start; background: #fff; border-start-start-radius: 0; }
.wa-out { align-self: flex-end; background: #D9FDD3; border-start-end-radius: 0; }
.wa-msg::before { content: ""; position: absolute; top: 0; width: 8px; height: 12px; background: inherit; }
.wa-in::before { right: -7px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.wa-out::before { left: -7px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.wa-time { display: flex; justify-content: flex-start; align-items: center; gap: 3px; margin-top: 1px; direction: ltr; font-size: 10.5px; color: #5A6972; }
.wa-ticks { width: 15px; height: 10px; color: #53BDEB; --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 11'%3E%3Cpath d='M1 6l3.2 3.2L11 2.2M7.2 8.4l.8.8 8.8-8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* Template message: a header strip, the text, then its buttons attached underneath */
.wa-tpl { width: 82%; }
.wa-tpl-head { display: flex; align-items: center; gap: 8px; margin: -3px -6px 6px; padding: 5px 8px; border-radius: 7px; background: linear-gradient(120deg, var(--blush), #FFF7FA); color: var(--pink-deep); font-weight: 600; font-size: 13px; }
.wa-tpl-head i { width: 22px; height: 22px; border-radius: 7px; flex: none; background: var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='3' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 15px no-repeat; }
.wa-btns { display: grid; margin: 6px -9px -4px; border-top: 1px solid #E9EDEF; }
.wa-btns span { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6.5px 6px; color: #027EB5; font-weight: 500; font-size: 13px; border-radius: 0 0 10px 10px; }
.wa-btns span + span { border-top: 1px solid #E9EDEF; }
.wa-btns span:not(:last-child) { border-radius: 0; }
.wa-btns span::before { content: ""; width: 14px; height: 14px; --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3L2 7l4 4M2 7h7a5 5 0 0 1 5 5' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.wa-btns .url::before { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9 2h5v5M14 2L7.5 8.5M12 9.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h3.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.wa-quote { display: block; margin: -2px -5px 5px; padding: 4px 8px 5px; border-radius: 6px; border-inline-start: 4px solid #06CF9C; background: rgba(17, 27, 33, .05); color: #5A6972; font-size: 12px; line-height: 1.3; }
.wa-quote b { display: block; color: #047658; font-weight: 600; }

.wa-input { position: relative; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 7px 12px 22px; background: #F6F6F6; border-top: 1px solid rgba(17, 27, 33, .06); color: #007AFF; }
.wa-input span { flex: 1; height: 30px; border-radius: 16px; background: #fff; border: 1px solid #E2E2E2; }
.wa-plus { width: 19px; height: 19px; --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v16M4 12h16' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.wa-cam { width: 22px; height: 22px; --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 8h3l2-2.5h6L17 8h3v11H4z' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='13' r='3.5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E"); }
.wa-mic { width: 20px; height: 20px; --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='9' y='3' width='6' height='11' rx='3' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath d='M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* Notification banner: only drawn when the hero chat plays (see Motion) */
.wa-banner { display: none; }
.wa-banner > span { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.wa-banner b { display: block; font-weight: 600; font-size: 12.5px; }
.wa-banner time { flex: none; font-size: 11px; color: #8A8A8E; }
.wa-app { width: 30px; height: 30px; border-radius: 8px; flex: none; background: #25D366 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 0 0-7.7 13.6L3 21l4.5-1.2A9 9 0 1 0 12 3z' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M9 8.5c0 3.6 2.9 6.5 6.5 6.5l1-1.6-2-1-1 .9a5 5 0 0 1-2.8-2.8l.9-1-1-2z' fill='%23fff'/%3E%3C/svg%3E") center / 19px no-repeat; }

/* Business type strip */
.types { display: flex; flex-wrap: wrap; gap: 10px; }
.types a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  font-size: 16.5px;
}
.types a:hover { border-color: var(--pink); color: var(--pink-deep); }
.types a.is-new { border-color: var(--pink); }

/* Diary: the paper appointment book, with no-shows struck out */
.diary-wrap { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .diary-wrap { grid-template-columns: 1fr 1fr; gap: 64px; } }
.diary {
  --line-h: 44px;
  position: relative;
  background-color: var(--white);
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--line-h) - 1px), var(--rule) calc(var(--line-h) - 1px) var(--line-h));
  background-position: 0 64px;
  border-radius: 12px;
  box-shadow: 0 1px 0 var(--line), 0 24px 50px -30px rgba(42, 18, 32, .4);
  padding-bottom: 16px;
  overflow: hidden;
}
.diary::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 62px; width: 2px; background: #F293BA; }
.diary-head { height: 64px; display: flex; align-items: center; padding-inline: 80px 20px; font-weight: 600; border-bottom: 2px solid var(--rule); background: var(--white); position: relative; }
.diary-row { display: grid; grid-template-columns: 62px 1fr; min-height: var(--line-h); }
.diary-row .t { font-family: var(--display); font-size: 16px; font-weight: 500; line-height: var(--line-h); text-align: center; color: var(--ink-2); }
.diary-row .e { line-height: var(--line-h); padding-inline: 16px; font-size: 17px; position: relative; display: flex; align-items: center; gap: 10px; }
.diary-row .e .p { font-weight: 600; margin-inline-start: auto; }
.diary-row .e > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.diary-row.gone .e { color: var(--ink-2); }
.diary-row.gone .e::after {
  content: "";
  position: absolute;
  inset-inline: 12px;
  top: 52%;
  height: 2.5px;
  background: var(--pink);
  transform: rotate(-1.5deg);
  border-radius: 2px;
}
.diary-row .note { position: relative; z-index: 1; font-size: 13px; font-weight: 600; color: var(--pink-deep); background: var(--blush); border-radius: 999px; padding: 3px 9px; line-height: 1.2; white-space: nowrap; }
.diary-sum { margin: 10px 20px 0; padding-top: 12px; border-top: 2px solid var(--ink); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; position: relative; background: var(--white); }
.diary-sum b { font-size: 18px; }
.diary-sum .total { font-family: var(--display); font-size: 44px; line-height: 1; font-weight: 600; text-decoration: underline double var(--pink); text-decoration-thickness: 3px; text-underline-offset: 8px; }

/* Feature rows */
.rows { display: grid; gap: 72px; }
.row { display: grid; gap: 32px; align-items: center; }
@media (min-width: 960px) {
  .rows { gap: 112px; }
  .row { grid-template-columns: 1fr 1fr; gap: 72px; }
  .row.flip .row-visual { order: -1; }
}
.row-copy { display: grid; gap: 14px; align-content: start; }
.row-copy h2, .row-copy h3 { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 4.2vw, 40px); line-height: 1.15; }
.row-copy ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.row-copy li { position: relative; padding-inline-start: 30px; }
.row-copy li::before { content: ""; position: absolute; inset-inline-start: 0; top: 7px; width: 18px; height: 18px; border-radius: 50%; background: var(--blush); box-shadow: inset 0 0 0 5px var(--pink); }
.row-visual { position: relative; display: grid; place-items: center; min-height: 360px; border-radius: 28px; background: var(--blush); padding: 40px 20px; overflow: hidden; }
.section.blush .row-visual { background: var(--white); }

/* Small UI cards rebuilt from the app */
.ui-card { background: var(--white); border-radius: 18px; box-shadow: 0 20px 44px -26px rgba(42, 18, 32, .5); padding: 18px; width: min(340px, 100%); display: grid; gap: 12px; position: relative; z-index: 1; }
.ui-card .ui-h { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.4; }
.wait-item { display: flex; align-items: center; gap: 12px; }
.wait-item .av { width: 40px; height: 40px; border-radius: 50%; background: var(--blush); color: var(--pink-deep); display: grid; place-items: center; font-weight: 600; flex: none; }
.wait-item b { display: block; font-size: 15.5px; }
.wait-item span { font-size: 13.5px; color: var(--ink-2); }
.wait-item .state { margin-inline-start: auto; font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 2px 10px; background: #DDF5E6; color: #136B3D; }
.wait-item .state.pending { background: var(--paper); color: var(--ink-2); }
.slots { display: grid; gap: 8px; }
.slot { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; font-weight: 600; }
.slot .num { font-size: 18px; }
.slot i { font-style: normal; background: var(--pink); color: #fff; font-size: 14px; border-radius: 8px; padding: 5px 14px; }
.pay-total { display: flex; justify-content: space-between; align-items: baseline; }
.pay-total .num { font-family: var(--display); font-size: 32px; line-height: 1.1; font-weight: 600; }
.pay-line .num { font-size: 22px; }
.pay-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pay-methods span { border: 1px solid var(--line); border-radius: 10px; text-align: center; padding: 8px 4px; font-weight: 500; font-size: 14px; }
.pay-methods span.on { border-color: var(--pink); color: var(--pink-deep); background: var(--blush); }
.receipt { display: flex; gap: 10px; align-items: center; background: var(--paper); border-radius: 12px; padding: 10px 12px; font-size: 14.5px; }
.receipt .ok { width: 26px; height: 26px; border-radius: 50%; background: #DDF5E6; color: #136B3D; display: grid; place-items: center; font-weight: 600; flex: none; }
.cal { display: grid; gap: 6px; }
.cal-row { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: stretch; min-height: 44px; }
.cal-row .h { font-size: 13.5px; color: var(--ink-2); padding-top: 4px; direction: ltr; text-align: end; }
.cal-ev { border-radius: 10px; padding: 6px 10px; font-size: 14px; line-height: 1.3; }
.cal-ev b { display: block; }
.ev-a { background: #FFF1C9; } .ev-b { background: #FBDDEA; } .ev-c { background: #DCE4FF; } .ev-d { background: #DDF5E6; }

.team-cal { display: grid; grid-template-columns: 44px repeat(3, 1fr); gap: 6px; font-size: 13.5px; }
.team-cal .who { font-weight: 600; text-align: center; padding-bottom: 4px; border-bottom: 2px solid var(--line); }
.team-cal .h { color: var(--ink-2); direction: ltr; text-align: end; padding-top: 4px; }
.team-cal .cal-ev { min-height: 44px; }
.team-cal .free { border: 1.5px dashed var(--line); border-radius: 10px; }

/* Punch card, client file, forms and deposit cards (rebuilt from features on the live site) */
.punch-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.punch-head .num { font-family: var(--display); font-size: 28px; line-height: 1.1; font-weight: 600; color: var(--pink-deep); }
.punch-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 46px)); justify-content: space-between; gap: 8px; }
.punch-dot { width: 100%; aspect-ratio: 1; border-radius: 50%; border: 2px dashed var(--line); display: grid; place-items: center; font-weight: 600; font-size: 14px; color: var(--ink-2); }
.punch-dot.used { border: 0; background: var(--pink); color: #fff; }
.history { display: grid; gap: 0; }
.history-row { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--rule); font-size: 14.5px; line-height: 1.35; }
.history-row:first-child { border-top: 0; }
.history-row .d { color: var(--ink-2); font-size: 13px; direction: ltr; text-align: end; padding-top: 1px; }
.history-row b { display: block; font-size: 15px; }
.client-line { display: flex; align-items: center; gap: 10px; }
.client-line .av { width: 40px; height: 40px; border-radius: 50%; background: var(--blush); color: var(--pink-deep); display: grid; place-items: center; font-weight: 600; flex: none; }
.client-line span { font-size: 13.5px; color: var(--ink-2); display: block; }
.form-items { display: grid; gap: 8px; }
.form-item { display: flex; gap: 10px; align-items: center; font-size: 15px; }
.form-item i { width: 22px; height: 22px; border-radius: 6px; background: var(--pink); color: #fff; display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 600; flex: none; }
.sig { border-top: 1px dashed var(--line); padding-top: 10px; display: flex; justify-content: space-between; align-items: end; gap: 10px; }
.sig .scribble { font-family: var(--display); font-size: 22px; line-height: 1.1; font-weight: 500; color: var(--ink); transform: rotate(-4deg); }
.sig span { font-size: 13px; color: var(--ink-2); }
.policy { font-size: 13.5px; color: var(--ink-2); background: var(--paper); border-radius: 10px; padding: 9px 11px; line-height: 1.4; }

/* AI agent band: the phone in front of the marks of the two models the agent runs on */
.row-visual.ai-visual { background: transparent; isolation: isolate; }
.ai-visual::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(closest-side, rgba(224, 21, 111, .38), rgba(224, 21, 111, 0)); }
.ai-orbit { position: absolute; z-index: -1; top: 50%; left: 50%; translate: -50% -50%; width: 460px; aspect-ratio: 1; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .16); }
.ai-visual .phone { position: relative; z-index: 1; }
.ai-mark { position: absolute; z-index: 0; width: 96px; height: 96px; border-radius: 26px; display: grid; place-items: center; box-shadow: 0 26px 44px -20px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .45); }
.ai-mark svg { width: 54%; height: 54%; fill: currentColor; }
.ai-claude { top: 15%; right: calc(50% - 205px); rotate: 9deg; background: #F4F3EE; color: #D97757; }
.ai-openai { bottom: 17%; left: calc(50% - 205px); rotate: -9deg; background: #FFFFFF; color: #000; }
@media (max-width: 600px) {
  .ai-mark { width: 72px; height: 72px; border-radius: 20px; }
  .ai-claude { right: calc(50% - 172px); }
  .ai-openai { left: calc(50% - 172px); }
  .ai-orbit { width: 340px; }
}

/* AI agent page: example chats. Each card is a task, a short WhatsApp exchange on the phone's wallpaper, and what changed in Pink */
.ex-grid { display: grid; gap: 18px; }
@media (min-width: 680px) { .ex-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ex-grid { grid-template-columns: repeat(3, 1fr); } }
.ex-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--white); }
.ex-top { display: flex; align-items: center; gap: 12px; padding: 16px 18px; }
.ex-top svg { width: 40px; height: 40px; flex: none; padding: 8px; border-radius: 12px; background: var(--blush); color: var(--pink-deep); }
.ex-top h3 { font-size: 17px; font-weight: 700; line-height: 1.3; }
.ex-top span { font-size: 13.5px; color: var(--ink-2); }
.ex-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  min-height: 236px;
  padding: 16px 18px;
  color: #111B21;
  font-size: 14px;
  line-height: 1.4;
  background: #EFE7DD url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.07' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 26c-5-6 3-11 6-5 3-6 11-1 6 5l-6 6z'/%3E%3Cpath d='M86 14l3 6 6 1-5 4 1 6-5-3-5 3 1-6-5-4 6-1z'/%3E%3Ccircle cx='70' cy='80' r='7'/%3E%3Cpath d='M14 86q8-8 16 0t16 0'/%3E%3Cpath d='M98 96l8 8M106 96l-8 8'/%3E%3Cpath d='M46 50h10M51 45v10'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 120px;
}
.ex-result { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 18px; border-top: 1px solid var(--rule); font-size: 14.5px; font-weight: 500; }
.ex-result .ok { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #DDF5E6; color: #136B3D; font-size: 12px; font-weight: 600; }

/* Solution pages: hero visual panel, mockup cards and links to the other solutions */
.sol-visual { position: relative; display: grid; place-items: center; min-height: 540px; padding: 48px 20px; border-radius: 28px; background: var(--blush); }
.sol-visual.code { background: var(--band); }
.sol-visual > .ui-card { width: min(390px, 100%); }
.status-list { display: grid; gap: 8px; }
.status-row { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.status-row i { width: 22px; height: 22px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--blush); }
.status-row i::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); }
.status-row.ok i { background: #DDF5E6; }
.status-row.ok i::before { content: "✓"; content: "✓" / ""; width: auto; height: auto; background: none; color: #136B3D; font-size: 13px; font-weight: 600; }
.flow-row .state, .plan-row .state, .app-ev .state { font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 2px 10px; background: #DDF5E6; color: #136B3D; white-space: nowrap; }
.app-ev .state.pending { background: var(--paper); color: var(--ink-2); }
.wait-item .state.lead-new { background: #E7F1FB; color: #1C5FA8; }
.wait-item .state.lead-mid { background: #FFF1C9; color: #7A5600; }
.wait-item .state.lead-lost { background: var(--paper); color: var(--ink-2); }

.book { gap: 14px; }
.book-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.book-head b { font-size: 16px; font-weight: 600; }
.book-head span, .book-service span { font-size: 13.5px; color: var(--ink-2); }
.book-service { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--paper); }
.book-service b { font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 13.5px; font-weight: 500; }
.chips span.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.chips.tags span { border-color: transparent; background: var(--blush); color: var(--pink-deep); }
.chips.facts span { border-color: transparent; background: var(--paper); font-size: 15px; padding: 7px 14px; }
.days, .times { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.days span { display: grid; justify-items: center; padding: 8px 4px; border-radius: 12px; border: 1px solid var(--line); font-size: 17px; font-weight: 600; line-height: 1.2; }
.days small { font-size: 12px; font-weight: 500; color: var(--ink-2); }
.days span.on { border-color: var(--pink); background: var(--blush); color: var(--pink-deep); }
.times span { padding: 7px 4px; border-radius: 10px; border: 1px solid var(--line); text-align: center; font-size: 14px; font-weight: 500; }
.times span.on { border-color: var(--pink); background: var(--pink); color: #fff; }
.book-btn { display: block; padding: 11px; border-radius: 12px; background: var(--pink); color: #fff; text-align: center; font-weight: 600; }

.src-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: -4px; font-size: 13px; color: var(--ink-2); }
.src-cap .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: #F6C3D8; vertical-align: -1px; margin-inline-end: 6px; }
.src-cap .sw.won { background: var(--pink); }
.src { display: grid; gap: 10px; }
.src-row { display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 10px; font-size: 14px; }
.src-bar { position: relative; height: 10px; border-radius: 6px; background: var(--paper); }
.src-bar i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 6px; background: #F6C3D8; }
.src-bar i.won { background: var(--pink); }
.src-val { font-size: 13.5px; color: var(--ink-2); white-space: nowrap; }

.flows { display: grid; gap: 8px; }
.flow-row { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--paper); }
.flow-when { font-size: 12.5px; color: var(--ink-2); }
.flow-row b { grid-column: 1; font-size: 14.5px; font-weight: 600; }
.flow-row .state { grid-column: 2; grid-row: 1 / span 2; }

.tap { justify-items: center; text-align: center; }
.tap .ui-h { justify-self: stretch; text-align: start; }
.tap-amount { font-size: 40px; font-weight: 600; line-height: 1.1; }
.tap-ring { width: 96px; height: 96px; margin: 14px 0 8px; border-radius: 50%; display: grid; place-items: center; background: var(--blush); color: var(--pink-deep); box-shadow: 0 0 0 10px #FFF3F8, 0 0 0 20px #FFF9FB; }
.tap-ring svg { width: 44px; height: 44px; }

.fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.field { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--paper); }
.field span { font-size: 12px; color: var(--ink-2); }
.field b { font-size: 14px; font-weight: 600; }

.plan-row { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--rule); font-size: 14.5px; }
.ui-card .ui-h + .plan-row { border-top: 0; }
.plan-row b { font-size: 20px; font-weight: 600; }

.lee-head { display: flex; justify-content: space-between; align-items: center; }
.lee-logo { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }

.code-card { width: min(470px, 100%); overflow: hidden; border-radius: 16px; background: #1B0817; color: #F3E8EF; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); direction: ltr; text-align: left; }
.code-bar { display: flex; gap: 6px; padding: 12px 14px; background: rgba(255, 255, 255, .05); }
.code-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.code-card pre { margin: 0; padding: 14px 18px; overflow-x: auto; white-space: pre; font: 400 13.5px/1.65 var(--body); }
.code-req { color: #FF8FBF; border-bottom: 1px solid rgba(255, 255, 255, .08); }

.app-phone .phone-screen { background: #fff; }
.app-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 16px 12px; background: #F6F6F6; border-bottom: 1px solid rgba(17, 27, 33, .08); }
.app-head img { width: auto; height: 20px; }
.app-head b { font-size: 14px; font-weight: 600; }
.app-add { width: 28px; height: 28px; border-radius: 50%; background: var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.5v9M1.5 6h9' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.app-body { flex: 1; display: grid; align-content: start; gap: 10px; padding: 12px; }
.app-ev { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; border-inline-start: 3px solid var(--pink); background: var(--paper); font-size: 13px; }
.app-ev > .num { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.app-ev b { display: block; font-size: 14px; font-weight: 600; }
.app-ev div span { color: var(--ink-2); }
.app-tabs { display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 6px 26px; border-top: 1px solid rgba(17, 27, 33, .08); background: #F6F6F6; text-align: center; font-size: 11.5px; font-weight: 500; color: #8A8A8E; }
.app-tabs .on { color: var(--pink-deep); }

/* API page: what Pink connects to, a website bot, an AI assistant's answer */
.row-lead { margin-top: 8px; font-size: 19px; font-weight: 600; color: var(--pink-deep); }
.hub { position: relative; width: min(430px, 100%); aspect-ratio: 1; }
.hub-ring { position: absolute; inset: 11%; border-radius: 50%; border: 1.5px dashed rgba(224, 21, 111, .35); }
.hub-core { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; justify-items: center; gap: 6px; padding: 18px 24px; border-radius: 28px; background: var(--white); box-shadow: 0 24px 44px -24px rgba(42, 18, 32, .45); }
.hub-core img { width: 64px; height: 64px; border-radius: 16px; }
.hub-core b { font-size: 16px; font-weight: 700; }
.hub-sat { position: absolute; left: calc(50% + var(--cx) * var(--r, 39%)); top: calc(50% + var(--cy) * var(--r, 39%)); translate: -50% -50%; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--white); box-shadow: 0 12px 26px -16px rgba(42, 18, 32, .45); white-space: nowrap; font-size: 14px; }
.hub-sat svg { width: 22px; height: 22px; flex: none; color: var(--pink-deep); }
.hub-sat b { font-weight: 600; }
.chat-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.chat-head img { width: 34px; height: 34px; border-radius: 10px; }
.chat-head b { display: block; font-size: 15px; font-weight: 600; }
.chat-head span { font-size: 12.5px; color: var(--ink-2); }
.bubbles { display: grid; gap: 8px; }
.bubble { max-width: 86%; margin: 0; padding: 8px 12px; border-radius: 16px; font-size: 14px; line-height: 1.45; }
.bubble.in { justify-self: start; background: var(--blush); border-start-start-radius: 4px; }
.bubble.out { justify-self: end; background: var(--ink); color: #fff; border-start-end-radius: 4px; }
.ai-q { justify-self: end; max-width: 90%; margin: 0; padding: 10px 14px; border-radius: 16px; border-start-end-radius: 4px; background: var(--ink); color: #fff; font-size: 14.5px; line-height: 1.45; }
.ai-a { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.6; }
.ai-a p { margin: 0; }
.ai-spark { width: 28px; height: 28px; flex: none; border-radius: 9px; background: var(--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5l1.6 4.9 4.9 1.6-4.9 1.6L8 14.5l-1.6-4.9L1.5 8l4.9-1.6z' fill='%23fff'/%3E%3C/svg%3E") center / 15px no-repeat; }
.flow-row .state.soft { border: 1px solid var(--line); background: var(--white); color: var(--ink-2); }
@media (max-width: 600px) {
  .sol-visual { overflow: hidden; }
  .hub { --r: 31%; }
  .hub-ring { inset: 19%; }
  .hub-sat { padding: 6px 10px; gap: 6px; font-size: 12.5px; }
  .hub-sat svg { width: 18px; height: 18px; }
  .hub-core { padding: 14px 18px; }
  .hub-core img { width: 48px; height: 48px; }
}

/* API page: a sheet pulled from Pink, a week of income, what the API opens */
.rows-title { margin-bottom: 8px; }
.sheet-card { width: min(440px, 100%); }
.sheet-top { display: flex; align-items: center; gap: 10px; }
.sheet-icon { width: 32px; height: 32px; flex: none; border-radius: 8px; background: #1E8E3E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2.5' y='2.5' width='11' height='11' rx='1.5' fill='none' stroke='%23fff' stroke-width='1.4'/%3E%3Cpath d='M2.5 6.5h11M2.5 10h11M7 6.5v7' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E") center / 18px no-repeat; }
.sheet-top b { display: block; font-size: 15px; font-weight: 600; }
.sheet-top span { font-size: 12.5px; color: var(--ink-2); }
table.sheet { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sheet th { padding: 7px 8px; border: 1px solid var(--rule); background: var(--paper); text-align: start; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.sheet td { padding: 7px 8px; border: 1px solid var(--rule); }
.week { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; height: 160px; padding-top: 22px; }
.wk { display: grid; grid-template-rows: 1fr auto; align-items: end; justify-items: center; gap: 6px; height: 100%; }
.wk-bar { position: relative; width: 72%; border-radius: 6px 6px 2px 2px; background: #F6C3D8; }
.wk-bar.top { background: var(--pink); }
.wk-bar b { position: absolute; bottom: calc(100% + 4px); left: 50%; translate: -50% 0; font-size: 12px; font-weight: 600; white-space: nowrap; }
.wk-day { font-size: 12.5px; color: var(--ink-2); }
.buckets { display: grid; gap: 16px; }
@media (min-width: 860px) { .buckets { grid-template-columns: repeat(3, 1fr); } }
.bucket { display: grid; gap: 12px; align-content: start; padding: 26px; border-radius: 22px; background: var(--paper); }
.bucket svg { width: 42px; height: 42px; padding: 9px; border-radius: 12px; background: var(--white); color: var(--pink-deep); }
.bucket b { font-size: 20px; font-weight: 700; }
.bucket ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bucket li { position: relative; padding-inline-start: 18px; font-size: 16px; }
.bucket li::before { content: ""; position: absolute; inset-inline-start: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); }
.steps li b { font-size: 19px; font-weight: 700; }
.steps li span { color: var(--ink-2); }
.row-copy ul b { font-weight: 600; }

.sol-cards { display: grid; gap: 16px; }
@media (min-width: 760px) { .sol-cards { grid-template-columns: repeat(3, 1fr); } }
.sol-card { display: grid; gap: 8px; align-content: start; padding: 24px; border: 1.5px solid var(--line); border-radius: 20px; background: var(--white); color: var(--ink); text-decoration: none; transition: border-color .15s ease; }
.sol-card:hover { border-color: var(--pink); }
.sol-card svg { width: 40px; height: 40px; padding: 8px; border-radius: 12px; background: var(--blush); color: var(--pink-deep); }
.sol-card b { font-size: 19px; font-weight: 700; }
.sol-card span { font-size: 15.5px; color: var(--ink-2); }
@media (max-width: 600px) {
  .sol-visual { min-height: 0; padding: 32px 14px; }
  .sol-visual .float-card { display: none; }
  .fields { grid-template-columns: 1fr 1fr; }
}

/* Homepage reminders: the WhatsApp reminder, and the confirmation landing in tomorrow's diary */
.remind { position: relative; width: min(400px, 100%); padding-top: 134px; }
.remind-bubble { position: absolute; z-index: 2; top: 0; inset-inline-end: -14px; width: 290px; padding: 10px 12px 0; border-radius: 14px; border-start-start-radius: 4px; background: #fff; box-shadow: 0 16px 34px -18px rgba(42, 18, 32, .45); font-size: 13.5px; line-height: 1.45; }
.rb-from { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #11804A; }
.rb-from i { width: 8px; height: 8px; border-radius: 50%; background: #25D366; }
.remind-bubble p { margin: 4px 0 8px; }
.rb-btns { display: grid; grid-template-columns: 1fr 1fr; margin: 0 -12px; border-top: 1px solid #E9EDEF; }
.rb-btns span { padding: 8px 4px; text-align: center; font-size: 13px; font-weight: 500; color: #027EB5; }
.rb-btns span + span { border-inline-start: 1px solid #E9EDEF; }
.remind-cal { position: relative; z-index: 1; display: grid; gap: 8px; padding: 22px 18px 18px; border-radius: 18px; background: var(--white); box-shadow: 0 20px 44px -26px rgba(42, 18, 32, .5); }
.rc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.rc-head b { font-size: 16px; font-weight: 600; }
.rc-head > .flip { font-size: 13px; color: var(--ink-2); }
.rc-row { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--paper); font-size: 14px; }
.rc-row b { display: block; font-weight: 600; }
.rc-row .h { font-size: 13px; color: var(--ink-2); direction: ltr; text-align: end; }
.rc-row.now { background: var(--white); box-shadow: inset 0 0 0 1.5px var(--pink); }
.st { padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.st.ok { background: #DDF5E6; color: #136B3D; }
.st.wait { background: #FFF1C9; color: #7A5600; }
.flip { display: grid; }
.flip > span { grid-area: 1 / 1; justify-self: end; }
.flip .from { visibility: hidden; }
@media (max-width: 600px) {
  .remind { padding-top: 150px; }
  .remind-bubble { width: 252px; inset-inline-end: -6px; }
}

/* Homepage payments: tap to pay on the phone, and the receipt that goes out by WhatsApp */
.paid { --flip-at: 1.6s; position: relative; width: min(320px, 100%); display: grid; justify-items: center; }
.paid-card { position: relative; z-index: 2; width: 100%; display: grid; justify-items: center; gap: 8px; padding: 16px 16px 18px; border-radius: 20px; background: var(--white); box-shadow: 0 20px 44px -26px rgba(42, 18, 32, .5); text-align: center; }
.paid-card .client-line { justify-self: stretch; text-align: start; }
.paid-amount { font-size: 32px; font-weight: 600; line-height: 1.1; }
.paid .tap-ring { width: 64px; height: 64px; margin: 2px 0; box-shadow: 0 0 0 8px #FFF3F8; }
.paid .tap-ring svg { width: 30px; height: 30px; }
.paid-state { font-size: 14.5px; font-weight: 600; }
.paid-state > span { justify-self: center; }
.paid-state .from { font-weight: 500; color: var(--ink-2); }
.paid-state .to { color: #136B3D; }
.paid-methods { justify-content: center; }
.paid-receipt { position: relative; z-index: 1; width: 88%; margin-top: -14px; }
.paid-receipt .bill { padding-top: 24px; gap: 8px; }
.bill figcaption b { font-weight: 600; }

/* Everything included */
.included { display: grid; gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 720px) { .included { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
@media (min-width: 1040px) { .included { grid-template-columns: repeat(3, 1fr); } }
.inc { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.inc svg { width: 32px; height: 32px; color: var(--pink-deep); }
.inc b { display: block; font-size: 18px; }
.inc span { color: var(--ink-2); font-size: 16px; }

/* Logos and videos */
.logos { display: flex; flex-wrap: wrap; gap: 28px 48px; align-items: center; justify-content: center; }
.logos img { height: 56px; width: auto; opacity: .85; }
.videos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 900px) { .videos { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.video { display: block; position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 9 / 16; background: var(--band); }
.video img, .video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.video .play { position: absolute; inset: auto 12px 12px auto; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .92); display: grid; place-items: center; transition: transform .2s ease; }
.video .play::before { content: ""; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent var(--pink); margin-left: 4px; }
.video:hover .play { transform: scale(1.08); }

/* Plans */
.plans { display: grid; gap: 20px; }
@media (min-width: 860px) { .plans { grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; } }
.plan { background: var(--white); border: 1.5px solid var(--line); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 18px; }
/* when the button closes the card, it sits on the card's bottom edge, so buttons line up across a row */
.plan > .btn:last-child { margin-top: auto; }
.plans.one { grid-template-columns: minmax(0, 560px); }
.plan.featured { border-color: var(--pink); box-shadow: 0 24px 50px -32px rgba(224, 21, 111, .55); }
@media (min-width: 1000px) { .plans.three { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
/* three plans side by side share their rows, so names, prices and buttons line up even when one card's text runs longer */
@media (min-width: 1000px) {
  .plans.three > .plan { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 18px; }
  .plans.three.detailed > .plan { grid-row: span 7; }
}
.plans.three .price .num { font-size: 48px; }
.price.minor .num { font-size: 40px; }
.plan .fee { font-weight: 500; color: var(--ink-2); margin-top: -8px; }
.compare td.txt { font-size: 15px; font-weight: 500; }
.compare td.best { font-weight: 600; color: var(--pink-deep); }
.plan-name { font-weight: 600; font-size: 20px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plan-name em { font-style: normal; font-size: 13px; font-weight: 600; background: var(--blush); color: var(--pink-deep); border-radius: 999px; padding: 2px 10px; }
.price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price .num { font-family: var(--display); font-size: 56px; line-height: 1; font-weight: 600; }
.price span { color: var(--ink-2); font-weight: 500; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; align-content: start; }
.plan li { position: relative; padding-inline-start: 28px; }
.plan li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--pink); font-weight: 600; }
.plan li.plus { font-weight: 600; }
.plan .btn { width: 100%; }

/* Compare table */
.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
table.compare { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 16.5px; }
.compare th, .compare td { padding: 13px 18px; text-align: start; border-bottom: 1px solid var(--line); }
.compare thead th { font-size: 15px; color: var(--ink-2); background: var(--paper); }
.compare tbody th { font-weight: inherit; }
.compare td:not(:first-child), .compare th:not(:first-child) { text-align: center; width: 22%; }
.compare tr:last-child td, .compare tbody tr:last-child th { border-bottom: 0; }
.yes { color: var(--pink); font-weight: 600; }
.no { color: var(--ink-2); }

/* FAQ */
/* FAQ: a white panel, each question a card with a round +/− button; long lists grouped under topics */
.faq-section { background: var(--paper); }
.faq-panel { max-width: 1000px; margin-inline: auto; padding: clamp(28px, 5vw, 56px) clamp(16px, 5vw, 64px); border-radius: 28px; background: var(--white); }
.faq-panel > h2 { text-align: center; }
.faq { display: grid; gap: 14px; }
.faq details { border: 1px solid var(--line); border-radius: 14px; background: var(--white); transition: border-color .2s ease; }
.faq details[open] { border-color: #F2B7CF; }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; font-weight: 600; font-size: 17px; line-height: 1.45; }
.faq summary::-webkit-details-marker, .faq-topic > summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.5v9M1.5 6h9' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px no-repeat;
  transition: background-color .2s ease;
}
.faq details[open] summary::after { background-color: var(--pink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6h9' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.faq details p { margin-top: -4px; padding: 0 20px 18px; color: var(--ink-2); font-size: 16.5px; line-height: 1.7; max-width: 70ch; }
.faq-topics { display: grid; }
.faq-topic + .faq-topic { border-top: 1px solid var(--rule); }
.faq-topic > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 4px; font-weight: 700; font-size: 19px; }
.faq-topic > summary::after { content: "+"; content: "+" / ""; font-weight: 400; font-size: 28px; line-height: 1; }
.faq-topic[open] > summary::after { content: "−"; content: "−" / ""; }
.faq-topic > .faq { padding-bottom: 20px; }

/* Steps (a real sequence) */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; counter-reset: s; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.steps li { counter-increment: s; display: grid; gap: 8px; align-content: start; }
.steps li::before { content: counter(s); font-family: var(--display); font-size: 44px; line-height: 1; font-weight: 600; color: var(--pink); }

/* Day timeline */
.day { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-inline-start: 2px solid var(--line); }
.day li { position: relative; padding: 0 28px 28px; display: grid; gap: 2px; }
.day li::before { content: ""; position: absolute; inset-inline-start: -8px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--white); border: 3px solid var(--pink); }
.day .when { font-family: var(--display); font-size: 22px; line-height: 1.1; font-weight: 600; color: var(--pink-deep); direction: ltr; text-align: end; justify-self: start; }
.day b { font-size: 18px; }
.day span { color: var(--ink-2); }

/* Calculator teaser */
.calc-note { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }

/* Proof placeholder: visibly unfinished until real quotes arrive */
.todo {
  border: 2px dashed var(--pink);
  border-radius: 18px;
  padding: 22px;
  background: var(--white);
  display: grid;
  gap: 6px;
}
.todo b { color: var(--pink-deep); }

/* Final CTA */
.cta-band .display { font-size: clamp(36px, 6.4vw, 68px); }
.cta-band .btn-row { justify-content: center; margin-top: 8px; }

/* Footer */
.site-footer { background: var(--band); color: var(--band-ink); padding-block: 56px 32px; font-size: 16px; }
.footer-grid { display: grid; gap: 32px; }
@media (min-width: 560px) and (max-width: 899px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.3fr repeat(4, 1fr); } }
.site-footer h2 { margin: 0 0 12px; font-size: 15px; font-weight: 700; opacity: .7; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer a { color: var(--band-ink); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .logo { color: var(--band-ink); }
.footer-bottom { padding-inline-end: 76px; margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; font-size: 14.5px; opacity: .8; }
.tax-badge { display: inline-flex; align-items: center; gap: 10px; }
.tax-badge img { width: 40px; height: 40px; border-radius: 50%; background: #fff; padding: 3px; }

/* Compare pages (vs-*.html, compare.html): ad landing pages, so a slim header with one action */
.site-header.slim .header-actions .login { display: inline-block; }
.vs-chip { display: inline-flex; align-items: center; gap: 10px; background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding-block: 6px; padding-inline: 8px 16px; font-weight: 600; font-size: 16px; margin: 0; }
.vs-chip img { width: 28px; height: 28px; border-radius: 8px; }
.vs-chip i { font-style: normal; font-weight: 600; color: var(--ink-2); }
.vs-hero .display { font-size: clamp(36px, 6vw, 64px); margin-top: 18px; text-wrap: balance; }
.vs-hero .display span { text-wrap: balance; }

/* Two bills: the same month at the competitor and at Pink */
.bills { position: relative; display: grid; gap: 0; max-width: 520px; margin-inline: auto; width: 100%; }
.bill-wrap { filter: drop-shadow(0 18px 26px rgba(42, 18, 32, .22)); }
.bill {
  --z: 9px;
  margin: 0;
  background: var(--white);
  padding: 22px 22px calc(22px + var(--z));
  display: grid;
  gap: 10px;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--z)) 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--z)) 100%;
}
.bill figcaption { font-weight: 600; font-size: 17px; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.bill figcaption span { font-size: 13.5px; color: var(--ink-2); font-weight: 500; }
.bill ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.bill li { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-top: 1px dashed var(--line); font-size: 15.5px; line-height: 1.35; }
.bill li > .num { font-weight: 600; white-space: nowrap; }
.bill li .inc-tag { font-weight: 600; color: #136B3D; white-space: nowrap; }
.bill-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 2px solid var(--ink); padding-top: 10px; }
.bill-total b { font-weight: 600; }
.bill-total .num { font-family: var(--display); font-size: 40px; line-height: 1; font-weight: 600; }
.bill-them { transform: rotate(-1.6deg); }
.bill-them .bill { background: #FBF8F9; }
.bill-them .bill-total .num { color: var(--ink-2); }
.bill-pink { width: 88%; justify-self: end; margin-top: -26px; transform: rotate(1.2deg); position: relative; z-index: 1; }
.bill-pink .bill { box-shadow: inset 0 5px 0 var(--pink); }
.bill-pink .bill-total .num { color: var(--pink-deep); }
.bill-save { justify-self: center; margin-top: 22px; display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap; justify-content: center; background: var(--band); color: var(--band-ink); border-radius: 999px; padding: 10px 22px; font-weight: 600; font-size: 16px; line-height: 1.2; transform: rotate(-1.5deg); box-shadow: 0 14px 26px -16px rgba(42, 18, 32, .6); }
.bill-save .num { font-family: var(--display); font-size: 28px; line-height: 1; font-weight: 600; color: #FF8FBF; }
.report-bill { width: min(360px, 100%); }
.report-bill .bill { box-shadow: inset 0 5px 0 var(--pink); }
.report-bill .bill-total .num { font-size: 34px; color: var(--pink-deep); }
.bill-foot { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; font-size: 13.5px; color: var(--ink-2); }
.bill-foot .ok { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #DDF5E6; color: #136B3D; font-size: 12px; font-weight: 600; }
.bill-note { font-size: 14px; color: var(--ink-2); margin-top: 14px; text-align: center; max-width: 52ch; justify-self: center; }
@media (max-width: 600px) {
  .bill { padding-inline: 16px; }
  .bill-pink { width: 94%; }
  .bill-total .num { font-size: 34px; }
}

/* Three reasons */
.reasons { display: grid; gap: 18px; }
@media (min-width: 900px) { .reasons { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.reason { background: var(--white); border: 1px solid var(--line); border-radius: 22px; padding: 26px; display: grid; gap: 10px; align-content: start; }
.reason svg { width: 36px; height: 36px; color: var(--pink-deep); }
.reason p { color: var(--ink-2); }

/* Feature table: Pink column highlighted, header sticks under the site header */
.vs-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 16.5px; background: var(--white); border: 1px solid var(--line); border-radius: 18px; }
.vs-table col.c-feat { width: 38%; }
.vs-table th, .vs-table td { padding: 13px 16px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--line); line-height: 1.4; }
.vs-table thead th { position: sticky; top: 68px; z-index: 5; background: var(--white); vertical-align: middle; border-bottom: 2px solid var(--line); padding-block: 14px; }
.vs-table thead th:first-child { border-start-start-radius: 18px; }
.vs-table thead th:last-child { border-start-end-radius: 18px; }
.vs-table thead .brand-cell { display: grid; gap: 8px; justify-items: start; }
.vs-table thead .brand-cell img { height: 30px; width: auto; }
.vs-table thead .brand-cell .btn { min-height: 40px; padding: 0 14px; font-size: 15px; }
.vs-table thead .them-name { font-family: var(--display); font-size: 24px; line-height: 1.1; font-weight: 700; }
.vs-table .pink-col { background: #FFF2F7; }
.vs-table thead th.pink-col { background: #FFF2F7; box-shadow: inset 0 4px 0 var(--pink); }
.vs-table tbody th { font-weight: 500; }
.vs-table tr.group th { background: var(--paper); font-size: 14.5px; font-weight: 600; color: var(--pink-deep); padding-block: 9px; }
.vs-table tbody tr:last-child th, .vs-table tbody tr:last-child td { border-bottom: 0; }
.vs-table td .v { display: flex; gap: 8px; align-items: flex-start; }
.vs-table td .v small { display: block; font-size: 14.5px; color: var(--ink-2); font-weight: 500; }
.vs-table td.pink-col .v small { color: var(--ink); }
.mark { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 13px; font-weight: 600; margin-top: 1px; }
.mark.yes { background: var(--pink); color: #fff; }
.mark.yes::before { content: "✓"; }
.mark.no { background: #EEE6EA; color: var(--ink-2); }
.mark.no::before { content: "✕"; font-size: 11px; }
.mark.part { border: 2px solid #C9A3B6; color: #8A6B7B; }
.mark.part::before { content: "−"; }
.vs-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14.5px; color: var(--ink-2); margin-top: 14px; }
.vs-legend span { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 600px) {
  .vs-table { font-size: 14.5px; }
  .vs-table col.c-feat { width: 34%; }
  .vs-table th, .vs-table td { padding: 11px 8px; }
  .vs-table td .v { flex-direction: column; gap: 4px; }
  .vs-table td .v small { font-size: 13px; }
  .vs-table thead .brand-cell .btn { display: none; }
  .vs-table thead .brand-cell img { height: 24px; }
  .vs-table thead .them-name { font-size: 20px; }
  .mark { width: 20px; height: 20px; }
}

/* Sources and small print */
.sources { font-size: 14.5px; color: var(--ink-2); display: grid; gap: 6px; max-width: 860px; }
.sources a { color: var(--ink-2); }

/* Hub: one card per competitor */
.vs-cards { display: grid; gap: 18px; }
@media (min-width: 720px) { .vs-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .vs-cards { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.vs-card { background: var(--white); border: 1.5px solid var(--line); border-radius: 22px; padding: 24px; display: grid; gap: 12px; align-content: start; text-decoration: none; color: var(--ink); transition: border-color .15s ease, transform .15s ease; }
.vs-card:hover { border-color: var(--pink); transform: translateY(-2px); }
.vs-card .them-name { font-family: var(--display); font-size: 30px; line-height: 1.1; font-weight: 700; }
.vs-card .them-name span { color: var(--ink-2); font-size: .6em; }
.vs-card .price-line { font-weight: 500; color: var(--ink-2); font-size: 16px; }
.vs-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vs-card li { position: relative; padding-inline-start: 26px; font-size: 16px; }
.vs-card li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--pink); font-weight: 600; }
.vs-card .go { font-weight: 600; color: var(--pink-deep); margin-top: 4px; }

/* Motion. site.js adds .motion to <html> only for visitors who haven't asked for reduced motion,
   so without it every element below shows in its final state. */
@keyframes breathe { from { scale: 1.03; } to { scale: 1.07; } }
@keyframes rise { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes bob { from { translate: 0 0; } to { translate: 0 -5px; } }
@keyframes tap { 40% { background: #D7ECFA; } }
@keyframes strike { from { scale: 0 1; } to { scale: 1 1; } }

/* Hero photo breathes slowly and drifts a few pixels with the scroll (--drift is set by site.js) */
.motion .stage-photo > img,
.motion .stage-photo > video { animation: breathe 24s ease-in-out infinite alternate; translate: 0 var(--drift, 0px); }
.stage-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.stage-video.on { opacity: 1; }
/* Pause button for the hero, which keeps moving (WCAG 2.2.2). site.js adds it under the photo and stops all motion on the page */
.motion-toggle { position: absolute; z-index: 4; bottom: 6px; inset-inline-end: 0; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--white); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 8px 20px -10px rgba(42, 18, 32, .45); cursor: pointer; }
.motion-toggle:hover { color: var(--pink-deep); }
.motion-toggle svg { width: 16px; height: 16px; fill: currentColor; }

/* Hero chat plays out once: messages arrive in order, the reply is tapped, then the cards appear and float */
.motion .stage .wa-body > :not(.wa-day),
.motion .stage .float-card { opacity: 0; }
.motion .stage.play .wa-body > :not(.wa-day) { animation: rise .5s cubic-bezier(.2, .7, .3, 1) both; }
.motion .stage.play .wa-btns span:first-child { animation: tap .8s ease both; }
/* Reminders graphic: the reminder arrives, "מגיעה" is tapped, then Noa's slot and the day's count flip to confirmed */
@keyframes flip-out { to { opacity: 0; scale: .9; } }
@keyframes flip-in { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
@keyframes now-ring { from { box-shadow: inset 0 0 0 1.5px var(--pink), 0 0 0 0 rgba(224, 21, 111, .3); } to { box-shadow: inset 0 0 0 1.5px var(--pink), 0 0 0 12px rgba(224, 21, 111, 0); } }
.motion .remind .remind-bubble { opacity: 0; }
.motion .remind.play .remind-bubble { animation: rise .5s cubic-bezier(.2, .7, .3, 1) .3s both; }
.motion .remind.play .rb-yes { animation: tap .8s ease 1.4s both; }
.motion [data-play] .flip .from { visibility: visible; }
.motion [data-play] .flip .to { opacity: 0; }
.motion [data-play].play .flip .from { animation: flip-out .3s ease var(--flip-at, 2.2s) forwards; }
.motion [data-play].play .flip .to { animation: flip-in .4s ease var(--flip-at, 2.2s) forwards; }
.motion .remind.play .rc-row.now { animation: now-ring 1s ease 2.2s both; }
/* Payments graphic: the card is tapped, "שולם" appears, then the receipt slides out */
@keyframes print { from { opacity: 0; translate: 0 -46px; } to { opacity: 1; translate: 0 0; } }
.motion .paid .paid-receipt { opacity: 0; }
.motion .paid.play .paid-receipt { animation: print .7s cubic-bezier(.2, .7, .3, 1) calc(var(--flip-at) + .3s) both; }
/* Punch card: the used entries are punched one after another when the card comes into view */
@keyframes punch { 0% { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 2px var(--line); scale: .9; } 60% { scale: 1.12; } 100% { background: var(--pink); color: #fff; box-shadow: none; scale: 1; } }
.motion .ui-card:not(.play) .punch-dot.used { background: transparent; color: var(--ink-2); border: 2px dashed var(--line); }
.motion .ui-card.play .punch-dot.used { animation: punch .45s cubic-bezier(.3, .7, .4, 1.3) both; }
.motion .ui-card.play .punch-dot:nth-child(1) { animation-delay: 0.45s; }
.motion .ui-card.play .punch-dot:nth-child(2) { animation-delay: 0.57s; }
.motion .ui-card.play .punch-dot:nth-child(3) { animation-delay: 0.69s; }
.motion .ui-card.play .punch-dot:nth-child(4) { animation-delay: 0.81s; }
.motion .ui-card.play .punch-dot:nth-child(5) { animation-delay: 0.93s; }
.motion .ui-card.play .punch-dot:nth-child(6) { animation-delay: 1.05s; }
.motion .ui-card.play .punch-dot:nth-child(7) { animation-delay: 1.17s; }
.motion .ui-card.play .punch-dot:nth-child(8) { animation-delay: 1.29s; }
.motion .ui-card.play .punch-dot:nth-child(9) { animation-delay: 1.41s; }
.motion .ui-card.play .punch-dot:nth-child(10) { animation-delay: 1.53s; }
.motion .ui-card.play .punch-dot:nth-child(11) { animation-delay: 1.65s; }
.motion .ui-card.play .punch-dot:nth-child(12) { animation-delay: 1.77s; }
/* Tap-to-pay ring pulses twice when it comes into view, as a card reader would. Under five seconds, so it needs no pause button */
@keyframes pulse { from { box-shadow: 0 0 0 0 rgba(224, 21, 111, .28); } to { box-shadow: 0 0 0 26px rgba(224, 21, 111, 0); } }
.motion .play .tap-ring { animation: pulse 2.2s ease-out 2; }
/* The model marks behind the AI phone float slowly, out of step with each other */
.motion .ai-mark { animation: bob 7s ease-in-out infinite alternate; }
.motion .ai-openai { animation-duration: 8.5s; animation-delay: -3s; }
/* The template first arrives as a notification at the top of the phone */
@keyframes banner { 0% { opacity: 0; translate: 0 -150%; } 14%, 80% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -150%; } }
.motion .stage .wa-banner { position: absolute; z-index: 5; top: 44px; left: 8px; right: 8px; display: flex; align-items: flex-start; gap: 9px; padding: 9px 11px; border-radius: 20px; background: rgba(250, 250, 250, .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .35); font-size: 12px; line-height: 1.35; opacity: 0; }
.motion .stage.play .wa-banner { animation: banner 2.4s cubic-bezier(.2, .7, .3, 1) .3s both; }
.motion .stage.play .float-card { animation: rise .6s cubic-bezier(.2, .7, .3, 1) both, bob 6s ease-in-out infinite alternate; }

/* No-show diary: the cancelled appointments are struck out one by one, then the weekly loss appears */
.motion .diary-row.gone .e::after { scale: 0 1; transform-origin: right center; }
.motion .diary.play .diary-row.gone .e::after { animation: strike .45s ease-out var(--d, 0s) forwards; }
.motion .diary .diary-sum .total { opacity: 0; }
.motion .diary.play .diary-sum .total { animation: rise .6s ease var(--total-d, 0s) both; }

/* App cards rise gently into place as they scroll into view */
.motion .ui-card { opacity: 0; translate: 0 14px; transition: opacity .7s ease, translate .7s cubic-bezier(.2, .7, .3, 1); }
.motion .ui-card.play { opacity: 1; translate: 0 0; }
.motion .sol-visual > .ui-card { opacity: 1; translate: 0 0; transition: none; }

/* Social links in the footer */
.socials { display: flex; gap: 10px; margin-top: 4px; }
.site-footer .socials a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, .08); transition: background-color .15s ease; }
.site-footer .socials a:hover { background: var(--pink); text-decoration: none; }
.socials svg { width: 20px; height: 20px; fill: currentColor; }

/* Login page: one card for business owners, one for their clients */
.login .hero-title { margin-top: 0; }
.login-cards { display: grid; gap: 20px; }
@media (min-width: 860px) { .login-cards { grid-template-columns: 1fr 1fr; } }
.login-card { display: grid; gap: 14px; align-content: start; padding: clamp(24px, 4vw, 40px); border: 1px solid var(--line); border-radius: 26px; background: var(--white); }
.login-mark { width: 56px; height: 56px; border-radius: 16px; }
.login-mark.lee { display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.login-card h2 { font-size: 28px; font-weight: 700; }
.login-card p { max-width: 46ch; color: var(--ink-2); }
.login-qr { display: flex; align-items: center; gap: 16px; padding: 14px; border-radius: 16px; background: var(--paper); font-size: 14.5px; color: var(--ink-2); }
.login-qr img { width: 120px; height: 120px; flex: none; padding: 6px; border-radius: 10px; background: #fff; }
@media (max-width: 859px) { .login-qr { display: none; } }
.login-more { font-size: 15.5px; }
.login-more a { color: var(--pink-deep); font-weight: 600; }

/* WhatsApp button and popup (site.js adds the markup) */
.wa-widget { position: fixed; z-index: 60; inset-inline-end: 20px; bottom: 20px; display: grid; justify-items: end; gap: 12px; }
.wa-fab { width: 60px; height: 60px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #25D366; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .45); cursor: pointer; transition: transform .2s ease; }
.wa-fab:hover { transform: scale(1.05); }
.wa-fab i, .wa-go i { display: block; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.wa-fab i { width: 30px; height: 30px; }
.wa-fab[aria-expanded="true"] i { width: 22px; height: 22px; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.wa-teaser { max-width: 230px; margin: 0; padding: 10px 14px; border-radius: 16px; border-end-start-radius: 4px; background: var(--white); box-shadow: 0 14px 30px -14px rgba(42, 18, 32, .45); font-size: 14.5px; font-weight: 500; }
.wa-teaser[hidden], .wa-panel[hidden] { display: none; }
.wa-panel { width: min(360px, calc(100vw - 32px)); overflow: hidden; border-radius: 22px; background: var(--white); box-shadow: 0 30px 70px -30px rgba(42, 18, 32, .6), 0 0 0 1px rgba(42, 18, 32, .06); transform-origin: bottom left; animation: wa-in .22s cubic-bezier(.2, .7, .3, 1); }
@keyframes wa-in { from { opacity: 0; scale: .94; translate: 0 8px; } }
.wa-panel-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--band); color: #fff; }
.wa-panel-head img { width: 40px; height: 40px; border-radius: 12px; }
.wa-panel-head b { display: block; font-size: 16px; font-weight: 700; }
.wa-panel-head span { font-size: 13.5px; opacity: .8; }
.wa-close { width: 32px; height: 32px; margin-inline-start: auto; flex: none; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); cursor: pointer; display: grid; place-items: center; }
.wa-close::before { content: ""; width: 12px; height: 12px; background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.wa-form { display: grid; gap: 12px; padding: 18px; }
.wa-form fieldset { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
.wa-opt { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.wa-opt:has(input:checked) { border-color: var(--pink); background: var(--paper); }
.wa-opt input { appearance: none; width: 20px; height: 20px; flex: none; margin: 2px 0 0; display: grid; place-items: center; border: 2px solid var(--line); border-radius: 50%; }
.wa-opt input:checked { border-color: var(--pink); }
.wa-opt input:checked::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--pink); }
.wa-opt input:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.wa-opt b { display: block; font-size: 15.5px; font-weight: 600; }
.wa-opt span { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.wa-go { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; border: 0; border-radius: 14px; background: #11804A; color: #fff; font: 600 16.5px/1 var(--body); cursor: pointer; }
.wa-go:hover { background: #0D6B3D; }
.wa-go i { width: 20px; height: 20px; }
.wa-field { display: grid; gap: 6px; }
.wa-field[hidden] { display: none; }
.wa-field label { font-size: 14.5px; font-weight: 600; }
.wa-field input { width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--white); color: var(--ink); font: 400 16px/1.2 var(--body); text-align: right; }
.wa-field input::placeholder { color: #A8939F; }
.wa-field input:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px var(--blush); }
.wa-field input[aria-invalid="true"] { border-color: #C4282D; }
.wa-error { margin: 0; font-size: 13px; font-weight: 500; color: #B3261E; }
.wa-error[hidden] { display: none; }
.wa-note { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.wa-note a { color: inherit; text-decoration: underline; }
@media (max-width: 600px) {
  .wa-widget { inset-inline-end: 14px; bottom: 14px; }
  .wa-fab { width: 54px; height: 54px; }
}

/* Legal pages (terms.html, privacy.html): a quiet reading page with the contents on the side */
.legal-hero { padding-block: 48px 36px; background: var(--paper); border-bottom: 1px solid var(--line); }
.legal-hero .display { font-size: clamp(36px, 5vw, 54px); }
.legal-meta { margin: 0; font-size: 15px; color: var(--ink-2); }
.legal-switch { display: inline-flex; flex-wrap: wrap; justify-self: start; gap: 4px; padding: 4px; margin-bottom: 8px; background: var(--white); border: 1px solid var(--line); border-radius: 24px; }
.legal-switch a { padding: 8px 16px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--ink-2); text-decoration: none; }
.legal-switch a:hover { color: var(--ink); background: var(--paper); }
.legal-switch a[aria-current="page"] { background: var(--band); color: #fff; font-weight: 600; }
@media (max-width: 599px) { .legal-switch a { padding: 8px 11px; font-size: 14px; } }
.legal-grid { display: grid; gap: 40px; padding-block: 40px 80px; }
.legal-toc { display: none; }
.legal-toc ol, .legal-toc-m ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.legal-toc a, .legal-toc-m a { display: flex; gap: 10px; align-items: baseline; padding: 7px 10px; border-radius: 10px; font-size: 15px; line-height: 1.45; color: var(--ink-2); text-decoration: none; }
.legal-toc a:hover, .legal-toc-m a:hover { background: var(--paper); color: var(--ink); }
.legal-toc a[aria-current="true"] { background: var(--blush); color: var(--pink-deep); font-weight: 600; }
.legal-toc .n, .legal-toc-m .n { flex: none; min-width: 1.4em; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.legal-toc-h { margin: 0 0 8px; padding-inline: 10px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.legal-doc { min-width: 0; max-width: 70ch; font-size: 17px; line-height: 1.8; }
.legal-summary { padding: 24px 26px; background: var(--blush); border-radius: 18px; }
.legal-summary h2 { margin: 0 0 10px; font-size: 22px; }
.legal-summary ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.legal-summary li { position: relative; padding-inline-start: 30px; line-height: 1.6; }
.legal-summary li::before { content: "✓"; position: absolute; inset-inline-start: 0; top: .15em; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--pink); color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }
.legal-summary .fine { margin: 0; font-size: 14px; }
.legal-toc-m { margin-top: 20px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; }
.legal-toc-m summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; font-weight: 600; cursor: pointer; }
.legal-toc-m summary::-webkit-details-marker { display: none; }
.legal-toc-m summary::after { content: "+"; font-size: 22px; font-weight: 400; line-height: 1; color: var(--ink-2); }
.legal-toc-m[open] summary::after { content: "−"; }
.legal-toc-m ol { padding: 0 6px 10px; }
.legal-sec { padding-top: 36px; margin-top: 36px; border-top: 1px solid var(--rule); scroll-margin-top: 84px; }
.legal-summary + .legal-toc-m + .legal-sec { border-top: 0; margin-top: 12px; }
.legal-sec h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 24px; line-height: 1.3; }
.legal-sec h2 .n { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--white); border: 1px solid var(--line); font-size: 15px; font-weight: 600; color: var(--pink-deep); font-variant-numeric: tabular-nums; }
.legal-sec p { margin: 0 0 14px; }
.legal-sec ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.legal-sec li { position: relative; padding-inline-start: 22px; }
.legal-sec li::before { content: ""; position: absolute; inset-inline-start: 4px; top: .78em; width: 6px; height: 6px; border-radius: 50%; background: var(--pink); }
.legal-sec a, .legal-summary a { color: var(--pink-deep); }
.legal-sec [data-consent-open] { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--pink-deep); text-decoration: underline; cursor: pointer; }
.legal-note { margin: 36px 0 0; padding-top: 20px; border-top: 1px solid var(--rule); font-size: 15px; color: var(--ink-2); }
.legal-contact { display: grid; gap: 18px; margin-top: 36px; padding: 28px; border-radius: 20px; background: var(--band); color: var(--band-ink); }
.legal-contact h2 { margin: 0; font-size: 24px; color: #fff; }
.legal-contact p { margin: 0; opacity: .85; }
.legal-contact a { color: inherit; }
.legal-contact .btn-primary { color: #fff; }
@media (min-width: 1000px) {
  .legal-hero { padding-block: 64px 44px; }
  .legal-grid { grid-template-columns: 250px minmax(0, 1fr); gap: 64px; padding-block: 56px 96px; }
  .legal-toc { display: block; position: sticky; top: 92px; align-self: start; max-height: calc(100vh - 110px); overflow-y: auto; }
  .legal-toc-m { display: none; }
  .legal-summary + .legal-toc-m + .legal-sec { margin-top: 0; }
  .legal-contact { grid-template-columns: 1fr auto; align-items: center; }
}

/* Pricing payback: the two no-shows a month that cover the plan and card clearing */
.band .row-visual.plain { background: transparent; padding: 0; min-height: 0; overflow: visible; }
.payback { width: min(390px, 100%); color: var(--ink); gap: 14px; padding: 22px; }
.pb-bar { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; padding-top: 30px; }
.pb-two, .pb-more { display: grid; gap: 8px; }
.pb-track { position: relative; height: 16px; border-radius: 999px; background: #3FB772; }
.pb-two .pb-track { background: linear-gradient(to left, #3FB772 calc(50% - 1px), var(--white) 0 calc(50% + 1px), #3FB772 0); }
.pb-cost { position: absolute; inset-block: 0; right: 0; width: 74%; background: #F2B9D1; border-radius: 0 999px 999px 0; }
.pb-two .pb-cost::after { content: ""; position: absolute; inset-block: 0; right: calc(50% / .74 - 1px); width: 2px; background: var(--white); }
.pb-more .pb-track { background: transparent; border: 1.5px dashed #8FCBA6; }
.pb-labels { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; text-align: center; font-size: 12px; line-height: 1.3; color: var(--ink-2); }
.pb-labels b { display: block; font-size: 18px; font-weight: 600; color: var(--ink); }
.pb-more .pb-labels, .pb-more .pb-labels b { color: #136B3D; }
.pb-mark { position: absolute; z-index: 2; top: -30px; bottom: -3px; right: 74%; width: 0; border-right: 2px solid var(--ink); }
.pb-mark em { position: absolute; top: 0; right: 0; transform: translateX(50%); white-space: nowrap; padding: 3px 9px; border-radius: 999px; background: var(--ink); color: #fff; font-style: normal; font-size: 12px; font-weight: 600; }
.pb-lines { margin: 0; display: grid; }
.pb-lines div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px dashed var(--line); font-size: 14.5px; }
.pb-lines dt { color: var(--ink-2); }
.pb-lines dd { margin: 0; font-weight: 600; }
.pb-note { margin: -4px 0 0; font-size: 12.5px; color: var(--ink-2); }
@keyframes pb-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.motion .payback .pb-cost { transform: scaleX(0); transform-origin: right; }
.motion .payback.play .pb-cost { animation: pb-fill .9s cubic-bezier(.2, .7, .3, 1) .35s both; }
.motion .payback .pb-mark, .motion .payback .pb-more { opacity: 0; }
.motion .payback.play .pb-mark { animation: rise .45s ease 1.2s both; }
.motion .payback.play .pb-more { animation: rise .45s ease 1.5s both; }