/* ==========================================================================
   Qmize landing page
   Design tokens are the only place colours/sizes are defined. Change them
   here and the whole page follows.
   ========================================================================== */

:root {
  /* Colour. Greens are taken from WhatsApp's own palette so the page reads as
     native to the channel it sells. */
  /* Two anchors: Qmize's own blue (identity, sampled from the logo) and
     WhatsApp green (the channel, and therefore the action colour). */
  --blue:       #0e5c8a;   /* Qmize brand blue */
  --blue-deep:  #064a73;
  --ink:        #06223a;   /* deep blue-black, body text and dark sections */
  --ink-soft:   #123550;
  --teal:       #075e54;   /* WhatsApp dark teal — the phone mock only */
  --brand:      #25d366;   /* action colour. Buttons only. */
  --brand-deep: #1da851;
  --canvas:     #ece5dd;   /* WhatsApp chat wallpaper */
  --bubble:     #dcf8c6;   /* outgoing message bubble */
  --paper:      #ffffff;
  --muted:      #5b6b78;
  --line:       #d9dee3;
  --line-soft:  #e9edf0;
  --warn:       #a3342b;   /* "without Qmize" column only */

  /* Type */
  --display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Scale: 1.25 major third, clamped for fluid resizing */
  --t-hero: clamp(2.3rem, 1.4rem + 3.9vw, 4.1rem);
  --t-h2:   clamp(1.75rem, 1.25rem + 2.1vw, 2.75rem);
  --t-h3:   clamp(1.1rem, 1rem + 0.45vw, 1.35rem);
  --t-lead: clamp(1.05rem, 0.98rem + 0.4vw, 1.2rem);

  /* Layout */
  --wrap: 1180px;
  --gutter: 20px;
  --radius: 14px;
  --radius-lg: 22px;
  --section-y: clamp(3.5rem, 2rem + 6vw, 6.5rem);
}

/* --- reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.62;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.08; margin: 0; font-weight: 700; letter-spacing: -0.021em; }
h1 { font-size: var(--t-hero); letter-spacing: -0.032em; }
h2 { font-size: var(--t-h2); letter-spacing: -0.026em; }
h3 { font-size: var(--t-h3); }
p  { margin: 0; }
figure, blockquote { margin: 0; }
a  { color: inherit; }

:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section-canvas { background: var(--canvas); }
.section-dark { background: var(--ink); color: #e6eef5; }
.section-dark h2, .section-dark h3 { color: #fff; }

.stack > * + * { margin-top: 1rem; }
.lead { font-size: var(--t-lead); color: var(--muted); max-width: 62ch; }
.section-dark .lead { color: #9fbdd4; }

.section-head { max-width: 40ch; margin-bottom: clamp(2rem, 1rem + 3vw, 3.25rem); }
.section-head .lead { margin-top: .9rem; }

.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;
}

/* --- buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--body); font-weight: 600; font-size: 1rem;
  padding: .85rem 1.5rem; border-radius: 999px; border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary { background: var(--brand); color: #04231a; border-color: var(--brand); }
.btn-primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.section-dark .btn-ghost { color: #fff; border-color: rgba(255,255,255,.3); }
.section-dark .btn-ghost:hover { border-color: #fff; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: not-allowed; }

/* --- header --------------------------------------------------------------- */

.masthead {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.masthead-in { display: flex; align-items: center; gap: 1.5rem; height: 68px; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; margin-right: auto; min-height: 44px; }
.brand img { height: 30px; width: auto; }
.nav { display: flex; gap: 1.6rem; }
.nav a { text-decoration: none; font-size: .94rem; font-weight: 500; color: var(--muted); }
.nav a:hover { color: var(--ink); }
.masthead .btn { padding: .6rem 1.15rem; font-size: .92rem; }
.nav-toggle { display: none; background: none; border: 0; padding: .4rem; cursor: pointer; }

@media (max-width: 900px) {
  .nav { display: none; }
  .nav.is-open {
    display: flex; flex-direction: column; position: absolute; inset: 68px 0 auto;
    background: var(--paper); border-bottom: 1px solid var(--line); padding: 1rem var(--gutter) 1.4rem; gap: .2rem;
  }
  .nav.is-open a { padding: .6rem 0; font-size: 1.05rem; border-bottom: 1px solid var(--line-soft); }
  .nav-toggle { display: block; order: 3; }
  .masthead .btn-primary { order: 2; }
}

/* --- hero ----------------------------------------------------------------- */

.hero { background: linear-gradient(180deg, #fff 0%, var(--canvas) 100%); padding-block: clamp(2.75rem, 1.5rem + 5vw, 5rem) var(--section-y); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.25rem, 1rem + 4vw, 3.5rem); align-items: start; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 0.95fr 1fr; } }

.hero h1 { max-width: 15ch; }
.hero .lead { margin-top: 1.25rem; max-width: 46ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.9rem; }

.proof { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.proof-item { display: flex; align-items: center; gap: .45rem; font-size: .9rem; color: var(--muted); font-weight: 500; }
.tick { flex: none; width: 17px; height: 17px; color: var(--brand-deep); }

/* --- chat primitives (used in hero card + demo section) ------------------- */

.thread { display: flex; flex-direction: column; gap: .45rem; }
.msg {
  max-width: 78%; padding: .55rem .8rem .45rem; border-radius: 12px;
  font-size: .92rem; line-height: 1.45; position: relative;
  box-shadow: 0 1px 1px rgba(5,34,26,.09);
}
.msg-in  { background: #fff; align-self: flex-start; border-top-left-radius: 3px; }
.msg-out { background: var(--bubble); align-self: flex-end; border-top-right-radius: 3px; }
.msg-meta { display: block; text-align: right; font-size: .68rem; color: #7d8f86; margin-top: .15rem; }
.msg-meta .ticks { color: #34b7f1; letter-spacing: -2px; margin-left: 2px; }

/* --- lead form card ------------------------------------------------------- */

.form-card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: 0 18px 44px -28px rgba(5,34,26,.45);
}
.form-card-head { background: var(--blue); color: #fff; padding: 1rem 1.25rem; display: flex; align-items: center; gap: .7rem; }
.form-card-head .avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--brand);
  display: grid; place-items: center; flex: none; color: #04231a; font-weight: 700; font-family: var(--display);
}
.form-card-head strong { display: block; font-size: .98rem; font-weight: 600; }
.form-card-head span { font-size: .78rem; color: #a9cfe6; }
.form-card-chat { background: var(--canvas); padding: 1rem 1.1rem 1.25rem; }
.form-card-body { padding: 1.35rem 1.25rem 1.5rem; }

.field { margin-bottom: .85rem; }
.field label { display: block; font-size: .83rem; font-weight: 600; margin-bottom: .32rem; color: var(--ink-soft); }
.field input, .field select {
  width: 100%; font-family: var(--body); font-size: 1rem; color: var(--ink);
  padding: .72rem .85rem; border: 1.5px solid var(--line); border-radius: 10px; background: #fff;
  transition: border-color .15s ease;
}
.field input:focus, .field select:focus { border-color: var(--brand-deep); outline: none; box-shadow: 0 0 0 3px rgba(37,211,102,.18); }
.field-row { display: grid; grid-template-columns: 108px 1fr; gap: .5rem; }
.field-row select { padding-inline: .5rem; }
.field-error { display: none; font-size: .8rem; color: var(--warn); margin-top: .3rem; }
.field.has-error input, .field.has-error select { border-color: var(--warn); }
.field.has-error .field-error { display: block; }

.form-note { font-size: .79rem; color: var(--muted); margin-top: .8rem; text-align: center; }
.form-status { display: none; padding: .85rem 1rem; border-radius: 10px; font-size: .92rem; margin-bottom: .9rem; }
.form-status.is-ok   { display: block; background: var(--bubble); color: #0d4a2b; }
.form-status.is-fail { display: block; background: #fdecea; color: var(--warn); }

/* honeypot: off-screen, never shown, not announced */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.spinner {
  width: 15px; height: 15px; border: 2px solid rgba(4,35,26,.3); border-top-color: #04231a;
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- trust bar ------------------------------------------------------------ */

.trustbar { border-block: 1px solid var(--line-soft); padding-block: 2rem; background: #fff; }
.trust-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.25rem 2.5rem; }
.trust-label { font-size: .85rem; color: var(--muted); font-weight: 500; text-align: center; margin-bottom: 1.1rem; }
/* client marks vary wildly in aspect, so cap height and let width follow */
/* marks range from 500x182 to 1540x1670, so fit each inside one box
   rather than forcing a shared height */
.trust-logos img { max-height: 40px; max-width: 118px; width: auto; height: auto; object-fit: contain;
  opacity: .72; filter: grayscale(1); transition: opacity .2s ease, filter .2s ease; }
.trust-logos img:hover { opacity: 1; filter: none; }

.trust-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1rem 1.5rem; margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line-soft); }
.trust-meta img { height: 78px; width: auto; }
.trust-meta p { font-size: .9rem; color: var(--muted); max-width: 54ch; }
.trust-meta strong { color: var(--ink); }

/* --- chat demo ------------------------------------------------------------ */

.demo-grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .demo-grid { grid-template-columns: 1fr 380px; align-items: start; } }

.phone {
  background: var(--ink); border-radius: 30px; padding: 10px; justify-self: center; width: 100%; max-width: 360px;
  box-shadow: 0 30px 60px -30px rgba(5,34,26,.6);
}
.phone-screen { background: var(--canvas); border-radius: 22px; overflow: hidden; }
.phone-bar { background: var(--teal); color: #fff; padding: .8rem 1rem; display: flex; align-items: center; gap: .6rem; }
.phone-bar .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--brand); flex: none; }
.phone-bar strong { font-size: .9rem; font-weight: 600; }
.phone-bar span { display: block; font-size: .72rem; color: #9fd8c4; }
.phone-thread { padding: 1rem .85rem 1.4rem; min-height: 330px; }

.demo-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.demo-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 1rem; padding-block: 1rem; border-top: 1px solid var(--line); }
.demo-steps li:first-child { border-top: 0; padding-top: 0; }
.demo-steps .num {
  counter-increment: step; width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--brand-deep); color: var(--brand-deep);
  display: grid; place-items: center; font-weight: 700; font-size: .85rem; font-family: var(--display);
}
.demo-steps .num::before { content: counter(step); }
.demo-steps h3 { margin-bottom: .2rem; }
.demo-steps p { font-size: .94rem; color: var(--muted); }

/* --- feature grid --------------------------------------------------------- */

.grid-3 { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.feature { padding: 1.6rem 1.5rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
/* the features section is centred, so the icon centres with the text;
   green reads as the action colour used everywhere else */
.feature .ico { width: 38px; height: 38px; color: var(--brand-deep);
  margin: 0 auto 1rem; display: block; }
.feature h3 { margin-bottom: .45rem; }
.feature p { font-size: .94rem; color: var(--muted); }

/* --- alternating deep-dive ------------------------------------------------ */

.dive { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3.25rem); align-items: center; padding-block: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); border-top: 1px solid var(--line); }
.dive:first-of-type { border-top: 0; padding-top: 0; }
@media (min-width: 880px) {
  .dive { grid-template-columns: 1fr 1fr; }
  .dive.is-flipped .dive-visual { order: -1; }
}
.dive h3 { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.95rem); letter-spacing: -0.024em; margin-bottom: .75rem; }
.dive p { color: var(--muted); max-width: 52ch; }
.dive-list { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .55rem; }
.dive-list li { display: grid; grid-template-columns: 20px 1fr; gap: .6rem; font-size: .94rem; }
.dive-visual { background: var(--canvas); border-radius: var(--radius-lg); padding: 1.5rem; border: 1px solid var(--line); }

/* product screenshots sit in a light synthetic window frame — the real
   browser chrome was cropped off because it leaked other tabs */
.shot { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line);
  background: #fff; box-shadow: 0 24px 50px -32px rgba(6,34,58,.55); }
.shot-bar { display: flex; align-items: center; gap: 6px; padding: .6rem .85rem;
  background: #f2f5f7; border-bottom: 1px solid var(--line); }
.shot-bar span { width: 9px; height: 9px; border-radius: 50%; background: #cfd8de; }
.shot img { width: 100%; height: auto; display: block; }
.shot-wide { max-width: none; margin-inline: auto; }
@media (min-width: 880px) { .dive .shot { max-width: none; } }

/* --- pricing -------------------------------------------------------------- */

/* six tiers read better as 3+3 than squeezed onto one row */
.tiers { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); align-items: stretch; }
@media (min-width: 900px)  { .tiers { grid-template-columns: repeat(3, 1fr); } }

.billing { display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .3rem; margin-bottom: 2rem;
  background: var(--canvas); border-radius: 999px; }
.billing-opt { font-family: var(--body); font-size: .88rem; font-weight: 600; color: var(--muted);
  background: none; border: 0; padding: .5rem 1.05rem; border-radius: 999px; cursor: pointer;
  transition: background-color .15s ease, color .15s ease; }
.billing-opt:hover { color: var(--ink); }
.billing-opt.is-active { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(6,34,58,.16); }

/* was pinned left and left a dead gap on the right */
.conv-note { margin: 2rem auto 0; padding: 1.4rem 1.6rem; border: 1px solid var(--line);
  border-radius: var(--radius); background: #fff; max-width: 90ch; }
.conv-note p { font-size: .92rem; color: var(--muted); }
.conv-note strong { color: var(--ink); }
.conv-addons { margin-top: .6rem !important; font-size: .86rem; }
.tier { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.35rem; display: flex; flex-direction: column; height: 100%; }
.tier.is-featured { border: 2px solid var(--brand-deep); box-shadow: 0 16px 40px -26px rgba(5,34,26,.5); }
.tier-flag { position: absolute; top: 0; right: 1.2rem; transform: translateY(-50%);
  background: var(--brand-deep); color: #fff; font-size: .7rem; font-weight: 700;
  padding: .28rem .75rem; border-radius: 999px; letter-spacing: .01em; white-space: nowrap; }
.tier h3 { margin-bottom: .3rem; }
.tier .tier-for { font-size: .86rem; color: var(--muted); min-height: 2.6em; }
.tier-price { font-family: var(--display); font-size: 1.7rem; font-weight: 700; margin: 1rem 0 .15rem; letter-spacing: -0.02em; min-height: 2.1em; display: flex; flex-direction: column; justify-content: center; }
/* placeholder until real figures land — must not shout like a price */
.tier-tbd { font-family: var(--body); font-size: .93rem; font-weight: 600; color: var(--muted); letter-spacing: 0; line-height: 1.35; }
.tier-price small { display: block; font-family: var(--body); font-size: .78rem; font-weight: 500; color: var(--muted); letter-spacing: 0; margin-top: .2rem; }
.tier ul { list-style: none; margin: 1.1rem 0 1.5rem; padding: 0; display: grid; gap: .5rem; font-size: .9rem; }
.tier ul li { display: grid; grid-template-columns: 18px 1fr; gap: .55rem; }
.tier .btn { margin-top: auto; }

/* --- comparison ----------------------------------------------------------- */

.compare { display: grid; gap: 1.25rem; }
@media (min-width: 780px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare-col { border-radius: var(--radius); padding: 1.6rem 1.5rem; border: 1px solid var(--line); background: #fff; }
.compare-col.is-them { background: #fbf6f5; border-color: #eedbd8; }
.compare-col.is-us { border: 2px solid var(--brand-deep); }
.compare-col h3 { margin-bottom: 1.1rem; }
.compare-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; font-size: .94rem; }
.compare-col li { display: grid; grid-template-columns: 20px 1fr; gap: .6rem; }
.compare-col.is-them li { color: #6c4f4b; }
.mark { flex: none; width: 18px; height: 18px; margin-top: .2rem; }
.mark-no { color: var(--warn); }
.mark-yes { color: var(--brand-deep); }

/* --- integrations --------------------------------------------------------- */

.logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(135px, 100%), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.logos div { background: #fff; padding: 1.5rem 1rem; display: grid; place-items: center; font-weight: 600; color: var(--muted); font-size: .95rem; }

/* --- testimonials --------------------------------------------------------- */

.quotes { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(275px, 100%), 1fr)); }
.quote { background: var(--bubble); border-radius: 14px; border-top-left-radius: 3px; padding: 1.4rem 1.4rem 1.1rem; }
.quote blockquote { margin: 0; font-size: .97rem; }
.quote figcaption { margin-top: 1.1rem; display: flex; align-items: center; gap: .7rem;
  font-size: .85rem; color: #2f4a3a; }
.quote figcaption img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none; }
.quote figcaption strong { display: block; font-weight: 600; }
.quote figcaption span { display: block; color: #5f7a6b; }

/* --- faq ------------------------------------------------------------------ */

/* the FAQ section is centred now, so the list should be too */
.faq { max-width: 820px; margin-inline: auto; text-align: left; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.15rem 2.5rem 1.15rem 0; position: relative;
  font-family: var(--display); font-size: 1.08rem; font-weight: 600; letter-spacing: -0.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .45rem; top: 50%; width: 10px; height: 10px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq .answer { padding: 0 2.5rem 1.3rem 0; color: var(--muted); font-size: .97rem; }

/* --- final cta ------------------------------------------------------------ */

.final-grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); align-items: center; }
@media (min-width: 960px) { .final-grid { grid-template-columns: 1fr 460px; } }

/* --- footer --------------------------------------------------------------- */

.foot { background: var(--ink); color: #9db0c2; padding-block: 3rem 2rem; font-size: .92rem; }
.foot a { color: #cfdfeb; text-decoration: none; }
.foot a:hover { color: #fff; text-decoration: underline; }
.foot-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.foot h4 { color: #fff; font-size: .95rem; margin-bottom: .8rem; }
/* box-sizing:border-box was subtracting the padding from the height and
   squashing the mark; give it a padded wrapper instead */
.foot-logo { display: block; height: 34px; width: auto; box-sizing: content-box;
  background: #fff; border-radius: 10px; padding: 8px 12px; margin-bottom: .9rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.foot-base { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between; font-size: .85rem; }

/* --- floating whatsapp ---------------------------------------------------- */

.fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 70;
  width: 56px; height: 56px; border-radius: 50%; background: var(--brand);
  display: grid; place-items: center; color: #04231a;
  box-shadow: 0 10px 26px -8px rgba(5,34,26,.55);
}
.fab svg { width: 30px; height: 30px; }

/* ==========================================================================
   Mobile. ~95% of this page's traffic is phones, so these are corrections
   to the desktop-first rules above, not afterthoughts.
   ========================================================================== */

/* Nothing interactive should be smaller than a fingertip (44px). */
.nav-toggle { width: 44px; height: 44px; display: none; place-items: center; }
.billing-opt { min-height: 44px; }
.field-row input { min-height: 46px; }
.foot ul a { display: inline-block; padding-block: .68rem; }
.faq summary { padding-block: 1.25rem; }

/* Small print was down to 10.9px; nothing drops below 13px now. */
.msg-meta, .msg-meta .ticks { font-size: .8rem; }
.field-error { font-size: .82rem; }
.form-note { font-size: .82rem; }
.tier-price small { font-size: .82rem; }
.tier-flag { font-size: .76rem; }

@media (max-width: 900px) {
  .nav-toggle { display: grid; }
}

@media (max-width: 700px) {
  /* the sticky bar already carries this CTA, and in the header it wrapped
     onto two lines and crowded the logo */
  .masthead .btn-primary { display: none; }
  .masthead-in { height: 60px; }

  /* 18 screens is a long scroll — tighten the rhythm without cramping it */
  :root { --section-y: 3rem; }
  .hero { padding-block: 1.5rem 3rem; }
  .hero-grid { gap: 1.75rem; }
  .section-head { margin-bottom: 1.75rem; }
  .dive { padding-block: 2rem; }

  /* get the form nearer the top: the hero's job on a phone is the form */
  .hero h1 { font-size: 2.1rem; }
  .hero .lead { font-size: 1rem; }
  .proof { margin-top: 1.25rem; padding-top: 1rem; gap: .4rem 1rem; }
  .proof-item { font-size: .85rem; }
  .hero-cta { margin-top: 1.25rem; }
  .hero-cta .btn { flex: 1 1 100%; }

  .form-card-chat { padding: .8rem .9rem 1rem; }
  .form-card-body { padding: 1.1rem 1rem 1.25rem; }

  .trust-logos { gap: 1rem 1.5rem; }
  .trust-meta { flex-direction: column; text-align: center; gap: .8rem; }
  .conv-note { padding: 1rem 1.1rem; }

  /* leave room for the sticky bar so it never covers the last CTA */
  body { padding-bottom: 76px; }
  .fab { display: none; }
}

/* Sticky action bar. The page is long; the CTA should never be a scroll away. */
.mobile-bar { display: none; }
@media (max-width: 700px) {
  .mobile-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    display: flex; gap: .5rem; padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
  }
  .mobile-bar .btn-primary { flex: 1; padding-block: .8rem; }
  .mobile-bar-wa { flex: none; width: 52px; padding: 0; display: grid; place-items: center;
    border-color: var(--line); color: var(--brand-deep); }
}

/* --------------------------------------------------------------------------
   Swipeable rows on phones. Six stacked pricing cards is six screens of
   scrolling; as a swipe row it is one. Pure CSS scroll-snap — no library,
   native momentum, and it degrades to the normal grid on wider screens.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .swipe {
    display: flex;
    /* .trust-logos sets flex-wrap:wrap higher up; without this it wraps
       instead of scrolling */
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: .9rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* bleed to the screen edges so a card peeks in from the right */
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    padding-block: .25rem .75rem;
    scrollbar-width: none;
  }
  .swipe::-webkit-scrollbar { display: none; }
  .swipe > * { flex: 0 0 85%; scroll-snap-align: start; }

  /* logos are small: let them run as a loose strip, no snapping */
  .trust-logos { scroll-snap-type: none; align-items: center; gap: 1.75rem; }
  .trust-logos > * { flex: 0 0 auto; }

  .tiers > * { flex: 0 0 78%; }
  .quotes > * { flex: 0 0 86%; }

  /* the two hero CTAs belong side by side, not stacked */
  .hero-cta { flex-wrap: nowrap; gap: .5rem; }
  /* min-width:0 matters: without it a flex item cannot shrink below its
     content width and the row pushes the page wider than the screen */
  .hero-cta .btn { flex: 1 1 0; min-width: 0; padding-inline: .7rem; font-size: .92rem; }
  .wa-long { display: none; }

  /* the decorative chat above the form costs a third of a screen before
     anyone reaches a field — the form itself is the point on mobile */
  .form-card-chat { display: none; }
}

@media (max-width: 700px) {
  /* four periods wrapped onto two lines and broke the pill shape */
  .billing { display: flex; flex-wrap: nowrap; width: 100%; padding: .25rem; }
  .billing-opt { flex: 1 1 0; padding-inline: .3rem; font-size: .78rem; letter-spacing: -0.01em; }
}

/* screenshots are plain images — no enlarge affordance */
.shot { position: relative; }

/* ==========================================================================
   v2 — premium / centred layout, matching the reference page's density.
   Appended so it overrides the v1 rules above.
   ========================================================================== */

/* --- honest offer bar (no fake countdown: Qmize has no deadline) --------- */
.offerbar {
  background: linear-gradient(90deg, var(--blue-deep) 0%, var(--blue) 45%, #1aa85a 100%);
  color: #fff; font-size: .9rem; position: relative; z-index: 90;
}
.offerbar-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .5rem 1.1rem; padding: .6rem var(--gutter); text-align: center; }
.offerbar strong { font-weight: 700; }
.offerbar .pill { background: rgba(255,255,255,.16); padding: .2rem .6rem; border-radius: 999px;
  font-weight: 700; font-size: .8rem; }
.offerbar .btn { padding: .38rem 1rem; font-size: .84rem; background: #fff; color: var(--ink);
  border-color: #fff; }
.offerbar .btn:hover { background: #eaf4ee; border-color: #eaf4ee; }

/* --- centred section rhythm ---------------------------------------------- */
.centered { text-align: center; }
.centered .section-head { max-width: 62ch; margin-inline: auto; }
.centered .lead { margin-inline: auto; }
.eyebrow-pill {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--bubble); color: #0d4a2b; border: 1px solid #b9e6c4;
  font-size: .88rem; font-weight: 600; padding: .45rem 1rem; border-radius: 999px;
}
.eyebrow-pill svg { width: 17px; height: 17px; }

h1.mega { font-size: clamp(2.2rem, 1.1rem + 4.4vw, 4rem); letter-spacing: -0.035em; max-width: 24ch;
  margin-inline: auto; margin-top: 1.1rem; }
@media (max-width: 700px) { .mega-br { display: none; } }
.accent { color: var(--brand-deep); }
.underline-accent { text-decoration: underline; text-decoration-thickness: .09em;
  text-underline-offset: .1em; text-decoration-color: var(--brand); }

/* --- star strip ----------------------------------------------------------- */
.stars-row { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(240px,100%), 1fr));
  padding-block: 1.5rem; }
.star-item { text-align: center; }
.star-item .stars { color: #f5a623; letter-spacing: .12em; font-size: 1rem; }
.star-item p { font-size: .9rem; color: var(--ink-soft); font-weight: 500; margin-top: .3rem; }

/* --- meta line ------------------------------------------------------------ */
.meta-line { display: inline-flex; align-items: center; gap: .55rem; font-size: .92rem;
  color: var(--muted); font-weight: 500; margin-top: 1.1rem; background: #fff;
  border: 1px solid var(--line); padding: .45rem .9rem .45rem .6rem; border-radius: 999px; }
.meta-line img { height: 30px; width: auto; }

/* --- video facade --------------------------------------------------------- */
.video-frame { max-width: 900px; margin-inline: auto; }
.video-facade { position: relative; display: block; border: 0; padding: 0; width: 100%;
  cursor: pointer; background: none; border-radius: var(--radius-lg); overflow: hidden; }
.video-facade img { width: 100%; height: auto; display: block; }
.video-facade::after {
  content: ""; position: absolute; inset: 0; background: rgba(6,34,58,.18);
  transition: background .2s ease;
}
.video-facade:hover::after { background: rgba(6,34,58,.05); }
.video-play {
  position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%;
  background: var(--brand); display: grid; place-items: center; z-index: 2;
  box-shadow: 0 12px 34px -10px rgba(5,34,26,.6);
}
.video-play::before { content: ""; border-style: solid; border-width: 15px 0 15px 25px;
  border-color: transparent transparent transparent #04231a; margin-left: 6px; }
.video-frame iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--radius-lg); display: block; }

/* --- annotated screenshots ------------------------------------------------ */
.annotated { position: relative; }
.callout {
  position: absolute; z-index: 3; max-width: 240px;
  background: var(--ink); color: #fff; font-size: .82rem; line-height: 1.4; font-weight: 500;
  padding: .6rem .8rem; border-radius: 10px;
  box-shadow: 0 10px 26px -12px rgba(6,34,58,.7);
}
.callout::after {
  content: ""; position: absolute; width: 0; height: 0; border: 8px solid transparent;
}
.callout.from-left::after  { left: -14px;  top: 16px; border-right-color: var(--ink); }
.callout.from-right::after { right: -14px; top: 16px; border-left-color: var(--ink); }
.callout.from-below::after { left: 22px; bottom: -14px; border-top-color: var(--ink); }

/* --- repeated CTA block --------------------------------------------------- */
.cta-strip { text-align: center; padding-block: 2.25rem; }
.cta-strip .btn { font-size: 1.02rem; padding: 1rem 2.2rem; }
.cta-strip p { font-size: .88rem; color: var(--muted); margin-top: .7rem; }
.section-dark .cta-strip p { color: #9fbdd4; }

/* --- lead capture: two routes -------------------------------------------- */
.capture { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 900px) { .capture { grid-template-columns: 1fr 1fr; } }
.capture-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.6rem 1.5rem; box-shadow: 0 18px 44px -30px rgba(6,34,58,.5); text-align: left; }
.capture-card.is-primary { border: 2px solid var(--brand-deep); }
.capture-card h3 { margin-bottom: .3rem; }
.capture-card .sub { font-size: .92rem; color: var(--muted); margin-bottom: 1.1rem; }

/* multi-step form */
.steps-bar { display: flex; gap: .4rem; margin-bottom: 1.2rem; }
.steps-bar span { flex: 1; height: 4px; border-radius: 999px; background: var(--line); }
.steps-bar span.is-done { background: var(--brand-deep); }
.step { display: none; }
.step.is-active { display: block; }
.step-nav { display: flex; gap: .6rem; margin-top: .4rem; }
.step-nav .btn { flex: 1; }
.step-back { flex: 0 0 auto !important; width: 46px; padding: 0; display: grid; place-items: center; }
.step-count { font-size: .78rem; color: var(--muted); text-align: center; margin-top: .7rem; }

.calendly-embed { width: 100%; min-height: 620px; border: 0; border-radius: var(--radius); }
.capture-or { text-align: center; font-size: .85rem; color: var(--muted); font-weight: 600; }

@media (max-width: 700px) {
  .offerbar-in { font-size: .78rem; padding-block: .45rem; gap: .35rem .6rem; }
  /* keep it a real tap target */
  .offerbar .btn { padding: .55rem 1rem; font-size: .8rem; min-height: 44px; }
  .video-play { width: 62px; height: 62px; }
  .video-play::before { border-width: 11px 0 11px 18px; }
  /* On a phone the callouts sat ON the screenshot and hid part of it.
     Drop them below the image as captions: nothing is covered, and both
     notes survive instead of one being hidden. */
  .callout {
    position: static; max-width: none; margin: 0; box-shadow: none;
    border-radius: 0; display: flex; gap: .5rem;
    font-size: .76rem; line-height: 1.35; padding: .55rem .8rem;
  }
  .callout::after { display: none; }              /* no pointer when stacked */
  .callout::before { content: "\2192"; opacity: .55; }
  .callout.secondary { display: flex; }
  .callout + .callout { border-top: 1px solid rgba(255,255,255,.16); }
  .cta-strip { padding-block: 1.5rem; }
  .cta-strip .btn { width: 100%; }
  .capture-card { padding: 1.2rem 1.1rem; }
}

.capture-perks { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .55rem; font-size: .92rem; }
.capture-perks li { display: grid; grid-template-columns: 18px 1fr; gap: .6rem; }
.calendly-inline-widget { border-radius: var(--radius); overflow: hidden; }

@media (max-width: 700px) {
  /* the hero is the fold — stop the bar, stars and pill from eating it */
  .offerbar .pill { display: none; }
  .offerbar-in { flex-wrap: nowrap; justify-content: space-between; text-align: left; }
  .offerbar-in span { font-size: .74rem; line-height: 1.3; }
  .offerbar .btn { flex: 0 0 auto; }

  /* .stars-row's grid is declared after .swipe, so restate the flex here */
  .stars-row { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: .9rem; padding-block: .5rem 1rem; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter); }
  .stars-row::-webkit-scrollbar { display: none; }
  .stars-row > * { flex: 0 0 82%; scroll-snap-align: start; }
  .star-item p { font-size: .86rem; }

  .eyebrow-pill { font-size: .78rem; padding: .4rem .8rem; line-height: 1.3; }
  h1.mega { margin-top: .9rem; }
}

/* --- footer: it was a full screen tall on a phone ------------------------ */
.foot ul { gap: 0; }                       /* the link padding already spaces them */
.foot ul a { padding-block: .55rem; }
@media (min-width: 900px) {
  .foot-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }  /* one clean row, no empty track */
}
@media (max-width: 700px) {
  .foot { padding-block: 2.25rem 1.5rem; }
  /* two columns instead of one long stack */
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 1.6rem 1rem; }
  .foot-grid > :first-child { grid-column: 1 / -1; }        /* brand block spans */
  .foot h4 { margin-bottom: .5rem; font-size: .9rem; }
  .foot, .foot a { font-size: .88rem; }
  .foot-base { margin-top: 1.6rem; padding-top: 1.1rem; font-size: .78rem; gap: .4rem 1rem; }
  .foot-logo { height: 28px; padding: 6px 9px; margin-bottom: .7rem; }
}

/* video: our overlay takes the clicks so the iframe never shows YouTube's
   paused "more videos" grid */
.video-live { position: relative; aspect-ratio: 16/9; }
.video-live iframe { position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; border-radius: var(--radius-lg); pointer-events: none; }
.video-tap { position: absolute; inset: 0; width: 100%; height: 100%;
  background: none; border: 0; padding: 0; cursor: pointer; }

/* pricing: subscribe is the primary action, the demo form stays as a second route */
.tier-alt { display: block; text-align: center; margin-top: .6rem; font-size: .82rem;
  color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.tier-alt:hover { color: var(--ink); }

/* booking is the main action, so the calendar gets the width and the
   callback form sits beside it without the highlighted border */
@media (min-width: 1000px) { .capture { grid-template-columns: 1.45fr 1fr; align-items: start; } }
.capture-cal { border: 2px solid var(--brand-deep); }
.cal-holder { min-height: 660px; }
.calendly-inline-widget { min-width: 280px; height: 660px; border-radius: var(--radius); overflow: hidden; }
.cal-skeleton { min-height: 660px; display: grid; place-content: center; gap: .9rem; justify-items: center;
  border: 1px dashed var(--line); border-radius: var(--radius); background: #fbfcfd; }
.cal-skeleton span { width: 26px; height: 26px; border: 3px solid var(--line);
  border-top-color: var(--brand-deep); border-radius: 50%; animation: spin .8s linear infinite; }
.cal-skeleton p { font-size: .88rem; color: var(--muted); }
@media (max-width: 700px) {
  .cal-holder, .calendly-inline-widget, .cal-skeleton { min-height: 580px; height: 580px; }
}

/* five-step setup, taken from the client's own product page */
.steps-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); text-align: left; }
.steps-grid li { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem 1.25rem; position: relative; }
.steps-grid .step-no { font-family: var(--display); font-size: 1.5rem; font-weight: 700;
  color: var(--brand-deep); display: block; margin-bottom: .5rem; line-height: 1; }
.steps-grid h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.steps-grid p { font-size: .9rem; color: var(--muted); }
@media (max-width: 700px) {
  .steps-grid { grid-auto-flow: column; grid-auto-columns: 78%; grid-template-columns: none;
    overflow-x: auto; scroll-snap-type: x mandatory; flex-wrap: nowrap;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .steps-grid::-webkit-scrollbar { display: none; }
  .steps-grid li { scroll-snap-align: start; }
}

/* the booking card holds only the calendar now */
.capture-cal h3 { margin-bottom: .9rem; }
/* Calendly's date view is ~560px tall; reserving 700 left a dead white
   block under the picker. Height is set once, tightly, and the widget
   scrolls internally if a step needs more. */
.capture-cal .cal-holder { min-height: 0; height: auto; }
.capture-cal .calendly-inline-widget { height: 580px; min-height: 0; }
.capture-cal .cal-skeleton { min-height: 580px; height: 580px; }
@media (max-width: 700px) {
  .capture-cal .cal-holder { height: auto; min-height: 0; }
  .capture-cal .calendly-inline-widget,
  .capture-cal .cal-skeleton { height: 560px; min-height: 560px; }
}

/* --------------------------------------------------------------------------
   Selects. Safari (and iOS) draw their own control unless appearance is
   reset, which is why the dropdowns looked different there. Reset it and
   supply our own chevron so every browser matches.
   -------------------------------------------------------------------------- */
.field select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%235b6b78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 13px 9px;
  padding-right: 2.3rem;
  line-height: 1.3;
  /* iOS adds its own rounding and inner shadow */
  border-radius: 10px;
  box-shadow: none;
}
.field select::-ms-expand { display: none; }
/* the dial-code select is narrow, so the chevron sits tighter */
.field-row select { padding-right: 1.7rem; background-position: right .5rem center; padding-left: .6rem; }
.field select:focus { border-color: var(--brand-deep); box-shadow: 0 0 0 3px rgba(37,211,102,.18); outline: none; }