/*
 * The public page. Values restate design/tokens.json (no build step reaches this directory, so
 * they are copied, not generated — if a token changes, change it here too). Logical properties
 * only, so the Arabic layout mirrors without a second stylesheet.
 *
 * Fonts are the application's own files, served by dlp-web at /fonts (libs/web/ui/fonts) — no CDN.
 */
@font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url('/fonts/Inter-Regular.ttf') format('truetype'); }
@font-face { font-family: Inter; font-weight: 500; font-display: swap; src: url('/fonts/Inter-Medium.ttf') format('truetype'); }
@font-face { font-family: Inter; font-weight: 600; font-display: swap; src: url('/fonts/Inter-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 400; font-display: swap; src: url('/fonts/IBMPlexSansArabic-Regular.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 500; font-display: swap; src: url('/fonts/IBMPlexSansArabic-Medium.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 600; font-display: swap; src: url('/fonts/IBMPlexSansArabic-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url('/fonts/IBMPlexMono-Regular.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url('/fonts/IBMPlexMono-Medium.ttf') format('truetype'); }

:root {
  --bg: #FAFAF8;
  --raised: #FFFFFF;
  --sunken: #F1F0EC;
  --border: #E3E1DB;
  --border-strong: #C9C6BD;
  --text: #1C1B18;
  --text-2: #5F5C55;
  --text-muted: #706D65;
  --brand-100: #DCEEED;
  --brand-500: #1F8A87; /* non-text colour: white on it is 4.16:1 */
  --brand-700: #17605F;
  --brand-900: #0F3D3E;

  --font-latin: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-arabic: 'IBM Plex Sans Arabic', Inter, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  --font: var(--font-latin);

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --wrap: 1120px;
  color-scheme: light;
}
html[lang='ar'] { --font: var(--font-arabic); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
}
img { display: block; }
a { color: var(--brand-700); }
h1, h2, h3 { color: var(--brand-900); line-height: 1.2; margin: 0; }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); font-weight: 600; margin-block-end: 2rem; max-inline-size: 28ch; }
h3 { font-size: 1.05rem; font-weight: 600; }
p { margin: 0; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* One language at a time. Without JS <html lang="en"> stays, so English shows. */
html[lang='en'] [data-l='ar'], html[lang='ar'] [data-l='en'] { display: none; }

.wrap { inline-size: 100%; max-inline-size: var(--wrap); margin-inline: auto; padding-inline: 16px; }
@media (min-width: 720px) { .wrap { padding-inline: 32px; } }
.narrow { max-inline-size: 820px; }

.skip { position: absolute; inset-inline-start: 8px; inset-block-start: 8px; background: var(--brand-900); color: #fff; padding: 8px 12px; border-radius: var(--r-sm); z-index: 10; transform: translateY(-200%); }
.skip:focus { transform: none; }
/* In-page links stop below the sticky header rather than under it. */
section[id] { scroll-margin-block-start: 64px; }
:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }

/* ------------------------------ header ------------------------------ */
.top { position: sticky; inset-block-start: 0; z-index: 5; background: rgb(250 250 248 / 0.92); backdrop-filter: blur(8px); border-block-end: 1px solid var(--border); }
.top__row { display: flex; align-items: center; gap: 16px; min-block-size: 64px; }
.top__nav { display: none; gap: 24px; margin-inline-start: auto; }
.top__nav a { color: var(--text-2); text-decoration: none; font-weight: 500; font-size: 0.95rem; }
.top__nav a:hover { color: var(--brand-900); }
.top__actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
@media (min-width: 880px) {
  .top__nav { display: flex; }
  .top__actions { margin-inline-start: 24px; }
}

/* Lockup: mark + real DOM text (docs/brand-and-icons.md §2.4), clearspace kept by the gap. */
.lockup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.lockup__mark { flex: none; }
.lockup__text { display: flex; flex-direction: column; line-height: 1.1; }
.lockup__name { font-family: var(--font-latin); font-weight: 600; letter-spacing: 0.10em; color: var(--brand-900); font-size: 1.05rem; }
.lockup__sub { font-family: var(--font-latin); font-weight: 500; letter-spacing: 0.20em; color: #8E8A80; font-size: 0.62rem; margin-block-start: 3px; }
@media (max-width: 420px) { .lockup__sub { display: none; } }

.lang { font: inherit; font-size: 0.9rem; background: none; border: 1px solid var(--border-strong); border-radius: 999px; padding: 6px 14px; color: var(--text-2); cursor: pointer; }
.lang:hover { border-color: var(--brand-700); color: var(--brand-900); }
.lang [lang='ar'] { font-family: var(--font-arabic); }
.lang [lang='en'] { font-family: var(--font-latin); }

/* ------------------------------ buttons ------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; min-block-size: 44px; padding: 10px 20px; border-radius: var(--r-md); font-weight: 600; font-size: 0.95rem; text-decoration: none; border: 1px solid transparent; white-space: nowrap; }
.btn--primary { background: var(--brand-700); color: #fff; }  /* brand-700 carries text; 500 does not */
.btn--primary:hover { background: var(--brand-900); }
.btn--quiet { color: var(--brand-900); border-color: var(--border-strong); background: var(--raised); }
.btn--quiet:hover { border-color: var(--brand-700); }
.btn--ghost { color: var(--brand-900); padding-inline: 14px; min-block-size: 38px; }
.btn--ghost:hover { background: var(--brand-100); }
.btn--light { background: #fff; color: var(--brand-900); margin-block-start: 16px; }
.btn--light:hover { background: var(--brand-100); }

/* ------------------------------ hero ------------------------------ */
.hero { padding-block: 56px 64px; }
.hero__grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .hero { padding-block: 88px 96px; } .hero__grid { grid-template-columns: 1.1fr 0.9fr; gap: 64px; } }
.eyebrow { display: inline-block; font-size: 0.85rem; font-weight: 500; color: var(--brand-700); background: var(--brand-100); border-radius: 999px; padding: 4px 12px; margin-block-end: 20px; }
h1 { font-size: clamp(2.1rem, 1.3rem + 3.6vw, 3.6rem); font-weight: 600; letter-spacing: -0.02em; max-inline-size: 16ch; }
html[lang='ar'] h1 { letter-spacing: 0; line-height: 1.35; }
.lede { margin-block-start: 20px; font-size: 1.12rem; color: var(--text-2); max-inline-size: 56ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 32px; }

/* The board in miniature */
.board { margin: 0; background: var(--raised); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; box-shadow: 0 1px 2px rgb(28 27 24 / 0.04), 0 12px 32px -12px rgb(15 61 62 / 0.18); }
.board__head { display: flex; align-items: center; justify-content: space-between; font-weight: 600; color: var(--brand-900); padding: 4px 6px 12px; border-block-end: 1px solid var(--border); margin-block-end: 8px; }
.board__count { font-size: 0.85rem; color: var(--text-muted); background: var(--sunken); border-radius: 999px; padding: 2px 10px; }
.board__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.card { display: grid; grid-template-columns: 14px auto 1fr; grid-template-areas: 'mk no tag' 'mk what what'; column-gap: 10px; row-gap: 2px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); }
.card .mk { grid-area: mk; align-self: start; margin-block-start: 5px; }
.card__no { grid-area: no; font-size: 0.85rem; font-weight: 500; color: var(--text); }
.card__what { grid-area: what; font-size: 0.88rem; color: var(--text-2); }
.card .tag { grid-area: tag; justify-self: end; }
.tag { font-size: 0.75rem; font-weight: 500; border-radius: 999px; padding: 2px 10px; border: 1px solid; white-space: nowrap; }
.tag--new      { background: #EDEEFB; border-color: #C6CAF3; color: #3A46A8; }
.tag--hold     { background: #F7EFD8; border-color: #E3D5A8; color: #7A5A05; }
.tag--active   { background: #DCEEED; border-color: #A9D4D2; color: #155150; }
.tag--risk     { background: #FBEADC; border-color: #EFC9A5; color: #8A4412; }
.tag--dispatch { background: #EFE9FB; border-color: #D3C2EE; color: #493176; }

/* Status markers: shape AND colour (tokens: status.*.marker). */
.mk { inline-size: 12px; block-size: 12px; display: inline-block; }
.mk--new      { background: #6B7AE8; border-radius: 2px; }                                   /* square */
.mk--hold     { background: #B8860B; border-radius: 50%; }                                  /* circle */
.mk--active   { background: #1F8A87; clip-path: polygon(0 0, 100% 50%, 0 100%); }            /* triangle */
.mk--risk     { background: #E07A2F; clip-path: polygon(50% 0, 100% 100%, 0 100%); }         /* up-triangle */
.mk--dispatch { background: #6E4FA8; clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); } /* pentagon */
html[dir='rtl'] .mk--active { transform: scaleX(-1); }

/* ------------------------------ sections ------------------------------ */
.section { padding-block: 72px; }
@media (min-width: 960px) { .section { padding-block: 96px; } }
.section--sunken { background: var(--sunken); }
.band { background: var(--brand-900); color: #E8F1F0; padding-block: 56px; }
.statement { font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.4rem); line-height: 1.6; }

/* Icons are stroke SVGs in currentColor; masks let CSS colour them without inline styles. */
.ico { flex: none; display: inline-block; inline-size: 24px; block-size: 24px; background: var(--brand-700); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ico--work-order   { --i: url('/_site/icons/work-order.svg'); }
.ico--batch-pan    { --i: url('/_site/icons/batch-pan.svg'); }
.ico--rush-due     { --i: url('/_site/icons/rush-due.svg'); }
.ico--new-case     { --i: url('/_site/icons/new-case.svg'); }
.ico--milling      { --i: url('/_site/icons/milling.svg'); }
.ico--scan-out     { --i: url('/_site/icons/scan-out.svg'); }
.ico--qc-check     { --i: url('/_site/icons/qc-check.svg'); }
.ico--courier      { --i: url('/_site/icons/courier.svg'); }
.ico--invoice      { --i: url('/_site/icons/invoice.svg'); }
.ico--digital-scan { --i: url('/_site/icons/digital-scan.svg'); }
.ico--doctor-note  { --i: url('/_site/icons/doctor-note.svg'); }
.ico--shade-guide  { --i: url('/_site/icons/shade-guide.svg'); }
.ico--packing      { --i: url('/_site/icons/packing.svg'); }

.controls { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 860px) { .controls { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.controls li { background: var(--raised); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; }
.controls .ico { inline-size: 32px; block-size: 32px; margin-block-end: 16px; }
.controls h3 { margin-block-end: 8px; }
.controls p { color: var(--text-2); }

.audiences { display: grid; gap: 24px; }
@media (min-width: 960px) { .audiences { grid-template-columns: 1.15fr 0.85fr; } }
.aud { background: var(--raised); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; }
.aud__title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); margin-block-end: 8px; }
html[lang='ar'] .aud__title { text-transform: none; letter-spacing: 0; font-size: 0.95rem; }
.aud__title:not(:first-child) { margin-block-start: 28px; }
.feats { list-style: none; margin: 0; padding: 0; }
.feats li { display: flex; gap: 14px; padding-block: 14px; border-block-start: 1px solid var(--border); }
.feats li:first-child { border-block-start: 0; }
.feats strong { display: block; color: var(--brand-900); font-weight: 600; margin-block-end: 2px; }
.feats p { color: var(--text-2); font-size: 0.95rem; }
.soon { display: inline-block; margin-block-start: 8px; font-size: 0.75rem; font-weight: 500; color: #7A5A05; background: #F7EFD8; border: 1px solid #E3D5A8; border-radius: 999px; padding: 1px 10px; }

.trust { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 720px) { .trust { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 1040px) { .trust { grid-template-columns: repeat(4, 1fr); } }
.trust li { border-block-start: 3px solid var(--brand-500); padding-block-start: 16px; }
.trust strong { display: block; color: var(--brand-900); margin-block-end: 6px; }
.trust p { color: var(--text-2); font-size: 0.95rem; }

.section--brand { background: var(--brand-900); color: #E8F1F0; }
.section--brand h2, .section--brand h3 { color: #fff; }
.join__intro { margin-block: -1rem 32px; max-inline-size: 60ch; color: #C9DEDC; font-size: 1.05rem; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.steps li { border: 1px solid rgb(255 255 255 / 0.16); border-radius: var(--r-lg); padding: 24px; background: rgb(255 255 255 / 0.04); }
.steps__n { display: inline-grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 50%; background: #fff; color: var(--brand-900); font-weight: 500; margin-block-end: 14px; }
.steps h3 { margin-block-end: 8px; }
.steps p { color: #C9DEDC; }

/* ------------------------------ footer ------------------------------ */
.foot { background: #0B2E2F; color: #A9C4C2; padding-block: 32px; font-size: 0.9rem; }
.foot__row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.foot .lockup__name { color: #fff; font-size: 0.95rem; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot__nav a { color: #DCEEED; text-decoration: none; }
.foot__nav a:hover { text-decoration: underline; }
.foot__note { margin-inline-start: auto; }
@media (max-width: 720px) { .foot__note { margin-inline-start: 0; inline-size: 100%; } }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }