/**
 * Features page explorer (partials/feature_explorer). Cards with a small mockup; an open card spans the row and shows
 * the details beside an animated mockup. Mockups are sized in em: the card preview sets a small font size, the open
 * card a larger one. Animations run only inside .fx-play (the open card) and never with reduced motion.
 */
.fx {
  --fx-ink: #1f2933;
  --fx-dim: #5c6e69;
  --fx-line: #e3ebe8;
  --fx-teal: #006b5f;
  --fx-green: #0b7a52; /* 4.5:1 on white for the small category line */
  --fx-mint: #eef6f1;
  --fx-wa: #25d366;
  --fx-cycle: 9s;
  padding: 56px 0 100px;
  background: #f7faf9;
}
html body:not(#_z) .fx,
html body:not(#_z) .fx * { -webkit-text-fill-color: currentColor; }
/* apple-style.css forces every p, span and label to one grey with !important; inside the explorer (cards and mockups are
   built from spans) text inherits instead, and every colour rule below is scoped to .fx with !important so it wins. */
html body:not(#_z) .fx :is(p, span, label, td, th) { color: inherit !important; }


/* ---------- Search and category chips ---------- */
.fx-bar {
  position: sticky;
  top: 78px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-bottom: 28px;
  padding: 12px;
  border: 1px solid var(--fx-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
html body:not(#_z) .fx .fx-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 240px;
  max-width: 340px;
  height: 44px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--fx-line);
  border-radius: 12px;
  background: #fff;
  color: var(--fx-dim) !important;
}
.fx-search:focus-within { border-color: var(--fx-teal); box-shadow: 0 0 0 3px rgba(0, 107, 95, .12); }
.fx-search i { font-size: 18px; }
/* The site-wide form styles give every input its own box; inside this field it should be bare */
html body:not(#_z) .fx .fx-search input { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0 !important; border: 0 !important; border-radius: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; color: var(--fx-ink) !important; font-size: 15px; }
.fx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
html body:not(#_z) .fx .fx-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--fx-line);
  border-radius: 999px;
  background: #fff;
  color: var(--fx-ink) !important;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
html body:not(#_z) .fx .fx-chip span { color: var(--fx-dim) !important; font-weight: 500; font-variant-numeric: tabular-nums; }
.fx-chip:hover { border-color: #b9cdc6; }
html body:not(#_z) .fx .fx-chip.is-active { background: var(--fx-teal); border-color: var(--fx-teal); color: #fff !important; }
html body:not(#_z) .fx .fx-chip.is-active span { color: rgba(255, 255, 255, .78) !important; }
.fx-chip:focus-visible, .fx-card__head:focus-visible, .fx-detail__close:focus-visible { outline: 2px solid var(--fx-teal); outline-offset: 2px; }
@media (max-width: 767px) {
  .fx-bar { top: 64px; padding: 10px; }
  .fx-grid .fx-card { scroll-margin-top: 190px; }
  .fx-search { max-width: none; }
  .fx-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -10px; padding: 0 10px 2px; scrollbar-width: none; }
  .fx-chips::-webkit-scrollbar { display: none; }
  .fx-chip { flex: none; }
}

/* ---------- Cards ---------- */
.fx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; grid-auto-flow: dense; }
@media (max-width: 991px) { .fx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .fx-grid { grid-template-columns: 1fr; } }

.fx-card {
  scroll-margin-top: 220px; /* below the site header and the sticky filter bar */
  border: 1px solid var(--fx-line);
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.fx-card[hidden] { display: none; }
.fx-card:hover { border-color: #c9dad4; box-shadow: 0 14px 30px -18px rgba(16, 60, 50, .25); }
.fx-card__head {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.fx-card__mock {
  display: block;
  height: 196px;
  padding: 16px 16px 0;
  overflow: hidden;
  background: var(--fx-mint);
  font-size: 7.6px;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 78%, transparent);
  mask-image: linear-gradient(#000 78%, transparent);
}
.fx-card__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 18px 20px 20px; }
html body:not(#_z) .fx .fx-card__cat { display: inline-flex; align-items: center; gap: 6px; color: var(--fx-green) !important; font-size: 12.5px; font-weight: 600; }
.fx-card__cat i { font-size: 16px; }
html body:not(#_z) .fx .fx-card__title { color: var(--fx-ink) !important; font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
html body:not(#_z) .fx .fx-card__summary { color: var(--fx-dim) !important; font-size: 14.5px; line-height: 1.55; }
html body:not(#_z) .fx .fx-card__more { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 8px; color: var(--fx-teal) !important; font-size: 14px; font-weight: 600; }
.fx-card__more i { transition: transform .2s; }
.fx-card__head:hover .fx-card__more i { transform: translateY(2px); }

/* Open card: takes the whole row, the preview gives way to the detail */
.fx-card.is-open { grid-column: 1 / -1; border-color: #bfd6ce; box-shadow: 0 24px 50px -28px rgba(16, 60, 50, .35); }
.fx-card.is-open .fx-card__head { display: none; }
.fx-detail { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.fx-detail[hidden] { display: none; }
.fx-detail__stage { display: flex; align-items: center; justify-content: center; padding: 32px; background: var(--fx-mint); }
.fx-detail__mock { width: 100%; max-width: 470px; font-size: 12px; }
.fx-detail__text { padding: 28px 32px 30px; }
.fx-detail__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
html body:not(#_z) .fx .fx-detail__close { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--fx-line); border-radius: 50%; background: #fff; color: var(--fx-ink) !important; font-size: 18px; cursor: pointer; }
.fx-detail__close:hover { border-color: #b9cdc6; }
html body:not(#_z) .fx .fx-detail h3 { margin: 0 0 10px; color: var(--fx-ink) !important; font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
html body:not(#_z) .fx .fx-detail h4 { margin: 20px 0 8px; color: var(--fx-ink) !important; font-size: 15px; font-weight: 700; letter-spacing: 0; }
html body:not(#_z) .fx .fx-detail__what { margin: 0; color: var(--fx-dim) !important; font-size: 16px; line-height: 1.6; }
.fx-steps, .fx-notes { margin: 0; padding: 0; list-style: none; }
.fx-steps { counter-reset: fx-step; }
html body:not(#_z) .fx .fx-steps li,
html body:not(#_z) .fx .fx-notes li { position: relative; padding-left: 32px; color: var(--fx-ink) !important; font-size: 15px; line-height: 1.55; }
.fx-steps li + li, .fx-notes li + li { margin-top: 8px; }
html body:not(#_z) .fx .fx-steps li::before {
  counter-increment: fx-step;
  content: counter(fx-step);
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--fx-teal);
  color: #fff !important;
  font-size: 12px;
  font-weight: 700;
}
html body:not(#_z) .fx .fx-notes li { color: var(--fx-dim) !important; }
.fx-notes li::before { content: ''; position: absolute; left: 7px; top: .55em; width: 9px; height: 5px; border-left: 2px solid var(--fx-green); border-bottom: 2px solid var(--fx-green); transform: rotate(-45deg); }
html body:not(#_z) .fx .fx-plan { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--fx-line); color: var(--fx-ink) !important; font-size: 14px; font-weight: 600; }
html body:not(#_z) .fx .fx-plan i { color: var(--fx-green) !important; font-size: 18px; }
html body:not(#_z) .fx .fx-plan a { color: var(--fx-teal) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 991px) {
  .fx-detail { grid-template-columns: 1fr; }
  .fx-detail__stage { padding: 22px 18px; }
  .fx-detail__mock { font-size: 10.5px; }
  .fx-detail__text { padding: 22px 20px 24px; }
  html body:not(#_z) .fx-detail h3 { font-size: 22px; }
}

html body:not(#_z) .fx .fx-empty { margin: 32px 0 0; color: var(--fx-dim) !important; text-align: center; }
html body:not(#_z) .fx .fx-empty button { border: 0; background: none; color: var(--fx-teal) !important; font-weight: 600; text-decoration: underline; cursor: pointer; }

/* ==========================================================================
   Mockup kit (all sizes in em)
   ========================================================================== */
.fx-card__mock > *, .fx-detail__mock > * { font-family: 'Inter', sans-serif; }
.m-win, .m-chat, .m-canvas, .m-site, .m-phone, .m-split > * { border-radius: 1.2em; }
html body:not(#_z) .fx .m-win { overflow: hidden; border: 1px solid #dfe8e4; background: #fff; box-shadow: 0 1em 2.4em -1.4em rgba(16, 60, 50, .35); color: var(--fx-ink) !important; font-size: 1.15em; }
.m-top { display: flex; align-items: center; gap: .35em; padding: .7em .9em; border-bottom: 1px solid #edf2f0; background: #fafcfb; }
.m-top i, .m-site__bar i { width: .55em; height: .55em; border-radius: 50%; background: #dbe4e0; }
.m-top b { margin-left: .6em; font-size: .95em; font-weight: 600; }
.m-pad { padding: .9em; }
.m-filters { display: flex; gap: .4em; padding: .7em .9em .4em; }
html body:not(#_z) .fx .m-filters span { padding: .25em .7em; border: 1px solid #e3ebe8; border-radius: 99em; color: var(--fx-dim) !important; font-size: .8em; }
html body:not(#_z) .fx .m-filters span.is-on { border-color: var(--fx-teal); background: #e6f3f0; color: var(--fx-teal) !important; font-weight: 600; }
html body:not(#_z) .fx .m-filters em { padding: 0 .4em; border-radius: 99em; background: var(--fx-wa); color: #fff !important; font-style: normal; }
.m-row { display: flex; align-items: center; gap: .7em; padding: .6em .9em; border-top: 1px solid #f1f5f3; }
.m-row--new { background: #f2faf6; }
html body:not(#_z) .fx .m-av { display: inline-grid; flex: none; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; background: hsl(var(--h, 150) 60% 90%); color: hsl(var(--h, 150) 55% 28%) !important; font-size: .8em; font-weight: 700; }
.m-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.m-txt b { font-size: .95em; font-weight: 600; }
html body:not(#_z) .fx .m-txt small { overflow: hidden; color: var(--fx-dim) !important; font-size: .82em; white-space: nowrap; text-overflow: ellipsis; }
html body:not(#_z) .fx .m-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .2em; color: var(--fx-dim) !important; font-size: .75em; }
html body:not(#_z) .fx .m-meta em { display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--fx-wa); color: #fff !important; font-style: normal; font-weight: 700; }
html body:not(#_z) .fx .m-tick { color: #34b7f1 !important; font-size: .85em; letter-spacing: -.25em; }
.m-typing { display: inline-flex; gap: .25em; }
.m-typing i { width: .45em; height: .45em; border-radius: 50%; background: #9fb2ab; }

/* WhatsApp chat */
html body:not(#_z) .fx .m-chat { display: flex; flex-direction: column; gap: .55em; padding: 1em; background: #efeae2; color: #111b21 !important; font-size: 1.15em; }
.m-chat--plain { background: #f4f7f6; }
.m-in, .m-out { position: relative; max-width: 82%; padding: .55em .75em; border-radius: .7em; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); font-size: .92em; line-height: 1.4; }
.m-in { align-self: flex-start; border-top-left-radius: .15em; background: #fff; }
.m-out { align-self: flex-end; border-top-right-radius: .15em; background: #d9fdd3; }
.m-in--right { align-self: flex-end; background: #d9fdd3; }
html body:not(#_z) .fx .m-out small,
html body:not(#_z) .fx .m-in small { display: block; color: #667781 !important; font-size: .78em; }
html body:not(#_z) .fx .m-sys { align-self: center; display: inline-flex; align-items: center; gap: .35em; padding: .3em .8em; border-radius: .6em; background: #fff8c5; color: #54656f !important; font-size: .78em; text-align: center; }
html body:not(#_z) .fx .m-sys--warn { background: #fde8e8; color: #9b1c1c !important; }
html body:not(#_z) .fx .m-sys--free { background: #dcfce7; color: #166534 !important; }
.m-btns { display: flex; flex-direction: column; gap: .3em; align-self: flex-end; width: 64%; }
html body:not(#_z) .fx .m-btns span { padding: .45em; border-radius: .6em; background: #fff; color: #027eb5 !important; font-size: .85em; font-weight: 600; text-align: center; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.m-btns span.is-tapped { background: #e7f6ff; }
.m-assign { align-self: center; display: flex; align-items: center; gap: .6em; padding: .55em .8em; border: 1px solid #cfe9db; border-radius: .8em; background: #fff; font-size: .82em; }
.m-assign b { display: block; font-weight: 600; }
html body:not(#_z) .fx .m-assign small { color: var(--fx-dim) !important; }

/* Labels and notes */
.m-labelrow { display: flex; flex-wrap: wrap; gap: .4em; }
html body:not(#_z) .fx .m-chip { display: inline-flex; align-items: center; padding: .2em .65em; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); border-radius: 99em; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c) !important; font-size: .78em; font-weight: 600; white-space: nowrap; }
.m-status, .m-perm { display: flex; align-items: center; justify-content: space-between; margin-top: .8em; padding: .55em .7em; border: 1px solid #e8efec; border-radius: .7em; font-size: .85em; }
html body:not(#_z) .fx .m-status span,
html body:not(#_z) .fx .m-perm > span:first-child { color: var(--fx-dim) !important; }
html body:not(#_z) .fx .m-status b { color: #b45309 !important; }
html body:not(#_z) .fx .m-note { display: flex; gap: .55em; margin-top: .8em; padding: .7em; border-radius: .7em; background: #fff7d6; color: #5b4a10 !important; font-size: .82em; line-height: 1.45; }
.m-note i { font-size: 1.4em; }
.m-note b { display: block; }

/* Media */
.m-img { padding: .3em; }
.m-photo { position: relative; display: block; width: 13em; height: 7.5em; overflow: hidden; border-radius: .5em; background: linear-gradient(135deg, #c8e6c9, #7cb342 55%, #33691e); }
.m-photo::after { content: ''; position: absolute; left: 18%; top: 22%; width: 34%; height: 56%; border-radius: .3em; background: #f5e6c8; box-shadow: 4em .8em 0 -.4em #e8d3a8; }
.m-blur { position: absolute; right: 8%; bottom: 10%; z-index: 1; width: 36%; height: 26%; border-radius: .3em; background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.m-img small { margin: .3em .3em 0; }
.m-doc, .m-loc { display: flex; align-items: center; gap: .6em; }
html body:not(#_z) .fx .m-doc i,
html body:not(#_z) .fx .m-loc i { font-size: 2em; color: #d93025 !important; }
html body:not(#_z) .fx .m-loc i { color: #0f8a5f !important; }
.m-doc b, .m-loc b { display: block; font-weight: 600; }
.m-voice { display: flex; align-items: center; gap: .6em; min-width: 13em; }
html body:not(#_z) .fx .m-voice i { display: grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%; background: #0f8a5f; color: #fff !important; }
.m-wave { flex: 1; height: 1.4em; background: repeating-linear-gradient(90deg, #7fb79a 0 .18em, transparent .18em .42em); -webkit-mask-image: linear-gradient(90deg, #000 50%, rgba(0,0,0,.35) 50%); mask-image: linear-gradient(90deg, #000 50%, rgba(0,0,0,.35) 50%); }

/* Saved replies popover */
.m-pop { align-self: stretch; padding: .4em; border-radius: .8em; background: #fff; box-shadow: 0 .8em 2em -1em rgba(0, 0, 0, .35); font-size: .85em; }
html body:not(#_z) .fx .m-pop__q { display: flex; align-items: center; gap: .4em; padding: .4em .5em; border-bottom: 1px solid #eef2f1; color: var(--fx-dim) !important; }
.m-pop__item { padding: .45em .6em; border-radius: .5em; }
.m-pop__item.is-on { background: #e8f5ef; }
.m-pop__item b { display: block; font-weight: 600; }
html body:not(#_z) .fx .m-pop__item small { color: var(--fx-dim) !important; }

/* Reply window */
html body:not(#_z) .fx .m-timer { align-self: center; display: inline-flex; align-items: center; gap: .4em; padding: .35em .8em; border-radius: 99em; background: #fff; color: #54656f !important; font-size: .8em; }
html body:not(#_z) .fx .m-timer b { color: var(--fx-green) !important; font-variant-numeric: tabular-nums; }
.m-closed { display: flex; align-items: center; gap: .6em; padding: .7em; border-radius: .8em; background: #fff; font-size: .85em; }
html body:not(#_z) .fx .m-closed > i { font-size: 1.5em; color: #b45309 !important; }
.m-closed b { display: block; }
html body:not(#_z) .fx .m-closed small { color: var(--fx-dim) !important; }
html body:not(#_z) .fx .m-fakebtn { display: inline-flex; align-items: center; gap: .3em; margin-left: auto; padding: .4em .8em; border-radius: .6em; background: var(--fx-teal); color: #fff !important; font-size: .9em; font-weight: 600; white-space: nowrap; }

/* Team */
.m-person, .m-numcard { display: flex; align-items: center; gap: .7em; font-size: .9em; }
.m-person b, .m-numcard b { display: block; font-weight: 600; }
html body:not(#_z) .fx .m-person small,
html body:not(#_z) .fx .m-numcard small { color: var(--fx-dim) !important; }
html body:not(#_z) .fx .m-pill { margin-left: auto; padding: .2em .65em; border-radius: 99em; background: #eef2ff; color: #3730a3 !important; font-size: .78em; font-weight: 600; }
.m-toggle { position: relative; width: 2.4em; height: 1.35em; border-radius: 99em; background: #d4ddda; }
.m-toggle::after { content: ''; position: absolute; left: .18em; top: .18em; width: 1em; height: 1em; border-radius: 50%; background: #fff; transition: transform .3s; }
.m-toggle.is-on { background: var(--fx-green); }
.m-toggle.is-on::after { transform: translateX(1.05em); }

/* Sinhala compose */
.m-compose { display: flex; align-items: center; gap: .5em; margin-top: auto; padding: .45em .6em; border-radius: 99em; background: #fff; font-size: .92em; }
html body:not(#_z) .fx .m-sin { padding: .15em .45em; border: 1px solid #cfdcd7; border-radius: .4em; color: var(--fx-dim) !important; font-size: .78em; font-weight: 700; }
html body:not(#_z) .fx .m-sin.is-on { border-color: var(--fx-green); background: #e8f5ef; color: var(--fx-green) !important; }
.m-compose__text { position: relative; flex: 1; min-height: 1.4em; }
html body:not(#_z) .fx .m-latin { position: absolute; inset: 0; color: #8696a0 !important; }
.m-sinh { position: relative; }
html body:not(#_z) .fx .m-compose > i { color: var(--fx-green) !important; font-size: 1.3em; }

/* Flow canvas */
.m-canvas { position: relative; height: 19em; border: 1px solid #dfe8e4; background-color: #f8faf9; background-image: radial-gradient(#d3ddd9 1px, transparent 1.2px); background-size: 1.2em 1.2em; }
.m-wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-wires path { fill: none; stroke: var(--fx-teal); stroke-width: 1.6; }
.m-node { position: absolute; width: 21%; padding: .55em .6em; border: 1px solid #dfe8e4; border-radius: .7em; background: #fff; box-shadow: 0 .5em 1.2em -.6em rgba(15, 35, 30, .3); font-size: .85em; }
.m-node b { display: flex; align-items: center; gap: .25em; font-size: .92em; font-weight: 700; }
html body:not(#_z) .fx .m-node b i { color: var(--fx-teal) !important; }
html body:not(#_z) .fx .m-node small { display: block; margin-top: .25em; color: var(--fx-dim) !important; font-size: .82em; line-height: 1.3; }
.m-nbtn { display: block; margin-top: .3em; padding: .2em .4em; border: 1px solid #e3e9e6; border-radius: .4em; font-size: .78em; }

/* Keyword trigger card */
.m-trig { display: flex; flex-wrap: wrap; align-items: center; gap: .35em; padding: .6em .7em; border: 1px dashed #9cc7b4; border-radius: .8em; background: #fff; font-size: .85em; }
.m-trig > span:first-child { width: 100%; font-weight: 700; }
html body:not(#_z) .fx .m-trig small { width: 100%; color: var(--fx-dim) !important; }
.m-ai { background: #e7f5ff; }
.m-ailine { margin-top: .3em; }

/* Split layouts */
.m-split { display: grid; grid-template-columns: 1fr 1.15fr; gap: .9em; align-items: center; font-size: 1em; }
.m-split .m-chat { font-size: 1.05em; }
.m-hours { padding: .9em; border: 1px solid #dfe8e4; background: #fff; font-size: 1.05em; }
.m-hours div { display: flex; flex-direction: column; padding: .45em 0; border-bottom: 1px solid #f0f4f2; }
.m-hours div:last-child { border: 0; }
html body:not(#_z) .fx .m-hours span { color: var(--fx-dim) !important; font-size: .8em; }
.m-hours b { font-size: .88em; font-weight: 600; }
html body:not(#_z) .fx .m-hours b.is-closed { color: #b91c1c !important; }
.m-alerts { display: flex; flex-direction: column; gap: .7em; }
.m-alert { display: flex; gap: .6em; padding: .75em; border: 1px solid #dfe8e4; border-radius: .9em; background: #fff; font-size: .95em; box-shadow: 0 .6em 1.4em -1em rgba(0, 0, 0, .35); }
html body:not(#_z) .fx .m-alert i { font-size: 1.6em; color: var(--fx-teal) !important; }
html body:not(#_z) .fx .m-alert--wa i { color: var(--fx-wa) !important; }
.m-alert b { display: block; font-weight: 600; }
html body:not(#_z) .fx .m-alert small { color: var(--fx-dim) !important; }

/* WhatsApp form */
.m-phone { max-width: 22em; margin: 0 auto; padding: .7em; border-radius: 2em; background: #1f2933; }
.m-form { display: flex; flex-direction: column; gap: .7em; padding: 1em; border-radius: 1.4em; background: #fff; font-size: 1.1em; }
.m-form__head { display: flex; align-items: center; gap: .6em; padding-bottom: .6em; border-bottom: 1px solid #eef2f1; }
.m-form label { display: flex; flex-direction: column; gap: .25em; margin: 0; font-size: .85em; }
html body:not(#_z) .fx .m-form label span { color: var(--fx-dim) !important; }
.m-form label i { padding: .5em .7em; border: 1px solid #d5dfdb; border-radius: .5em; font-style: normal; }
html body:not(#_z) .fx .m-form__submit { padding: .6em; border-radius: 99em; background: var(--fx-green); color: #fff !important; font-weight: 600; text-align: center; }

/* Templates */
.m-tpl { padding: .5em; background: #fff; border: 1px solid #dfe8e4; font-size: 1.05em; }
.m-tpl__img { display: block; height: 5em; border-radius: .7em; background: linear-gradient(135deg, #b2dfdb, #26a69a); }
.m-tpl p { margin: .5em .3em; font-size: .9em; line-height: 1.45; }
html body:not(#_z) .fx .m-tpl em { padding: 0 .2em; border-radius: .3em; background: #e0f2f1; color: var(--fx-teal) !important; font-style: normal; font-weight: 600; }
html body:not(#_z) .fx .m-tpl__btn { display: flex; justify-content: center; gap: .3em; padding: .5em; border-top: 1px solid #eef2f1; color: #027eb5 !important; font-size: .88em; font-weight: 600; }
.m-review { display: flex; flex-direction: column; gap: .7em; font-size: 1em; }
html body:not(#_z) .fx .m-review > div:first-child { display: flex; align-items: center; gap: .5em; color: var(--fx-dim) !important; font-size: .85em; }
html body:not(#_z) .fx .m-state { display: flex; align-items: center; gap: .4em; padding: .65em .8em; border-radius: .8em; background: #fff7d6; color: #8a6d0b !important; font-size: .9em; font-weight: 600; }
html body:not(#_z) .fx .m-state--ok { background: #dcfce7; color: #166534 !important; }

/* Campaign report */
.m-stat { display: grid; grid-template-columns: 6em 1fr 3.5em; align-items: center; gap: .6em; padding: .4em 0; font-size: .9em; }
html body:not(#_z) .fx .m-stat span:first-child { color: var(--fx-dim) !important; }
.m-stat b { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.m-bar { height: .6em; overflow: hidden; border-radius: 99em; background: #edf2f0; }
.m-fill { display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--fx-green); transform-origin: left; }
.m-bar--bad .m-fill { background: #dc2626; }
html body:not(#_z) .fx .m-campfoot { display: flex; align-items: center; gap: .6em; margin-top: .6em; padding-top: .6em; border-top: 1px solid #f0f4f2; color: var(--fx-dim) !important; font-size: .8em; }

/* Contacts */
html body:not(#_z) .fx .m-import { display: flex; align-items: center; gap: .4em; margin: .8em .9em 0; padding: .5em .7em; border-radius: .7em; background: #e8f5ef; color: var(--fx-green) !important; font-size: .85em; }
.m-import i { font-size: 1.4em; }
.m-table { margin: .6em 0 .3em; font-size: .88em; }
.m-th, .m-tr { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: .5em; padding: .5em .9em; }
html body:not(#_z) .fx .m-th { background: #f6f8f7; color: #6b7c73 !important; font-size: .78em; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.m-tr { border-top: 1px solid #f1f5f3; }
.m-tr > span { display: flex; flex-wrap: wrap; align-items: center; gap: .4em; }

/* Short links */
.m-link { display: flex; flex-direction: column; align-items: center; gap: .6em; padding: 1em; border: 1px solid #dfe8e4; background: #fff; text-align: center; }
.m-link__url { padding: .35em .6em; border-radius: .5em; background: #f1f5f3; font-size: .85em; }
html body:not(#_z) .fx .m-link__url b { color: var(--fx-teal) !important; }
.m-qr { width: 7em; height: 7em; background:
  linear-gradient(#1f2933, #1f2933) 0 0 / 2.2em 2.2em no-repeat,
  linear-gradient(#1f2933, #1f2933) 100% 0 / 2.2em 2.2em no-repeat,
  linear-gradient(#1f2933, #1f2933) 0 100% / 2.2em 2.2em no-repeat,
  repeating-conic-gradient(#1f2933 0 25%, #fff 0 50%) 50% 50% / 1.1em 1.1em; border: .4em solid #fff; outline: 1px solid #e3ebe8; }
html body:not(#_z) .fx .m-link small { color: var(--fx-dim) !important; font-size: .8em; }
html body:not(#_z) .fx .m-composebox { align-self: stretch; padding: .5em .8em; border-radius: 99em; background: #fff; color: #111b21 !important; font-size: .88em; }
.m-caret { display: inline-block; width: 1px; height: 1em; margin-left: 1px; vertical-align: -.15em; background: var(--fx-green); }

/* Website button */
.m-site { position: relative; height: 19em; overflow: hidden; border: 1px solid #dfe8e4; background: #fff; }
.m-site__bar { display: flex; align-items: center; gap: .35em; padding: .6em .8em; border-bottom: 1px solid #eef2f1; background: #fafcfb; font-size: .9em; }
html body:not(#_z) .fx .m-site__bar span { margin-left: .6em; padding: .15em .8em; border-radius: 99em; background: #eef2f1; color: var(--fx-dim) !important; font-size: .85em; }
.m-site__body { display: flex; flex-direction: column; gap: .7em; padding: 1.4em; }
.m-site__h { width: 55%; height: 1.4em; border-radius: .4em; background: #dfe8e4; }
.m-site__p { width: 85%; height: .7em; border-radius: .4em; background: #edf2f0; }
.m-site__p--short { width: 60%; }
html body:not(#_z) .fx .m-fab { position: absolute; right: 1.1em; bottom: 1.1em; display: grid; place-items: center; width: 3.2em; height: 3.2em; border-radius: 50%; background: var(--fx-wa); color: #fff !important; font-size: 1.2em; box-shadow: 0 .6em 1.2em -.4em rgba(37, 211, 102, .7); }
.m-widget { position: absolute; right: 1.1em; bottom: 5.4em; width: 17em; overflow: hidden; border-radius: 1em; background: #efeae2; box-shadow: 0 1em 2.4em -1em rgba(0, 0, 0, .4); font-size: .95em; }
html body:not(#_z) .fx .m-widget__head { padding: .7em .9em; background: #075e54; color: #fff !important; }
.m-widget__head b { display: block; font-weight: 600; }
.m-widget__head small { opacity: .8; }
.m-widget__msg { margin: .7em; padding: .5em .7em; border-radius: .6em; background: #fff; font-size: .9em; }
html body:not(#_z) .fx .m-widget__input { display: flex; align-items: center; gap: .4em; margin: 0 .7em .7em; padding: .4em .4em .4em .7em; border-radius: 99em; background: #fff; color: #8696a0 !important; font-size: .82em; }
.m-widget__input .m-fakebtn { padding: .35em .5em; border-radius: 50%; background: var(--fx-wa); }

/* List menus and link buttons */
html body:not(#_z) .fx .m-listbtn { display: flex; justify-content: center; align-items: center; gap: .3em; margin: .5em -.75em -.55em; padding: .5em; border-top: 1px solid rgba(0, 0, 0, .08); color: #027eb5 !important; font-weight: 600; }
.m-sheet { align-self: stretch; padding: .7em .8em .3em; border-radius: 1em 1em .5em .5em; background: #fff; box-shadow: 0 -.4em 1.4em -.8em rgba(0, 0, 0, .35); font-size: .88em; }
.m-sheet > b { display: block; margin-bottom: .3em; text-align: center; }
.m-sheet__row { display: flex; align-items: center; justify-content: space-between; padding: .45em .2em; border-top: 1px solid #f0f4f2; }
.m-sheet__row b { display: block; font-weight: 600; }
html body:not(#_z) .fx .m-sheet__row small { color: var(--fx-dim) !important; }
.m-sheet__row i { width: 1em; height: 1em; border: 2px solid #b8c6c1; border-radius: 50%; }
.m-sheet__row.is-on i { border: .32em solid var(--fx-green); }

/* Ad leads */
.m-adbanner { display: flex; align-items: center; gap: .6em; padding: .55em; border-radius: .8em; background: #fff; font-size: .85em; }
.m-adbanner b { display: block; font-weight: 600; }
html body:not(#_z) .fx .m-adbanner small { color: var(--fx-dim) !important; }
.m-adthumb { width: 3em; height: 3em; flex: none; border-radius: .5em; background: linear-gradient(135deg, #f58529, #dd2a7b 55%, #8134af); }

/* Connect numbers */
.m-choice { display: flex; gap: .6em; margin-bottom: .6em; padding: .6em .7em; border: 1px solid #e3ebe8; border-radius: .8em; font-size: .85em; }
.m-choice b { display: block; font-weight: 600; }
html body:not(#_z) .fx .m-choice small { color: var(--fx-dim) !important; }
.m-radio { flex: none; width: 1.1em; height: 1.1em; margin-top: .1em; border: 2px solid #b8c6c1; border-radius: 50%; }
.m-radio.is-on { border: .34em solid var(--fx-green); }
.m-numcard { margin-top: .9em; padding: .7em; border: 1px solid #cfe9db; border-radius: .9em; background: #f2faf6; }
html body:not(#_z) .fx .m-numcard .m-av { background: #dcfce7; color: #16a34a !important; font-size: 1em; }
html body:not(#_z) .fx .m-status-ok { margin-left: auto; padding: .2em .65em; border-radius: 99em; background: #dcfce7; color: #166534 !important; font-size: .78em; font-weight: 700; }

/* Cost estimator */
.m-est { display: grid; grid-template-columns: 5.5em max-content 1fr; align-items: center; gap: .6em; padding: .5em 0; border-bottom: 1px solid #f0f4f2; font-size: .9em; }
html body:not(#_z) .fx .m-est span { color: var(--fx-dim) !important; }
.m-est b { min-width: 3.6em; padding: .2em .5em; border: 1px solid #dbe5e1; border-radius: .4em; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
html body:not(#_z) .fx .m-est em { color: var(--fx-dim) !important; font-size: .85em; font-style: normal; }
.m-total { display: flex; align-items: center; justify-content: space-between; gap: .6em; margin-top: .7em; padding: .7em .8em; border-radius: .8em; background: #e8f5ef; font-size: .9em; }
html body:not(#_z) .fx .m-total b { color: var(--fx-teal) !important; font-size: 1.2em; white-space: nowrap; }

/* ==========================================================================
   Animation: staged steps s1..s5 on one loop, only in the open card
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .fx-play .s1 { animation: fx-s1 var(--fx-cycle) infinite both; }
  .fx-play .s2 { animation: fx-s2 var(--fx-cycle) infinite both; }
  .fx-play .s3 { animation: fx-s3 var(--fx-cycle) infinite both; }
  .fx-play .s4 { animation: fx-s4 var(--fx-cycle) infinite both; }
  .fx-play .s5 { animation: fx-s5 var(--fx-cycle) infinite both; }
  .fx-play .m-wires path { stroke-dasharray: 160; animation-name: fx-draw-2; }
  .fx-play .m-wires path.s3 { animation-name: fx-draw-3; }
  .fx-play .m-wires path.s4 { animation-name: fx-draw-4; }
  .fx-play .s1 .m-fill, .fx-play .s2 .m-fill, .fx-play .s3 .m-fill, .fx-play .s4 .m-fill { animation: fx-fill var(--fx-cycle) infinite both; }
  .fx-play .s2 .m-fill { animation-delay: .3s; }
  .fx-play .s3 .m-fill { animation-delay: .6s; }
  .fx-play .s4 .m-fill { animation-delay: .9s; }
  .fx-play .m-typing i { animation: fx-dot 1s infinite; }
  .fx-play .m-typing i:nth-child(2) { animation-delay: .15s; }
  .fx-play .m-typing i:nth-child(3) { animation-delay: .3s; }
  .fx-play .m-caret { animation: fx-blink 1s steps(1) infinite; }
  .fx-play .m-fab { animation: fx-pulse 2.4s infinite; }
  .fx-play .m-latin.s2 { animation-name: fx-latin; }
}
@keyframes fx-s1 { 0%, 3% { opacity: 0; transform: translateY(.6em); } 8%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes fx-s2 { 0%, 16% { opacity: 0; transform: translateY(.6em); } 21%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes fx-s3 { 0%, 31% { opacity: 0; transform: translateY(.6em); } 36%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes fx-s4 { 0%, 46% { opacity: 0; transform: translateY(.6em); } 51%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes fx-s5 { 0%, 61% { opacity: 0; transform: translateY(.6em); } 66%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes fx-draw-2 { 0%, 16% { stroke-dashoffset: 160; } 26%, 92% { stroke-dashoffset: 0; } 97%, 100% { stroke-dashoffset: 160; } }
@keyframes fx-draw-3 { 0%, 31% { stroke-dashoffset: 160; } 41%, 92% { stroke-dashoffset: 0; } 97%, 100% { stroke-dashoffset: 160; } }
@keyframes fx-draw-4 { 0%, 46% { stroke-dashoffset: 160; } 56%, 92% { stroke-dashoffset: 0; } 97%, 100% { stroke-dashoffset: 160; } }
@keyframes fx-fill { 0%, 6% { transform: scaleX(0); } 30%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes fx-dot { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes fx-blink { 50% { opacity: 0; } }
@keyframes fx-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); } 60% { box-shadow: 0 0 0 .9em rgba(37, 211, 102, 0); } }
/* Sinhala: the Latin letters show while typing, then give way to the Sinhala script */
@keyframes fx-latin { 0%, 16% { opacity: 0; } 21%, 31% { opacity: 1; } 36%, 100% { opacity: 0; } }
/* Static (closed card, reduced motion): only the final Sinhala text, never both on top of each other */
.m-latin { opacity: 0; }

/* White text on filled mockup buttons and badges: site-wide span rules would otherwise darken it */
html body:not(#_z) .fx .m-fakebtn,
html body:not(#_z) .fx .m-form__submit,
html body:not(#_z) .fx .m-widget__head,
html body:not(#_z) .fx .m-fab,
html body:not(#_z) .fx .m-meta em,
html body:not(#_z) .fx .m-filters em,
html body:not(#_z) .fx .m-voice i { color: #fff !important; }

/* ==========================================================================
   Same rules as the homepage (website-colour.css "Uniform rules")
   ========================================================================== */
/* Corners: 20px for containers, 14px for small items */
.fx-bar { border-radius: 20px; }
html body:not(#_z) .fx .fx-search { border-radius: 14px; max-width: 400px; }
/* Tap targets: 44px for chips and the close button */
html body:not(#_z) .fx .fx-chip { min-height: 44px; }
html body:not(#_z) .fx .fx-detail__close { width: 44px; height: 44px; }
/* Section spacing: 96px rhythm at the bottom (64px on phones) */
.fx { padding-bottom: 96px; }
@media (max-width: 767px) { .fx { padding-bottom: 64px; } }
/* Step numbers: the homepage's accent green */
html body:not(#_z) .fx .fx-steps li::before { background: #0f8a5f; }
/* "Good to know": the homepage's list check, a check in a tinted circle */
html body:not(#_z) .fx .fx-notes li { padding-left: 32px; }
.fx-notes li::before {
  left: 0;
  top: 1px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 138, 95, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%230f8a5f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  transform: none;
}

/* "Need something else?" card: last in the grid, dark teal so it reads as an invitation, not a feature */
html body:not(#_z) .fx .fx-card--ask { display: flex; border: 0; background: #0b2b27; }
html body:not(#_z) .fx .fx-card--ask:hover { box-shadow: 0 14px 30px -18px rgba(16, 60, 50, .45); }
.fx-ask { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 28px 24px; }
html body:not(#_z) .fx .fx-ask__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; border-radius: 14px; background: #25d366; color: #fff !important; font-size: 28px; }
html body:not(#_z) .fx .fx-card--ask .fx-card__title { margin: 0 !important; color: #fff !important; font-size: 22px; }
html body:not(#_z) .fx .fx-card--ask .fx-card__summary { color: #a9c4bd !important; }
.fx-ask__actions { margin-top: 10px; }
html body:not(#_z) .fx .fx-ask .hp-btn { min-height: 48px; padding: 0 22px; border-radius: 12px !important; background: #25d366 !important; color: #0b2b27 !important; -webkit-text-fill-color: #0b2b27 !important; box-shadow: none !important; font-size: 15px; font-weight: 700; }
html body:not(#_z) .fx .fx-ask .hp-btn:hover { background: #3be07b !important; }