/* AIDM landing. Desktop (>=900px) is the 1440 x 8523 Figma canvas with every block at its
   Figma coordinates; 900-1439px scales it with the zoom layer. Mobile (<900px) follows the
   390px Figma mobile frame as normal flow. */

:root {
  --g: #12b76a;
  --g-dk: #0a7a45;
  --ink: #0f1410;
  --ink-2: #0f172a;
  --muted: #5a5650;
  --slate: #475569;
  --inter: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --geist: "Geist", "Inter", system-ui, sans-serif;
  --dot42: "42dot Sans", "Inter", system-ui, sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { font-family: var(--inter); color: var(--ink); background: #fff; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
.g { color: var(--g); }
.m-only { display: none; }

/* contact form states */
.cc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cc-status { display: none; font-size: 12.5px; line-height: 18px; font-weight: 500; }
.cc-status.show { display: block; }
.cc-status.ok { color: var(--g-dk); }
.cc-status.err { color: #b91c1c; }
.connect-card .invalid input, .connect-card input.invalid { border-color: #ef4444 !important; }
.cc-submit[disabled] { opacity: .7; cursor: progress; }

/* FAQ accordion */
.fq-row, .fq-more { background: none; border: 0; cursor: pointer; }
.fq-a { height: 0; overflow: hidden; transition: height .3s var(--ease); }
.fq-item[hidden], .fq-more[hidden] { display: none !important; }
.fq-row:focus-visible, .fq-more:focus-visible { outline: 2px solid var(--g); outline-offset: 2px; border-radius: 8px; }


/* reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* shared: eyebrow pill */
.pill { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid rgba(18,183,106,.4); border-radius: 999px; color: var(--g); font-weight: 700; text-transform: uppercase; white-space: nowrap; }

/* shared: launch-offer CTA row (hero + templates) */
.offer-row { display: flex; align-items: flex-start; gap: 17px; }
.btn-offer { display: flex; align-items: center; gap: 13px; width: 238px; height: 60px; padding: 0 20px; background: var(--g); color: #fff; border-radius: 9px; box-shadow: 0 4px 26.2px rgba(0,0,0,.25); font-weight: 800; font-size: 20px; line-height: 22.5px; transition: transform .3s var(--ease), box-shadow .3s ease; }
.btn-offer img { width: 16px; height: 16px; }
.btn-offer:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(18,183,106,.4); }
.offer-price { padding-top: 1px; }
.offer-now { font-weight: 800; font-size: 24px; line-height: 35.4px; letter-spacing: 1.77px; color: #000; }
.offer-meta { display: flex; align-items: center; gap: 8px; }
.offer-off { display: inline-flex; align-items: center; height: 21.9px; padding: 0 8.1px; background: #dcffed; border-radius: 28.4px; color: var(--g); font-weight: 500; font-size: 12.16px; line-height: 18.2px; }
.offer-old { font-weight: 300; font-size: 15.09px; line-height: 15.1px; letter-spacing: .75px; color: #c40000; text-decoration: line-through; }

/* ================================================================
   DESKTOP CANVAS (>= 900px)
   ================================================================ */
@media (min-width: 900px) {
  .page { position: relative; width: 1440px; margin: 0 auto; overflow: hidden; }
  /* Everything above the FAQ sits at fixed Figma coordinates; FAQ, demo and footer flow after it
     (same 74px / 38px gaps as Figma) so opening FAQ answers pushes the rest down. */
  .swoosh-hero, .site-header, main > section { position: absolute; }
  main { position: relative; display: block; width: 1440px; padding-top: 4802px; }
  main > .pricing, main > .broadcast, main > .faq, main > .demo { position: relative; left: auto; top: auto; }
  main > .pricing { margin-left: 37px; }
  main > .broadcast { margin: 23px 0 0 37px; }
  main > .faq { margin: 79px 0 0 38px; }
  main > .demo { margin: 74px 0 0 38px; }
  .connect-card { scroll-margin-top: 40px; }
  .site-footer { position: relative; margin-top: 38px; }
  .d-only-flex { display: flex; }
  section[id] { scroll-margin-top: 24px; }
  .pill .pt { text-align: center; }
  .templates .pill { width: 433.72px; padding: 0 9px 0 17px !important; }
  .templates .pill .pt { width: 387.72px; }
  .pill-line { width: 346px; padding: 0 29px 0 17.47px !important; gap: 7.53px !important; }
  .pill-line .pt { width: 278px; }
  .ts-head .pill { width: 316px; }
  .pill-pr { width: 415px; }
  .fq-pill { width: 157px; justify-content: center; padding: 0 !important; }

  .swoosh-hero { left: 334px; top: -88px; width: 1135px; height: 876px; pointer-events: none; }

  /* ---------- header ---------- */
  .site-header { left: 101px; top: 36px; width: 1238px; height: 74px; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 0 18.47px 0 33.58px; background: #fff; border: .93px solid #f1f5f9; border-radius: 20px; box-shadow: 0 3.73px 24.72px rgba(0,0,0,.13); }
  .brand { display: flex; align-items: center; gap: 11.19px; }
  .brand img { width: 39.18px; height: 39.18px; }
  .brand span { font-weight: 800; font-size: 18.66px; line-height: 22.6px; color: var(--ink-2); }
  .nav-cta { display: flex; align-items: center; gap: 7.46px; height: 38.39px; padding: 0 18.66px; background: #101010; border-radius: 8.4px; color: #fff; font-weight: 600; font-size: 13.06px; line-height: 15.8px; transition: transform .25s var(--ease), background .25s ease; }
  .nav-cta img { width: 13.06px; height: 13.06px; }
  .nav-cta:hover { transform: translateY(-2px); background: var(--g); }

  /* ---------- hero ---------- */
  .hero { left: 0; top: 0; width: 1440px; height: 800px; }
  .hero-copy { position: absolute; left: 80px; top: 293px; width: 640px; }
  .hero h1 { position: relative; font-family: var(--inter); }
  .h1-a { display: block; margin-left: 1px; font-weight: 700; font-size: 48px; line-height: 46.9px; letter-spacing: -2.44px; color: var(--ink); white-space: nowrap; }
  .h1-a .g { font-weight: 900; }
  .h1-b { display: block; margin-top: 2.78px; font-weight: 900; font-size: 86.4px; line-height: 102px; letter-spacing: -4px; color: #000; white-space: nowrap; }
  .wa-icon { position: absolute; left: -31px; top: 135.62px; width: 140.5px; height: 140.5px; }
  .wa-gap { display: inline-block; width: 98px; }
  .hero-sub { position: absolute; left: 1px; top: 270.62px; width: 600px; font-size: 16px; line-height: 29px; color: var(--muted); }
  .hero .offer-row { position: absolute; left: 1px; top: 362.62px; }

  .connect-card { position: absolute; left: 813px; top: 179px; width: 544.53px; height: 557.49px; display: flex; flex-direction: column; gap: 23.01px; padding: 30.68px; background: #fff; border: .96px solid #e5e7eb; border-radius: 35px; box-shadow: 0 15.34px 38.35px rgba(15,23,42,.07); }
  .cc-head { display: flex; flex-direction: column; gap: 7.67px; }
  .cc-head h2 { font-weight: 700; font-size: 30.68px; line-height: 36.8px; color: var(--ink-2); }
  .cc-head p { font-size: 14.38px; line-height: 21.6px; color: var(--slate); }
  .cc-form { display: flex; flex-direction: column; gap: 15.34px; }
  .cc-row { display: flex; gap: 15.34px; }
  .cc-row .cc-field { flex: 1; min-width: 0; }
  .cc-field { display: flex; flex-direction: column; gap: 7.67px; }
  .cc-field > span { font-weight: 600; font-size: 12.46px; line-height: 15.1px; color: #334155; }
  .cc-field input, .cc-field textarea { width: 100%; height: 49.85px; padding: 0 15.34px; border: .96px solid #e5e7eb; border-radius: 13.42px; background: #fff; font-size: 13.42px; line-height: 16.2px; color: var(--ink-2); outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
  .cc-field textarea { height: 84.36px; padding: 15.34px; line-height: 20.1px; resize: none; }
  .cc-field input::placeholder, .cc-field textarea::placeholder { color: #94a3b8; }
  .cc-field input:focus, .cc-field textarea:focus { border-color: var(--g); box-shadow: 0 0 0 3px rgba(18,183,106,.12); }
  .cc-foot { display: flex; flex-direction: column; gap: 11.5px; }
  .cc-submit { display: flex; align-items: center; justify-content: center; gap: 7.67px; height: 49.85px; background: #101010; border-radius: 9px; color: #fff; font-weight: 700; font-size: 13.42px; line-height: 16.2px; transition: background .25s ease; }
  .cc-submit img { width: 15.34px; height: 15.34px; }
  .cc-submit:hover { background: var(--g); }
  .cc-fine { font-size: 11.5px; line-height: 17.3px; color: #94a3b8; }

  /* ---------- features ---------- */
  .features { left: 36px; top: 848px; width: 1366px; height: 594px; border-radius: 41px; overflow: hidden; }
  .features::before { content: ""; position: absolute; inset: 0; background: url(../assets/img/rectangle-2.webp) center / cover; opacity: .46; }
  .ft-logo { position: absolute; left: 649px; top: 48px; width: 69.91px; display: flex; flex-direction: column; align-items: center; gap: 9.02px; }
  .ft-logo img { width: 69.91px; height: 69.91px; }
  .ft-logo span { font-weight: 800; font-size: 20px; line-height: 24px; color: var(--ink-2); }
  .ft-stem { position: absolute; left: 686.56px; top: 154px; width: .88px; height: 75.5px; background: #d2c8ba; }
  .ft-card { position: absolute; left: 201px; top: 229px; width: 967px; height: 261px; border-radius: 35.34px; border: 1px solid rgba(210,205,196,.75); background: rgba(255,253,247,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); box-shadow: 0 28px 66.6px rgba(0,0,0,.1); }
  .ft-link { position: absolute; top: -1px; width: 1px; height: 44px; background: #d2c8ba; }
  .ft-link.l1 { left: 114px; } .ft-link.l2 { left: 302px; } .ft-link.l3 { left: 485px; } .ft-link.l4 { left: 675px; } .ft-link.l5 { left: 862px; }
  .ft-list { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
  .ft-item { position: absolute; top: 43.34px; display: flex; flex-direction: column; align-items: center; gap: 13.8px; width: 187.41px; padding: 0 23.06px; text-align: center; transition: transform .3s var(--ease); }
  .ft-item.i1 { left: 20.62px; } .ft-item.i2 { left: 208.03px; } .ft-item.i3 { left: 393.44px; width: 185.11px; } .ft-item.i4 { left: 580.56px; } .ft-item.i5 { left: 767.97px; }
  .ft-item img { width: 40.24px; height: 40.24px; transition: transform .3s var(--ease); }
  .ft-item span { font-weight: 700; font-size: 16px; line-height: 20px; color: #111827; }
  .ft-item:hover img { transform: translateY(-3px) scale(1.06); }
  .ft-trust { position: absolute; left: 33.59px; top: 176.64px; width: 901.19px; height: 56.1px; border-top: 1.77px solid rgba(184,149,106,.22); }
  .ft-trust img { position: absolute; left: 157.02px; top: 23.63px; width: 28.27px; height: 28.27px; }
  .ft-trust p { position: absolute; left: 199.43px; top: 21.2px; width: 558.87px; height: 34px; white-space: nowrap; text-align: center; font-size: 22.09px; line-height: 34px; color: var(--muted); }
  .ft-trust strong { color: var(--ink); font-weight: 700; }
  .ft-trust b { color: #b8956a; font-weight: 700; }

  /* ---------- clients ---------- */
  .clients { left: 235px; top: 1519px; width: 970.33px; height: 300px; }
  .clients h2 { font-weight: 700; font-size: 56px; line-height: 48.4px; letter-spacing: -1.76px; text-align: center; color: #101010; }
  .clients h2 .g { font-weight: 800; }
  .cl-logos { position: absolute; inset: 0; }
  .cl-dup { display: none !important; }
  .cl { position: absolute; transition: transform .3s var(--ease); }
  .cl:hover { transform: scale(1.05); }
  .cl.c1 { left: 0; top: 106px; width: 177.62px; height: 75.49px; object-fit: contain; }
  .cl.c2 { left: 233.62px; top: 106px; width: 198.16px; height: 75.49px; object-fit: cover; }
  .cl.c3 { left: 487.79px; top: 106px; width: 131.63px; height: 75.49px; object-fit: cover; border-radius: 12.58px; }
  .cl.c4 { left: 675.42px; top: 106px; width: 131.63px; height: 75.49px; object-fit: cover; }
  .cl.c5 { left: 863.05px; top: 111.07px; width: 107.28px; height: 65.35px; object-fit: cover; }
  .cl.c6 { left: 158.16px; top: 196.49px; width: 102.17px; height: 103.53px; object-fit: cover; border-radius: 51.08px; }
  .cl.c7 { left: 341.33px; top: 196.84px; width: 102.84px; height: 102.84px; object-fit: cover; border-radius: 50%; }
  .cl.c8 { left: 525.17px; top: 196.49px; width: 106.05px; height: 102.84px; object-fit: contain; }
  .cl.c9 { left: 712.22px; top: 196.49px; width: 99.41px; height: 102.17px; background: #000; border-radius: 50%; }
  .cl.c9 img { position: absolute; left: 17.67px; top: 13.54px; width: 64.06px; height: 66.25px; object-fit: cover; }

  /* ---------- templates ---------- */
  .templates { left: 37px; top: 1915px; width: 1364px; height: 1024px; overflow: hidden; background: #f8f8f8; border: 1px solid #efebe0; border-radius: 41px; }
  .templates::before { content: ""; position: absolute; left: 0; top: 5px; width: 1440px; height: 1024px; background: url(../assets/img/doodle-texture.webp) center / cover; opacity: .24; }
  .tp-swoosh { position: absolute; left: -143px; top: 378px; width: 1653px; height: 524px; }
  .tp-phone { position: absolute; transition: transform .5s var(--ease); }
  .tp-left { left: 77px; top: 474px; width: 532.5px; height: 673px; }
  .tp-right { left: 819.46px; top: 473.9px; width: 487.5px; height: 592px; }
  .tp-center { left: 485px; top: 439px; width: 420px; height: 584px; }
  .tp-left:hover { transform: translateY(-8px) rotate(-1deg); }
  .tp-right:hover { transform: translateY(-8px) rotate(1deg); }
  .tp-center:hover { transform: translateY(-8px); }
  .tp-copy { position: absolute; left: 335px; top: 72px; width: 768px; display: flex; flex-direction: column; align-items: center; }
  .templates .pill { height: 35.25px; padding: 0 17px; gap: 8px; font-size: 11.5px; line-height: 17.2px; letter-spacing: 1.61px; }
  .templates .pill img { width: 12px; height: 12px; }
  .templates h2 { position: relative; left: 9.8px; margin-top: 20px; width: 771.6px; flex: none; font-weight: 700; font-size: 56px; line-height: 58.2px; letter-spacing: -2.24px; text-align: center; color: var(--ink); }
  .templates h2 .lite { font-family: var(--dot42); font-weight: 400; }
  .templates .tp-copy > p { position: relative; left: 4px; margin-top: 19.75px; width: 680px; flex: none; font-size: 16px; line-height: 26px; text-align: center; color: var(--muted); }
  .templates .offer-row { align-self: flex-start; margin-top: 35px; margin-left: 242px; }

  /* ---------- app vs api ---------- */
  .compare { left: 145px; top: 3050px; width: 1152px; height: 870px; }
  .cm-head { position: absolute; left: 0; top: 0; width: 100%; display: flex; flex-direction: column; align-items: flex-start; }
  .cm-head .pill { margin-left: 432px; }
  .pill-line { height: 35px; padding: 0 17px; gap: 8px; background: transparent; border-color: #03cf65; color: var(--g-dk); font-size: 11.5px; line-height: 17.2px; letter-spacing: 1.61px; }
  .pill-line img { width: 14px; height: 14px; }
  .cm-head h2 { margin-top: 20px; margin-left: 200px; width: 816px; font-weight: 700; font-size: 56px; line-height: 58.2px; letter-spacing: -2.24px; text-align: center; color: var(--ink); }
  .cm-head h2 .lite { font-weight: 400; }
  .cm-head p { margin-top: 16.72px; margin-left: 240px; width: 680px; font-size: 15px; line-height: 24px; text-align: center; color: var(--muted); }
  .cm-scroll { position: absolute; left: 0; top: 292.72px; width: 1152px; height: 576.75px; border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid rgba(255,255,255,.3); box-shadow: 0 1px 2px rgba(15,20,16,.04), 0 24px 60px rgba(15,20,16,.18); }

  /* ---------- testimonials ---------- */
  .testimonials { left: 37px; top: 4008px; width: 1364px; height: 694px; overflow: hidden; border-radius: 42px; background: linear-gradient(135deg, #f8f8f8 0%, #f1f8f4 100%); }
  .ts-pattern { position: absolute; left: -38px; top: 0; width: 1440px; height: 635px; pointer-events: none; }
  .ts-head { position: absolute; left: 0; top: 72px; width: 100%; display: flex; flex-direction: column; align-items: center; }
  .ts-head .pill { height: 35px; padding: 0 16px; gap: 10px; font-size: 12px; line-height: 14.5px; letter-spacing: .96px; }
  .ts-head .pill img { width: 12px; height: 12px; }
  .ts-head h2 { margin-top: 12px; font-weight: 800; font-size: 56px; line-height: 58.2px; letter-spacing: -2.24px; text-align: center; color: var(--ink); }
  .ts-head h2 .lite { font-weight: 400; }
  .ts-head p { margin-top: 12px; width: 700px; font-weight: 500; font-size: 16px; line-height: 25.6px; text-align: center; color: var(--muted); }
  .ts-row { position: absolute; left: 118px; top: 282px; display: flex; gap: 24px; }
  .ts-card { flex: none; width: 360px; height: 349px; display: flex; flex-direction: column; gap: 20px; padding: 28px; background: linear-gradient(135deg, #fff 0%, #f8f8f8 100%); border: 1px solid rgba(18,183,106,.2); border-radius: 24px; box-shadow: 0 18px 40px rgba(15,23,42,.07), 0 6px 18px rgba(18,183,106,.1); transition: transform .35s var(--ease), box-shadow .35s ease; }
  .ts-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(15,23,42,.1), 0 8px 22px rgba(18,183,106,.16); }
  .ts-av { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
  .ts-q { width: 304px; font-weight: 500; font-size: 16px; line-height: 25.6px; color: #334155; }
  .ts-meta { margin-top: 36px; display: flex; flex-direction: column; gap: 4px; }
  .ts-meta strong { font-weight: 700; font-size: 16px; line-height: 19.4px; color: var(--ink-2); }
  .ts-meta span { font-weight: 500; font-size: 14px; line-height: 16.9px; color: var(--slate); }
  .ts-meta em { font-style: normal; font-size: 14px; line-height: 16.9px; color: var(--ink-2); }

  /* ---------- pricing ---------- */
  .pricing { width: 1365px; padding: 72px 30px 88px 0; display: flex; flex-direction: column; align-items: center; overflow: hidden; border-radius: 41px; background: #fff; }
  .pricing::before { content: ""; position: absolute; left: 0; top: 0; width: 1335px; height: 1481px; background: url(../assets/img/doodle-texture.webp) center / cover; opacity: .12; }
  .pr-swoosh { position: absolute; left: -151px; top: 428px; width: 1726px; height: 553px; pointer-events: none; }
  .pr-head { position: relative; width: 1335px; display: flex; flex-direction: column; align-items: center; }
  .pill-pr { height: 36px; padding: 0 17px; gap: 8px; font-size: 11.5px; line-height: 17.2px; letter-spacing: 1.61px; }
  .pill .dot { display: block; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--g); }
  .pr-head h2 { margin-top: 20px; font-weight: 700; font-size: 52px; line-height: 56px; letter-spacing: -2px; text-align: center; color: var(--ink); white-space: nowrap; }
  .pr-head > p { margin-top: 12px; font-size: 16px; line-height: 26px; text-align: center; color: var(--muted); }
  .pr-toggle { margin-top: 20px; display: flex; align-items: center; gap: 12px; height: 49px; padding: 6px; background: #fff; border: 1px solid #e5e7eb; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
  .pr-toggle button { display: flex; align-items: center; gap: 8px; height: 37px; padding: 0 20px; border-radius: 999px; font-weight: 600; font-size: 14px; line-height: 16.9px; color: var(--muted); }
  .pr-toggle button.on { height: 33px; background: var(--g); color: #fff; }
  .pr-toggle button span { display: inline-flex; align-items: center; height: 21px; padding: 0 8px; background: #dcffed; border-radius: 999px; color: var(--g); font-size: 12px; }
  .pr-cards { position: relative; margin-top: 48px; display: flex; justify-content: center; }
  .pc-pro { height: 559px; }
  .pr-help { position: relative; margin-top: 48px; display: flex; align-items: center; gap: 8px; }

  /* ---------- broadcast ---------- */
  .broadcast { width: 1364px; height: 649px; border-radius: 42px; background: #f7f7f7; }
  .broadcast::before { content: ""; position: absolute; inset: 0; border-radius: 47px; background: url(../assets/img/doodle-texture.webp) center / cover; opacity: .31; }
  .bc-copy { position: absolute; left: 40px; top: 97.5px; width: 660px; display: flex; flex-direction: column; gap: 32px; }
  .bc-hd { display: flex; flex-direction: column; gap: 16px; }
  .bc-hd h2 { width: 620px; font-weight: 800; font-size: 38px; line-height: 56px; color: var(--ink-2); }
  .bc-hd p { font-size: 16px; line-height: 24px; color: #4b5563; }
  .bc-list { display: flex; flex-direction: column; gap: 24px; }
  .bc-list li { display: flex; gap: 16px; }
  .bc-list img { flex: none; width: 44px; height: 44px; transition: transform .3s var(--ease); }
  .bc-list li:hover img { transform: scale(1.08); }
  .bc-list div { display: flex; flex-direction: column; gap: 4px; }
  .bc-list strong { font-weight: 700; font-size: 18px; line-height: 24px; color: var(--ink-2); }
  .bc-list span { font-size: 14px; line-height: 20px; color: #4b5563; }
  .bc-cta { align-self: flex-start; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 28px; background: var(--g); border-radius: 8px; color: #fff; font-weight: 600; font-size: 15px; line-height: 18.2px; transition: transform .25s var(--ease), box-shadow .25s ease; }
  .bc-cta img { width: 16px; height: 16px; }
  .bc-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(18,183,106,.35); }
  .bc-visual { position: absolute; left: 764px; top: 74.5px; width: 560px; height: 500px; }

  /* ---------- faq ---------- */
  .faq { width: 1364px; min-height: 746px; display: flex; flex-direction: column; align-items: center; border-radius: 42px; background: #fff; }
  .fq-head { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; }
  .fq-pill { display: inline-flex; align-items: center; height: 28px; padding: 0 16px; background: #f1fdf5; border: 1px solid var(--g); border-radius: 99px; font-family: var(--geist); font-weight: 700; font-size: 12px; line-height: 15.6px; letter-spacing: .96px; text-transform: uppercase; color: var(--g); }
  .fq-head h2 { font-family: var(--geist); font-weight: 900; font-size: 44px; line-height: 52px; letter-spacing: -2px; color: var(--ink); }
  .fq-head p { width: 640px; font-family: var(--geist); font-size: 18px; line-height: 28px; text-align: center; color: var(--slate); }
  .fq-title { margin-top: 64px; width: 100%; font-family: var(--geist); font-weight: 700; font-size: 40px; line-height: 52px; text-align: center; color: var(--ink-2); }
  .fq-list { margin-top: 48px; width: 692px; }
  .fq-item { border-bottom: 1px solid #e2e8f0; }
  .fq-row { width: 100%; display: flex; align-items: center; justify-content: space-between; height: 68px; padding: 0; text-align: left; border-radius: 0; cursor: pointer; transition: background .3s ease, padding .3s var(--ease), border-radius .3s ease; }
  .fq-row span { font-family: var(--geist); font-weight: 500; font-size: 15px; line-height: 19.5px; color: #1e293b; }
  .fq-row i { width: 28px; text-align: center; font-style: normal; font-family: var(--geist); font-weight: 300; font-size: 20px; line-height: 26px; color: #64748b; transition: transform .3s var(--ease); }
  .fq-row:hover { padding: 0 12px; border-radius: 23px; background: linear-gradient(90deg, #f7f7f7 0%, #fcfcfc 40%); }
  .fq-row:hover i { transform: rotate(90deg); }
  .fq-item.open .fq-row i { transform: rotate(45deg); }
  .fq-a p { padding: 0 44px 22px 0; font-family: var(--geist); font-size: 15px; line-height: 24px; color: var(--slate); }
  .fq-more { margin-top: 48px; display: flex; gap: 6px; font-family: var(--geist); font-weight: 500; font-size: 14px; line-height: 18.2px; color: var(--slate); cursor: pointer; }

  /* ---------- book a demo ---------- */
  .demo { width: 1364px; height: 381px; overflow: hidden; border-radius: 42px; background: var(--g); }
  .dm-swoosh { position: absolute; left: -143px; top: 72px; width: 1566px; height: 462px; pointer-events: none; }
  .dm-logo { position: absolute; left: -45px; top: 214px; width: 210px; height: 210px; mix-blend-mode: lighten; pointer-events: none; }
  .dm-copy { position: absolute; left: 0; top: 66px; width: 100%; display: flex; flex-direction: column; align-items: center; }
  .dm-copy h2 { width: 920px; font-weight: 700; font-size: 44px; line-height: 48.4px; text-align: center; color: #fff; }
  .dm-copy p { margin-top: 24px; width: 760px; font-size: 18px; line-height: 27px; text-align: center; color: rgba(255,255,255,.92); }
  .dm-btns { margin-top: 24px; display: flex; gap: 16px; }

  /* ---------- footer ---------- */
  .site-footer { width: 1440px; height: 574px; overflow: hidden; background: #0b0e0c; border-radius: 42px 42px 0 0; }
  .fo-brand { position: absolute; left: 120px; top: 96px; width: 380px; display: flex; flex-direction: column; gap: 16px; }
  .fo-line { position: absolute; left: 120px; top: 254px; width: 1200px; }
  .fo-bottom { position: absolute; left: 120px; top: 294px; width: 1200px; height: 36px; display: flex; align-items: center; justify-content: space-between; }
  .fo-mark { position: absolute; left: 0; top: 341px; width: 1440px; height: 233px; }
}

/* 900-1439px: scale the 1440 canvas (see js/main.js) */
@media (min-width: 900px) and (max-width: 1439.98px) {
  body { zoom: var(--z, .68); }
}

/* ================================================================
   COMPONENTS SHARED BY BOTH LAYOUTS
   ================================================================ */
/* comparison table (fixed 1152px in both Figma frames) */
.cm-table { width: 1152px; border-collapse: collapse; table-layout: fixed; }
.cm-table th, .cm-table td { vertical-align: top; text-align: left; }
.cm-table .cm-f { width: 368px; }
.cm-table .cm-a, .cm-table .cm-p { width: 391px; border-left: 1px solid #f0f0f0; }
.cm-table thead th { height: 76.5px; }
.cm-table thead .cm-f { padding: 30.5px 18px 0; background: #fbfaf6; font-weight: 700; font-size: 12px; line-height: 18px; letter-spacing: .48px; text-transform: uppercase; color: var(--muted); }
.cm-table thead .cm-a { padding: 20px 18.5px 0; background: url(../assets/img/cm-app-head.webp) center / cover, #fcf5f5; }
.cm-table thead .cm-p { padding: 14px 18.5px 0 8.5px; background: url(../assets/img/cm-api-head.webp) center / cover, #eff3ec; }
.cm-hc { display: flex; align-items: flex-start; gap: 12px; }
.cm-hc img { width: 36px; height: 36px; flex: none; }
.cm-hc img.sh { width: 56px; height: 56px; margin-right: -8px; }
.cm-hc div { display: flex; flex-direction: column; gap: 3px; padding-top: 2px; }
.cm-p .cm-hc div { padding-top: 8px; }
.cm-hc strong { font-weight: 700; font-size: 13.5px; line-height: 16.2px; letter-spacing: -.135px; text-transform: uppercase; color: #7a1f1f; }
.cm-hc small { font-weight: 600; font-size: 9.5px; line-height: 11.4px; letter-spacing: .76px; text-transform: uppercase; color: #7a1f1f; }
.cm-p .cm-hc strong { color: #052b1a; }
.cm-p .cm-hc small { color: var(--g-dk); }
.cm-table tbody td { height: 99.75px; }
.cm-table tbody tr:last-child td { height: 99.25px; }
.cm-table tbody tr.alt .cm-f, .cm-table tbody tr.alt .cm-a { background: #fcfaf4; }
.cm-table tbody tr.alt .cm-p { background: url(../assets/img/cm-api.webp) center / cover, #f0f6f1; }
.cm-table tbody .cm-f { padding: 20.5px 18px 0; }
.cm-table tbody .cm-f strong { display: block; font-weight: 700; font-size: 14px; line-height: 21px; letter-spacing: -.21px; color: var(--ink); }
.cm-table tbody .cm-f span { display: block; margin-top: 4px; font-size: 11.5px; line-height: 17.2px; color: #8a8579; }
.cm-table tbody .cm-a, .cm-table tbody .cm-p { padding: 20.5px 18.5px 0; }
.cm-c { display: flex; align-items: flex-start; gap: 12px; }
.cm-c > div { flex: none; width: 324px; }
.cm-c > img { flex: none; width: 26px; height: 26px; margin-top: 1px; }
.cm-c > img.sh { width: 38px; height: 38px; margin: -2px -6px 0 -6px; }
.cm-c strong { display: block; font-weight: 700; font-size: 13.5px; line-height: 20.2px; letter-spacing: -.135px; color: #6b2c2c; }
.cm-c span { display: block; margin-top: 4.05px; font-size: 11.5px; line-height: 17.2px; color: #6b2c2c; }
.cm-p .cm-c strong, .cm-p .cm-c span { color: #052b1a; }
.cm-table tbody tr { transition: background .3s ease; }
.cm-table tbody tr:hover td { filter: brightness(.99); }

/* pricing cards */
.pc { flex: none; width: 284.75px; background: #fff; border: 1px solid #e8e8e0; border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,.05); overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s ease; }
.pc:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(0,0,0,.09); }
.pc-free, .pc-basic { border-top: 5px solid #e5e7eb; }
.pc-in { display: flex; flex-direction: column; gap: 20px; padding: 27px 23px; }
.pc-pro { width: 286.75px; border: 2px solid var(--g); box-shadow: 0 8px 32px rgba(18,183,106,.19), 0 4px 20px rgba(0,0,0,.1); }
.pc-pro .pc-in { padding: 26px 22px; }
.pc-hd { display: flex; flex-direction: column; gap: 8px; }
.pc-badges { display: flex; align-items: center; gap: 8px; }
.pc-badge { align-self: flex-start; display: inline-flex; align-items: center; height: 21px; padding: 0 10px; background: #f3f4f6; border-radius: 6px; font-weight: 700; font-size: 11px; line-height: 13.3px; letter-spacing: 1.2px; text-transform: uppercase; color: #6b7280; }
.pc-ent .pc-badge { color: #374151; }
.pc-pro .pc-badge { background: #dcffed; color: var(--g); }
.pc-rec { display: inline-flex; align-items: center; gap: 6px; height: 23px; padding: 0 12px; background: #dcffed; border: 1px solid rgba(18,183,106,.2); border-radius: 999px; font-weight: 700; font-size: 11px; line-height: 13.3px; letter-spacing: 1px; text-transform: uppercase; color: var(--g); white-space: nowrap; }
.pc-rec i { width: 6px; height: 6px; border-radius: 50%; background: var(--g); }
.pc-pro .pc-badges { margin-bottom: -2px; }
.pc-block { display: flex; flex-direction: column; gap: 4px; }
.pc-price { display: flex; align-items: flex-end; gap: 4px; }
.pc-price b { font-weight: 500; font-size: 44px; line-height: 48px; color: var(--ink); }
.pc-price span { font-size: 14px; line-height: 32px; color: #9ca3af; }
.pc-was { display: flex; align-items: center; gap: 8px; height: 21px; }
.pc-was s { font-size: 14px; line-height: 16.9px; color: #c40000; }
.pc-was span { display: inline-flex; align-items: center; height: 21px; padding: 0 8px; background: #dcffed; border-radius: 999px; font-weight: 600; font-size: 12px; line-height: 14.5px; color: var(--g); }
.pc-note { font-size: 13px; line-height: 15.7px; color: #9ca3af; }
.pc-cta { display: flex; align-items: center; justify-content: center; height: 48px; border-radius: 9px; font-weight: 700; font-size: 15px; line-height: 18.2px; transition: transform .25s var(--ease), box-shadow .25s ease, filter .25s ease; }
.pc-free .pc-cta { background: #f3f4f6; border: 1px solid #e5e7eb; color: #374151; }
.pc-basic .pc-cta { background: var(--g); color: #fff; box-shadow: 0 4px 12px rgba(18,183,106,.25); }
.pc-pro .pc-cta { height: 52px; background: var(--g); color: #fff; font-weight: 800; font-size: 16px; line-height: 19.4px; box-shadow: 0 6px 18px rgba(18,183,106,.38); }
.pc-ent .pc-cta { background: #0f1410; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.pc-cta:hover { transform: translateY(-2px); filter: brightness(1.05); }
.pc hr { border: 0; height: 1px; background: #f3f4f6; }
.pc-pro hr { background: #e8f8f0; }
.pc h4 { font-weight: 700; font-size: 12px; line-height: 14.5px; letter-spacing: .8px; text-transform: uppercase; color: #9ca3af; }
.pc-charges { display: flex; flex-direction: column; gap: 8px; }
.pc-charges div { display: flex; justify-content: space-between; font-size: 13px; line-height: 15.7px; }
.pc-charges div span { color: var(--muted); }
.pc-charges div b { font-weight: 600; color: var(--ink); }
.pc-charges div.free b { color: var(--g); }
.pc-feat { display: flex; flex-direction: column; gap: 10px; }
.pc-feat ul { display: flex; flex-direction: column; gap: 10px; }
.pc-feat li { display: flex; gap: 8px; font-size: 13px; line-height: 15.7px; color: #374151; }
.pc-feat li::before { content: "\2713"; flex: none; width: 12px; font-weight: 600; color: var(--g); }
.pc-more { font-weight: 600; font-size: 13px; line-height: 15.7px; color: var(--g); }
.pc-more:hover { text-decoration: underline; }
.pr-help span { font-size: 15px; line-height: 18.2px; color: var(--muted); }
.pr-help a { display: inline-flex; align-items: center; height: 38px; padding: 0 20px; background: #fff; border: 1px solid rgba(18,183,106,.4); border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.1); font-weight: 700; font-size: 15px; line-height: 18.2px; color: var(--g); transition: transform .25s var(--ease); }
.pr-help a:hover { transform: translateY(-2px); }

/* demo buttons */
.dm-btns a { display: inline-flex; align-items: center; justify-content: center; height: 51px; padding: 0; white-space: nowrap; border-radius: 14px; font-weight: 700; font-size: 16px; line-height: 19.4px; transition: transform .25s var(--ease), box-shadow .25s ease; }
.dm-primary { width: 169px; background: #fff; color: #111827; box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.dm-secondary { width: 176px; background: rgba(255,255,255,.2); border: 1.5px solid #fff; color: #fff; }
.dm-btns a:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(0,0,0,.14); }

/* footer bits */
.fo-logo { display: flex; align-items: center; gap: 12px; }
.fo-logo img { width: 36px; height: 36px; border-radius: 8px; }
.fo-logo span { font-family: var(--geist); font-weight: 900; font-size: 22px; line-height: 28.6px; letter-spacing: -1px; color: #fff; }
.fo-brand p { font-family: var(--geist); font-size: 14px; line-height: 22px; color: #94a3b8; }
.fo-line { border: 0; height: 1px; background: #222d27; }
.fo-copy { font-family: var(--geist); font-size: 14px; line-height: 18.2px; color: #94a3b8; }
.fo-legal { display: flex; gap: 28px; font-family: var(--geist); font-size: 14px; line-height: 18.2px; }
.fo-legal a { color: #94a3b8; transition: color .2s ease; }
.fo-legal a:hover { color: #fff; }

/* ================================================================
   MOBILE (< 900px): the 390px Figma mobile frame, as flow layout
   ================================================================ */
@media (max-width: 899.98px) {
  .d-only, .d-only-flex { display: none !important; }
  .m-only { display: block; }
  span.m-only { display: inline; }
  .swoosh-hero, .tp-swoosh, .tp-phone, .ts-pattern, .pr-swoosh, .dm-logo, .ft-stem, .ft-link { display: none; }
  section[id] { scroll-margin-top: 72px; }
  .connect-card { scroll-margin-top: 80px; }
  .page { width: 100%; max-width: 560px; margin: 0 auto; overflow: hidden; }

  /* header */
  .site-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 20px; background: #fff; transition: box-shadow .3s ease; }
  .site-header.scrolled { box-shadow: 0 4px 18px rgba(15,23,42,.08); }
  .brand { display: flex; align-items: center; gap: 8px; }
  .brand img { width: 28px; height: 28px; }
  .brand span { font-family: var(--geist); font-weight: 800; font-size: 16px; line-height: 20.8px; color: var(--ink-2); }
  .nav-cta { display: flex; align-items: center; gap: 7.46px; height: 38.39px; padding: 0 18.66px; background: #101010; border-radius: 8.4px; color: #fff; font-weight: 600; font-size: 13.06px; line-height: 15.8px; }
  .nav-cta img { width: 13.06px; height: 13.06px; }

  /* hero */
  .hero { padding: 32px 20px 40px; display: flex; flex-direction: column; gap: 24px; }
  .hero-copy { display: flex; flex-direction: column; gap: 16px; }
  .hero h1 { position: relative; font-family: var(--geist); font-weight: 900; color: var(--ink); }
  .h1-a { display: block; font-weight: 700; font-size: 24px; line-height: 30px; margin-bottom: -3.5px; letter-spacing: -1px; }
  .h1-a .g { font-weight: 900; }
  .h1-b { display: block; font-size: 48px; line-height: 53px; letter-spacing: -1.5px; }
  .wa-icon { display: inline-block; vertical-align: -6px; width: 50px; height: 50px; margin-left: -1px; }
  .wa-gap { display: none; }
  .hero-sub { font-family: var(--geist); font-size: 15px; line-height: 22.5px; color: var(--muted); }
  .hero .offer-row { gap: 15.2px; }
  .hero .btn-offer { width: 212.75px; height: 53.63px; padding: 0 17.88px; gap: 11.62px; font-size: 17.88px; line-height: 20.1px; border-radius: 8px; }
  .hero .btn-offer img { width: 14.3px; height: 14.3px; }
  .hero .offer-now { font-size: 21.45px; line-height: 31.7px; letter-spacing: 1.58px; }
  .hero .offer-meta { gap: 7.15px; }
  .hero .offer-off { height: 19.57px; padding: 0 7.25px; font-size: 10.87px; }
  .hero .offer-old { font-size: 13.49px; }

  .connect-card { display: flex; flex-direction: column; gap: 20px; padding: 24px; background: #fff; border: 1px solid #e5e7eb; border-radius: 24px; box-shadow: 0 10px 25px rgba(15,23,42,.05); }
  .cc-head { display: flex; flex-direction: column; gap: 8px; }
  .cc-head h2 { font-weight: 700; font-size: 24px; line-height: 28.8px; color: var(--ink-2); }
  .cc-head p { font-size: 13px; line-height: 19.5px; color: var(--slate); }
  .cc-form, .cc-row { display: flex; flex-direction: column; gap: 16px; }
  .cc-field { display: flex; flex-direction: column; gap: 6px; }
  .cc-field > span { font-weight: 600; font-size: 12px; line-height: 14.5px; color: #1e293b; }
  .cc-field input, .cc-field textarea { width: 100%; height: 44px; padding: 0 12px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; font-size: 16px; color: var(--ink-2); outline: none; }
  .cc-field textarea { height: 80px; padding: 12px; resize: none; }
  .cc-field input::placeholder, .cc-field textarea::placeholder { color: #94a3b8; font-size: 13px; }
  .cc-field input:focus, .cc-field textarea:focus { border-color: var(--g); }
  .cc-foot { display: flex; flex-direction: column; gap: 12px; }
  .cc-submit { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; background: var(--ink-2); border-radius: 8px; color: #fff; font-weight: 700; font-size: 14px; }
  .cc-submit img { width: 14px; height: 14px; }
  .cc-fine { font-size: 11px; line-height: 15.4px; color: #94a3b8; }

  /* features */
  .features { padding: 28px 20px 32px; background: #f8f8f8; display: flex; flex-direction: column; align-items: center; gap: 16px; }
  .ft-logo { display: flex; flex-direction: column; align-items: center; gap: 9px; }
  .ft-logo img { width: 60px; height: 60px; border-radius: 14px; }
  .ft-logo span { font-weight: 800; font-size: 20px; line-height: 24px; color: var(--ink-2); }
  .ft-card { width: 100%; padding: 8px 0 0; border-radius: 20px; border: 1px solid #e6e6e1; background: rgba(255,255,255,.7); box-shadow: 0 16px 40px rgba(0,0,0,.08); overflow: hidden; }
  .ft-list { display: flex; flex-direction: column; }
  .ft-item { display: flex; align-items: center; gap: 14px; height: 58px; padding: 0 18px; }
  .ft-item + .ft-item { border-top: 1px solid #f0efea; }
  .ft-item img { width: 38px; height: 38px; }
  .ft-item span { font-weight: 700; font-size: 16px; line-height: 20px; color: #111827; }
  .ft-trust { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; padding: 14px 16px; border-top: 1px solid rgba(184,149,106,.22); background: rgba(250,248,242,.8); }
  .ft-trust img { width: 16px; height: 16px; flex: none; }
  .ft-trust p { font-size: 12.16px; line-height: 14.1px; color: var(--muted); white-space: nowrap; }
  .ft-trust strong { color: var(--ink); font-weight: 700; }
  .ft-trust b { color: #b8956a; }

  /* clients */
  .clients { padding-top: 24px; }
  .clients h2 { font-family: var(--geist); font-weight: 800; font-size: 27.28px; line-height: 35.5px; text-align: center; color: var(--ink); white-space: nowrap; }
  .cl-logos { height: 94px; margin-top: 16px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
  .cl-logos::-webkit-scrollbar { display: none; }
  .cl-track { display: flex; align-items: center; width: max-content; height: 100%; }
  .cl { flex: none; height: 42px; width: 100px; margin-right: 28px; object-fit: contain; }
  .cl.c3, .cl.c4, .cl.c5 { width: 90px; }
  .cl.c6, .cl.c7 { width: 42px; border-radius: 50%; object-fit: cover; }
  .cl.c9 { position: relative; width: 42px; height: 42px; border-radius: 50%; background: #000; }
  .cl.c9 img { position: absolute; inset: 6px; width: 30px; height: 30px; object-fit: contain; }

  /* templates */
  .templates { padding: 40px 20px; background: #fbfaf6; display: flex; flex-direction: column; gap: 24px; }
  .tp-copy { display: flex; flex-direction: column; align-items: flex-start; }
  .templates .pill { height: 29px; padding: 0 16px; gap: 8px; font-family: var(--geist); font-size: 10px; line-height: 13px; letter-spacing: 1px; }
  .templates .pill img { width: 12px; height: 12px; }
  .templates h2 { margin-top: 24px; font-family: var(--geist); font-weight: 900; font-size: 28px; line-height: 33.6px; letter-spacing: -1px; color: var(--ink); }
  .templates h2 .lite { font-weight: 500; }
  .tp-copy > p { margin-top: 12px; font-family: var(--geist); font-size: 14px; line-height: 21px; color: var(--muted); }
  .tp-strip { display: flex !important; gap: 16px; margin: 0 -20px; padding: 0 20px; scroll-padding: 0 20px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
  .tp-strip::-webkit-scrollbar { display: none; }
  .tp-strip img { flex: none; width: 172px; height: 234px; object-fit: cover; object-position: top; scroll-snap-align: start; -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, #000 82%, transparent 100%); }

  .testimonials, .pricing, .broadcast, .faq, .demo { margin-top: 33px !important; }
  /* app vs api */
  .compare { padding: 48px 20px; display: flex; flex-direction: column; gap: 32px; }
  .cm-head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
  .pill-line { height: 26px; padding: 0 16px; gap: 0; background: #ecfdf5; border: 1px solid var(--g); font-family: var(--geist); font-size: 11px; line-height: 14.3px; letter-spacing: .88px; color: var(--g); }
  .pill-line img { display: none; }
  .cm-head h2 { font-family: var(--geist); font-weight: 800; font-size: 28px; line-height: 34px; letter-spacing: -1px; color: var(--ink-2); }
  .cm-head h2 .lite { font-weight: 500; }
  .cm-head p { font-family: var(--geist); font-size: 14px; line-height: 22px; color: var(--slate); }
  /* comparison table -> one card per feature, no horizontal scroll */
  .cm-scroll { margin: 0; overflow: visible; border-radius: 0; background: none; box-shadow: none; }
  .cm-table, .cm-table tbody, .cm-table tr, .cm-table td { display: block; width: 100% !important; }
  .cm-table { table-layout: auto; }
  .cm-table thead { display: none; }
  .cm-table tbody { display: flex; flex-direction: column; gap: 14px; }
  .cm-table tbody tr { padding: 18px 16px 16px; background: #fff; border: 1px solid #ececE6; border-radius: 18px; box-shadow: 0 8px 24px rgba(15,20,16,.06); }
  .cm-table tbody td { height: auto; padding: 0; border: 0; background: none; }
  .cm-table tbody tr:last-child td { height: auto; }
  .cm-table tbody .cm-f { padding: 0 2px 12px; }
  .cm-table tbody .cm-f strong { font-size: 16px; line-height: 22px; }
  .cm-table tbody .cm-f span { margin-top: 3px; font-size: 13px; line-height: 19px; }
  .cm-table tbody .cm-a, .cm-table tbody .cm-p { margin-top: 8px; padding: 12px 14px 13px; border-radius: 12px; }
  .cm-table tbody tr .cm-f, .cm-table tbody tr.alt .cm-f { background: none; }
  .cm-table tbody tr .cm-a, .cm-table tbody tr.alt .cm-a { background: #fdf4f4; border: 1px solid #f6dede; }
  .cm-table tbody tr .cm-p, .cm-table tbody tr.alt .cm-p { background: #edf9f2; border: 1px solid #cdeedb; }
  .cm-table tbody .cm-a::before, .cm-table tbody .cm-p::before { content: attr(data-label); display: block; margin-bottom: 8px; font-weight: 700; font-size: 10.5px; line-height: 13px; letter-spacing: .08em; text-transform: uppercase; }
  .cm-table tbody .cm-a::before { color: #9b2c2c; }
  .cm-table tbody .cm-p::before { color: var(--g-dk); }
  .cm-c { gap: 10px; }
  .cm-c > div { flex: 1; width: auto; min-width: 0; }
  .cm-c > img, .cm-c > img.sh { width: 22px; height: 22px; margin: 0; }
  .cm-p .cm-c > img.sh { width: 32px; height: 32px; margin: -4px -5px 0 -5px; }
  .cm-c strong { font-size: 14px; line-height: 20px; }
  .cm-c span { margin-top: 2px; font-size: 13px; line-height: 19px; }

  /* testimonials */
  .testimonials { padding: 48px 20px; display: flex; flex-direction: column; gap: 32px; }
  .ts-head { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
  .ts-head .pill { height: 26px; padding: 0 16px; gap: 0; background: #ecfdf5; border-color: var(--g); font-family: var(--geist); font-size: 11px; line-height: 14.3px; letter-spacing: .88px; }
  .ts-head .pill img { display: none; }
  .ts-head h2 { font-family: var(--geist); font-weight: 800; font-size: 28px; line-height: 34px; letter-spacing: -1.2px; color: var(--ink-2); }
  .ts-head h2 .lite { font-weight: 400; }
  .ts-head p { font-family: var(--geist); font-size: 14px; line-height: 22px; color: var(--slate); }
  .ts-row { display: flex; flex-direction: column; gap: 16px; }
  .ts-card { width: 100%; display: flex; flex-direction: column; gap: 16px; padding: 22px; background: linear-gradient(135deg, #fff 0%, #f8f8f8 100%); border: 1px solid rgba(18,183,106,.2); border-radius: 20px; box-shadow: 0 12px 28px rgba(15,23,42,.06), 0 4px 12px rgba(18,183,106,.08); }
  .ts-av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
  .ts-q { font-weight: 500; font-size: 15px; line-height: 24px; color: #334155; }
  .ts-meta { display: flex; flex-direction: column; gap: 3px; }
  .ts-meta strong { font-weight: 700; font-size: 15px; line-height: 19px; color: var(--ink-2); }
  .ts-meta span { font-weight: 500; font-size: 13px; line-height: 16px; color: var(--slate); }
  .ts-meta em { font-style: normal; font-size: 13px; line-height: 16px; color: var(--ink-2); }

  /* pricing */
  .pricing { position: relative; padding: 0 24px 48px; overflow: hidden; }
  .pricing::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1481px; background: url(../assets/img/doodle-texture.webp) center top / cover; opacity: .12; pointer-events: none; }
  .pr-head, .pr-cards, .pr-help { position: relative; }
  .pr-head { display: flex; flex-direction: column; align-items: center; gap: 20px; }
  .pill-pr { height: 29.83px; padding: 0 14px; gap: 6.59px; font-size: 9.48px; line-height: 14.2px; letter-spacing: 1.33px; }
  .pill .dot { display: block; flex: none; width: 9.89px; height: 9.89px; border-radius: 50%; background: var(--g); }
  .pr-head h2 { font-weight: 700; font-size: 36px; line-height: 40px; letter-spacing: -1px; text-align: center; color: var(--ink); }
  .pr-head > p { margin-top: -8px; font-size: 16px; line-height: 26px; text-align: center; color: var(--muted); }
  .pr-toggle { display: flex; align-items: center; gap: 12px; height: 49px; padding: 6px; background: #fff; border: 1px solid #e5e7eb; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
  .pr-toggle button { display: flex; align-items: center; gap: 8px; height: 37px; padding: 0 16px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--muted); }
  .pr-toggle button.on { width: 117px; justify-content: center; height: 33px; background: var(--g); color: #fff; }
  .pr-toggle button span { display: inline-flex; align-items: center; height: 21px; padding: 0 8px; background: #dcffed; border-radius: 999px; color: var(--g); font-size: 12px; }
  .pr-cards { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; }
  .pc, .pc-pro { width: 100%; }
  .pc-pro { height: 559px; }
  .pr-help { margin-top: 32px; display: flex; align-items: center; justify-content: center; gap: 8px; }

  /* broadcast */
  .broadcast { margin: 0; padding: 44px 20px; border-radius: 28px; background: #f8fafc; display: flex; flex-direction: column-reverse; gap: 32px; }
  .bc-visual { width: 100%; height: auto; aspect-ratio: 560 / 500; }
  .bc-copy { display: flex; flex-direction: column; gap: 32px; }
  .bc-hd { display: flex; flex-direction: column; gap: 12px; }
  .bc-hd h2 { font-family: var(--geist); font-weight: 800; font-size: 24px; line-height: 32px; color: var(--ink-2); }
  .bc-hd p { font-size: 14px; line-height: 20px; color: var(--slate); }
  .bc-list { display: flex; flex-direction: column; gap: 20px; }
  .bc-list li { display: flex; gap: 12px; }
  .bc-list img { flex: none; width: 36px; height: 36px; }
  .bc-list div { display: flex; flex-direction: column; gap: 2px; }
  .bc-list strong { font-weight: 700; font-size: 15px; line-height: 20px; color: var(--ink-2); }
  .bc-list span { font-size: 13px; line-height: 18px; color: var(--slate); }
  .bc-cta { display: flex; align-items: center; justify-content: center; gap: 8px; height: 41px; background: var(--g); border-radius: 8px; color: #fff; font-weight: 700; font-size: 14px; }
  .bc-cta img { width: 14px; height: 14px; }

  /* faq */
  .faq { padding: 48px 20px; display: flex; flex-direction: column; gap: 32px; }
  .fq-head { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
  .fq-pill { display: inline-flex; align-items: center; height: 26px; padding: 0 16px; background: #ecfdf5; border: 1px solid var(--g); border-radius: 99px; font-family: var(--geist); font-weight: 700; font-size: 11px; line-height: 14.3px; letter-spacing: .88px; text-transform: uppercase; color: var(--g); }
  .fq-head h2 { font-family: var(--geist); font-weight: 800; font-size: 28px; line-height: 34px; letter-spacing: -1px; color: var(--ink-2); }
  .fq-head p { font-family: var(--geist); font-size: 14px; line-height: 20px; color: var(--slate); }
  .fq-item { border-bottom: 1px solid #e2e8f0; }
  .fq-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 16px 0; text-align: left; }
  .fq-a p { padding: 0 32px 16px 0; font-family: var(--geist); font-size: 14px; line-height: 21px; color: var(--slate); }
  .fq-item.open .fq-row i { transform: rotate(45deg); }
  .fq-row i { transition: transform .3s var(--ease); }
  .fq-row span { font-family: var(--geist); font-weight: 600; font-size: 14px; line-height: 18.2px; color: #1e293b; }
  .fq-row i { flex: none; width: 24px; text-align: center; font-style: normal; font-family: var(--geist); font-weight: 300; font-size: 18px; line-height: 23.4px; color: var(--slate); }
  .fq-more { align-self: center; display: flex; justify-content: center; gap: 6px; font-family: var(--geist); font-weight: 600; font-size: 13px; line-height: 16.9px; color: var(--slate); }

  /* demo */
  .demo { position: relative; margin-left: 16px; margin-right: 16px; padding: 48px 20px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 28px; background: var(--g); }
  .dm-swoosh { position: absolute; left: -143px; top: 125px; width: 1566px; height: 462px; pointer-events: none; }
  .dm-copy { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
  .dm-copy h2 { font-weight: 700; font-size: 32px; line-height: 35.2px; color: #fff; }
  .dm-copy p { font-size: 16px; line-height: 24px; color: rgba(255,255,255,.92); }
  .dm-btns { display: flex; flex-direction: column; gap: 12px; }
  .dm-primary, .dm-secondary { width: 178px; }

  /* footer */
  .site-footer { position: relative; margin-top: 33px; padding: 48px 20px 0; overflow: hidden; background: #0b0e0c; border-radius: 28px 28px 0 0; display: flex; flex-direction: column; gap: 32px; }
  .fo-brand { display: flex; flex-direction: column; gap: 12px; }
  .fo-logo { gap: 8px; }
  .fo-logo img { width: 28px; height: 28px; border-radius: 6px; }
  .fo-logo span { font-size: 18px; line-height: 23.4px; letter-spacing: -.5px; }
  .fo-brand p { font-size: 13px; line-height: 18px; }
  .fo-bottom { display: flex; flex-direction: column-reverse; align-items: center; gap: 16px; }
  .fo-copy { font-size: 11px; line-height: 14.3px; text-align: center; }
  .fo-legal { gap: 20px; font-size: 13px; }
  .fo-mark { width: calc(100% + 40px); height: auto; margin: 0 -20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}