/* GetSetSales marketing site — one stylesheet for every page.

   Shared rather than inlined per page: a visitor who reads the home page and
   then opens Pricing already has this file, so the second page costs one HTML
   request and nothing else. The URL carries a content hash (see build.mjs), so
   it can be cached hard without ever serving a stale copy. */

/* Self-hosted rather than fetched from Google: it rides the connection that
   already delivered the HTML, with no DNS lookup or TLS handshake to two more
   hosts first. Inter ships as a variable font, so 400–800 is one 48KB file. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --brand: #157f3c;
  --brand-dark: #0f5f2c;
  --brand-deep: #0b3f1f;
  --brand-soft: #e8f4ec;
  --brand-line: #bfdfcb;
  --ink: #101613;
  --ink-muted: #56605a;
  /* 4.8:1 on the page's surfaces. Used for every caption and footnote, so it
     has to clear WCAG AA for small text. */
  --ink-subtle: #6b7470;
  --canvas: #fbfcfb;
  --surface: #ffffff;
  --border: #e4e8e5;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(16,22,19,.04), 0 12px 32px rgba(16,22,19,.06);
  --shadow-lift: 0 2px 6px rgba(16,22,19,.06), 0 32px 72px rgba(16,22,19,.14);
  --ease: cubic-bezier(.2,.7,.3,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink); background: var(--canvas); line-height: 1.65;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 820px; }
h1, h2, h3, h4 { letter-spacing: -0.028em; line-height: 1.14; font-weight: 700; margin: 0; }
h1 { font-weight: 800; }
p { margin: 0; }
.num, .price, .stat b, .rate-amount { font-variant-numeric: tabular-nums; }

.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* Icons: one sprite in the layout, drawn with the current text colour. */
.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.i.sm { width: 14px; height: 14px; }
.i.lg { width: 24px; height: 24px; }

/* ---- Header ------------------------------------------------------------ */
header.nav { position: sticky; top: 0; z-index: 50; background: rgba(251,252,251,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
header.nav > .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 64px; }
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 32px; width: auto; display: block; }
nav.links { display: flex; align-items: center; gap: 4px; font-size: 14.5px; color: var(--ink-muted); font-weight: 500; }
nav.links > a, .menu-btn { padding: 8px 12px; border-radius: 8px; transition: color .15s, background .15s; }
nav.links > a:hover, .menu-btn:hover, .menu:focus-within .menu-btn { color: var(--ink); background: #f0f3f1; }
nav.links a[aria-current="page"] { color: var(--brand-dark); font-weight: 600; }

.menu { position: relative; }
.menu-btn { display: inline-flex; align-items: center; gap: 5px; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.menu-btn .i { transition: transform .2s; }
.menu-panel {
  position: absolute; top: calc(100% + 10px); left: -14px; width: 350px; padding: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lift);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s, transform .18s var(--ease), visibility .18s;
}
/* A bridge over the gap, so moving the pointer from the button to the panel
   does not cross dead space and close it. */
.menu-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.menu:hover .menu-panel, .menu:focus-within .menu-panel, .menu.open .menu-panel { opacity: 1; visibility: visible; transform: none; }
.menu:hover .menu-btn .i, .menu.open .menu-btn .i { transform: rotate(180deg); }
.menu-panel a { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; }
.menu-panel a:hover, .menu-panel a[aria-current="page"] { background: #f3f7f4; }
.menu-panel .mi { width: 36px; height: 36px; border-radius: 9px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; flex: none; }
.menu-panel b { display: block; color: var(--ink); font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.menu-panel small { display: block; color: var(--ink-subtle); font-size: 13px; line-height: 1.4; margin-top: 2px; font-weight: 400; }

.nav-actions { display: flex; gap: 10px; align-items: center; flex: none; }
.burger { display: none; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--ink); cursor: pointer; place-items: center; padding: 0; }
.burger .shut { display: none; }
.burger[aria-expanded="true"] .open { display: none; }
.burger[aria-expanded="true"] .shut { display: block; }
.mobile-menu { border-top: 1px solid var(--border); background: var(--surface); max-height: calc(100vh - 64px); overflow-y: auto; }
.mobile-menu .wrap { padding-top: 10px; padding-bottom: 22px; display: flex; flex-direction: column; }
.mobile-menu a:not(.cta) { padding: 11px 4px; font-size: 16px; font-weight: 500; border-bottom: 1px solid #f0f3f1; }
.mobile-menu a[aria-current="page"] { color: var(--brand-dark); font-weight: 600; }
.mm-label { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-subtle); margin: 16px 4px 2px; }
.mm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.mm-actions .cta { justify-content: center; padding: 12px; }
@media (max-width: 940px) {
  nav.links { display: none; }
  .burger { display: grid; }
}
@media (min-width: 941px) { .mobile-menu { display: none !important; } }
@media (max-width: 520px) {
  .nav-actions .ghost { display: none; }
  .brand img { height: 28px; }
  .mm-actions { grid-template-columns: 1fr; }
}

/* ---- Buttons ----------------------------------------------------------- */
.cta { background: var(--brand); color: #fff; padding: 10px 18px; border-radius: 9px; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--brand); transition: background .15s, border-color .15s, transform .15s, box-shadow .15s; white-space: nowrap; }
.cta:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.cta.ghost { background: transparent; color: var(--brand); }
.cta.ghost:hover { background: var(--brand-soft); }
.cta.large { padding: 14px 26px; font-size: 16px; border-radius: 11px; }
.cta.large:not(.ghost):not(.outline-invert):hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(21,127,60,.28); }
.cta.invert { background: #fff; color: var(--brand-dark); border-color: #fff; }
.cta.invert:hover { background: #f1f8f3; border-color: #f1f8f3; box-shadow: 0 8px 22px rgba(0,0,0,.18) !important; }
.cta.outline-invert { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.cta.outline-invert:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.more { display: inline-flex; align-items: center; gap: 6px; color: var(--brand); font-weight: 600; font-size: 15px; }
.more .i { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.more:hover .i, a.card:hover .more .i { transform: translateX(4px); }

/* ---- Motion ------------------------------------------------------------
   CSS 3D rather than WebGL: this is read on Indian mobile networks, and a
   600KB renderer to tilt a screenshot would cost more than it adds. Every
   effect is transform/opacity only, and all of it is off for anyone who has
   asked their system for less motion. */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.in, .js.reveal-all .reveal { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.d1 { transition-delay: .06s } .js .reveal.d2 { transition-delay: .12s } .js .reveal.d3 { transition-delay: .18s }
@media print { .js .reveal { opacity: 1 !important; transform: none !important; } .orb, header.nav, .closer { display: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
  .tilt3d { transform: none !important; }
}

/* ---- Hero -------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding: 72px 0 0; text-align: center; }
.hero .wrap { position: relative; z-index: 1; }
.orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; pointer-events: none; z-index: 0; }
.orb.a { width: 520px; height: 520px; background: #9fe0b8; top: -180px; right: -120px; animation: drift 22s ease-in-out infinite; }
.orb.b { width: 420px; height: 420px; background: #cde9d8; top: 260px; left: -160px; animation: drift 28s ease-in-out infinite reverse; }
@keyframes drift { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-40px,30px,0) scale(1.08); } }

/* Meta's wordmark as vector, with "Tech Provider" in our own type beneath it.
   The mark is never recoloured: it is Meta's trademark. Only the line under
   it is ours. */
.meta-lockup { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.meta-lockup img { display: block; height: auto; }
.meta-lockup span { font-weight: 700; color: #1C2B33; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
.badge-wrap { display: flex; justify-content: center; margin: 0 0 20px; }
.badge-wrap .meta-lockup img { width: 132px; }
.badge-wrap .meta-lockup span { font-size: 25px; }
.foot-lockup { margin: 14px 0 16px; align-items: flex-start; }
.foot-lockup img { width: 96px; }
.foot-lockup span { font-size: 18px; }

.pill { display: inline-flex; align-items: center; gap: 8px; background: var(--brand-soft); color: var(--brand-dark); border: 1px solid rgba(21,127,60,.22); padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; margin-bottom: 22px; }
.pill .i { width: 14px; height: 14px; stroke-width: 3; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin-bottom: 14px; }
.eyebrow .i { width: 16px; height: 16px; }
.hero h1 { font-size: clamp(34px, 5.4vw, 58px); margin: 0 auto 20px; max-width: 900px; }
.hero h1 .accent, .accent { color: var(--brand); }
.hero .sub { font-size: clamp(17px, 2vw, 19.5px); color: var(--ink-muted); max-width: 660px; margin: 0 auto 32px; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-note { margin-top: 18px; font-size: 13.5px; color: var(--ink-subtle); }
.hero-note span { white-space: nowrap; }
.hero-note .i { width: 14px; height: 14px; color: var(--brand); vertical-align: -2px; margin-right: 3px; stroke-width: 3; }
.hero-note span + span { margin-left: 16px; }

/* Inner pages share the hero, a little tighter. */
.hero.page { padding-top: 60px; }
.hero.page h1 { font-size: clamp(31px, 4.6vw, 50px); max-width: 820px; }
.hero.page.plain { padding-bottom: 60px; }

/* ---- Product screenshot in a browser frame ----------------------------- */
.frame-scene { perspective: 1600px; margin: 52px auto 0; max-width: 1040px; }
.frame {
  border-radius: 14px; overflow: hidden; border: 1px solid #d9dfdb; background: var(--surface);
  box-shadow: var(--shadow-lift);
}
.frame-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: #f4f6f5; }
.frame-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d5dcd8; display: block; }
.frame-bar span { margin: 0 auto; font-size: 11.5px; color: var(--ink-subtle); background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 2px 14px; transform: translateX(-17px); max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frame img { display: block; width: 100%; height: auto; }
/* The hero frame leans back and follows the pointer; rotation arrives as
   custom properties so the handler never rewrites the style string. */
.tilt3d { --rx: 7deg; --ry: 0deg; transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-origin: 50% 0; transition: transform .3s ease-out; will-change: transform; }
.hero { padding-bottom: 76px; }
.hero + section:not(.alt) { padding-top: 0; }
@media (max-width: 760px) {
  .tilt3d { --rx: 0deg !important; --ry: 0deg !important; }
  .hero { padding-bottom: 56px; }
  .hero .frame-scene { margin-top: 40px; }
  .frame-bar span { display: none; }
}
.frame-cap { text-align: center; font-size: 13px; color: var(--ink-subtle); margin-top: 14px; }

/* ---- Sections ---------------------------------------------------------- */
section { padding: 84px 0; }
section.alt { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
section.tight { padding: 56px 0; }
.sec-head { text-align: center; max-width: 700px; margin: 0 auto 52px; }
.sec-head h2 { font-size: clamp(27px, 3.4vw, 38px); margin: 0 0 14px; }
.sec-head p { color: var(--ink-muted); font-size: 17.5px; }
.sec-head.left { text-align: left; margin-left: 0; }
@media (max-width: 700px) { section { padding: 60px 0; } .sec-head { margin-bottom: 36px; } }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.stat { background: var(--surface); padding: 24px 20px; text-align: center; }
.stat b { display: block; font-size: 26px; letter-spacing: -.03em; font-weight: 800; }
.stat span { font-size: 13.5px; color: var(--ink-muted); }
@media (max-width: 760px) { .stats { grid-template-columns: 1fr 1fr; } }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid.two { grid-template-columns: repeat(2, 1fr); }
.grid.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid, .grid.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid, .grid.two, .grid.four { grid-template-columns: 1fr; } }
.scene { perspective: 1200px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; }
section.alt .card { background: var(--canvas); }
.card .icon, .icon-chip { width: 42px; height: 42px; border-radius: 11px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; margin-bottom: 16px; flex: none; }
.card h3 { margin: 0 0 8px; font-size: 17.5px; }
.card p { color: var(--ink-muted); font-size: 15px; }
.card p a { color: var(--brand); font-weight: 600; }
.card .more { margin-top: auto; padding-top: 16px; }
.card.tilt { transform-style: preserve-3d; will-change: transform; }
.card.tilt:hover { transform: translateY(-6px) rotateX(2.5deg) rotateY(-2.5deg); box-shadow: 0 2px 4px rgba(16,22,19,.05), 0 24px 56px rgba(16,22,19,.12); border-color: #cfe0d6; }
.card.flat { box-shadow: none; }
/* One card across the whole grid, icon beside the text: for the one item in a
   set that needs more room to explain. Stacks like any other card on a phone,
   where a column beside the icon would be too narrow to read. */
.card.across { grid-column: 1 / -1; flex-direction: row; gap: 20px; align-items: flex-start; }
.card.across .icon { margin-bottom: 0; }
.card.across > div:last-child { max-width: 860px; }
@media (max-width: 700px) {
  .card.across { flex-direction: column; gap: 0; }
  .card.across .icon { margin-bottom: 16px; }
}

/* Feature row: words on one side, the screen they describe on the other. */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.split + .split { margin-top: 96px; }
.split.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split.flip > :first-child { order: 2; }
.split h2, .split h3 { font-size: clamp(24px, 2.8vw, 32px); margin: 0 0 14px; }
.split .lede { color: var(--ink-muted); font-size: 17px; margin-bottom: 20px; }
.split .frame { box-shadow: 0 2px 6px rgba(16,22,19,.05), 0 24px 56px rgba(16,22,19,.11); }
@media (max-width: 900px) {
  .split, .split.flip { grid-template-columns: 1fr; gap: 30px; }
  .split.flip > :first-child { order: 0; }
  .split + .split { margin-top: 64px; }
}

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.checks li { display: flex; gap: 11px; font-size: 15.5px; color: var(--ink-muted); }
.checks li .i { color: var(--brand); width: 18px; height: 18px; margin-top: 4px; stroke-width: 2.6; }
.checks b { color: var(--ink); font-weight: 600; }
.checks.cols { grid-template-columns: 1fr 1fr; gap: 14px 32px; }
@media (max-width: 700px) { .checks.cols { grid-template-columns: 1fr; } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 13.5px; font-weight: 500; color: var(--ink-muted); }
.chip .i { width: 15px; height: 15px; color: var(--brand); }
.works-with { padding: 36px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); }
.works-with .wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.works-with .chips { justify-content: center; }
.works-more { font-size: 14px; font-weight: 600; color: var(--brand); display: inline-flex; align-items: center; gap: 6px; }
.works-more .i { width: 15px; height: 15px; }

/* Team roles, as a card rather than a screenshot of a one-row table. */
.roles { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.role { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; border-bottom: 1px solid var(--border); }
.role:last-child { border-bottom: 0; }
.role .icon-chip { margin: 0; }
.role b { font-size: 16px; }
.role p { font-size: 14.5px; color: var(--ink-muted); margin-top: 2px; }

/* Numbered steps. */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; counter-reset: step; }
.step { position: relative; padding-top: 54px; }
.step::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 700; z-index: 1; }
.step::after { content: ""; position: absolute; top: 19px; left: 48px; right: -16px; height: 1px; background: repeating-linear-gradient(90deg, var(--brand-line) 0 6px, transparent 6px 12px); }
.step:last-child::after { display: none; }
.step h3 { margin: 0 0 6px; font-size: 17px; }
.step p { color: var(--ink-muted); font-size: 15px; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } .step::after { display: none; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } .step { padding: 2px 0 0 54px; } }

/* The long-form version on How it works: a vertical line of steps. */
.timeline { counter-reset: tl; max-width: 780px; margin: 0 auto; }
.tl { position: relative; padding: 0 0 44px 68px; }
.tl::before { counter-increment: tl; content: counter(tl); position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 17px; }
.tl::after { content: ""; position: absolute; left: 21.5px; top: 52px; bottom: 8px; width: 1px; background: var(--brand-line); }
.tl:last-child { padding-bottom: 0; } .tl:last-child::after { display: none; }
.tl h3 { font-size: 21px; margin: 7px 0 8px; }
.tl > p { color: var(--ink-muted); font-size: 16px; margin-bottom: 14px; }
.tl .time { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--brand-dark); background: var(--brand-soft); border-radius: 999px; padding: 3px 11px; margin-left: 10px; vertical-align: 3px; letter-spacing: 0; }
@media (max-width: 560px) { .tl { padding-left: 56px; } .tl .time { display: flex; width: fit-content; margin: 8px 0 0; } }

.note { border-left: 3px solid var(--brand); background: #f6faf7; padding: 14px 18px; border-radius: 0 10px 10px 0; font-size: 14.5px; color: var(--ink-muted); }
.note b { color: var(--ink); }
.note a { color: var(--brand); font-weight: 600; }
.note.warn { border-left-color: #c98a12; background: #fdf8ec; }

/* ---- Pricing ----------------------------------------------------------- */
.price-box { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 40px; box-shadow: var(--shadow); max-width: 860px; margin: 0 auto; }
@media (max-width: 640px) { .price-box { padding: 26px 20px; } }
.price { font-size: clamp(34px, 5vw, 46px); font-weight: 800; letter-spacing: -.03em; text-align: center; line-height: 1.15; }
.price small { display: block; font-size: 16px; font-weight: 500; color: var(--ink-muted); letter-spacing: 0; margin-top: 6px; }

/* Organised by who started the conversation, because that is what sets the
   price. Meta's words for it ("template", "service window") are the small
   print, not the heading. */
.price-trial { display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; max-width: 100%; margin: 18px auto 0; padding: 8px 16px; border-radius: 999px; background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--ink-muted); font-size: 14.5px; text-align: center; }
.price-trial b { color: var(--ink); font-weight: 700; }
.price-trial .i { color: var(--brand); width: 16px; height: 16px; flex: none; stroke-width: 2.6; }
@media (max-width: 640px) { .price-trial { border-radius: 14px; align-items: flex-start; text-align: left; } }
.rates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 28px 0; text-align: left; }
.rate { border: 1px solid var(--border); border-radius: 12px; padding: 18px 18px 16px; background: #fcfdfc; display: flex; flex-direction: column; gap: 6px; transition: border-color .25s, transform .25s, box-shadow .25s; }
.rate:hover { border-color: #cfe0d6; transform: translateY(-3px); box-shadow: 0 10px 28px rgba(16,22,19,.07); }
.rate.free { background: var(--brand-soft); border-color: var(--brand-line); }
.rate-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-subtle); }
.rate.free .rate-label { color: #2b7a4b; }
.rate-amount { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--ink); }
.rate-amount small { font-size: 13px; font-weight: 500; color: var(--ink-muted); letter-spacing: 0; }
.rate-desc { font-size: 14px; color: var(--ink-muted); margin-top: 2px; }
.rate-eg { font-size: 12.5px; color: var(--ink-subtle); margin-top: auto; padding-top: 10px; }
@media (max-width: 760px) { .rates { grid-template-columns: 1fr; } }

.price-points { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; text-align: left; margin: 30px 0 0; }
.price-points div { display: flex; gap: 10px; font-size: 15px; color: var(--ink-muted); }
.price-points .i { color: var(--brand); width: 18px; height: 18px; margin-top: 4px; stroke-width: 2.6; }
.price-points b { color: var(--ink); font-weight: 600; }
@media (max-width: 700px) { .price-points { grid-template-columns: 1fr; } }

/* Add-on: a spec sheet, not a paragraph. Someone deciding whether to pay
   Rs499 wants the numbers lined up. */
.addon-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); text-align: left; overflow: hidden; box-shadow: var(--shadow); }
.addon-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--border); background: #fcfdfc; }
.addon-title { display: flex; align-items: center; gap: 12px; }
.addon-title .icon-chip { margin: 0; width: 38px; height: 38px; }
.addon-title h3, .addon-title h4 { font-size: 16.5px; }
.addon-title p { margin-top: 2px; font-size: 13px; color: var(--ink-subtle); }
.addon-price { text-align: right; flex: none; }
.addon-price b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.addon-price span { font-size: 12.5px; color: var(--ink-subtle); }
.addon-specs { display: grid; grid-template-columns: repeat(2, 1fr); }
.addon-spec { padding: 16px 22px; border-right: 1px solid var(--border); }
.addon-spec:last-child { border-right: 0; }
.addon-spec b { display: block; font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.addon-spec span { font-size: 13px; color: var(--ink-muted); }
.addon-foot { padding: 14px 22px; border-top: 1px solid var(--border); font-size: 14px; color: var(--ink-muted); background: #fcfdfc; }
.addon-foot a { color: var(--brand); font-weight: 600; }
@media (max-width: 680px) {
  .addon-head { flex-direction: column; } .addon-price { text-align: left; }
  .addon-specs { grid-template-columns: 1fr; }
  .addon-spec { border-right: 0; border-bottom: 1px solid var(--border); padding: 13px 22px; }
  .addon-spec:last-child { border-bottom: 0; }
}

/* Cost calculator: answers "what will this cost me", and in doing so shows the
   thing that is otherwise invisible — WhatsApp's charge is a separate bill and
   we do not mark it up. */
.calc { border: 1px solid var(--border); border-radius: 18px; background: var(--surface); overflow: hidden; text-align: left; box-shadow: var(--shadow); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 980px; margin: 0 auto; }
.calc-in { padding: 28px; }
.calc-in h3 { font-size: 19px; margin-bottom: 4px; }
.calc-in > p { font-size: 14px; color: var(--ink-muted); margin-bottom: 20px; }
.calc-field { margin-bottom: 16px; }
.calc-field label, .calc-field .lbl { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.calc-field input {
  /* 16px exactly: iOS Safari zooms the whole page when a field with smaller
     text takes focus. */
  width: 100%; padding: 10px 12px; font: inherit; font-size: 16px; font-variant-numeric: tabular-nums;
  border: 1px solid var(--border); border-radius: 9px; background: #fcfdfc; color: var(--ink);
}
.calc-field input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.calc-field .hint { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-subtle); }
.calc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.calc-kind { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.calc-kind button { padding: 9px 8px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); border-radius: 9px; background: #fcfdfc; color: var(--ink-muted); line-height: 1.3; }
.calc-kind button[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-dark); }
.calc-out { border-left: 1px solid var(--border); background: #f8faf9; padding: 28px; display: flex; flex-direction: column; }
.calc-msgs { font-size: 13px; color: var(--ink-subtle); margin-bottom: 10px; }
.calc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 9px 0; font-size: 14.5px; color: var(--ink-muted); }
.calc-row span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); white-space: nowrap; }
.calc-row.total { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 16px; font-size: 16px; color: var(--ink); font-weight: 600; }
.calc-row.total span:last-child { font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.calc-note { margin-top: 8px; font-size: 12.5px; color: var(--ink-subtle); }
.calc-vs { margin-top: auto; padding: 13px 15px; border-radius: 10px; background: var(--brand-soft); font-size: 13.5px; color: #15502f; }
.calc-vs:empty { display: none; }
.calc-out .calc-vs { margin-top: 18px; }
.calc-compare { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border); }
.calc-compare[hidden] { display: none; }
.calc-compare-head { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-subtle); margin-bottom: 10px; }
.cmp { margin-bottom: 12px; }
.cmp-card { max-width: 640px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: 26px 28px; text-align: left; }
.cmp-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.cmp-tabs button { font: inherit; font-size: 13.5px; font-weight: 600; padding: 7px 14px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-muted); cursor: pointer; }
.cmp-tabs button:hover { color: var(--ink); background: #f0f3f1; }
.cmp-tabs button[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-deep); }
.cmp-scenario { font-size: 13px; color: var(--ink-subtle); margin-bottom: 14px; }
.cmp-card .cmp-top { font-size: 15px; }
.cmp-card .cmp-bar { height: 10px; }
.cmp-save { margin: 16px 0 12px; padding: 12px 14px; border-radius: 10px; background: var(--brand-soft); font-size: 14px; color: #15502f; font-weight: 600; }
.cmp-save:empty { display: none; }
.compare-home .frame-cap { max-width: 640px; margin-left: auto; margin-right: auto; }
@media (max-width: 520px) { .cmp-card { padding: 20px 18px; } }
.cmp-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; }
.cmp-name { font-weight: 600; color: var(--ink); min-width: 0; }
.cmp-name small { font-weight: 400; font-size: 12.5px; color: var(--ink-subtle); }
.cmp-amt { display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); white-space: nowrap; }
.cmp-diff { font-style: normal; font-size: 12px; font-weight: 600; color: #a33a2b; }
.cmp-diff.less { color: var(--ink-subtle); }
.cmp-diff:empty { display: none; }
.cmp-bar { margin-top: 6px; height: 8px; border-radius: 99px; background: #edf0ee; overflow: hidden; }
.cmp-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: #b9c2bd; transition: width .35s var(--ease); }
.cmp.ours .cmp-name { color: var(--brand-dark); }
.cmp.ours .cmp-bar i { background: var(--brand); }
@media (prefers-reduced-motion: reduce) { .cmp-bar i { transition: none; } }
.calc-compare-note { margin-top: 6px; font-size: 12.5px; color: var(--ink-subtle); }
.calc-compare-note:empty { display: none; }
@media (max-width: 820px) { .calc { grid-template-columns: 1fr; } .calc-out { border-left: 0; border-top: 1px solid var(--border); } }
@media (max-width: 420px) { .calc-in, .calc-out { padding: 20px; } .calc-pair { grid-template-columns: 1fr; } }

/* Who-bills-what table. */
.bill { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: table; }
.bill-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; overflow-x: auto; background: var(--surface); }
.bill-wrap .bill { border: 0; border-radius: 0; min-width: 560px; }
.bill th, .bill td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.bill tr:last-child td { border-bottom: 0; }
.bill th { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-subtle); background: #f8faf9; font-weight: 700; }
.bill td { color: var(--ink-muted); }
.bill td:first-child { color: var(--ink); font-weight: 600; }
.bill td.n { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); font-weight: 600; }
.bill td.n small { font-size: 12px; font-weight: 500; color: var(--ink-subtle); }
.bill td.tot { color: var(--brand); font-weight: 700; }

/* ---- FAQ --------------------------------------------------------------- */
details { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 0 20px; margin-bottom: 10px; transition: border-color .2s, box-shadow .2s; }
details[open] { border-color: #cfe0d6; box-shadow: 0 6px 20px rgba(16,22,19,.05); }
section.alt details { background: var(--canvas); }
details summary { cursor: pointer; font-weight: 600; font-size: 16px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 17px 0; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; color: var(--brand); font-size: 22px; line-height: 1; font-weight: 400; flex: none; }
details[open] summary::after { content: "\2212"; }
details p { color: var(--ink-muted); font-size: 15.5px; padding-bottom: 18px; margin-top: -4px; }
details a { color: var(--brand); font-weight: 600; }
.faq-group { max-width: 800px; margin: 0 auto 44px; }
.faq-group:last-child { margin-bottom: 0; }
.faq-group > h2 { font-size: 21px; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.faq-group > h2 .i { color: var(--brand); }

/* ---- Contact ----------------------------------------------------------- */
.contact-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 26px; box-shadow: var(--shadow); text-align: center; }
.contact-card .icon-chip { margin: 0 auto 16px; }
.contact-card .icon-chip.wa { background: #e7f8ee; color: #1fa855; }
.contact-card .cta.wa { background: #1fa855; border-color: #1fa855; color: #fff; gap: 8px; }
.contact-card .cta.wa:hover { background: #178f47; border-color: #178f47; }
.contact-card .cta.wa .i { width: 18px; height: 18px; }
.contact-card h3 { font-size: 12px; color: var(--ink-subtle); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 8px; }
.contact-card .big { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 8px; word-break: break-word; color: var(--ink); display: block; }
.contact-card p { font-size: 15px; color: var(--ink-muted); margin-bottom: 18px; }
.contact-card a:not(.cta):not(.big) { color: var(--brand); font-weight: 600; }

/* ---- Closing call to action -------------------------------------------- */
section.closer { padding: 0 0 84px; }
/* When the page ends on a white band, the panel needs air above it. */
main:has(> section.alt:last-child) + section.closer { padding-top: 84px; }
.closer-box { text-align: center; border-radius: 22px; padding: 60px 28px; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(900px 380px at 85% -10%, rgba(159,224,184,.35), transparent 60%), linear-gradient(135deg, #12703a 0%, #0b3f1f 100%); }
.closer-box h2 { font-size: clamp(27px, 3.6vw, 40px); margin-bottom: 12px; }
.closer-box p { color: rgba(255,255,255,.82); font-size: 17.5px; max-width: 560px; margin: 0 auto 28px; }
.closer-box .closer-note { font-size: 13.5px; color: rgba(255,255,255,.66); margin: 20px auto 0; }

/* ---- Footer ------------------------------------------------------------ */
footer.site { border-top: 1px solid var(--border); padding: 52px 0 34px; font-size: 14.5px; color: var(--ink-muted); background: var(--surface); }
.foot-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 34px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; } .foot-grid > :first-child { grid-column: 1 / -1; } }
@media (max-width: 440px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-grid h4 { margin: 0 0 14px; font-size: 12px; color: var(--ink); text-transform: uppercase; letter-spacing: .07em; }
.foot-grid a { display: block; margin-bottom: 9px; }
.foot-grid a:hover { color: var(--ink); }
.entity { font-size: 13px; line-height: 1.75; margin: 14px 0 0; }
.entity b { color: var(--ink); }
.foot-grid a.foot-wa { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; font-weight: 600; color: var(--ink); }
.foot-grid a.foot-wa .i { width: 18px; height: 18px; color: #1fa855; }
.foot-grid a.foot-wa:hover { border-color: #1fa855; }
.legal-line { border-top: 1px solid var(--border); padding-top: 22px; font-size: 12.5px; color: var(--ink-subtle); display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.legal-line span:last-child { max-width: 640px; }

/* ---- Legal pages: long-form prose -------------------------------------- */
.legal { max-width: 760px; margin: 0 auto; padding: 56px 24px 88px; }
.legal h1 { font-size: clamp(28px, 4vw, 36px); margin: 0 0 8px; }
.legal .updated { color: var(--ink-subtle); font-size: 14px; margin: 0 0 36px; }
.legal h2 { font-size: 20px; margin: 40px 0 12px; }
.legal p, .legal li { color: var(--ink-muted); font-size: 15.5px; }
.legal p { margin: 0 0 14px; }
.legal ul, .legal ol { padding-left: 20px; margin: 0 0 14px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--brand); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.legal .howto { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: 10px; padding: 20px 22px; margin: 0 0 14px; }
.legal .howto p { margin: 0 0 10px; color: var(--ink); }
.legal .howto p:last-child { margin-bottom: 0; }
.legal .howto .big { font-size: 19px; font-weight: 600; }
.legal .entity-box { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; font-size: 14px; color: var(--ink-muted); line-height: 1.7; }
.legal .entity-box b { color: var(--ink); }

@media (max-width: 640px) {
  .hero-note span { display: block; }
  .hero-note span + span { margin-left: 0; }
}
/* A shared visual system for the marketing site and every setup guide. */
:root { --brand:#167d45; --brand-dark:#105a34; --ink:#152c23; --ink-muted:#53665d; --canvas:#fcfdfb; --border:#dfe7df; --radius:18px; }
.wrap { max-width:1240px; }
header.nav > .wrap { height:78px; }
header.nav { background:rgba(255,255,255,.96); }
.brand img { height:34px; }
.cta { border-radius:8px; }
.home-hero { padding:76px 0 70px; background:radial-gradient(ellipse at 90% 35%,#dcebd6,transparent 48%),#f5f8ee; overflow:hidden; }
.hero-grid { display:grid; grid-template-columns:1fr 1.12fr; gap:54px; align-items:center; }
.hero-copy h1 { font-size:clamp(42px,4.5vw,64px); line-height:1.07; letter-spacing:-.055em; margin:0 0 24px; }
.hero-copy h1 span { color:var(--brand); }
.hero-copy .pill { font-size:11px; letter-spacing:.02em; padding:7px 11px; margin-bottom:24px; background:#fff9; }
.hero-copy .sub { color:var(--ink-muted); font-size:17px; line-height:1.75; margin-bottom:26px; max-width:490px; }
.hero-copy .hero-actions { justify-content:flex-start; gap:10px; flex-wrap:wrap; }
.hero-copy .cta.large { padding:13px 18px; font-size:14px; }
.micro { font-size:12px; color:var(--ink-muted); max-width:435px; margin-top:17px; }
.hero-proof { display:flex; gap:20px; flex-wrap:wrap; margin-top:28px; padding-top:20px; border-top:1px solid #d9e4d7; font-size:11px; font-weight:600; }
.hero-proof span { display:flex; align-items:center; gap:6px; }
.hero-proof .i { width:15px; color:var(--brand); }
.product-stage { background:#fff9; padding:20px; border:1px solid #fff; border-radius:24px; box-shadow:0 30px 60px #244b2420; transform:rotate(-1deg); }
.product-stage .frame { border-radius:10px; box-shadow:0 8px 24px #18392114; }
.stage-label { display:flex; gap:8px; align-items:center; color:#56735d; font-size:9px; letter-spacing:.09em; font-weight:700; margin-bottom:15px; }
.live-dot { width:7px; height:7px; border-radius:50%; background:var(--brand); }
.stage-caption { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:17px; font-size:10px; font-weight:600; }
.stage-caption span,.stage-caption a { display:flex; align-items:center; gap:6px; }
.stage-caption .i { width:14px; }
.stage-caption a { color:var(--brand); }
.product-stage .frame-cap { font-size:10px; }
.value-strip { background:#fff; border-bottom:1px solid var(--border); padding:24px 0; }
.value-strip .wrap { display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.value-strip span { font-size:9px; letter-spacing:.1em; color:var(--ink-muted); }
.value-strip b { font-size:13px; display:flex; align-items:center; gap:9px; font-weight:600; }
.value-strip .i { color:var(--brand); width:17px; }
.intro-row { display:grid; grid-template-columns:1.3fr 1fr; gap:80px; align-items:center; margin-bottom:40px; }
.intro-row h2 { font-size:34px; line-height:1.2; }
.intro-row > p { color:var(--ink-muted); font-size:15px; }
.journey { position:relative; padding:30px; box-shadow:none; background:#fff; }
.journey:hover,.setup-grid a:hover { border-color:var(--brand); transform:translateY(-3px); }
.journey-no { display:block; font-size:10px; color:var(--ink-muted); font-weight:700; letter-spacing:.12em; margin-bottom:25px; }
.journey h3 { font-size:22px; }
.journey .icon { width:48px; height:48px; }
.journey .more { padding-top:25px; }
.pricing-teaser { background:#eff4e8; }
.pricing-row { display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center; }
.pricing-row h2 { font-size:42px; margin-bottom:20px; }
.pricing-row > div > p { color:var(--ink-muted); margin-bottom:24px; max-width:410px; }
.price-summary { background:#fff; padding:30px; border-radius:20px; border:1px solid var(--border); }
.price-summary > span { font-size:10px; letter-spacing:.12em; font-weight:700; color:var(--ink-muted); }
.price-summary > div { display:flex; align-items:baseline; gap:20px; padding:20px 0; border-bottom:1px solid var(--border); }
.price-summary b { font-size:38px; letter-spacing:-.04em; }
.price-summary p { font-size:13px; color:var(--ink-muted); }
.price-summary .note { margin-top:20px; }
.setup-grid h3 { font-size:20px; line-height:1.25; margin-bottom:12px; }
.setup-grid .more { font-size:13px; }
.hero.page { background:#f3f7ed; padding:64px 0; }
.hero.page h1 { font-size:clamp(34px,4vw,50px); max-width:820px; }
.hero.page .sub { font-size:18px; }
.orb { display:none; }
.guide-nav { display:flex; flex-wrap:wrap; gap:8px; padding:22px 24px; }
.guide-nav a { font-size:12px; border:1px solid var(--border); border-radius:8px; padding:8px 12px; background:white; }
.guide-nav a[aria-current] { background:var(--brand); color:white; border-color:var(--brand); }
.guide-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:60px; align-items:start; }
.guide-aside { position:sticky; top:100px; background:#f0f5e9; padding:24px; border-radius:16px; }
.guide-aside h2 { font-size:18px; margin-bottom:14px; }
.guide-aside li { font-size:13px; margin-bottom:10px; color:var(--ink-muted); }
.guide-aside ul { padding-left:17px; }
.guide-aside .more { font-size:13px; }
.guide-step { padding-bottom:32px; margin-bottom:32px; border-bottom:1px solid var(--border); }
.guide-step h2 { font-size:24px; margin-bottom:15px; }
.guide-step p { color:var(--ink-muted); margin-bottom:15px; }
.guide-step .step-tag { font-size:11px; color:var(--brand); letter-spacing:.1em; font-weight:700; display:block; margin-bottom:10px; }
.guide-next { padding:26px; border-radius:16px; background:var(--brand-soft); }
.guide-next h2 { font-size:23px; margin-bottom:12px; }
.guide-next p { color:var(--ink-muted); margin-bottom:18px; }
.usecase { scroll-margin-top:105px; }
.usecase h2 { font-size:32px; margin-bottom:18px; }
.usecase p { color:var(--ink-muted); margin-bottom:20px; }
.example-chat { background:#e9eee3; padding:30px; border-radius:22px; border:1px solid var(--border); }
.chat-label { font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--ink-muted); margin-bottom:20px; }
.chat-bubble { background:#fff; border-radius:0 14px 14px 14px; padding:20px; font-size:15px; max-width:340px; margin-bottom:18px; box-shadow:0 3px 10px #19372108; }
.chat-bubble.customer { margin-left:auto; background:#d9f3d4; border-radius:14px 0 14px 14px; }
.chat-bubble small { display:block; color:var(--brand); margin-bottom:8px; font-weight:700; }
section.closer { padding-bottom:65px; }
.closer-box { background:#173f2b; border-radius:22px; padding:55px 25px; }
:target { scroll-margin-top:105px; }
@media(max-width:1080px) { nav.links > a,.menu-btn { padding:8px; font-size:13px; } .hero-grid { gap:28px; } .hero-proof { gap:12px; } }
@media(max-width:940px) { .hero-grid { grid-template-columns:1fr; } .home-hero { padding:48px 0; } .hero-copy { max-width:650px; } .product-stage { transform:none; max-width:720px; } .intro-row { gap:35px; } .pricing-row { gap:35px; } }
@media(max-width:700px) { .hero-copy h1 { font-size:44px; } .intro-row,.pricing-row,.guide-layout { grid-template-columns:1fr; gap:30px; } .intro-row h2,.pricing-row h2 { font-size:31px; } .product-stage { padding:12px; } .stage-label { font-size:8px; } .stage-caption { flex-wrap:wrap; } .value-strip .wrap { justify-content:flex-start; gap:16px 22px; } .value-strip span { width:100%; } .guide-aside { position:static; } .guide-nav { padding-top:16px; } .hero-proof { font-size:10px; } .price-summary { padding:24px; } header.nav > .wrap { height:68px; gap:12px; } .wrap { padding-left:20px; padding-right:20px; } .nav-actions { gap:7px; } .nav-actions > .cta { padding:9px 12px; font-size:12px; } .brand img { height:27px; } }
/* The hero screenshot is cropped to fit this column when it is exported, so it
   is shown whole rather than cut by object-fit. */
.product-stage .frame img { height:auto; }
.hero.page .frame-scene { max-width:850px; }
@media(max-width:700px) { .hero-copy .pill { font-size:10px; } .hero-copy .hero-actions .cta { font-size:13px; padding:12px 14px; } }
@media(max-width:700px) { .hero-copy h1 { font-size:clamp(30px,9vw,38px); line-height:1.12; } }
.steps.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media(max-width:900px) { .steps.three { grid-template-columns:1fr; } }


/* ---- Reading a screenshot ----------------------------------------------
   A full desktop screen is 2,000px of interface. Three things keep it
   legible instead of decorative:

   1. It is never put in a half-width column. Sections that show one stack the
      words above it and give the screen the full page width (.split.wide).
   2. On a phone it is not shrunk to fit. It is shown at a size where the text
      can be read, and panned sideways (.frame.pan).
   3. Anywhere, clicking it opens it full screen.                            */

.frame-view { display: block; }
.frame-view picture { display: block; }
.frame-scene:has(.frame.wide),
.hero.page .frame-scene:has(.frame.wide) { max-width: 1140px; }
.frame img { cursor: zoom-in; }
.pan-hint { display: none; }

.split.wide, .split.wide.flip { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.split.wide > :first-child { order: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: start; }
.split.wide > :first-child > * { grid-column: 1; }
.split.wide > :first-child > .checks { grid-column: 2; grid-row: 1 / span 5; align-self: center; }
.split.wide .lede { margin-bottom: 0; }
.split.wide > :first-child > p:last-child:not(.lede) { margin-top: 20px !important; }
@media (max-width: 900px) {
  .split.wide > :first-child { grid-template-columns: minmax(0, 1fr); }
  .split.wide > :first-child > .checks { grid-column: 1; grid-row: auto; margin-top: 18px; }
}

@media (max-width: 700px) {
  .frame.pan { position: relative; }
  .frame.pan .frame-view { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .frame.pan .frame-view img { width: 980px; max-width: none; }
  /* A shade on the right edge, so it reads as "there is more this way". */
  .frame.pan::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 28px; pointer-events: none; background: linear-gradient(90deg, rgba(16,22,19,0), rgba(16,22,19,.10)); }
  .pan-hint { display: block; text-align: center; font-size: 12.5px; color: var(--ink-subtle); margin-top: 10px; }
  .pan-hint + .frame-cap { margin-top: 2px; }
}

/* Full-screen view. */
.zoom { position: fixed; inset: 0; z-index: 200; background: rgba(12,18,15,.92); display: flex; flex-direction: column; opacity: 0; transition: opacity .18s; }
.zoom.on { opacity: 1; }
.zoom-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; color: rgba(255,255,255,.82); font-size: 13.5px; }
.zoom-close { font: inherit; font-weight: 600; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: 9px; padding: 8px 14px; cursor: pointer; flex: none; }
.zoom-close:hover { background: rgba(255,255,255,.2); }
.zoom-stage { flex: 1; overflow: auto; padding: 0 18px 22px; -webkit-overflow-scrolling: touch; cursor: zoom-out; }
.zoom-stage img { display: block; margin: 0 auto; max-width: none; height: auto; border-radius: 10px; background: #fff; cursor: default; }
body.zooming { overflow: hidden; }

/* ---- Getting started guide ----------------------------------------------
   A long reference page: a contents list that stays in view, numbered steps
   you can follow with the app open beside it, and tables for the things
   people look up rather than read. */
.doc [id] { scroll-margin-top: 92px; }
.doc-toc ol { list-style: none; margin: 0 0 16px; padding: 0; counter-reset: toc; }
.doc-toc li { margin: 0; counter-increment: toc; }
.doc-toc li a { display: flex; gap: 9px; padding: 6px 8px; margin: 0 -8px; border-radius: 8px; font-size: 13.5px; color: var(--ink-muted); line-height: 1.4; }
.doc-toc li a::before { content: counter(toc); flex: none; width: 18px; font-variant-numeric: tabular-nums; color: var(--ink-subtle); font-size: 12px; padding-top: 1px; }
.doc-toc li a:hover { background: rgba(21,127,60,.08); color: var(--ink); }
.doc-body { min-width: 0; }
.doc-body .guide-step:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.doc-body a:not(.cta):not(.more) { color: var(--brand); font-weight: 600; }
.doc-steps { margin: 0 0 18px; padding: 0; list-style: none; counter-reset: ds; }
.doc-steps li { position: relative; padding: 0 0 12px 42px; color: var(--ink-muted); counter-increment: ds; }
.doc-steps li::before { content: counter(ds); position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-dark); font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.doc-steps li b, .doc-body .guide-step p b { color: var(--ink); font-weight: 600; }
.guide-step ul { color:var(--ink-muted); margin:0 0 15px; padding-left:20px; list-style:disc; }
.guide-step li { margin-bottom:6px; }
.doc-body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; background: #eef2ef; border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; color: var(--ink); white-space: nowrap; }
.doc-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.7; background: #10201a; color: #e6f2ea; border-radius: 12px; padding: 16px 18px; margin: 0 0 18px; overflow-x: auto; white-space: pre; }
.doc-body .bill-wrap { margin-bottom: 18px; }
.doc-body .bill td:first-child { width: 34%; }
.doc-body .frame { margin-top: 6px; }
.doc-body details p { margin-bottom: 0; }
@media (max-width: 900px) {
  /* The contents list would push the first step off the screen if it stayed a
     sidebar, so it becomes a compact block above the guide. */
  .doc .guide-layout { grid-template-columns: 1fr; gap: 30px; }
  .doc .guide-aside { position: static; }
  .doc-toc ol { columns: 2; column-gap: 20px; }
  .doc-toc li { break-inside: avoid; }
}
@media (max-width: 520px) {
  .doc-toc ol { columns: 1; }
  .doc-body .bill td:first-child { width: auto; }
}
.hero + section.doc { padding-top: 56px; }
@media (max-width: 640px) {
  /* A two-column table cannot be read at phone width, and scrolling it
     sideways hides half of every sentence. Each row becomes a small block. */
  .doc-body .bill-wrap { overflow-x: visible; }
  .doc-body .bill-wrap .bill { min-width: 0; display: block; }
  .doc-body .bill thead { display: none; }
  .doc-body .bill tbody, .doc-body .bill tr, .doc-body .bill td { display: block; width: auto; }
  .doc-body .bill tr { padding: 14px 16px; border-bottom: 1px solid var(--border); }
  .doc-body .bill tr:last-child { border-bottom: 0; }
  .doc-body .bill td { padding: 0; border: 0; }
  .doc-body .bill td:first-child { margin-bottom: 4px; }
  .doc-code { font-size: 12.5px; }
}
.price-tax { margin: 14px auto 0; max-width: 640px; text-align: center; font-size: 13px; color: var(--ink-subtle); }

/* ---- /start interactive tour ------------------------------------------------ */
.tour-hero { padding: 48px 0 8px; text-align: center; }
.tour-hero h1 { font-size: clamp(30px, 4.6vw, 46px); line-height: 1.12; letter-spacing: -.03em; margin: 10px 0 8px; }
.tour-hero .sub { color: var(--ink-muted); font-size: 17px; }
.tour-sec { padding: 20px 0 72px; }
.tour { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: 20px; max-width: 1120px; margin: 0 auto; }
.tour-progress { height: 6px; background: #eef2ef; border-radius: 99px; overflow: hidden; }
.tour-progress i { display: block; height: 100%; width: 16%; background: var(--brand); border-radius: 99px; transition: width .4s var(--ease); }
.tour-top { display: flex; justify-content: space-between; align-items: center; margin: 12px 2px 16px; font-size: 13.5px; }
.tour-count { color: var(--ink-subtle); font-weight: 600; }
.tour-skip { color: var(--brand); font-weight: 600; }
.tour-grid { display: grid; grid-template-columns: 1fr 1.25fr .95fr; gap: 18px; align-items: start; }
.tour-coach h2 { font-size: 22px; letter-spacing: -.02em; margin: 4px 0 8px; }
.tour-coach p { color: var(--ink-muted); font-size: 15.5px; }
.tour-learn { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--ink) !important; font-size: 14.5px !important; animation: tourIn .35s var(--ease); }
.tour-next { margin-top: 16px; }
.tour-app { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: #fcfdfc; min-height: 330px; }
.ta-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--border); background: #f6f8f7; }
.ta-dot { width: 9px; height: 9px; border-radius: 50%; background: #dfe5e1; }
.ta-url { margin-left: 8px; font-size: 12px; color: var(--ink-subtle); }
.ta-body { padding: 18px; }
.ta-panel { animation: tourIn .35s var(--ease); }
.ta-label { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-subtle); margin-bottom: 12px; }
.ta-choices { display: grid; gap: 8px; }
.ta-choice { text-align: left; padding: 12px 14px; border: 1px solid var(--border); border-radius: 11px; background: #fff; font: inherit; font-size: 15px; cursor: pointer; transition: border-color .15s, background .15s; }
.ta-choice:hover, .ta-choice:focus-visible { border-color: var(--brand); background: var(--brand-soft); }
.ta-btn { display: inline-flex; padding: 10px 16px; border-radius: 9px; border: 1px solid var(--brand); background: var(--brand); color: #fff; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
.ta-empty { padding: 14px; border: 1px dashed var(--border); border-radius: 10px; color: var(--ink-subtle); font-size: 14px; margin-bottom: 12px; }
.ta-meta { margin-top: 12px; padding: 14px; border-radius: 12px; border: 1px solid #c9d7f2; background: #f3f7ff; font-size: 14px; }
.ta-meta p { margin-bottom: 8px; }
.ta-ok { padding: 12px 14px; border-radius: 10px; background: var(--brand-soft); border: 1px solid var(--brand-line); font-weight: 600; font-size: 14.5px; }
.ta-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 4px; border-bottom: 1px solid #f0f3f1; font-size: 15px; }
.ta-row.muted { color: var(--ink-subtle); }
.ta-toggle { position: relative; width: 42px; height: 24px; border-radius: 99px; background: #d5ddd8; border: 0; padding: 0; cursor: pointer; flex: none; display: inline-block; }
.ta-toggle i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .2s var(--ease); }
.ta-toggle.on { background: var(--brand); }
.ta-toggle.on i { left: 21px; }
.ta-toggle.off { cursor: default; }
.ta-card { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 11px; background: #fff; margin-bottom: 12px; font-weight: 600; }
.ta-card small { color: var(--ink-subtle); font-weight: 500; }
.ta-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 4px; }
.ta-stats div { text-align: center; padding: 10px 4px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.ta-stats b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.ta-stats small { color: var(--ink-subtle); font-size: 12px; }
.ta-inbox { margin-top: 10px; padding: 11px 13px; border-radius: 10px; background: var(--brand-soft); border: 1px solid var(--brand-line); font-size: 14px; animation: tourIn .35s var(--ease); }
.ta-slider-label { display: block; font-size: 14.5px; margin-bottom: 8px; }
#ta-volume { width: 100%; accent-color: var(--brand); }
.ta-price { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 10px; }
.ta-price div { padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.ta-price small { display: block; color: var(--ink-subtle); font-size: 12px; }
.ta-price b { font-size: 20px; font-variant-numeric: tabular-nums; }
.ta-price div:first-child b { color: var(--brand); }
.ta-small { font-size: 12.5px; color: var(--ink-subtle); }
.ta-form { display: grid; gap: 10px; }
.ta-form label { font-size: 14px; font-weight: 600; }
.ta-form input { font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; }
.ta-form input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.ta-form input[aria-invalid="true"] { border-color: #c0392b; }
.ta-form .cta { justify-content: center; padding: 13px; font-size: 15px; }
/* The pulsing "click here" ring on whatever the visitor should press next. */
.tour .target { position: relative; animation: tourPulse 1.6s ease-out infinite; }
@keyframes tourPulse { 0% { box-shadow: 0 0 0 0 rgba(21,127,60,.45); } 70% { box-shadow: 0 0 0 12px rgba(21,127,60,0); } 100% { box-shadow: 0 0 0 0 rgba(21,127,60,0); } }
@keyframes tourIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tour-phone { border: 8px solid #141a17; border-radius: 26px; background: #efeae2; overflow: hidden; min-height: 330px; display: flex; flex-direction: column; }
.tp-head { display: flex; align-items: center; gap: 9px; padding: 10px 12px; background: #075e54; color: #fff; }
.tp-head small { display: block; font-size: 11px; opacity: .8; }
.tp-head b { font-size: 14px; }
.tp-avatar { width: 30px; height: 30px; border-radius: 50%; background: #25d366; display: grid; place-items: center; font-weight: 700; }
.tp-chat { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; max-height: 300px; }
.tp-hint { margin: auto; color: #7a817c; font-size: 13px; }
.tp-msg { max-width: 86%; padding: 8px 11px; border-radius: 10px; font-size: 13.5px; line-height: 1.35; box-shadow: 0 1px 1px rgba(0,0,0,.08); animation: tourIn .3s var(--ease); }
.tp-msg.in { background: #fff; align-self: flex-start; }
.tp-msg.out { background: #d9fdd3; align-self: flex-end; }
@media (max-width: 960px) {
  .tour-grid { grid-template-columns: 1fr; }
  .tour-phone { min-height: 220px; }
  .tp-chat { max-height: 220px; }
}
@media (max-width: 640px) {
  .tour { padding: 14px; border-radius: 14px; }
  .ta-stats { grid-template-columns: repeat(2, 1fr); }
  .ta-price { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .tour .target, .ta-panel, .tp-msg, .tour-learn { animation: none; } }

/* ---- Home: built-in integrations banner ---------------------------------- */
.int-banner { padding: 72px 0; background: linear-gradient(180deg, #f3faf5 0%, #fff 100%); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.int-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.int-copy h2 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.12; letter-spacing: -.03em; margin: 10px 0 14px; }
.int-logos { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; margin: 22px 0 18px; }
.int-logos img { height: 28px; width: auto; }
.int-sheets { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 17px; color: #188038; }
.int-sheets img { height: 28px; width: 28px; }
.int-sheets.small { font-size: 13.5px; }
.int-sheets.small img { height: 20px; width: 20px; }
.int-save { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; color: var(--ink-muted); margin-bottom: 22px; }
.int-save .i { color: var(--brand); width: 18px; height: 18px; margin-top: 3px; flex: none; stroke-width: 2.6; }
.int-save b { color: var(--ink); }
.int-flow { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-lift); padding: 22px; display: flex; flex-direction: column; align-items: stretch; }
.int-step { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: #fff; font-size: 14.5px; }
.int-step img { height: 20px; width: auto; display: block; margin-bottom: 8px; }
.int-step p { margin: 0; color: var(--ink-muted); }
.int-step p b { color: var(--ink); }
.int-wa { background: #d9fdd3; border-color: #bfe8b8; }
.int-wa p { color: #1c2b21; }
.int-badge { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #0b6b2e; margin-bottom: 6px; }
.int-arrow { text-align: center; color: var(--brand); font-size: 20px; line-height: 1; padding: 6px 0; }
.int-note { margin: 12px 2px 0; font-size: 13px; color: var(--ink-subtle); }
@media (max-width: 900px) { .int-grid { grid-template-columns: 1fr; gap: 32px; } .int-banner { padding: 56px 0; } }

.chip img { height: 16px; width: auto; }
.chip-logo { padding: 8px 14px; }
.chip-logo img { height: 17px; }
.int-li-logo { width: 44px; height: 20px; object-fit: contain; object-position: left center; margin-top: 3px; flex: none; }

/* ---- /integrations landing page ---------------------------------------- */
.int-hero .int-grid { align-items: center; text-align: left; }
.int-hero h1 { font-size: clamp(32px, 4.4vw, 50px); line-height: 1.1; letter-spacing: -.03em; }
.int-hero .sub { margin-left: 0; }
.int-hero .hero-actions { justify-content: flex-start; }
.int-price { font-size: 17px; color: var(--ink-muted); margin: 4px 0 22px; }
.int-price b { color: var(--brand); font-size: 22px; }
.int-price span { color: var(--border); margin: 0 4px; }
.int-uses .card h3 { margin: 0 0 6px; font-size: 17px; }
.int-uses .card p { color: var(--ink-muted); font-size: 15px; margin: 0; }
@media (max-width: 900px) { .int-hero .int-grid { text-align: left; } }

/* ---- /integrations live demo -------------------------------------------- */
.intd-sec { padding: 64px 0; }
.intd { display: grid; grid-template-columns: .9fr 1fr 1fr; gap: 20px; align-items: start; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: 22px; max-width: 1120px; margin: 0 auto; }
.intd-gw { display: flex; gap: 10px; margin-bottom: 20px; }
.intd-gwbtn { flex: 1; height: 54px; display: grid; place-items: center; border: 2px solid var(--border); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s; }
.intd-gwbtn img { height: 22px; width: auto; }
.intd-gwbtn.on { border-color: var(--brand); background: var(--brand-soft); }
.intd-pay { width: 100%; justify-content: center; padding: 13px 16px; font-size: 15px; }
.intd-fail { display: block; width: 100%; margin-top: 10px; padding: 11px 16px; border: 1px solid var(--border); border-radius: 9px; background: #fff; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-muted); cursor: pointer; }
.intd-fail:hover { border-color: #e0b4ae; color: #a8322a; }
.intd-event { margin-top: 16px; padding: 12px 14px; border-radius: 11px; font-size: 14px; font-weight: 600; animation: tourIn .35s var(--ease); }
.intd-event.ok { background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--deep, #0b3f1f); }
.intd-event.bad { background: #fdecea; border: 1px solid #f3c2bc; color: #8f2a22; }
.intd-phone { min-height: 340px; }
.intd-typing { color: #7a817c; letter-spacing: 2px; }
.intd-sheet { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: #fff; }
.intd-sheet-head { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: #f1f8f3; border-bottom: 1px solid var(--border); font-size: 14px; }
.intd-sheet-head small { margin-left: auto; color: #188038; font-weight: 600; }
.intd-sheet table { width: 100%; border-collapse: collapse; font-size: 14px; }
.intd-sheet th, .intd-sheet td { padding: 10px 12px; border-bottom: 1px solid #eef2ef; text-align: left; }
.intd-sheet th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-subtle); background: #fafcfb; }
.intd-sheet td.ok { color: var(--brand); font-weight: 700; }
.intd-sheet td.bad { color: #a8322a; font-weight: 700; }
.intd-new { animation: intdRow 1.4s var(--ease); }
@keyframes intdRow { 0% { background: #c9f0d4; } 100% { background: transparent; } }
.intd-form { max-width: 640px; margin: 36px auto 0; text-align: center; background: var(--surface); border: 1px solid var(--brand-line); border-radius: 18px; padding: 28px; box-shadow: var(--shadow); }
.intd-form h3 { font-size: 24px; letter-spacing: -.02em; margin: 0 0 6px; }
.intd-form > p { color: var(--ink-muted); margin-bottom: 16px; }
.intd-form-row { display: flex; gap: 10px; }
.intd-form-row input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 13px 15px; border: 1px solid var(--border); border-radius: 11px; }
.intd-form-row input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.intd-form-row input[aria-invalid="true"] { border-color: #c0392b; }
.intd-form .ta-small { margin-top: 12px; }
@media (max-width: 960px) { .intd { grid-template-columns: 1fr; } .intd-phone { min-height: 240px; } }
/* +91 prefix on the phone fields of the tour and integrations forms */
.ph-wrap { position: relative; flex: 1; min-width: 0; }
.ph-wrap input { width: 100%; padding-left: 50px !important; }
.ph-wrap span { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--ink-muted); font-size: 16px; pointer-events: none; }
@media (max-width: 560px) { .intd-form-row { flex-direction: column; } .intd-form-row .cta { justify-content: center; } .intd-form { padding: 22px 16px; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---- Home: Meetings add-on highlight ------------------------------------ */
.mtg-banner { padding: 72px 0; background: #fff; border-bottom: 1px solid var(--border); }
.mtg-banner .int-grid { grid-template-columns: 1.1fr .9fr; }
.mtg-banner .checks { margin: 18px 0 20px; display: grid; gap: 10px; }
.mtg-slots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px !important; }
.mtg-slots span { padding: 7px 11px; border-radius: 9px; background: #fff; border: 1px solid #bfe8b8; font-size: 13.5px; font-weight: 600; color: #1c2b21; }
.mtg-slots span.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.mtg-badge { display: inline-flex; align-items: center; gap: 5px; }
.mtg-badge .i { width: 13px; height: 13px; }
.mtg-btns { display: flex; gap: 8px; margin-top: 10px !important; }
.mtg-btns span { flex: 1; text-align: center; padding: 8px 6px; border-radius: 9px; border: 1px solid #cfe2f3; color: #0a66c2; font-size: 13.5px; font-weight: 600; background: #f7fbff; }
@media (max-width: 900px) { .mtg-banner .int-grid { grid-template-columns: 1fr; } .mtg-banner { padding: 56px 0; } }

/* =========================================================================
   Home redesign (hx-*). Premium, outcome-led: one promise in the hero,
   real numbers in the trust bar, coexistence as its own section, industry
   tabs, a compact feature grid and a closing CTA band.
   ========================================================================= */
mark.hl { background: linear-gradient(180deg, transparent 58%, #bfeacd 58%); color: inherit; padding: 0 .08em; border-radius: 2px; }

/* Hero */
.hx-hero { position: relative; overflow: hidden; padding: 88px 0 72px; background: linear-gradient(180deg, #f6faf7 0%, #fff 100%); }
.hx-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; pointer-events: none; }
.hx-blob.a { width: 620px; height: 620px; right: -140px; top: -160px; background: radial-gradient(circle, #b9e6c8 0%, #dff1e5 45%, transparent 70%); }
.hx-blob.b { width: 420px; height: 420px; right: 260px; bottom: -220px; background: radial-gradient(circle, #e9f4ff 0%, transparent 70%); }
.hx-hero-grid { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.hx-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 9px; border-radius: 999px; background: #fff; border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(16,22,19,.05); font-size: 13px; font-weight: 600; color: var(--ink-muted); margin-bottom: 26px; }
.hx-pill img { width: auto; height: 20px; }
.hx-pill-sep { width: 1px; height: 16px; background: var(--border); margin: 0 2px; }
.hx-copy h1 { font-size: clamp(38px, 4.4vw, 58px); line-height: 1.06; letter-spacing: -.04em; font-weight: 800; margin: 0 0 22px; max-width: 17ch; }
.hx-sub { font-size: 18px; line-height: 1.65; color: var(--ink-muted); max-width: 520px; margin-bottom: 28px; }
.hx-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hx-primary { padding: 15px 24px; font-size: 16px; }
.hx-micro { margin-top: 16px; font-size: 13.5px; color: var(--ink-subtle); }

/* Hero scene: phone + floating outcome cards */
.hx-scene { position: relative; min-height: 580px; display: flex; align-items: center; justify-content: center; padding: 30px 0; }
.hx-phone { width: 330px; border-radius: 34px; background: #0f1512; padding: 10px; box-shadow: 0 30px 70px rgba(16,22,19,.22), 0 2px 6px rgba(16,22,19,.12); }
.hx-phone-sm { width: 300px; }
.hx-ph-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px; color: #fff; background: #1f2c25; border-radius: 26px 26px 0 0; }
.hx-ph-head b { display: block; font-size: 14px; }
.hx-ph-head small { font-size: 11px; opacity: .75; }
.hx-ph-avatar { width: 32px; height: 32px; border-radius: 50%; background: #25d366; color: #0b3f1f; display: grid; place-items: center; font-weight: 800; flex: none; }
.hx-ph-chat { background: #ece5dd; border-radius: 0 0 26px 26px; padding: 14px 12px 16px; display: flex; flex-direction: column; gap: 8px; min-height: 300px; }
.hx-msg { max-width: 86%; padding: 9px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.4; box-shadow: 0 1px 1px rgba(0,0,0,.08); margin: 0; position: relative; }
.hx-msg.in { background: #fff; align-self: flex-start; border-top-left-radius: 4px; }
.hx-msg.out { background: #d9fdd3; align-self: flex-end; border-top-right-radius: 4px; padding-right: 34px; max-width: 78%; }
.hx-tick { position: absolute; right: 9px; bottom: 6px; font-size: 10px; color: #53bdeb; letter-spacing: -2px; }
.hx-chip { align-self: center; margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: #fff; border: 1px solid var(--brand-line); color: var(--brand-dark); font-size: 12px; font-weight: 700; }
.hx-chip .i { width: 13px; height: 13px; }
.hx-card { position: absolute; display: flex; align-items: center; gap: 11px; padding: 12px 16px 12px 12px; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 14px 40px rgba(16,22,19,.12); font-size: 13.5px; animation: hxFloat 6s ease-in-out infinite; }
.hx-card b { display: block; font-size: 14px; }
.hx-card small { color: var(--ink-subtle); font-size: 12px; }
.hx-ci { width: 36px; height: 36px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; flex: none; }
.hx-ci .i { width: 18px; height: 18px; }
.hx-card.c1 { left: 0; top: 0; animation-delay: 0s; }
.hx-card.c2 { right: -3%; top: 41%; animation-delay: 2s; }
.hx-card.c3 { right: 4%; bottom: 0; animation-delay: 4s; }
@keyframes hxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Trust bar */
.hx-trust { padding: 0 0 8px; background: #fff; }
.hx-trust-row { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr; gap: 0; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.hx-stat { padding: 22px 26px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.hx-stat:last-child { border-right: 0; }
.hx-stat b { font-size: 28px; letter-spacing: -.03em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.hx-stat span { font-size: 13.5px; color: var(--ink-muted); line-height: 1.4; }
.hx-stat-logos { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 18px; }
.hx-tl { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-subtle); }
.hx-stat-logos img { height: 20px; width: auto; }
.hx-sheets { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #188038; font-size: 14px; }
.hx-sheets img { height: 18px; width: 18px; }

/* Shared split layout */
.hx-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.hx-split h2 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.1; letter-spacing: -.035em; margin: 12px 0 16px; }
.hx-split .lede { font-size: 17px; color: var(--ink-muted); margin-bottom: 20px; }
.hx-checks { margin: 0 0 22px; display: grid; gap: 12px; }
.hx-checks li { font-size: 15.5px; }

/* Coexistence */
.hx-coex { padding: 96px 0; background: #fff; }
.hx-coex .hx-split { grid-template-columns: 1fr 1.2fr; }
.hx-coex-vis { display: grid; grid-template-columns: 150px auto minmax(0, 1fr); align-items: center; gap: 8px; }
.hx-dev { border: 1px solid var(--border); border-radius: 18px; background: #fff; box-shadow: var(--shadow-lift); overflow: hidden; }
.hx-dev-label { display: block; padding: 9px 14px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-subtle); background: #f6f8f7; border-bottom: 1px solid var(--border); }
.hx-dev-phone { width: 140px; border-radius: 22px; }
.hx-dev-phone .hx-dev-screen { background: #ece5dd; padding: 12px 10px; min-height: 170px; display: flex; flex-direction: column; gap: 7px; }
.hx-dev-phone .hx-msg { font-size: 12px; padding: 7px 9px; }
.hx-desk-screen { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-height: 170px; }
.hx-desk-row { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; min-width: 0; white-space: nowrap; overflow: hidden; }
.hx-desk-row > span:last-of-type, .hx-desk-row { text-overflow: ellipsis; }
.hx-desk-row small { margin-left: auto; font-weight: 500; color: var(--ink-subtle); font-size: 12px; flex: none; }
.hx-dot { width: 8px; height: 8px; border-radius: 50%; background: #cfd6d2; flex: none; }
.hx-dot.on { background: var(--brand); box-shadow: 0 0 0 3px #d9f0e1; }
.hx-link { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hx-link-line { width: 2px; height: 26px; background: repeating-linear-gradient(180deg, var(--brand) 0 6px, transparent 6px 11px); }
.hx-link-badge { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; padding: 6px 10px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 11.5px; font-weight: 700; box-shadow: 0 6px 18px rgba(21,127,60,.3); }
.hx-link-badge .i { width: 14px; height: 14px; }

/* Industry tabs */
.hx-tabs-sec { padding: 96px 0; background: linear-gradient(180deg, #fff 0%, #f6faf7 100%); }
.hx-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -16px auto 32px; }
.hx-tabs [role="tab"] { font: inherit; font-size: 14.5px; font-weight: 600; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--ink-muted); cursor: pointer; transition: all .18s var(--ease); }
.hx-tabs [role="tab"]:hover { border-color: #cfe0d6; color: var(--ink); }
.hx-tabs [role="tab"][aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.hx-panel { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; padding: 40px; border: 1px solid var(--border); border-radius: 24px; background: #fff; box-shadow: var(--shadow); animation: tourIn .35s var(--ease); }
.hx-panel-copy h3 { font-size: clamp(24px, 2.8vw, 32px); letter-spacing: -.03em; line-height: 1.15; margin: 0 0 12px; }
.hx-panel-copy > p { color: var(--ink-muted); font-size: 16px; margin-bottom: 18px; }
.hx-panel-copy .checks { display: grid; gap: 9px; margin-bottom: 22px; }
.hx-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 22px; }
.hx-stats div { padding: 14px; border-radius: 14px; background: #f6f8f7; border: 1px solid var(--border); }
.hx-stats b { display: block; font-size: 24px; letter-spacing: -.03em; line-height: 1.1; }
.hx-stats span { font-size: 12.5px; color: var(--ink-subtle); }
.hx-panel .hx-phone { justify-self: center; }
.hx-panel[hidden] { display: none; }

/* Feature grid */
.hx-feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hx-tile { display: flex; flex-direction: column; gap: 8px; padding: 22px; border: 1px solid var(--border); border-radius: 16px; background: #fff; color: inherit; transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; }
.hx-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: #cfe0d6; }
.hx-ti { width: 40px; height: 40px; border-radius: 11px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; margin-bottom: 4px; }
.hx-ti .i { width: 20px; height: 20px; }
.hx-tile b { font-size: 16px; }
.hx-tile p { color: var(--ink-muted); font-size: 14px; margin: 0; }

/* Product proof */
.hx-proof { padding: 96px 0; background: #fff; }
.hx-proof .frame { margin: 0; }

/* Pricing split */
.hx-price { padding: 96px 0; background: #f6faf7; border-top: 1px solid var(--border); }
.hx-price-card { position: relative; background: #fff; border: 1px solid var(--border); border-radius: 22px; padding: 34px 30px 26px; box-shadow: var(--shadow-lift); }
.hx-tag { position: absolute; top: -22px; right: 26px; display: inline-flex; flex-direction: column; align-items: center; padding: 10px 16px; border-radius: 14px; background: #fff; border: 2px solid var(--brand); box-shadow: 0 8px 24px rgba(21,127,60,.18); transform: rotate(-4deg); }
.hx-tag b { font-size: 26px; line-height: 1; color: var(--brand); letter-spacing: -.03em; }
.hx-tag small { font-size: 11px; font-weight: 700; color: var(--brand-deep); }
.hx-price-big { font-size: 56px; font-weight: 800; letter-spacing: -.04em; line-height: 1; margin-bottom: 22px; }
.hx-price-big small { display: block; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--ink-muted); margin-top: 8px; }
.hx-price-rows { display: grid; gap: 0; border-top: 1px solid var(--border); }
.hx-price-rows div { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 14.5px; color: var(--ink-muted); }
.hx-price-rows b { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hx-price-note { margin-top: 14px; font-size: 13px; color: var(--ink-subtle); }

/* Final CTA band */
.hx-final { padding: 0 0 96px; background: #fff; }
.hx-final-in { background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand-dark) 55%, var(--brand) 100%); color: #fff; border-radius: 28px; padding: 64px 48px; text-align: center; box-shadow: 0 30px 70px rgba(11,63,31,.25); }
.hx-final h2 { font-size: clamp(28px, 3.6vw, 42px); letter-spacing: -.035em; line-height: 1.12; margin: 0 0 12px; color: #fff; }
.hx-final h2 span { color: #bfeacd; }
.hx-final p { color: rgba(255,255,255,.82); font-size: 17px; max-width: 560px; margin: 0 auto 26px; }
.hx-final .hx-actions { justify-content: center; }
.hx-final .hx-micro { color: rgba(255,255,255,.7); }
.cta.hx-invert { background: #fff; color: var(--brand-deep); border-color: #fff; }
.cta.hx-invert:hover { background: #eaf6ee; }
.cta.hx-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.cta.hx-outline:hover { background: rgba(255,255,255,.1); }

/* Responsive */
@media (max-width: 960px) {
  .hx-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hx-copy h1 { max-width: none; }
  .hx-scene { min-height: 460px; }
  .hx-feat-grid { grid-template-columns: repeat(2, 1fr); }
  .hx-trust-row { grid-template-columns: 1fr; }
  .hx-stat { border-right: 0; border-bottom: 1px solid var(--border); }
  .hx-stat:last-child { border-bottom: 0; }
}
@media (max-width: 900px) {
  .hx-split, .hx-panel, .hx-coex .hx-split { grid-template-columns: 1fr; gap: 32px; }
  .hx-panel { padding: 24px; }
  .hx-coex-vis { grid-template-columns: 1fr; justify-items: center; }
  .hx-link { flex-direction: row; }
  .hx-link-line { width: 34px; height: 2px; background: repeating-linear-gradient(90deg, var(--brand) 0 6px, transparent 6px 11px); }
  .hx-dev-desk { width: 100%; max-width: 420px; }
}
@media (max-width: 640px) {
  .hx-hero { padding: 56px 0 48px; }
  .hx-copy h1 { font-size: clamp(34px, 9vw, 44px); }
  .hx-scene { min-height: 0; padding: 24px 0 8px; flex-direction: column; gap: 10px; }
  .hx-phone { width: min(300px, 100%); }
  .hx-card { position: static; animation: none; width: 100%; }
  .hx-feat-grid { grid-template-columns: 1fr; }
  .hx-stats { grid-template-columns: 1fr 1fr; }
  .hx-final-in { padding: 44px 22px; border-radius: 20px; }
  .hx-tag { right: 14px; }
  .hx-price-big { font-size: 44px; }
}
@media (prefers-reduced-motion: reduce) { .hx-card { animation: none; } }

.closer-accent { color: #bfeacd; }

/* =========================================================================
   Inner pages: match the homepage (hx) style. Overrides the older page hero,
   headings, cards and pills so every page inherits the same look.
   ========================================================================= */
.hero.page { background: linear-gradient(180deg, #f6faf7 0%, #fff 100%); padding: 84px 0 64px; border-bottom: 1px solid var(--border); }
.hero.page.plain { padding-bottom: 72px; }
.hero.page .orb { display: block; opacity: .55; filter: blur(70px); animation: none; }
.hero.page .orb.a { width: 620px; height: 620px; top: -220px; right: -160px; background: radial-gradient(circle, #b9e6c8 0%, #dff1e5 45%, transparent 70%); }
.hero.page .orb.b { width: 420px; height: 420px; top: auto; bottom: -240px; left: -140px; background: radial-gradient(circle, #e9f4ff 0%, transparent 70%); }
.hero.page h1 { font-size: clamp(36px, 4.6vw, 60px); font-weight: 800; letter-spacing: -.04em; line-height: 1.06; max-width: 880px; }
.hero.page .sub { font-size: 18px; line-height: 1.65; max-width: 640px; }
.hero.page .eyebrow, .hero.page .pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(16,22,19,.05); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink-muted); margin-bottom: 24px; }
.hero.page .eyebrow .i { width: 15px; height: 15px; color: var(--brand); }
.hero.page .hero-actions .cta.large:not(.ghost) { padding: 15px 24px; font-size: 16px; }
.hero.page .hero-actions .cta.large.ghost { padding: 14px 22px; font-size: 15px; }
/* The green accent phrase becomes the marker highlight used on the homepage. */
.hero h1 .accent, .accent { color: inherit; background: linear-gradient(180deg, transparent 58%, #bfeacd 58%); padding: 0 .08em; border-radius: 2px; }
.sec-head h2 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; }
.sec-head p { font-size: 17px; }
.eyebrow { color: var(--brand); }
.card { border-radius: 16px; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: #cfe0d6; }
.card .icon, .icon-chip { border-radius: 11px; }
.card h3 { font-size: 17px; letter-spacing: -.01em; }
section.alt { background: #f6faf7; }
.addon-card, .price-box, .cmp-card, .calc, .bill-wrap, .timeline .tl { border-radius: 18px; }
@media (max-width: 640px) { .hero.page { padding: 56px 0 44px; } .hero.page h1 { font-size: clamp(32px, 9vw, 42px); } }

/* Guide videos: a compact "Watch" button per tutorial that opens the player in place.
   preload="none" on the video, so nothing downloads until someone presses play. */
.guide-videos { display:flex; flex-direction:column; gap:8px; margin:0 0 18px; }
details.gv { background:#f6faf7; border:1px solid #d9eadf; border-radius:12px; padding:0 14px; margin:0; }
details.gv[open] { background:var(--surface); box-shadow:var(--shadow-lift, 0 10px 30px rgba(16,35,26,.08)); }
details.gv summary { padding:10px 0; font-size:14.5px; font-weight:600; justify-content:flex-start; gap:10px; color:var(--ink); }
details.gv summary::after { content:none; }
details.gv summary .play { flex:none; width:26px; height:26px; border-radius:50%; background:var(--brand); position:relative; }
details.gv summary .play::before { content:""; position:absolute; left:10px; top:7px; border-left:9px solid #fff; border-top:6px solid transparent; border-bottom:6px solid transparent; }
details.gv[open] summary .play { background:var(--ink-subtle); }
details.gv[open] summary .play::before { left:7px; top:12px; width:12px; height:2px; border:0; background:#fff; }
details.gv summary .len { margin-left:auto; font-weight:500; font-size:13px; color:var(--ink-subtle); }
details.gv video { display:block; width:100%; aspect-ratio:16/9; border-radius:10px; background:#0d1f16; margin:2px 0 14px; }
.guide-video-note { font-size:13.5px; color:var(--ink-subtle); }