/* Generated by scripts/build-site.mjs from docs/brand/directions/landing.html. Do not edit by hand. */

/* Fonts: copied from the @fontsource packages, SIL Open Font License 1.1 (fonts/LICENSE-*.txt). */
/* alyamama-arabic-800-normal */
@font-face {
  font-family: 'Alyamama';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(fonts/alyamama-arabic-800-normal.woff2) format('woff2');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}

/* alyamama-latin-800-normal */
@font-face {
  font-family: 'Alyamama';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(fonts/alyamama-latin-800-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ibm-plex-sans-arabic-arabic-400-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}

/* ibm-plex-sans-arabic-latin-400-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ibm-plex-sans-arabic-arabic-500-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format('woff2');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}

/* ibm-plex-sans-arabic-latin-500-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/ibm-plex-sans-arabic-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ibm-plex-sans-arabic-arabic-600-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format('woff2');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}

/* ibm-plex-sans-arabic-latin-600-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/ibm-plex-sans-arabic-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ibm-plex-sans-arabic-arabic-700-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format('woff2');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}

/* ibm-plex-sans-arabic-latin-700-normal */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/ibm-plex-sans-arabic-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ibm-plex-mono-latin-500-normal */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ibm-plex-mono-latin-700-normal */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/ibm-plex-mono-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Layout: one ledger book, read top to bottom. Every section opens with an ink rule
   and its name; every list is a set of ledger rows with a hairline under each. The
   one loud thing is the worked example (two answers for the same 100 orders, the
   second circled in pen); everything around it is quiet paper. */
:root {
  --paper: #F5EFE2;
  --surface: #FFFAF0;
  --text: #1A1D2B;
  --ink: #1F2C5C;
  --pen: #2F55D4;
  --loss: #C4361C;
  --cost: #6B5F66;
  --muted: #5B5A55;
  --rule: #D9D0BC;
  --logo: #1F2C5C;
  --font-display: "Alyamama", "IBM Plex Sans Arabic", "Geeza Pro", serif;
  --font-text: "IBM Plex Sans Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif;
  --font-num: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #14172A; --surface: #1C2038; --text: #EDE7D8; --ink: #C9D3F5;
    --pen: #8FA6F2; --loss: #F08A75; --cost: #B9AEB4; --muted: #A39D8F;
    --rule: #2E3454; --logo: #F5EFE2;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #14172A; --surface: #1C2038; --text: #EDE7D8; --ink: #C9D3F5;
  --pen: #8FA6F2; --loss: #F08A75; --cost: #B9AEB4; --muted: #A39D8F;
  --rule: #2E3454; --logo: #F5EFE2;
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
}
.page *, .page *::before, .page *::after { box-sizing: border-box; }
.page h1, .page h2, .page h3, .page p, .page ul, .page ol, .page table { margin: 0; }
.page ul, .page ol { padding: 0; list-style: none; }
.page {
  max-width: 1040px;
  margin-inline: auto;
  padding-block: 20px 72px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.page > * { min-width: 0; }
a { color: var(--pen); text-underline-offset: 4px; }
a:focus-visible { outline: 3px solid var(--pen); outline-offset: 3px; }
[id] { scroll-margin-top: 20px; }

/* figures: Western digits, left to right, one width each */
.n {
  font-family: var(--font-num);
  font-weight: 500;
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.la { direction: ltr; unicode-bidi: isolate; display: inline-block; }
h1 .n, h2 .n, h3 .n, b .n { font-weight: 700; }

/* masthead */
.mast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 3px solid var(--ink);
}
.logo { display: block; width: 148px; height: auto; color: var(--logo); }
.mast nav { display: flex; gap: 6px 20px; flex-wrap: wrap; font-weight: 500; font-size: 0.95rem; }
.mast nav a { color: var(--ink); text-decoration: none; padding-block: 4px; border-bottom: 2px solid transparent; }
.mast nav a:hover { border-bottom-color: var(--pen); }

/* hero */
.hero { display: grid; gap: 32px; align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.kicker { font-weight: 600; color: var(--muted); font-size: 0.95rem; }
h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.05rem, 8.4vw, 3.7rem);
  line-height: 1.32;
  color: var(--ink);
  text-wrap: balance;
}
.lead { font-size: clamp(1.05rem, 2.4vw, 1.2rem); max-width: 34em; }
.jump { display: flex; gap: 10px 22px; flex-wrap: wrap; align-items: center; font-weight: 600; }
.jump a.main {
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  padding: 8px 20px;
}

/* the worked example in the hero */
.answers {
  background: var(--surface);
  border: 1.5px solid var(--ink);
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.eg {
  align-self: flex-start;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--muted);
  border: 1px solid var(--muted);
  padding: 0 8px;
}
.answers h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.45rem, 5vw, 1.9rem);
  line-height: 1.4;
  color: var(--ink);
  padding-block: 4px 2px;
}
.answer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-block: 14px;
  border-top: 1px solid var(--rule);
}
.answer span:first-child { min-width: 0; }
.answer .n { font-size: clamp(1.5rem, 6.4vw, 2.1rem); font-weight: 700; color: var(--cost); }
.answer.kept .n { color: var(--ink); }
.circled { position: relative; display: inline-block; }
.circled svg {
  position: absolute;
  inset: -9px -13px -7px -13px;
  width: calc(100% + 26px);
  height: calc(100% + 16px);
  color: var(--pen);
  pointer-events: none;
}
.answers .cap { font-size: 0.88rem; color: var(--muted); line-height: 1.7; padding-top: 10px; border-top: 1px solid var(--rule); }

/* sections */
.sec { display: flex; flex-direction: column; gap: 22px; }
.sec > * { min-width: 0; }
.sec-h { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 3px solid var(--ink); }
.sec-h h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 5.6vw, 2.4rem);
  line-height: 1.4;
  color: var(--ink);
}
.sec p { max-width: 36em; }
.sub { color: var(--muted); }
h3 { font-size: 1.08rem; font-weight: 700; color: var(--ink); line-height: 1.6; }

/* ledger rows: a name and its line, hairline under each */
.rows { border-top: 1px solid var(--rule); }
.rows > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px 20px;
  padding-block: 13px;
  border-bottom: 1px solid var(--rule);
}
.rows b { font-weight: 700; color: var(--ink); }
.rows span { min-width: 0; }
.rows.numbered { counter-reset: r; }
.rows.numbered > li { counter-increment: r; grid-template-columns: 34px minmax(0, 1fr); }
.rows.numbered > li::before {
  content: counter(r);
  grid-row: span 2;
  width: 30px; height: 30px;
  margin-top: 2px;
  display: grid; place-items: center;
  border: 2px solid var(--ink);
  color: var(--ink);
  font: 700 0.9rem/1 var(--font-num);
}
.rows.numbered > li > * { grid-column: 2; }
.chips { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.chip {
  justify-self: start;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--muted);
  border: 1px solid var(--rule);
  padding: 0 8px;
}

.split { display: grid; gap: 28px; }
.split > * { min-width: 0; }
.not { display: flex; flex-direction: column; gap: 6px; }
.not ul { display: flex; flex-direction: column; gap: 4px; }
.not li { position: relative; padding-inline-start: 18px; }
.not li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.78em; width: 8px; height: 3px; background: var(--loss); }

.three { display: grid; gap: 20px 28px; }
.three > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 12px; border-top: 1px solid var(--rule); }

/* the full ledger of video 1 */
.ledger {
  background: var(--surface);
  border: 1.5px solid var(--ink);
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ledger-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; }
.scroll { overflow-x: auto; }
.ledger table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.ledger th, .ledger td { padding: 8px 0; border-bottom: 1px solid var(--rule); text-align: start; vertical-align: baseline; }
.ledger thead th { font-size: 0.82rem; font-weight: 600; color: var(--muted); line-height: 1.5; border-bottom: 2px solid var(--ink); }
.ledger tbody th { font-weight: 400; padding-inline-end: 8px; }
.ledger .fig { text-align: end; padding-inline-start: 10px; width: 1%; }
.ledger td.fig .n { color: var(--cost); font-size: 0.92rem; }
.ledger td.fig.in .n { color: var(--text); }
.ledger tr.total th, .ledger tr.total td { border-bottom: 0; border-top: 2px solid var(--ink); font-weight: 700; color: var(--ink); padding-top: 12px; }
.ledger tr.total .n { color: var(--ink); font-weight: 700; font-size: 1.05rem; }
.ledger .cap { font-size: 0.86rem; color: var(--muted); line-height: 1.7; }

.note { border-inline-start: 4px solid var(--pen); padding-inline-start: 14px; max-width: 36em; }
.foot {
  border-top: 3px solid var(--ink);
  padding-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--muted);
  font-size: 0.93rem;
}
.foot .logo { width: 116px; }

@media (min-width: 760px) {
  .page { gap: 76px; padding-block: 28px 96px; }
  .hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 48px; }
  .answers { padding: 24px 26px 20px; }
  .rows.wide > li { grid-template-columns: 13em minmax(0, 1fr); align-items: baseline; }
  .rows.wide.numbered > li { grid-template-columns: 34px 11em minmax(0, 1fr); }
  .rows.wide.numbered > li::before { grid-row: auto; }
  .rows.wide.numbered > li > * { grid-column: auto; }
  .three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 48px; align-items: start; }
  .ledger { padding: 22px 24px 18px; max-width: 720px; }
}

.sprite { position: absolute; }