:root{
    --ink:#0f172a;--ink-2:#334155;--ink-3:#64748b;--ink-4:#94a3b8;
    --line:#e5e7eb;--line-2:#eef0f3;
    --paper:#fff;--paper-2:#fbfaf7;--paper-3:#f6f5f0;
    --teal:#3d8fa1;--teal-deep:#29434e;--teal-ink:#1e6470;
    --teal-50:#f0fafa;--teal-100:#d9f1f3;--teal-300:#7cb9c8;
  }

  .demo-hero{padding:72px 0 40px;text-align:center;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fff,var(--paper-2))}
  .demo-hero .eyebrow{margin-bottom:14px}
  .demo-hero h1{font-size:42px;line-height:1.1;letter-spacing:-.025em;font-weight:700;color:var(--ink);margin:0 0 14px}
  .demo-hero h1 .tk{color:var(--teal)}
  .demo-hero p{font-size:17px;line-height:1.6;color:var(--ink-2);max-width:520px;margin:0 auto}

  .demo-wrap{max-width:720px;margin:0 auto;padding:48px 32px 80px}
  #cal-embed{min-height:500px;border-radius:12px;overflow:hidden}

  /* ===== TABLET (≤ 980px) ===== */
  @media(max-width:980px){
    .demo-hero{padding:56px 0 32px}
    .demo-hero h1{font-size:36px}
    .demo-hero p{font-size:16px}
    .demo-wrap{padding:36px 24px 64px}
  }
  /* ===== PHONE (≤ 640px) ===== */
  @media(max-width:640px){
    .demo-hero{padding:36px 0 20px}
    .demo-hero h1{font-size:26px;line-height:1.1;letter-spacing:-.025em}
    .demo-hero p{font-size:15px;line-height:1.55}
    .demo-wrap{padding:24px 0 48px}
    #cal-embed{border-radius:8px;min-height:420px}
  }
  /* ===== EXTRA-SMALL (≤ 380px) ===== */
  @media(max-width:380px){
    .demo-hero h1{font-size:22px}
    .demo-hero p{font-size:14px}
  }