@font-face {
    font-family: "Bricolage Grotesque";
    src: url("/fonts/bricolage-grotesque.woff2") format("woff2");
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
  }
  :root {
    --bg: #e9eded;
    --surface: #f6f9f9;
    --surface-2: #eef2f2;
    --ink: #0e1c1d;
    --ink-2: #33484a;
    --muted: #61716f;
    --line: #d2dadb;
    --line-strong: #bcc7c7;
    --teal: #0b7c76;
    --teal-deep: #075e59;
    --teal-wash: rgba(11, 124, 118, 0.08);
    --amber: #a9761d;
    --amber-wash: rgba(169, 118, 29, 0.12);
    --shadow: 0 1px 2px rgba(14,28,29,.05), 0 12px 34px -18px rgba(14,28,29,.28);
    --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --maxw: 1080px;
    --prose: 68ch;
    --nav-h: 60px;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #081112;
      --surface: #0e1c1d;
      --surface-2: #0b1718;
      --ink: #e9efee;
      --ink-2: #b0bfbe;
      --muted: #7f9291;
      --line: #1e2e2f;
      --line-strong: #2b3d3e;
      --teal: #34c3b6;
      --teal-deep: #23a99d;
      --teal-wash: rgba(52, 195, 182, 0.10);
      --amber: #d9a24c;
      --amber-wash: rgba(217, 162, 76, 0.14);
      --shadow: 0 1px 2px rgba(0,0,0,.4), 0 16px 40px -20px rgba(0,0,0,.7);
    }
  }
  :root[data-theme="light"] {
    --bg: #e9eded; --surface: #f6f9f9; --surface-2: #eef2f2; --ink: #0e1c1d; --ink-2: #33484a;
    --muted: #61716f; --line: #d2dadb; --line-strong: #bcc7c7; --teal: #0b7c76; --teal-deep: #075e59;
    --teal-wash: rgba(11,124,118,.08); --amber: #a9761d; --amber-wash: rgba(169,118,29,.12);
    --shadow: 0 1px 2px rgba(14,28,29,.05), 0 12px 34px -18px rgba(14,28,29,.28);
  }
  :root[data-theme="dark"] {
    --bg: #081112; --surface: #0e1c1d; --surface-2: #0b1718; --ink: #e9efee; --ink-2: #b0bfbe;
    --muted: #7f9291; --line: #1e2e2f; --line-strong: #2b3d3e; --teal: #34c3b6; --teal-deep: #23a99d;
    --teal-wash: rgba(52,195,182,.10); --amber: #d9a24c; --amber-wash: rgba(217,162,76,.14);
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 16px 40px -20px rgba(0,0,0,.7);
  }

  * { box-sizing: border-box; }
  /* iOS Safari silently inflates text in some layouts unless this is set, which
     is why the nav wrapped on an iPhone while Android looked fine. Pin it to the
     author's sizes on every engine. */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { margin: 0; }
  [hidden] { display: none !important; }
  .page {
    background: var(--bg); color: var(--ink); font-family: var(--sans);
    font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased;
    letter-spacing: -0.005em;
  }
  .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
  h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; line-height: 1.08; margin: 0; }
  p { margin: 0; }
  a { color: var(--teal-deep); }
  .eyebrow {
    font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.13em;
    text-transform: uppercase; color: var(--teal-deep);
  }
  .lede { font-size: clamp(1.05rem, 1.6vw, 1.28rem); color: var(--ink-2); max-width: var(--prose); line-height: 1.5; }
  .num { font-variant-numeric: tabular-nums; }

  /* ---- top nav ---- */
  .topnav {
    position: sticky; top: 0; z-index: 50; height: var(--nav-h);
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--line);
  }
  .topnav-inner { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); cursor: pointer; background: none; border: 0; padding: 0; font-family: var(--sans); }
  .brand .bn { font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: 0.06em; color: var(--ink-2); }
  .navlinks { display: flex; align-items: center; gap: 4px; }
  .navlinks button[data-nav] {
    font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ink-2);
    background: none; border: 0; padding: 8px 12px; border-radius: 8px; cursor: pointer;
    white-space: nowrap; transition: background .15s ease, color .15s ease;
  }
  .navlinks button[data-nav]:hover { color: var(--teal-deep); background: var(--teal-wash); }
  .navlinks button[data-nav].active { color: var(--teal-deep); background: var(--teal-wash); }
  /* Plain-text nav links (Bot demo / Live demo) — same weight & rhythm as the
     [data-nav] items so the header reads as one clean run of text links with a
     single amber CTA, instead of bordered ghost boxes with wrapping arrows. */
  .navlinks .navlink {
    font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ink-2);
    text-decoration: none; padding: 8px 12px; border-radius: 8px; white-space: nowrap;
    transition: background .15s ease, color .15s ease;
  }
  .navlinks .navlink:hover { color: var(--teal-deep); background: var(--teal-wash); }
  /* Plain page-nav links on sub-pages (Overview / Platform / FAQs) — same look as the
     homepage nav so headers are consistent site-wide. */
  .navlinks > a:not(.btn) {
    font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ink-2);
    text-decoration: none; padding: 8px 12px; border-radius: 8px; white-space: nowrap;
    transition: background .15s ease, color .15s ease;
  }
  .navlinks > a:not(.btn):hover { color: var(--teal-deep); background: var(--teal-wash); }
  .navlinks .btn-sm { margin-left: 6px; white-space: nowrap; }
  .navlinks .nav-short { display: none; }
  .navlinks .cta-short { display: none; }

  /* ---- section rhythm ---- */
  section { padding: clamp(52px, 7vw, 96px) 0; border-top: 1px solid var(--line); }
  section.alt { background: var(--surface-2); }
  .sec-head { max-width: var(--prose); margin-bottom: 44px; }
  .sec-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin: 12px 0 14px; }

  /* ---- hero ---- */
  .hero {
    position: relative; overflow: hidden; border-top: 0;
    background:
      radial-gradient(120% 90% at 82% -10%, var(--teal-wash), transparent 60%),
      linear-gradient(180deg, var(--surface), var(--bg));
  }
  .hero .grid-bg {
    position: absolute; inset: 0; pointer-events: none; opacity: .22;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(120% 80% at 70% 0%, #000 20%, transparent 72%);
    -webkit-mask-image: radial-gradient(120% 80% at 70% 0%, #000 20%, transparent 72%);
  }
  .hero-inner { position: relative; padding: clamp(52px, 8vw, 100px) 0 clamp(46px, 6vw, 78px); }
  .brandline { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
  .brandmark { display: block; }
  .brandname { font-family: var(--mono); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; color: var(--ink-2); }
  .hero h1 { font-size: clamp(2.2rem, 5.6vw, 3.85rem); font-weight: 760; max-width: 15ch; margin-bottom: 22px; }
  .hero h1 .hl { color: var(--teal-deep); }
  .hero .lede { font-size: clamp(1.08rem, 1.8vw, 1.36rem); }
  .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
  .btn {
    display: inline-flex; align-items: center; gap: 9px; font-family: var(--sans);
    font-size: 15px; font-weight: 600; padding: 13px 22px; border-radius: 10px;
    text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  }
  .btn-sm { font-size: 13.5px; padding: 8px 15px; border-radius: 9px; }
  .btn-primary { background: var(--teal-deep); color: #fff; box-shadow: var(--shadow); }
  .btn-primary:hover { transform: translateY(-1px); }
  .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
  .btn-ghost:hover { border-color: var(--teal); color: var(--teal-deep); }
  .btn-amber { background: var(--amber); color: #fff; box-shadow: var(--shadow); }
  .btn-amber:hover { transform: translateY(-1px); }

  .stat-strip {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    margin-top: 48px; background: var(--line); border: 1px solid var(--line);
    border-radius: 14px; overflow: hidden;
  }
  .stat { background: var(--surface); padding: 20px 22px; }
  .stat .k { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .stat .v { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 720; letter-spacing: -0.03em; margin-top: 4px; }
  .stat .v small { font-size: .55em; font-weight: 600; color: var(--ink-2); letter-spacing: 0; }

  /* ---- problem ---- */
  .prob-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .prob {
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px;
    border-top: 2px solid var(--amber);
  }
  .prob h3 { font-size: 1.06rem; margin-bottom: 8px; }
  .prob p { font-size: .95rem; color: var(--ink-2); }
  .prob .tag { font-family: var(--mono); font-size: 11px; color: var(--amber); letter-spacing: .08em; text-transform: uppercase; display: block; margin-bottom: 12px; }

  /* ---- feature grid ---- */
  .feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .feat-grid.two { grid-template-columns: repeat(2, 1fr); }
  .feat {
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px 22px 24px;
    box-shadow: var(--shadow); transition: transform .16s ease, border-color .16s ease;
  }
  .feat:hover { transform: translateY(-2px); border-color: var(--teal); }
  .feat .ic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--teal-wash); color: var(--teal-deep); margin-bottom: 14px; font-size: 17px; }
  .feat h3 { font-size: 1.02rem; margin-bottom: 7px; }
  .feat p { font-size: .92rem; color: var(--ink-2); line-height: 1.5; }
  .feat .k { font-family: var(--mono); font-size: 10.5px; color: var(--teal-deep); letter-spacing: .09em; text-transform: uppercase; display: block; margin-top: 12px; }

  /* ---- crypto band / flow ---- */
  .flow {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    margin-top: 12px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface);
  }
  .flow .step { padding: 24px 22px; border-right: 1px solid var(--line); position: relative; }
  .flow .step:last-child { border-right: 0; }
  .flow .n { font-family: var(--mono); font-size: 12px; color: var(--teal-deep); font-weight: 600; }
  .flow .step h4 { font-size: 1rem; font-weight: 680; margin: 10px 0 6px; letter-spacing: -0.01em; }
  .flow .step p { font-size: .88rem; color: var(--ink-2); line-height: 1.45; }
  .payoff {
    margin-top: 24px; display: flex; gap: 14px; align-items: flex-start;
    background: var(--teal-wash); border: 1px solid color-mix(in srgb, var(--teal) 30%, transparent);
    border-radius: 12px; padding: 18px 20px;
  }
  .payoff .badge { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--teal-deep); padding: 5px 9px; border-radius: 6px; white-space: nowrap; margin-top: 2px; }
  .payoff p { color: var(--ink); font-size: .97rem; }

  /* ---- journey timeline ---- */
  .jcols { display: grid; grid-template-columns: 1.2fr 1fr; gap: 44px; align-items: start; }
  .journey { display: flex; flex-direction: column; }
  .jstep { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding-bottom: 26px; position: relative; }
  .jstep:last-child { padding-bottom: 0; }
  .jstep:not(:last-child)::before {
    content: ""; position: absolute; left: 17px; top: 38px; bottom: 2px; width: 2px; background: var(--line);
  }
  .jstep .jn {
    width: 36px; height: 36px; border-radius: 10px; background: var(--teal-wash); color: var(--teal-deep);
    font-family: var(--mono); font-weight: 700; font-size: 14px; display: grid; place-items: center;
    position: relative; z-index: 1; border: 1px solid color-mix(in srgb, var(--teal) 22%, transparent);
  }
  .jstep .jc h4 { font-size: 1.02rem; font-weight: 660; margin-bottom: 4px; display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap; }
  .jstep .jc p { font-size: .93rem; color: var(--ink-2); line-height: 1.5; }
  .role { font-family: var(--mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; }
  .role.cust { color: var(--teal-deep); background: var(--teal-wash); }
  .role.you { color: var(--amber); background: var(--amber-wash); }
  code { font-family: var(--mono); font-size: .82em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; color: var(--teal-deep); }

  /* phone mock */
  .phone { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 22px; padding: 14px; box-shadow: var(--shadow); position: sticky; top: calc(var(--nav-h) + 20px); }
  .phone .bar { display: flex; align-items: center; gap: 8px; padding: 4px 6px 12px; border-bottom: 1px solid var(--line); }
  .phone .bar .av { width: 26px; height: 26px; border-radius: 50%; background: var(--teal-deep); color: #fff; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; font-weight: 700; }
  .phone .bar .who { font-weight: 640; font-size: 13.5px; }
  .phone .bar .who small { display: block; font-weight: 500; font-size: 10.5px; color: var(--muted); }
  .chat { display: flex; flex-direction: column; gap: 9px; padding: 14px 4px 6px; }
  .bub { max-width: 84%; font-size: 12.5px; line-height: 1.4; padding: 9px 12px; border-radius: 13px; }
  .bub.me { align-self: flex-end; background: var(--teal-deep); color: #fff; border-bottom-right-radius: 4px; font-family: var(--mono); }
  .bub.bot { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
  .bub.bot b { color: var(--teal-deep); }
  .bub .track { font-family: var(--mono); font-size: 11px; color: var(--amber); }
  .openbtn { display:inline-block; margin-top:4px; align-self: flex-start; font-family: var(--sans); font-size: 12px; font-weight: 600; color: #fff; background: var(--amber); border-radius: 9px; padding: 7px 12px; }

  /* browser mock (site guide) */
  .browser { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); position: sticky; top: calc(var(--nav-h) + 20px); }
  .browser .bbar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
  .browser .dot3 { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
  .browser .url { margin-left: 8px; font-family: var(--mono); font-size: 11px; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 3px 10px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .browser .bbody { padding: 16px; }
  .demobar { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; text-align: center; color: #fff; background: var(--teal-deep); border-radius: 7px; padding: 7px; margin-bottom: 12px; }
  .prodrow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .prodcard { border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: var(--bg); }
  .prodcard .ph { height: 46px; border-radius: 7px; background: linear-gradient(135deg, var(--teal-wash), var(--amber-wash)); margin-bottom: 9px; }
  .prodcard .nm { font-size: 12px; font-weight: 640; }
  .prodcard .pr { font-family: var(--mono); font-size: 12px; color: var(--teal-deep); margin-top: 2px; }
  .prodcard .coa { font-family: var(--mono); font-size: 9px; letter-spacing:.06em; text-transform: uppercase; color: var(--amber); margin-top: 6px; display: inline-block; border:1px solid var(--amber); border-radius: 4px; padding: 1px 5px; }

  /* ---- demo band ---- */
  .demo-band { background: radial-gradient(90% 130% at 15% -20%, var(--teal-wash), transparent 55%), var(--surface); }
  .demo-card {
    display: grid; grid-template-columns: 1.3fr 1fr; gap: 34px; align-items: center;
    border: 1px solid var(--line-strong); border-radius: 16px; padding: 30px 32px; background: var(--surface); box-shadow: var(--shadow);
  }
  .demo-card h3 { font-size: clamp(1.35rem, 2.6vw, 1.9rem); margin-bottom: 10px; }
  .demo-card p { color: var(--ink-2); font-size: .98rem; }
  .demo-note { font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 14px; line-height: 1.6; }
  .demo-note b { color: var(--ink-2); }
  .demo-side { display: flex; flex-direction: column; gap: 10px; }

  /* ---- customisation "advert" ---- */
  .cust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .cust {
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px;
    border-left: 3px solid var(--amber);
  }
  .cust h4 { font-size: 1rem; font-weight: 660; margin-bottom: 6px; }
  .cust p { font-size: .9rem; color: var(--ink-2); line-height: 1.48; }
  .cust .k { font-family: var(--mono); font-size: 10.5px; color: var(--amber); letter-spacing: .09em; text-transform: uppercase; display: block; margin-bottom: 11px; }
  .swatches { display: flex; gap: 8px; margin-top: 14px; }
  .sw { width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(0,0,0,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }

  /* ---- comparison table ---- */
  .cmp-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); -webkit-overflow-scrolling: touch; }
  .cmp { width: 100%; border-collapse: collapse; min-width: 680px; }
  .cmp th, .cmp td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; font-size: .9rem; line-height: 1.4; }
  .cmp thead th { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 600; white-space: nowrap; }
  .cmp thead th.us { color: var(--teal-deep); border-top: 2px solid var(--teal-deep); border-top-left-radius: 4px; border-top-right-radius: 4px; }
  .cmp tbody th { font-weight: 640; color: var(--ink); width: 34%; }
  .cmp th.us, .cmp td.us { background: var(--teal-wash); }
  .cmp td.us { font-weight: 600; color: var(--ink); }
  .cmp tbody tr:last-child td, .cmp tbody tr:last-child th { border-bottom: 0; }
  .cmp .yes { color: var(--teal-deep); font-weight: 700; }
  .cmp .no { color: var(--muted); font-weight: 700; }
  .cmp .par { color: var(--amber); font-weight: 700; }
  .cmp-foot { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 14px; letter-spacing: .03em; }

  /* ---- packages ---- */
  .pkg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .pkg-grid.duo { grid-template-columns: repeat(2, 1fr); max-width: 740px; margin-inline: auto; }
  .pkg { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px 24px 26px; display: flex; flex-direction: column; box-shadow: var(--shadow); }
  .pkg.featured { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal), var(--shadow); }
  .pkg .tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--teal-deep); display: block; margin-bottom: 10px; }
  .pkg h3 { font-size: 1.18rem; margin-bottom: 6px; }
  .pkg .blurb { font-size: .9rem; color: var(--ink-2); line-height: 1.5; margin-bottom: 16px; }
  .pkg ul { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 9px; }
  .pkg li { font-size: .88rem; color: var(--ink-2); padding-left: 22px; position: relative; line-height: 1.45; }
  .pkg li::before { content: "✓"; position: absolute; left: 0; color: var(--teal-deep); font-weight: 700; }
  .pkg .price { font-family: var(--mono); font-size: .8rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 14px; margin-top: auto; }
  .pkg .price b { color: var(--ink); font-weight: 700; }

  /* ---- selected work ---- */
  .work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .work { display: block; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px 20px 22px; box-shadow: var(--shadow); transition: transform .16s ease, border-color .16s ease; }
  .work:hover { transform: translateY(-2px); border-color: var(--teal); }
  .work.key { border-left: 3px solid var(--teal-deep); }
  .work h4 { font-size: 1.02rem; margin-bottom: 6px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .work h4 .ext { color: var(--muted); font-size: .85rem; font-weight: 400; }
  .work p { font-size: .88rem; color: var(--ink-2); line-height: 1.5; margin-bottom: 13px; }
  .work .tags { display: flex; flex-wrap: wrap; gap: 6px; }
  .work .t { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-deep); background: var(--teal-wash); padding: 3px 7px; border-radius: 5px; }

  /* ---- FAQ ---- */
  .faq-list { display: grid; gap: 12px; max-width: 820px; }
  .faq-list details { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 2px 20px; }
  .faq-list details[open] { border-color: var(--line-strong); }
  .faq-list summary { cursor: pointer; font-weight: 640; padding: 16px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; font-size: 1rem; }
  .faq-list summary::-webkit-details-marker { display: none; }
  .faq-list summary::after { content: "+"; color: var(--teal-deep); font-size: 1.4rem; font-weight: 400; line-height: 1; flex-shrink: 0; }
  .faq-list details[open] summary::after { content: "\2212"; }
  .faq-list details p { padding: 0 0 18px; color: var(--ink-2); font-size: .94rem; line-height: 1.6; margin: 0; max-width: 68ch; }

  /* ---- compliance / close ---- */
  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
  .checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
  .checklist li { display: grid; grid-template-columns: auto 1fr; gap: 12px; font-size: .96rem; color: var(--ink-2); }
  .checklist .ck { color: var(--teal-deep); font-weight: 700; }
  .callout { border-left: 3px solid var(--amber); background: var(--amber-wash); border-radius: 0 10px 10px 0; padding: 16px 20px; font-size: .92rem; color: var(--ink-2); }

  .try-steps { counter-reset: s; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 8px; }
  .try-step { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 16px; position: relative; }
  .try-step::before { counter-increment: s; content: counter(s); font-family: var(--mono); font-weight: 700; font-size: 13px; color: var(--teal-deep); background: var(--teal-wash); width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; margin-bottom: 12px; }
  .try-step h4 { font-size: .92rem; font-weight: 660; margin-bottom: 5px; }
  .try-step p { font-size: .82rem; color: var(--ink-2); line-height: 1.42; }

  .close { text-align: center; background: radial-gradient(90% 120% at 50% -20%, var(--teal-wash), transparent 55%), var(--surface-2); }
  .close h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin-bottom: 16px; }
  .close .lede { margin: 0 auto; }
  .close .cta-row { justify-content: center; }

  footer { padding: 34px 0 48px; color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); }
  footer .disc { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; }
  .foot-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 14px; }
  .foot-contact .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .foot-contact a { color: var(--teal-deep); text-decoration: none; font-weight: 600; }
  .foot-contact a:hover { text-decoration: underline; }
  .foot-contact .sep { color: var(--line-strong); }

  @media (max-width: 900px) {
    .prob-grid, .feat-grid, .feat-grid.two, .cust-grid, .pkg-grid, .work-grid { grid-template-columns: repeat(2, 1fr); }
    .flow { grid-template-columns: repeat(2, 1fr); }
    .flow .step:nth-child(2) { border-right: 0; }
    .flow .step:nth-child(1), .flow .step:nth-child(2) { border-bottom: 1px solid var(--line); }
    .jcols, .two-col, .demo-card { grid-template-columns: 1fr; }
    .phone, .browser { position: static; max-width: 400px; }
    .try-steps { grid-template-columns: repeat(2, 1fr); }
    .stat-strip { grid-template-columns: 1fr; }
    .brand .bn { display: none; }
  }
  /* --- Mobile: stack the comparison table -------------------------------
     A 4-col table can't shrink below ~680px, so on a phone it sat inside a
     horizontally-scrolling box — 355px of it hidden off-screen, which reads as
     "the site isn't responsive". Below 700px each row becomes a card and every
     cell carries its column name, so the whole comparison is readable in one
     vertical scroll with no side-scrolling at all. */
  @media (max-width: 700px) {
    .cmp-wrap { overflow-x: visible; border: 0; background: none; box-shadow: none; border-radius: 0; }
    .cmp { min-width: 0; width: 100%; display: block; }
    .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: auto; }
    .cmp tr {
      background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
      box-shadow: var(--shadow); padding: 4px 4px 8px; margin-bottom: 12px;
    }
    .cmp tbody th {
      width: auto; font-size: .95rem; font-weight: 700; color: var(--ink);
      padding: 12px 14px 10px; border-bottom: 1px solid var(--line);
    }
    .cmp td { border-bottom: 0; padding: 10px 14px 4px; font-size: .88rem; }
    .cmp td::before {
      content: attr(data-col); display: block; margin-bottom: 2px;
      font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em;
      text-transform: uppercase; color: var(--muted); font-weight: 700;
    }
    /* keep "this platform" visually the hero column */
    .cmp td.us { background: var(--teal-wash); border-radius: 10px; margin: 4px 8px; padding: 10px 10px 8px; }
    .cmp td.us::before { color: var(--teal-deep); }
  }

  /* 561-767px: not enough room for the full nav (Overview | Site guide | Bot guide |
     Bot demo | Live demo | Free trial) without wrapping/overflow, so collapse to the
     compact set early: short Site/Bot labels + drop the two secondary demo links. The
     full text nav only shows >=768px where it comfortably fits on one line. */
  @media (max-width: 767px) {
    .navlinks .nav-long { display: none; }
    .navlinks .nav-short { display: inline; }
    .navlinks .btn-ghost, .navlinks .navlink { display: none; }
  }
  @media (max-width: 560px) {
    .prob-grid, .feat-grid, .feat-grid.two, .cust-grid, .try-steps, .pkg-grid, .pkg-grid.duo, .work-grid { grid-template-columns: 1fr; }
    .flow { grid-template-columns: 1fr; }
    .flow .step { border-right: 0; border-bottom: 1px solid var(--line); }
    .flow .step:last-child { border-bottom: 0; }
    .navlinks button[data-nav], .navlinks > a:not(.btn) { padding: 8px 9px; font-size: 13px; }
    /* Anchor-based navs (platform / FAQs pages) don't collapse via [data-nav];
       drop the optional in-nav "Telegram bot" jump-link on phones — it's reachable
       from the page body — so the row can't overflow and push the CTA off-screen. */
    .navlinks > a[href="#telegram"] { display: none; }
    /* Full labels wrap to two lines on 360px phones (and any device with larger
       text), which is what made the bar look broken. Swap to short labels. */
    .navlinks .nav-long { display: none; }
    .navlinks .nav-short { display: inline; }
    /* The nav row overflowed the viewport on phones (~23px), pushing the trial
       CTA half off-screen and squashing it to 61px wide. Drop the ghost "Live
       demo" here (the hero carries a full-size one) and stop the CTA wrapping. */
    .navlinks { gap: 2px; }
    .navlinks .btn-ghost, .navlinks .navlink { display: none; }
    .navlinks .btn-sm { margin-left: 4px; padding: 8px 11px; font-size: 12.5px; white-space: nowrap; flex-shrink: 0; }
  }
  /* Narrow Androids (360px) and iPhone SE (320px) still tipped the nav over the
     edge by a few px — tighten it further rather than let the page scroll. */
  @media (max-width: 400px) {
    .navlinks { gap: 0; }
    .navlinks button[data-nav], .navlinks > a:not(.btn) { padding: 8px 6px; font-size: 12px; }
    .navlinks .btn-sm { margin-left: 2px; padding: 7px 9px; font-size: 12px; }
    /* 320px can't fit the full label; keep the CTA, shorten the words. */
    .navlinks .cta-long { display: none; }
    .navlinks .cta-short { display: inline; }
  }
  /* ---- trial chooser modal (one CTA -> website store vs Telegram bot) ---- */
  .trial-modal { border: 0; padding: 0; background: transparent; max-width: 620px; width: calc(100% - 32px); border-radius: 18px; color: var(--ink); }
  .trial-modal::backdrop { background: color-mix(in srgb, var(--ink) 55%, transparent); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
  .trial-modal-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.28), var(--shadow); padding: 30px 28px 28px; }
  .trial-modal-card .eyebrow { margin-bottom: 6px; }
  .trial-modal-card h3 { font-size: 1.4rem; margin: 0 0 8px; }
  .trial-modal-lede { font-size: .95rem; color: var(--ink-2); line-height: 1.5; margin: 0 0 20px; }
  .trial-modal-x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); font-size: 20px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease, border-color .15s ease; }
  .trial-modal-x:hover { color: var(--teal-deep); border-color: var(--teal); background: var(--teal-wash); }
  .trial-choose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .trial-choose-opt { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 20px 18px; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
  .trial-choose-opt:hover { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal), var(--shadow); transform: translateY(-2px); }
  .trial-choose-opt .tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--teal-deep); }
  .trial-choose-opt strong { font-size: 1.06rem; font-weight: 700; }
  .trial-choose-sub { font-size: .86rem; color: var(--ink-2); line-height: 1.45; }
  .trial-choose-go { margin-top: 8px; font-weight: 600; font-size: .9rem; color: var(--teal-deep); }
  .trial-choose-opt:hover .trial-choose-go { color: var(--teal-deep); }
  @media (max-width: 520px) {
    .trial-choose-grid { grid-template-columns: 1fr; }
    .trial-modal-card { padding: 26px 20px 22px; }
    .trial-modal-card h3 { font-size: 1.25rem; }
  }

  @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }