/* privacy-policy - the legal layout of the design.

   The page shell first, the palette, the background and the container, then
   the hero and the blocks of the policy. The header and the footer come from
   the about page and bring their own stylesheet, these rules only live under
   .otlob-page so neither of the two is touched by them. */

.otlob-page {
  --primary:#20BFEF;
  --primary-dark:#0E9CCB;
  --accent:#FF6B35;
  --accent-yellow:#FFC93C;
  --bg:#F7FAFC;
  --surface:#FFFFFF;
  --text:#1A202C;
  --muted:#5A6675;
  --border:#E2E8F0;
  --success:#10B981;
  --radius:14px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow:0 4px 16px rgba(15,30,60,.08);
  --shadow-lg:0 12px 32px rgba(15,30,60,.12);
  --max:1200px;
}

.otlob-page {
  margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:'Tajawal',system-ui,sans-serif;font-size:16px;line-height:1.7
}

.otlob-page .container {
  max-width:var(--max);margin:0 auto;padding:0 16px
}

/* the band the page opens on, the same gradient the design gives it */
.otlob-page .offers-hero {
  padding:28px 0 22px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,rgba(32,191,239,.12),rgba(255,107,53,.12))
}

.otlob-page .offers-hero h1 {
  margin:0 0 10px;font-size:clamp(22px,3.2vw,34px);line-height:1.3
}

.otlob-page .offers-hero-lead {
  max-width:820px;margin:0;color:var(--muted)
}

.otlob-page .skip-link {
  position:absolute;left:-9999px
}

.otlob-page .legal-hero {
  padding-block:28px
}

.otlob-page .dir-hero .dir-breadcrumbs {
  margin-bottom:10px
}

.otlob-page .dir-breadcrumbs ol {
  display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;font-size:13px;list-style:none
}

.otlob-page .dir-breadcrumbs li + li::before {
  content:"\2039";opacity:.6;margin-inline-end:6px
}

.otlob-page .dir-breadcrumbs a {
  color:inherit;opacity:.85;text-decoration:none
}

.otlob-page .dir-breadcrumbs a:hover {
  text-decoration:underline
}

/* the contents on one side and the policy on the other, the contents follow
   the page while it is scrolled */
.otlob-page .legal-layout {
  display:grid;grid-template-columns:260px minmax(0,1fr);align-items:start;gap:24px;padding-block:28px
}

.otlob-page .legal-toc {
  position:sticky;top:88px;background:#fff;border:1px solid #e7ecf3;border-radius:16px;padding:16px
}

.otlob-page .legal-toc h2 {
  margin:0 0 10px;font-size:16px
}

.otlob-page .legal-toc ol {
  display:grid;gap:6px;margin:0;padding-inline-start:20px;font-size:14px
}

.otlob-page .legal-toc a {
  color:#334155
}

.otlob-page .legal-content {
  display:grid;gap:26px;background:#fff;border:1px solid #e7ecf3;border-radius:18px;padding:24px
}

.otlob-page .legal-content h2 {
  margin:0 0 10px;color:#0f172a;font-size:clamp(19px,2.4vw,23px);scroll-margin-top:90px
}

.otlob-page .legal-content h3 {
  margin:16px 0 8px;color:#0f172a;font-size:17px
}

.otlob-page .legal-content p {
  margin:0 0 10px;color:#334155;font-size:15.5px;line-height:1.95
}

.otlob-page .legal-list {
  display:grid;gap:6px;margin:0 0 10px;padding-inline-start:20px;color:#334155;font-size:15px;line-height:1.9
}

.otlob-page .legal-updated {
  color:#64748b;font-size:14px;font-weight:700
}

.otlob-page .legal-table-wrap {
  overflow-x:auto
}

.otlob-page .legal-table {
  width:100%;border-collapse:collapse;font-size:14px
}

.otlob-page .legal-table caption {
  padding-bottom:8px;color:#64748b;font-size:13px;text-align:start
}

.otlob-page .legal-table th, .otlob-page .legal-table td {
  border:1px solid #e7ecf3;padding:8px 10px;text-align:start;vertical-align:top
}

.otlob-page .legal-table th {
  background:#f8fafc;color:#0f172a;font-weight:800
}

/* the buttons the policy carries inside its own text */
.otlob-page .lf-submit, .otlob-page .lf-link-btn {
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;border:0;border-radius:12px;background:#ff6b35;color:#fff;font:inherit;font-weight:800;cursor:pointer;text-decoration:none
}

.otlob-page .lf-submit:hover, .otlob-page .lf-link-btn:hover {
  filter:brightness(.95);color:#fff;text-decoration:none
}

.otlob-page .lf-secondary {
  background:#0f766e
}

@media (max-width:900px) {

  .otlob-page .legal-layout {
    grid-template-columns:minmax(0,1fr)
  }

  .otlob-page .legal-toc {
    position:static
  }

  .otlob-page .offers-hero {
    padding:20px 0 16px
  }

  .otlob-page .offers-hero-lead {
    font-size:14px;line-height:1.7
  }

  .otlob-page .legal-content {
    padding:18px
  }

}