/* The "digital worker" explainer page (/he/digital-worker). Loaded after /styles.css and /guide.css and uses their tokens. */

/* The definition under the H1: the quotable answer */
.dw-def { margin-top: 24px; padding: 22px 26px; border-radius: 20px; background: #fff; border: 1px solid var(--border); border-inline-start: 5px solid var(--amber); box-shadow: 0 10px 28px -22px #15233f59; }
.guide .dw-def p { margin-top: 0; font-size: 20px; line-height: 33px; color: var(--ink); }
.guide .dw-def p + p { margin-top: 10px; font-size: 18px; line-height: 30px; color: var(--ink-muted); }

/* The six roles */
.guide article ul.roles { list-style: none; padding: 0; margin-top: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.roles li { padding: 18px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--border); font-size: 16px; line-height: 26px; }
.roles strong { display: block; margin-bottom: 4px; font-size: 17px; line-height: 25px; }

/* The comparison table: three columns, the digital worker highlighted */
.guide article .matrix td.us { color: var(--ink); font-weight: 600; background: #f4ad421f; }
.guide article .matrix thead th.us { background: var(--grad-fill); color: var(--on-amber); }

/* FAQ: native details, open by default so the answers are on the page for readers and crawlers alike */
.faq { margin-top: 20px; display: grid; gap: 12px; }
.faq details { border-radius: 16px; background: #fff; border: 1px solid var(--border); }
.faq summary { cursor: pointer; list-style: none; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border: solid var(--ink-muted); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .15s ease; }
.faq details[open] summary::after { transform: rotate(-135deg); }
.guide article .faq h3 { margin: 0; font-size: 19px; line-height: 28px; }
.guide article .faq details p { margin: 0; padding: 0 22px 20px; font-size: 17px; line-height: 29px; }

/* Further reading */
.guide article ul.more { list-style: none; padding: 0; gap: 10px; }
.guide article .more a { display: block; padding: 14px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--border); text-decoration: none; transition: border-color .15s ease; }
.guide article .more a:hover { border-color: var(--amber); }
.more span { display: block; margin-top: 2px; font-size: 15px; line-height: 22px; font-weight: 500; color: var(--ink-muted); }

@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: none; } }

@media (max-width: 720px) {
  .dw-def { padding: 18px 18px; }
  .guide .dw-def p { font-size: 18px; line-height: 30px; }
  .guide .dw-def p + p { font-size: 17px; line-height: 28px; }
  .guide article ul.roles { grid-template-columns: 1fr; }
  .faq summary { padding: 16px 18px; }
  .guide article .faq h3 { font-size: 17px; line-height: 26px; }
  .guide article .faq details p { padding: 0 18px 18px; font-size: 16px; line-height: 27px; }
  .guide article .matrix td.us { background: #f4ad421f; }
}