/* Site styles — every value from chert-tokens.css (Design System v1.0). No hex here. */
.skip{position:absolute;inset-inline-start:-999px;top:0;background:var(--chert-ink);color:var(--chert-cream);padding:var(--space-2) var(--space-4);border-radius:0 0 var(--radius-sm) var(--radius-sm);z-index:var(--z-toast)}
.skip:focus{inset-inline-start:var(--space-4)}
.header{position:sticky;inset-block-start:0;z-index:var(--z-sticky);height:var(--header-h);display:flex;align-items:center;justify-content:space-between;padding-inline:var(--gutter);background:var(--chert-cream);transition:box-shadow var(--dur-base) var(--ease)}
.header--scrolled{border-block-end:1px solid var(--chert-border);box-shadow:0 2px 12px -6px rgba(0,0,0,.1)}
.lockup{display:flex;align-items:center;gap:var(--space-3);color:var(--chert-ink);text-decoration:none}
.mark{height:32px;width:auto}
.wordmark{font-weight:800;letter-spacing:1px}
.product{font-weight:600;color:var(--chert-ink)}
.bar{color:var(--chert-muted);padding-inline:2px}
.header nav{display:flex;align-items:center;gap:var(--space-5)}
.header nav a:not(.btn){font-size:var(--fs-sm);font-weight:600;color:var(--chert-ink);opacity:.85;text-decoration:none;padding-block:var(--space-1)}
.header nav a:not(.btn):hover{opacity:1;box-shadow:inset 0 -2px 0 var(--chert-orange)}
.btn{font:inherit;font-size:var(--fs-sm);font-weight:700;padding:11px 22px;border-radius:var(--radius-sm);border:none;cursor:pointer;text-decoration:none;display:inline-block;transition:background var(--dur-base) var(--ease),transform var(--dur-base) var(--ease)}
.btn--primary{background:var(--chert-orange);color:var(--chert-ink)}
.btn--primary:hover{background:var(--chert-orange-deep);transform:translateY(-1px)}
.btn--secondary{background:transparent;border:1.5px solid var(--chert-ink);color:var(--chert-ink)}
.btn--secondary:hover{background:var(--chert-ink);color:var(--chert-cream)}
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--space-9)}
.section--alt{background:var(--chert-surface)}
.hero{text-align:center}
.pill{display:inline-block;background:var(--chert-orange-tint);color:var(--chert-ink);border-radius:var(--radius-pill);padding:4px 12px;font-size:var(--fs-xs);font-weight:600;margin-block-end:var(--space-4)}
h1.display{font-family:var(--font-display);font-size:var(--fs-display);font-weight:700;line-height:1.05;letter-spacing:-1.5px;margin:0 0 var(--space-4)}
.lead{font-size:var(--fs-lg);max-width:var(--maxw-prose);margin-inline:auto;color:var(--chert-muted)}
.cta{display:flex;gap:var(--space-3);justify-content:center;margin-block-start:var(--space-6)}
h2{font-size:var(--fs-h2);font-weight:700;line-height:1.15;letter-spacing:-.5px;margin:0 0 var(--space-5)}
h3{font-size:var(--fs-h3);font-weight:700;line-height:1.25;margin:0 0 var(--space-2)}
.grid-cards{display:grid;grid-template-columns:1fr;gap:var(--space-5)}
@media(min-width:640px){.grid-cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid-cards{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--chert-surface);border:1px solid var(--chert-border);border-radius:var(--radius-card);padding:28px;box-shadow:var(--shadow-card);transition:transform var(--dur-base) var(--ease),box-shadow var(--dur-base) var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.card__icon{width:46px;height:46px;display:grid;place-items:center;border-radius:var(--radius-md);background:var(--chert-orange-tint);color:var(--chert-ink);margin-block-end:var(--space-4)}
.chert-star{width:26px;height:26px}
.card__desc{font-size:var(--fs-sm);color:var(--chert-muted);margin:0}
table{border-collapse:collapse;width:100%;font-size:var(--fs-sm)}
th{background:var(--chert-ink);color:var(--chert-surface);text-align:start;padding:12px 16px;font-weight:700}
td{padding:14px 16px;border-block-end:1px solid var(--chert-border)}
tbody tr:nth-child(even){background:var(--chert-surface-alt)}
tbody tr:hover{background:var(--chert-orange-tint)}
.table-wrap{overflow-x:auto;border:1px solid var(--chert-border);border-radius:var(--radius-card);background:var(--chert-surface)}
.prose{max-width:var(--maxw-prose)}
.prose h1{font-size:var(--fs-h1);font-weight:800;line-height:1.1;letter-spacing:-1px;margin:0 0 var(--space-5)}
.prose h2{font-size:var(--fs-h3);margin-block:var(--space-6) var(--space-3)}
.prose p,.prose li{line-height:1.5}
.prose a{color:var(--chert-ink);text-decoration:underline;text-decoration-color:var(--chert-orange-deep);text-underline-offset:3px}
.muted{color:var(--chert-muted);font-size:var(--fs-sm)}
.band{background:var(--chert-tan);text-align:center}
.footer{background:var(--chert-ink);color:var(--chert-dark-text);padding-block:var(--space-7)}
.footer__inner{display:flex;flex-direction:column;gap:var(--space-3);font-size:var(--fs-sm)}
.footer a{color:var(--chert-dark-text)}
.footer .muted{color:var(--chert-dark-muted)}
@media(max-width:639px){.header nav a:not(.btn){display:none}.cta{flex-direction:column;align-items:center}}

/* ---- Arabic (Design System §7.4). The tokens file sets these on [lang=ar] but body{} overrides
   inheritance, so they are restated on body and on the elements that set their own font. ---- */
[lang="ar"] body { font-family: var(--font-ar); font-size: 17px; line-height: var(--lh-ar); letter-spacing: normal; }
[lang="ar"] h1.display { font-family: var(--font-ar); font-weight: 700; letter-spacing: normal; line-height: 1.25; }
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3 { letter-spacing: normal; line-height: 1.35; }
[lang="ar"] .pill, [lang="ar"] .btn, [lang="ar"] .header nav a, [lang="ar"] table, [lang="ar"] .card__desc, [lang="ar"] .muted { font-family: var(--font-ar); }
[lang="ar"] em, [lang="ar"] i { font-style: normal; font-weight: 700; }
.wordmark, .product { font-family: var(--font-ui); }   /* the lockup never changes language */
code { font-family: var(--font-mono); font-size: .95em; }
.ltr-content { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.lang-switch { font-size: var(--fs-sm); font-weight: 600; color: var(--chert-ink); text-decoration: none; padding: 6px 10px; border: 1px solid var(--chert-border-strong); border-radius: var(--radius-sm); }
.lang-switch:hover { background: var(--chert-surface); }
@media (max-width:639px) { .header nav .lang-switch { display: inline-block; } }

/* ---- Auth pages (Design System §6.4 forms) ---- */
.auth { max-width: 480px; margin-inline: auto; }
.auth .card:hover { transform: none; box-shadow: var(--shadow-card); }
.auth h1 { font-size: var(--fs-h2); font-weight: 800; line-height: 1.15; margin: 0 0 var(--space-2); }
.auth .intro { color: var(--chert-muted); font-size: var(--fs-sm); margin: 0 0 var(--space-6); }
.field { margin-block-end: 20px; }
.label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-block-end: 6px; }
.input, .select { width: 100%; height: 44px; padding: 10px 14px; font-family: inherit; font-size: var(--fs-base); background: var(--chert-surface); border: 1px solid var(--chert-border); border-radius: var(--radius-sm); color: var(--chert-ink); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.input::placeholder { color: var(--chert-muted); }
.input:focus, .select:focus { outline: none; border-color: var(--chert-orange); box-shadow: 0 0 0 3px rgba(255,134,81,.25); }
.input--error { border-color: var(--chert-error); }
.helper { font-size: var(--fs-xs); color: var(--chert-muted); margin-block-start: 6px; }
.form-msg { display: none; border-inline-start: 4px solid var(--chert-error); background: var(--chert-error-tint); padding: var(--space-4); border-radius: var(--radius-sm); margin-block-end: 20px; font-size: var(--fs-sm); }
.form-msg--success { border-color: var(--chert-success); background: var(--chert-success-tint); }
.form-msg[data-show] { display: block; }
.auth .btn { width: 100%; height: 44px; font-size: var(--fs-base); }
.auth .alt { text-align: center; font-size: var(--fs-sm); margin-block-start: var(--space-5); }
.auth .alt a, .prose a, .app-status a { color: var(--chert-ink); text-decoration: underline; text-decoration-color: var(--chert-orange-deep); text-underline-offset: 3px; }
.badge { display: inline-block; border-radius: var(--radius-pill); padding: 4px 12px; font-size: var(--fs-xs); font-weight: 600; }
.badge--pending { background: var(--chert-warning-tint); color: var(--chert-ink); }
.badge--active { background: var(--chert-success-tint); color: var(--chert-ink); }
.header nav a.ghost { font-size: var(--fs-sm); font-weight: 700; color: var(--chert-ink); text-decoration: none; }
.header nav a.ghost:hover { text-decoration: underline; text-decoration-color: var(--chert-orange-deep); text-underline-offset: 3px; }
@media (max-width:639px) { .header nav a.ghost { display: inline-block; } }