/* Barrad landing — the design's tokens, verbatim from the app's theme. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'IBM Plex Sans','IBM Plex Sans Arabic',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  background:#F6F1E9;
  color:#2C2621;
}
:root{
  --accent:#E07A4F;
  --ink:#2C2621;
  --ink-2:#726755;
  --ink-3:#A79C8B;
  --cream:#F6F1E9;
  --sand:#EFE8DC;
  --line:#E7DECF;
  --danger:#C0553B;
}
a{color:var(--accent);text-decoration:none;font-weight:600}
a:hover{opacity:.78}
h1,h2,h3{margin:0;letter-spacing:-.6px;text-wrap:pretty}
p{margin:0;text-wrap:pretty}

.ms{
  font-family:'Material Symbols Rounded';
  font-weight:normal;font-style:normal;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  direction:ltr;-webkit-font-smoothing:antialiased;
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
}
.msf{font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24 !important}

.wrap{max-width:1120px;margin:0 auto}

/* ---------- nav ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(246,241,233,.88);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
header.site nav{
  max-width:1120px;margin:0 auto;padding:14px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:11px;color:inherit}
.brand-tile{
  width:36px;height:36px;border-radius:11px;background:var(--accent);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.wordmark{
  font-family:'Newsreader',serif;font-size:25px;font-weight:600;
  color:var(--ink);letter-spacing:-.3px;
}
.navlinks{display:flex;align-items:center;gap:26px;flex-wrap:wrap;justify-content:flex-end}
.navlinks a{color:var(--ink-2);font-size:15px}
.navlinks a.cta{background:var(--accent);color:#fff;padding:10px 20px;border-radius:999px}
.navlinks a.cta:hover{opacity:.9}

/* ---------- footer ---------- */
footer.site{background:var(--sand);border-top:1px solid var(--line)}
.foot-grid{
  max-width:1120px;margin:0 auto;padding:52px 28px 40px;
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;
}
.foot-grid .col{display:flex;flex-direction:column;gap:11px;align-items:flex-start}
.foot-head{
  font-size:12px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:3px;
}
.foot-grid .col a{color:var(--ink-2);font-size:15px;font-weight:500}
.foot-bottom{
  max-width:1120px;margin:0 auto;padding:22px 28px 44px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  border-top:1px solid var(--line);
}
.foot-bottom span{font-size:13.5px;color:var(--ink-3)}

/* ---------- long-form legal pages ---------- */
.doc{max-width:760px;margin:0 auto;padding:64px 28px 88px}
.doc h1{font-family:'Newsreader',serif;font-size:44px;font-weight:600;line-height:1.1}
.doc .updated{font-size:14.5px;color:var(--ink-3);margin-top:14px}
.doc h2{
  font-size:21px;font-weight:700;letter-spacing:-.3px;
  margin-top:44px;padding-top:22px;border-top:1px solid var(--line);
}
.doc h3{font-size:16.5px;font-weight:700;margin-top:26px}
.doc p,.doc li{font-size:16.5px;line-height:1.7;color:var(--ink-2);margin-top:12px}
.doc strong{color:var(--ink);font-weight:600}
.doc ul{margin:6px 0 0;padding-inline-start:22px}
.doc li{margin-top:8px}
.doc table{border-collapse:collapse;width:100%;margin-top:18px;font-size:15.5px}
.doc th,.doc td{
  text-align:start;padding:11px 13px;border:1px solid var(--line);
  vertical-align:top;line-height:1.55;
}
.doc th{background:var(--sand);color:var(--ink);font-weight:600}
.doc td{color:var(--ink-2)}
.callout{
  background:var(--sand);border:1px solid var(--line);border-radius:18px;
  padding:22px 24px;margin-top:26px;
}
.callout.warn{background:rgba(192,85,59,.07);border-color:rgba(192,85,59,.22)}
.callout p:first-child{margin-top:0}
.backlink{display:inline-flex;align-items:center;gap:7px;font-size:15px;margin-bottom:26px}

@media (max-width:900px){
  .hero-grid,.feat-grid,.bi-grid,.legal-grid{grid-template-columns:1fr !important}
  .foot-grid{grid-template-columns:1fr !important;gap:32px !important}
  .h1big{font-size:44px !important}
  .doc h1{font-size:34px}
}

/* On a phone the nav can't hold a row of links beside the wordmark — it
   wraps into a ragged second line that collides with the brand. Stack it
   instead, and let the links scroll sideways rather than wrap at all. */
@media (max-width:640px){
  header.site nav{
    flex-direction:column;align-items:stretch;gap:12px;padding:12px 18px;
  }
  .brand{justify-content:center}
  .navlinks{
    justify-content:flex-start;gap:20px;flex-wrap:nowrap;
    overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
    padding-bottom:2px;
  }
  .navlinks::-webkit-scrollbar{display:none}
  .navlinks a{white-space:nowrap;font-size:14.5px}
  .navlinks a.cta{padding:8px 16px}
  .doc{padding:40px 22px 64px}
  .doc h1{font-size:30px}
  .doc p,.doc li{font-size:16px}
  /* A two-column table at 380px is unreadable; stack the cells. */
  .doc table,.doc tbody,.doc tr,.doc th,.doc td{display:block;width:100%}
  .doc tr{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:14px}
  .doc th,.doc td{border:none}
  .doc td+td{padding-top:0}
  /* Column headings mean nothing once each row is its own card. */
  .doc tr:has(th){display:none}
}

/* ---------- Arabic / RTL ----------
   The layout needed almost nothing: it was already built on `text-align:start`,
   `padding-inline-start` and flexbox, all of which mirror on their own. What
   Arabic does need is different type.

   `!important` is unpleasant but unavoidable — the display headings carry
   `font-family:'Newsreader',serif` as an inline style, and Newsreader has no
   Arabic glyphs at all, so an Arabic page would silently fall back to whatever
   generic serif the OS supplies. Inline styles can only be beaten this way. */
/* Body text needs no override. `body` already declares
   'IBM Plex Sans','IBM Plex Sans Arabic', and IBM Plex Sans carries no Arabic
   glyphs at all — so Arabic falls through to the Arabic face on its own while
   Latin runs (an email address, a store name) keep the Latin face, which is
   what you want on a mixed-script page. A blanket [dir="rtl"] rule here would
   also have been dead: it targets <html>, and body's own rule wins. */
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,
[dir="rtl"] .wordmark,[dir="rtl"] .h1big{
  font-family:'IBM Plex Sans Arabic',system-ui,sans-serif !important;
  /* Latin display type is tracked in tight; Arabic is a joined script, and
     negative tracking pulls the connecting strokes apart. */
  letter-spacing:normal !important;
}
/* Arabic sits taller than Latin at the same size — ascenders, descenders and
   dots all need more room before lines start to feel cramped. */
[dir="rtl"] .doc p,[dir="rtl"] .doc li{line-height:1.9}
[dir="rtl"] .doc h1{line-height:1.35}
[dir="rtl"] .h1big{line-height:1.3 !important}

/* ---------- language switch ---------- */
.langswitch{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--ink-2);font-size:14.5px;font-weight:600;
  border:1px solid var(--line);border-radius:999px;padding:6px 13px;
  background:rgba(255,255,255,.6);white-space:nowrap;
}
.langswitch:hover{opacity:1;border-color:var(--ink-3)}
/* The globe is a symbol, not text — keep it upright in both directions. */
.langswitch .ms{font-size:17px;direction:ltr}