/* Privacy, Terms and Support: the same tokens, a quiet reading column. Integrator-owned.
   30 Sep (DOCS-HEADINGS): headings made clear and cute like the app. Group titles get a pastel icon chip and deep-blue
   600 weight; question titles get Mira's blue question bubble. Support answers sit in soft pastel cards, with a
   jump-to chip row (sticky on phones). No divider lines anywhere: spacing, colour and grouping do the separating. */
.doc-hero { background: linear-gradient(to bottom, var(--sky-0) 0, var(--sky-1) 100%); margin-top: calc(var(--header-h) * -1); padding: calc(var(--header-h) + 64px) 0 64px; }
.doc-wrap { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter); }
.doc-star { width: 108px; margin-bottom: 18px; animation: bob 6s var(--ease) infinite alternate; }
.doc-hero .eyebrow { margin-bottom: 10px; }
.doc-hero h1 { font-size: clamp(36px, 5vw, 60px); font-weight: 500; line-height: 1.06; letter-spacing: -0.03em; }
.doc-body { padding: 56px 0 110px; }
.doc-body p { font-size: 17px; line-height: 1.7; color: var(--body); margin: 0 0 14px; }
.doc-body a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (hover: hover) { .doc-body a:hover { color: var(--accent-edge); } }

/* ---- tones: chip, card and icon colours from the app's art palette ---- */
.doc-body { --t-chip: var(--sky-1); --t-card: #EEF7FE; --t-ico: var(--accent); }
.doc-body [data-tone="sky"]   { --t-chip: #D3E9FC; --t-card: #EEF7FE; --t-ico: var(--accent); }
.doc-body [data-tone="sun"]   { --t-chip: #FFE9B3; --t-card: #FFF8E8; --t-ico: #C27A00; }
.doc-body [data-tone="mint"]  { --t-chip: #CDEFDC; --t-card: #EDF8F2; --t-ico: #17864F; }
.doc-body [data-tone="coral"] { --t-chip: #FFD9D3; --t-card: #FFF2EF; --t-ico: #D93A2B; }
.doc-body [data-tone="blue"]  { --t-chip: var(--accent); --t-card: #E6F4FD; --t-ico: #fff; }

/* ---- group titles (h2): pastel icon chip + deep blue, more weight ---- */
.doc-body h2 {
  display: flex; align-items: center; gap: 14px;
  font-size: 28px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; color: var(--deep);
  margin: 72px 0 18px; text-wrap: balance;
}
.doc-body h2:first-child { margin-top: 0; }
.doc-ico, .doc-wrap > h2::before {
  flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  background: var(--t-chip); color: var(--t-ico);
  box-shadow: var(--highlight), 0 6px 14px -8px rgba(15, 26, 43, .22);
}
.doc-ico svg { width: 24px; height: 24px; }
/* Privacy and Terms have no icons of their own: a small sparkle chip, the pastel tone cycling group by group */
.doc-wrap > h2::before {
  content: ""; background: var(--t-chip) var(--spark) center / 22px no-repeat;
}
.doc-wrap > h2:nth-of-type(4n+1) { --t-chip: #D3E9FC; --spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230077D9' d='M12 2.5l2.3 6.2 6.2 2.3-6.2 2.3L12 19.5l-2.3-6.2L3.5 11l6.2-2.3z'/%3E%3C/svg%3E"); }
.doc-wrap > h2:nth-of-type(4n+2) { --t-chip: #FFE9B3; --spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E09200' d='M12 2.5l2.3 6.2 6.2 2.3-6.2 2.3L12 19.5l-2.3-6.2L3.5 11l6.2-2.3z'/%3E%3C/svg%3E"); }
.doc-wrap > h2:nth-of-type(4n+3) { --t-chip: #CDEFDC; --spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2317864F' d='M12 2.5l2.3 6.2 6.2 2.3-6.2 2.3L12 19.5l-2.3-6.2L3.5 11l6.2-2.3z'/%3E%3C/svg%3E"); }
.doc-wrap > h2:nth-of-type(4n+4) { --t-chip: #FFD9D3; --spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E5483B' d='M12 2.5l2.3 6.2 6.2 2.3-6.2 2.3L12 19.5l-2.3-6.2L3.5 11l6.2-2.3z'/%3E%3C/svg%3E"); }

/* ---- sub-titles (h3): ink, stronger, a soft accent dot (Privacy, Terms) ---- */
.doc-body h3 {
  position: relative; font-size: 19px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink);
  margin: 32px 0 8px; padding-left: 22px; text-wrap: pretty;
}
.doc-body h3::before {
  content: ""; position: absolute; left: 2px; top: .5em; width: 9px; height: 9px; border-radius: 50%;
  background: var(--logo); box-shadow: 0 0 0 4px var(--tint);
}

/* ================= Support: grouped Q&A cards ================= */
.doc-group h2 { scroll-margin-top: 12px; }   /* on top of html's scroll-padding (the bar + 16 px) */
.doc-body .doc-group h2 { margin-top: 80px; }
.doc-body .doc-group:first-of-type h2 { margin-top: 48px; }
.doc-qa {
  background: var(--t-card); border-radius: 22px; padding: 22px 26px 20px;
  box-shadow: var(--highlight);
}
.doc-qa + .doc-qa { margin-top: 12px; }
.doc-qa p { margin: 0; }
.doc-qa p + p { margin-top: 12px; }
/* the question: Mira's blue speech bubble with a question mark */
.doc-qa h3 { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 8px; padding-left: 0; font-size: 18px; }
.doc-qa h3::before {
  content: "?"; content: "?" / ""; position: static; flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; margin-top: -1px; border-radius: 13px 13px 13px 4px;
  background: var(--logo); color: #fff; font-size: 15px; font-weight: 700; line-height: 1;
  box-shadow: 0 4px 10px -4px rgba(0, 119, 217, .55);
}
.doc-qa h3 + p { padding-left: 38px; }
/* Talk to us: the one blue card */
.doc-group[data-tone="blue"] .doc-qa { box-shadow: var(--highlight), var(--tint-sky-shadow); }

/* ---- jump to: chips in the tones of their groups ---- */
.doc-jump { margin: 28px 0 0; }
.doc-jump-row { display: flex; flex-wrap: wrap; gap: 8px; }
.doc-body .doc-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 14px; border-radius: 22px;
  background: var(--t-card); color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap;
  box-shadow: var(--highlight), var(--depth-1); -webkit-tap-highlight-color: transparent;
  transition: transform .25s var(--spring), box-shadow .25s var(--ease), background-color .2s var(--ease);
}
.doc-body .doc-chip::before { content: ""; flex: none; transition: transform .25s var(--spring); width: 8px; height: 8px; border-radius: 50%; background: var(--t-ico); }
.doc-body .doc-chip[data-tone="blue"]::before { background: var(--accent); }
.doc-body .doc-chip:focus-visible { outline: 3px solid rgba(var(--accent-rgb), .45); outline-offset: 2px; }
@media (hover: hover) { .doc-body .doc-chip:hover { color: var(--ink); background: var(--t-chip); transform: translateY(-1px); box-shadow: var(--highlight), var(--depth-2); } .doc-body .doc-chip[data-tone="blue"]:hover { color: #fff; } .doc-body .doc-chip[data-tone="blue"]:hover::before { background: #fff; } }
.doc-body .doc-chip:active { transform: scale(.97); }
.doc-body .doc-chip[aria-current] { background: var(--t-chip); box-shadow: var(--highlight), var(--depth-2); }
.doc-body .doc-chip[aria-current]::before { transform: scale(1.35); }
.doc-body .doc-chip[data-tone="blue"][aria-current] { background: var(--accent); color: #fff; }
.doc-body .doc-chip[data-tone="blue"][aria-current]::before { background: #fff; }
/* Privacy and Terms: a little less air, since they have no cards */
.doc-wrap > h2 { margin-top: 60px; }

@media (max-width: 1023.98px) {
  .doc-hero { padding: calc(var(--header-h) + 44px) 0 44px; }
  .doc-star { width: 84px; }
  .doc-body { padding: 40px 0 84px; }
  .doc-body p { font-size: 16.5px; }
  .doc-body h2 { font-size: 22px; gap: 12px; margin: 56px 0 14px; }
  .doc-ico, .doc-wrap > h2::before { width: 38px; height: 38px; border-radius: 12px; }
  .doc-ico svg { width: 21px; height: 21px; }
  .doc-wrap > h2::before { background-size: 19px; }
  .doc-body h3 { font-size: 18px; margin-top: 26px; }
  .doc-qa { padding: 18px 18px 16px; border-radius: 20px; }
  .doc-qa + .doc-qa { margin-top: 10px; }
  .doc-qa h3 { font-size: 17px; gap: 10px; margin: 0 0 6px; }
  .doc-qa h3::before { width: 24px; height: 24px; font-size: 14px; }
  .doc-qa h3 + p { padding-left: 0; }
  .doc-body .doc-group h2 { margin-top: 60px; }
  .doc-body .doc-group:first-of-type h2 { margin-top: 28px; }

  /* the chip row: one line that scrolls sideways, sticky under the bar (and at the very top when the bar slides away) */
  .doc-jump {
    position: sticky; z-index: 5; top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
    margin: 20px calc(var(--gutter) * -1) 0; padding: 8px 0;
    background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
    transition: top .42s var(--ease);
  }
  .doc-jump::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; pointer-events: none;
    background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)); }
  html:has(.site-header.hdr-away) .doc-jump { top: env(safe-area-inset-top, 0px); }
  .doc-jump-row {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding: 2px var(--gutter) 6px; scroll-padding: 0 var(--gutter);
  }
  .doc-jump-row::-webkit-scrollbar { display: none; }
  .doc-body .doc-chip { flex: none; font-size: 14.5px; }
  .doc-group h2 { scroll-margin-top: 70px; }   /* clears the sticky chip row too */
}
@media (max-width: 359.98px) {
  .doc-body h2 { font-size: 20px; }
  .doc-qa { padding: 16px 16px 14px; }
}
@media (prefers-reduced-motion: reduce) { .doc-star { animation: none; } .doc-jump { transition: none; } }