/* /get-started/<sector>: the get-started page (get_started.css) for one
   sector (Marketing::Sectors), with a sample conversation in the hero and
   the sector's benefits on bone. The conversation is drawn in its channel's
   own colours and the system font so it reads as a real chat: whatsapp,
   sms or webchat. brand.css loads first. */

  .gb-meta {
    margin-top: 18px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--mute-dark);
  }

  /* ─── Hero: a sample conversation, styled per channel ─── */
  .gc {
    margin: 0; justify-self: center; width: 100%; max-width: 420px;
    /* WhatsApp by default; sms and webchat override below. */
    --gc-head: #008069; --gc-head-text: #fff; --gc-avatar: #1F5E52; --gc-chat: #EFEAE2;
    --gc-in: #fff; --gc-in-text: #111B21; --gc-out: #D9FDD3; --gc-out-text: #111B21;
    --gc-accent: #008069; --gc-link: #027EB5; --gc-foot: #F0F2F5;
  }
  .gc[data-channel="sms"] {
    --gc-head: #F2F2F7; --gc-head-text: #111; --gc-avatar: #8E8E93; --gc-chat: #fff;
    --gc-in: #E9E9EB; --gc-in-text: #111; --gc-out: #0A84FF; --gc-out-text: #fff;
    --gc-accent: #0A84FF; --gc-link: #0A84FF; --gc-foot: #F2F2F7;
  }
  .gc[data-channel="webchat"] {
    --gc-head: #0F3D3E; --gc-head-text: #fff; --gc-avatar: #E07A5F; --gc-chat: #F7F5F0;
    --gc-in: #fff; --gc-in-text: #1C2430; --gc-out: #0F3D3E; --gc-out-text: #fff;
    --gc-accent: #E07A5F; --gc-link: #0F3D3E; --gc-foot: #fff;
  }
  .gc-frame {
    border-radius: 28px; overflow: hidden; background: var(--gc-chat); color: #111B21;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    border: 8px solid #0B1730; box-shadow: 0 30px 80px rgba(3, 10, 24, 0.5);
  }
  .gc[data-channel="webchat"] .gc-frame { border-radius: 18px; border-width: 1px; border-color: rgba(242, 237, 226, 0.2); }
  .gc-head { display: flex; align-items: center; gap: 10px; padding: 14px; background: var(--gc-head); color: var(--gc-head-text); }
  .gc[data-channel="sms"] .gc-head { flex-direction: column; gap: 4px; text-align: center; border-bottom: 1px solid #D1D1D6; }
  .gc-back { width: 18px; height: 18px; flex: 0 0 auto; }
  .gc-avatar {
    width: 38px; height: 38px; border-radius: 50%; background: var(--gc-avatar); color: #fff; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
    border: 2px solid rgba(255, 255, 255, 0.85);
  }
  .gc-who { flex: 1 1 auto; min-width: 0; line-height: 1.25; }
  .gc-who b { display: flex; align-items: center; gap: 5px; font-size: 16px; font-weight: 600; }
  .gc[data-channel="sms"] .gc-who b { justify-content: center; font-size: 14px; }
  .gc-who span { font-size: 12.5px; opacity: 0.85; }
  .gc-tick { width: 15px; height: 15px; flex: 0 0 auto; }
  .gc-chat { padding: 14px 12px 16px; display: flex; flex-direction: column; gap: 6px; background-color: var(--gc-chat); }
  .gc[data-channel="whatsapp"] .gc-chat {
    background-image: radial-gradient(rgba(0, 0, 0, 0.035) 1px, transparent 1px); background-size: 14px 14px;
  }
  .gc-day {
    align-self: center; margin: 2px 0 8px; padding: 5px 12px; border-radius: 8px; background: #fff;
    font-size: 12px; color: #54656F; box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
  }
  .gc[data-channel="sms"] .gc-day { background: transparent; box-shadow: none; color: #8E8E93; }
  .gc-msg {
    position: relative; max-width: 84%; padding: 7px 9px 6px; border-radius: 8px; font-size: 14.5px;
    line-height: 1.4; box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
  }
  .gc[data-channel="sms"] .gc-msg { border-radius: 18px; padding: 8px 12px; box-shadow: none; }
  .gc[data-channel="webchat"] .gc-msg { border-radius: 14px; }
  .gc-in { align-self: flex-start; background: var(--gc-in); color: var(--gc-in-text); border-top-left-radius: 0; }
  .gc-out { align-self: flex-end; background: var(--gc-out); color: var(--gc-out-text); border-top-right-radius: 0; margin-top: 4px; }
  .gc-time {
    display: inline-flex; align-items: center; gap: 3px; float: right; margin: 6px 0 -2px 10px;
    font-size: 11px; opacity: 0.6;
  }
  .gc-read { width: 16px; height: 11px; color: #53BDEB; }
  .gc-card {
    align-self: flex-start; width: 88%; margin-top: 4px; background: #fff; border-radius: 8px;
    border-top-left-radius: 0; overflow: hidden; box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13); color: #111B21;
  }
  .gc[data-channel="sms"] .gc-card { border: 1px solid #E5E5EA; box-shadow: none; border-radius: 18px; }
  .gc-card-body { padding: 10px 11px 8px; }
  .gc-card-label {
    margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--gc-accent); text-transform: uppercase;
  }
  .gc-card-text { margin: 0 0 8px; font-size: 14.5px; line-height: 1.4; }
  .gc-row {
    display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid #F0F2F5;
    font-size: 13.5px;
  }
  .gc-row span:first-child { color: #667781; }
  .gc-row span:last-child { font-weight: 600; text-align: right; }
  .gc-status { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--gc-accent); font-weight: 600; }
  .gc-dots { display: inline-flex; gap: 3px; }
  .gc-dots i {
    width: 5px; height: 5px; border-radius: 50%; background: var(--gc-accent); opacity: 0.4; animation: gc-dots 1.2s infinite;
  }
  .gc-dots i:nth-child(2) { animation-delay: 0.2s; }
  .gc-dots i:nth-child(3) { animation-delay: 0.4s; }
  @keyframes gc-dots { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .gc-dots i { animation: none; opacity: 0.7; } }
  .gc-btn {
    display: block; width: 100%; padding: 11px; border-top: 1px solid #F0F2F5; text-align: center;
    font-size: 14.5px; font-weight: 600; color: var(--gc-link);
  }
  .gc-foot { display: flex; align-items: center; gap: 8px; padding: 8px 10px 10px; background: var(--gc-foot); }
  .gc[data-channel="webchat"] .gc-foot { border-top: 1px solid #E8E4DA; }
  .gc-input { flex: 1 1 auto; padding: 10px 14px; border-radius: 999px; background: #fff; font-size: 14.5px; color: #8696A0; }
  .gc[data-channel="webchat"] .gc-input { background: #F7F5F0; }
  .gc-send {
    width: 42px; height: 42px; border-radius: 50%; background: var(--gc-accent); flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
  }
  .gc-caption {
    margin-top: 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--mute-dark); text-align: center;
  }

  /* ─── Why the sector uses it: three numbered cards on bone ─── */
  .gb-benefits .h2 { max-width: 18em; }
  .gb-cards { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .gb-card { background: #fff; border-radius: 20px; padding: 32px 28px; }
  .gb-num { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: var(--ink); opacity: 0.55; }
  .gb-card h3 {
    margin-top: 24px; font-family: var(--display); font-size: 20px; font-weight: 700; line-height: 1.3;
    letter-spacing: -0.02em; text-wrap: balance;
  }
  .gb-rule { width: 28px; height: 3px; background: var(--signal); margin: 16px 0; }
  .gb-card p:last-child { font-size: 16px; line-height: 1.65; opacity: 0.8; }
  .gb-never { margin-top: 32px; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; opacity: 0.7; }

  @media (max-width: 960px) {
    .gb-cards { grid-template-columns: minmax(0, 1fr); }
  }