/* QRM vs Odoo: the sections this page adds to the shared transit layout
   (/features/_shared/transit.css). Same tokens; logical properties so Arabic
   mirrors cleanly. One accent per component: the QRM column header. */

/* ---------- side by side ---------- */
.ox-grid{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--panel)}
.ox-row{display:grid;grid-template-columns:minmax(150px,.7fr) 1fr 1fr;border-top:1px solid var(--line)}
.ox-row:first-child{border-top:0}
.ox-row > div{padding:18px 22px;font-size:15.5px;line-height:1.5}
.ox-head > div{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding-top:16px;padding-bottom:16px;background:var(--panel-2)}
.ox-head .ox-q{color:var(--signal)}
.ox-row > div.ox-k{font-family:var(--disp);font-weight:600;font-size:17px;color:var(--ink)}
.ox-a{color:var(--ink-3)}
.ox-b{color:var(--ink);background:rgba(242,179,61,.05)}
.ox-row small{display:none}
@media(max-width:820px){
  .ox-grid .ox-head{display:none}
  .ox-row{grid-template-columns:1fr}
  .ox-row > div{padding:10px 18px}
  .ox-row > div.ox-k{padding-top:18px}
  .ox-row > div.ox-b{padding-bottom:18px}
  .ox-row small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
  .ox-b small{color:var(--signal)}
}

/* ---------- one job ---------- */
.ox-job{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;counter-reset:none}
.ox-job li{display:grid;grid-template-columns:44px 1fr;gap:16px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.ox-n{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:700;font-size:19px;color:#1b1404;background:var(--signal)}
.ox-job h3{font-size:21px;margin:2px 0 6px}
.ox-job p{color:var(--ink-2);margin:0 0 12px;font-size:15.5px}
.ox-where{display:inline-flex;flex-wrap:wrap;gap:8px;align-items:baseline;font-family:var(--mono);font-size:12.5px;color:var(--ink-2);background:var(--panel-2);border-radius:10px;padding:5px 12px}
.ox-where b{font-weight:500;letter-spacing:.12em;text-transform:uppercase;font-size:11px;color:var(--ink-3)}
@media(max-width:860px){.ox-job{grid-template-columns:1fr}}

/* ---------- cards (books, AI) ---------- */
.ox-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ox-cards article{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.ox-cards h3{font-size:20px;margin:0 0 8px}
.ox-cards p{color:var(--ink-2);margin:0;font-size:15.5px}
@media(max-width:960px){.ox-cards{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.ox-cards{grid-template-columns:1fr}}

.ox-ai{display:grid;grid-template-columns:1.15fr 1fr;gap:26px;align-items:start}
.ox-ai .ox-cards{grid-template-columns:1fr 1fr}
.ox-ai figcaption{font-family:var(--mono);font-size:12px;color:var(--ink-3);padding:10px 14px;background:var(--panel)}
@media(max-width:960px){.ox-ai{grid-template-columns:1fr}}
@media(max-width:620px){.ox-ai .ox-cards{grid-template-columns:1fr}}

/* ---------- questions ---------- */
.ox-faq{display:grid;gap:10px;max-width:900px}
.ox-faq details{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:0 22px}
.ox-faq summary{cursor:pointer;list-style:none;font-family:var(--disp);font-weight:600;font-size:19px;padding:18px 0;display:flex;justify-content:space-between;gap:16px}
.ox-faq summary::-webkit-details-marker{display:none}
.ox-faq summary::after{content:"+";color:var(--signal);font-family:var(--mono);font-size:20px;line-height:1}
.ox-faq details[open] summary::after{content:"−"}
.ox-faq p{color:var(--ink-2);margin:0 0 20px;font-size:16px}