/* The legal pages: terms, privacy, refunds.
 *
 * Deliberately not the marketing stylesheet. Those pages are a sales argument
 * and carry forty rules of layout for it; these are documents somebody reads
 * once, carefully, often on a phone, often because something has gone wrong.
 * So: one column, generous line height, and nothing that moves.
 *
 * It shares the site's palette and faces, because a terms page that looks like
 * it came from somewhere else is the oldest tell of a seller who bought his
 * terms rather than wrote them.
 */

@font-face { font-family:'Sans'; src:url('fonts/sourcesans-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Sans'; src:url('fonts/sourcesans-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Garamond'; src:url('fonts/garamond-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'ArSans'; src:url('fonts/ibm-plex-sans-arabic-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'ArSans'; src:url('fonts/ibm-plex-sans-arabic-600.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Ruqaa'; src:url('fonts/arefruqaa-700.woff2') format('woff2'); font-weight:700; font-display:swap; }

:root{
  --ink:#14110C; --ink-2:#55504A; --ink-3:#6C645A;
  --ground:#FBF8F1; --band:#F0EBDE; --line:#E1D9C8; --line-2:#D6D0C4;
  --panel:#FAF7F0; --accent:#12704A; --green:#0E3B2C;
  --r-card:18px; --r-pill:100px;
}
*{box-sizing:border-box}
html,body{margin:0; background:var(--ground); color:var(--ink)}
body{font-family:'Sans','ArSans',system-ui,sans-serif; font-size:17px; line-height:1.75}
html[dir="rtl"] body{font-family:'ArSans','Sans',system-ui,sans-serif; line-height:1.95}

.wrap{max-width:720px; margin:0 auto; padding:0 22px}

/* ---- the bar ---- */
nav{border-bottom:1px solid var(--line); background:var(--ground)}
nav .wrap{display:flex; align-items:center; gap:16px; padding-block:14px; max-width:940px}
.brand{text-decoration:none; color:inherit; margin-inline-end:auto}
.mark{font-family:'Ruqaa',serif; font-size:26px; color:var(--green); line-height:1}
html[lang="en"] .mark{font-family:'Garamond',serif; font-weight:600; font-size:24px}
.navr{display:flex; align-items:center; gap:9px}
.btn{font:inherit; font-weight:600; font-size:14px; text-decoration:none;
     padding:8px 15px; border-radius:var(--r-pill); border:1px solid var(--line-2);
     color:var(--green); white-space:nowrap}
.btn:hover{border-color:var(--green)}

/* ---- the document ---- */
.doc{padding:40px 22px 90px}
h1{font-family:'Garamond',serif; font-size:40px; line-height:1.2; color:var(--green); margin:0 0 6px}
html[dir="rtl"] h1{font-family:'ArSans',sans-serif; font-size:34px}
h2{font-size:21px; color:var(--green); margin:40px 0 10px; line-height:1.4}
/* The question level, for a page with three. It has to read as a question
   rather than as another section, so it is the ink colour and not the green,
   and it sits tight against its own answer and well clear of the one above —
   the gap is what separates one question from the next, because nothing else
   does. */
h3{font-size:17px; color:var(--ink); font-weight:600;
   margin:30px 0 8px; line-height:1.5}
h2 + h3{margin-top:18px}
p{margin:0 0 14px; color:var(--ink-2)}
.strong{color:var(--ink); font-weight:600}
.muted{color:var(--ink-3); font-size:15px}
.when{color:var(--ink-3); font-size:14px; margin-bottom:28px}
a{color:var(--accent)}
ul{margin:0 0 14px; padding-inline-start:22px; color:var(--ink-2)}
li{margin-bottom:7px}

/* The summary at the top. Institutions skim; this is what they skim. */
.short{background:var(--panel); border:1px solid var(--line-2);
       border-radius:var(--r-card); padding:22px 24px; margin:0 0 10px}
.short h2{margin-top:0}
.short li{color:var(--ink)}

/* The processor table. On a phone it becomes rows rather than a sideways
   scroll, because a table a reader has to drag is a table nobody reads. */
table{width:100%; border-collapse:collapse; margin:0 0 16px; font-size:15px}
th{text-align:start; font-weight:600; color:var(--ink-3); font-size:13px;
   padding:8px 10px; border-bottom:1px solid var(--line-2)}
td{padding:10px; border-bottom:1px solid var(--line); color:var(--ink-2);
   vertical-align:top}
td:first-child{font-weight:600; color:var(--ink); white-space:nowrap}

footer{border-top:1px solid var(--line); background:var(--band)}
footer .wrap{display:flex; flex-wrap:wrap; gap:18px; padding-block:22px;
             max-width:940px; font-size:14px}
footer a{color:var(--ink-2); text-decoration:none}
footer a:hover{color:var(--accent)}

@media (max-width:620px){
  body{font-size:16px}
  h1{font-size:30px} html[dir="rtl"] h1{font-size:27px}
  .doc{padding-top:28px}
  .short{padding:18px 18px}
  table, thead, tbody, tr, td{display:block; width:100%}
  thead{display:none}
  tr{border-bottom:1px solid var(--line-2); padding:10px 0}
  td{border:0; padding:2px 0}
  td:first-child{white-space:normal}
}