/* contact-us - the page and the form 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
}

.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 FORM OF THE DESIGN

   Two columns on the desktop, one on the phone, and the trap field is taken
   out of the flow so nobody sees it. */

.otlob-page .legal-layout {
  display:grid;grid-template-columns:minmax(0,1fr);max-width:860px;padding-block:28px
}

.otlob-page .legal-form {
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px
}

.otlob-page .lf-field {
  display:flex;flex-direction:column;gap:6px
}

.otlob-page .lf-full {
  grid-column:1 / -1
}

.otlob-page .lf-field label {
  color:#0f172a;font-size:14px;font-weight:800
}

.otlob-page .lf-field input, .otlob-page .lf-field select, .otlob-page .lf-field textarea {
  width:100%;min-height:44px;padding:10px 12px;border:1px solid #d8dee7;border-radius:10px;background:#fff;font:inherit
}

.otlob-page .lf-field input:focus-visible, .otlob-page .lf-field select:focus-visible, .otlob-page .lf-field textarea:focus-visible {
  outline:2px solid #ff6b35;outline-offset:2px
}

.otlob-page .lf-help {
  color:#64748b;font-size:12.5px;line-height:1.7
}

.otlob-page .lf-consent {
  gap:10px
}

.otlob-page .lf-check {
  display:flex;align-items:flex-start;gap:8px;font-size:14px;font-weight:600;line-height:1.8
}

.otlob-page .lf-check input {
  flex:0 0 auto;width:18px;height:18px;min-height:18px;margin-top:3px
}

/* the field the robots fill in, out of sight and out of the tab order */
.otlob-page .lf-hp {
  position:absolute;width:1px;height:1px;overflow:hidden;white-space:nowrap;clip:rect(0,0,0,0)
}

.otlob-page .lf-actions {
  grid-column:1 / -1
}

.otlob-page .lf-status {
  grid-column:1 / -1;margin:0 0 14px;min-height:24px;font-size:14.5px;font-weight:800
}

.otlob-page .lf-ok {
  color:#15803d
}

.otlob-page .lf-bad {
  color:#b91c1c
}

.otlob-page .lf-submit {
  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 {
  filter:brightness(.95);color:#fff;text-decoration:none
}

@media (max-width:900px) {

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

  .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
  }

}