/* One stylesheet for every page. Every page but the 404 wears the class "till" on <body> (the receipt look, at the
   end), beside a class that chooses its colours: theme-home (the company), theme-sunbula (the icon's green and gold,
   theme-light.css in its repository), theme-center and theme-installments (their icons). The field-guide look
   further down ("guide") is worn by no page since 2026-10-17, and goes in a pull request of its own (deploy/SITE.md
   §3). What comes first is what every page shares, and the dark page the 404 page still is. */
@font-face {
  font-family: "El Messiri";
  src: url("/fonts/ElMessiri.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}
/* The receipt look's text face: IBM Plex Sans Arabic, cut down to Arabic and basic Latin and unhinted (92 KB a weight
   instead of 220). A changed font may not carry its Reserved Font Name, so the cut is called HS Sans Arabic
   (fonts/OFL-HSSansArabic.txt). */
@font-face {
  font-family: "HS Sans Arabic";
  src: url("/fonts/HSSansArabic-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "HS Sans Arabic";
  src: url("/fonts/HSSansArabic-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

:root {
  /* The page. The field-guide look gives these names its own colours. */
  --bg: #f6f8f9;
  --surface: #ffffff;
  --text: #15202a;
  --muted: #56636e;
  --line: #dde4e9;
  --radius: 14px;
  /* The company's colours, for the 404 page. */
  --brand-bg: #121b26;       /* the hero */
  --brand-bg-2: #1c2a3a;     /* the hero's gradient end */
  --brand: #2b5d86;          /* links */
  --accent: #e8b04b;         /* the main button */
  --accent-hover: #efc26f;
  --accent-text: #2e1f04;
  --accent-glow: rgba(232, 176, 75, .16);
  --on-brand: #d5dee7;       /* text on the hero */
  --on-brand-muted: #9fb0c0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a1117;
    --surface: #111b23;
    --text: #e5edf2;
    --muted: #9eb0bc;
    --line: #22323e;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "El Messiri", Tahoma, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--brand); }

h1, h2, h3 { line-height: 1.35; margin: 0 0 .5em; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); }
h3 { font-size: 1.12rem; }

.wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }

/* Header */
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: 1.45rem; font-weight: 700; }
.brand img { border-radius: 9px; }
.nav { display: flex; gap: 22px; margin-inline-start: auto; }
.nav a { color: var(--on-brand); text-decoration: none; font-size: .98rem; }
.nav a:hover { color: #fff; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px; border-radius: 11px;
  font: inherit; font-weight: 700; font-size: 1.02rem; text-decoration: none;
  border: 1px solid transparent; transition: transform .15s, background .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-accent { background: var(--accent); color: var(--accent-text); }
.btn-accent:hover { background: var(--accent-hover); }
.btn-small { padding: 8px 16px; font-size: .95rem; }

/* The 404 page: the dark hero every page once had, filling the window. */
.hero {
  background:
    radial-gradient(900px 420px at 15% 110%, var(--accent-glow), transparent 60%),
    linear-gradient(160deg, var(--brand-bg), var(--brand-bg-2));
  color: #fff;
  padding: 64px 0 72px;
  overflow: hidden;
}
.hero-solo { max-width: 780px; }
.eyebrow { color: var(--accent); font-weight: 600; margin: 0 0 12px; }
.hero h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); margin-bottom: 18px; }
.lead { color: var(--on-brand); font-size: 1.12rem; margin: 0 0 28px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.fine { color: var(--on-brand-muted); font-size: .92rem; margin: 18px 0 0; }

/* Inline style attributes are refused by the Content-Security-Policy, so every page's layout lives here. */
.page-404 { min-height: 100vh; display: grid; place-items: center; text-align: center; }
.page-404 .cta { justify-content: center; }

/* What Windows shows before an unsigned Setup runs, drawn rather than photographed so it reads the same in every
   theme and size. Its colours are Windows' own, not the program's. */
.win-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.win-step {
  margin: 0; display: flex; flex-direction: column; gap: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px;
}
.win-step figcaption { display: flex; align-items: center; gap: 12px; color: var(--text); font-weight: 600; }
.win-dialog {
  background: #1a5fb4; color: #fff; text-align: left;
  font-family: "Segoe UI", Tahoma, sans-serif; font-size: .82rem; line-height: 1.45;
  border-radius: 6px; padding: 16px 16px 12px; min-height: 176px;
  display: flex; flex-direction: column; gap: 8px;
}
.win-dialog p { margin: 0; }
.win-title { font-size: 1.05rem; font-weight: 600; }
.win-text { opacity: .92; }
.win-link { text-decoration: underline; align-self: flex-start; padding: 0 4px; }
.win-dialog .win-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: auto; }
.win-btn { border: 1px solid rgba(255, 255, 255, .85); padding: 3px 14px; border-radius: 2px; }
.win-dialog-uac { background: #f3f3f3; color: #1b1b1b; border-top: 6px solid #d9a400; }
.win-dialog-uac .win-btn { border-color: #8a8a8a; background: #fff; }
.win-mark { outline: 3px solid var(--accent); outline-offset: 3px; box-shadow: 0 0 0 8px var(--accent-glow); border-radius: 3px; }
.win-note { color: var(--muted); margin: 18px 0 0; }
.code, .hash {
  direction: ltr; text-align: left; font-family: Consolas, "Courier New", monospace; font-size: .9rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin: 8px 0 0;
  overflow-wrap: anywhere; white-space: pre-wrap;
}

@media (max-width: 720px) {
  .nav { display: none; }
  .hero { padding: 40px 0 48px; }
  .btn { width: 100%; justify-content: center; }
}

/* The field-guide look (2026-10-13): paper and ink, a ruled masthead with a highlighter under its headline, and rows
   that open on "why". Each row carries a colour: a part of the program on a program's page, a program on the home
   page. A page wears the look through the class "guide" on <body>, beside its theme class. A rule below that restyles
   a shared component (the header's links, buttons, the Windows dialogs, code) is scoped by that class, and the rest
   are classes no other page uses, so the 404 page keeps the look above.
   Rows are <details> and icons are inline SVG drawn with currentColor: the CSP refuses scripts, inline styles and
   data: images. */
.guide {
  --paper: #faf8f0;
  --card: #fffefa;
  --ink: #0b2a22;
  --ink-soft: #3d564d;
  --ink-faint: #6b8076;
  --rule: #dfe4d8;
  --rule-2: #c6cfc3;
  --mark: #f6d977;           /* the highlighter */
  --glow: rgba(245, 196, 94, .30);
  --chip-text: #fff;         /* text on a row's colour */
  --gold: #f5c45e;
  --gold-text: #3a2605;
  /* A colour for each part of Sunbula. */
  --sale: #0f7a5f;
  --stock: #2267b0;
  --acct: #b3590f;
  --cash: #7d4bb0;
  --rep: #b43a5e;
  --start: #0b3d31;          /* the "start here" row */
  /* A colour for each program, on the home page. */
  --sunbula: #0f7a5f;
  --center: #2150d8;
  --installments: #b3590f;    /* not its icon's teal: beside Sunbula's green on the home page it must read apart */
  --main: var(--sale);       /* the main button */
  --main-text: var(--chip-text);
  --link: var(--sale);
  --c: var(--ink);           /* a row's colour, until a c-* class says otherwise */
  --sp: 14px;
  --sp-lg: 34px;
  /* The older names, so that what this look shares with the one above reads this palette. */
  --bg: var(--paper);
  --surface: var(--card);
  --text: var(--ink);
  --muted: var(--ink-soft);
  --line: var(--rule);
  --accent: var(--gold);
  --accent-glow: rgba(245, 196, 94, .2);
  background: radial-gradient(1500px 720px at 13% -14%, var(--glow), transparent 60%), var(--paper);
  color: var(--ink);
  line-height: 1.7;
}
.guide.theme-home {
  --ink: #121b26;
  --ink-soft: #44525f;
  --ink-faint: #6d7a86;
  --rule: #e1e3da;
  --rule-2: #c9cdc5;
  --mark: #f3cf7c;
  --glow: rgba(232, 176, 75, .28);
  --main: var(--ink);
  --main-text: var(--paper);
  --link: var(--ink);
}
.guide.theme-center {
  /* The icon's navy and blue, and its tassel's gold (center-desktop/src/main/resources/img/icon-256.png). The
     treasury keeps the colour it has on Sunbula's page. */
  --ink: #0e1a3d;
  --ink-soft: #414c6b;
  --ink-faint: #6b7592;
  --rule: #e1e2dc;
  --rule-2: #c8cad0;
  --mark: #f7d57a;
  --glow: rgba(246, 178, 30, .22);
  --gate: #2150d8;
  --students: #0d7a6b;
  --alerts: #b43a5e;
  --teachers: #b3590f;
  --main: var(--gate);
  --link: var(--gate);
}
.guide.theme-installments {
  /* The icon's teal (installment-system, installment-server/.../assets/icons/icon.svg). Collecting wears it too. */
  --ink: #0b2b29;
  --ink-soft: #3b5653;
  --ink-faint: #677f7c;
  --rule: #dfe4dd;
  --rule-2: #c5cfcb;
  --glow: rgba(245, 196, 94, .26);
  --plans: #2a5fb0;
  --collect: #096e66;
  --follow: #b3590f;
  --reports: #7d4bb0;
  --main: var(--collect);
  --link: var(--collect);
}
@media (prefers-color-scheme: dark) {
  .guide {
    --paper: #0a1411;
    --card: #101e19;
    --ink: #e7f0ea;
    --ink-soft: #abbfb5;
    --ink-faint: #7e958a;
    --rule: #20342c;
    --rule-2: #30483e;
    --mark: #7a5d14;
    --glow: rgba(245, 196, 94, .10);
    --chip-text: #08130f;
    --sale: #4fc79f;
    --stock: #6faeee;
    --acct: #ea9a52;
    --cash: #b996ea;
    --rep: #f0849f;
    --start: #f5c45e;
    --sunbula: #4fc79f;
    --center: #8eaaff;
    --installments: #ea9a52;
  }
  .guide.theme-home {
    --paper: #0a1117;
    --card: #111b23;
    --ink: #e5edf2;
    --ink-soft: #a7b6c2;
    --ink-faint: #7b8b98;
    --rule: #22323e;
    --rule-2: #31434f;
    --mark: #7a5d14;
    --glow: rgba(232, 176, 75, .09);
  }
  .guide.theme-center {
    --paper: #0a0f1c;
    --card: #111830;
    --ink: #e6ebf7;
    --ink-soft: #a9b3cf;
    --ink-faint: #7d88a8;
    --rule: #222b47;
    --rule-2: #313c5e;
    --mark: #7a5d14;
    --glow: rgba(246, 178, 30, .08);
    --gate: #8eaaff;
    --students: #4fc7b0;
    --alerts: #f0849f;
    --teachers: #ea9a52;
  }
  .guide.theme-installments {
    --paper: #091312;
    --card: #0f1e1c;
    --ink: #e5f0ee;
    --ink-soft: #a8bdba;
    --ink-faint: #7b928f;
    --rule: #1f3330;
    --rule-2: #2e4744;
    --mark: #7a5d14;
    --glow: rgba(245, 196, 94, .08);
    --plans: #7aa7ee;
    --collect: #4fc0b5;
    --follow: #ea9a52;
    --reports: #b996ea;
  }
}

/* The look sets its own spacing: nothing in it inherits a margin from the rules above. */
.guide :where(h1, h2, h3, p, ul, ol, figure, pre) { margin: 0; padding: 0; }
.guide [id] { scroll-margin-top: 80px; }
.guide a { color: var(--link); }
.guide svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.guide :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.guide .wrap { width: min(1240px, 100% - 32px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Which colour a thing carries. */
.c-start { --c: var(--start); }
.c-sale { --c: var(--sale); }
.c-stock { --c: var(--stock); }
.c-acct { --c: var(--acct); }
.c-cash { --c: var(--cash); }
.c-rep { --c: var(--rep); }
.c-sunbula { --c: var(--sunbula); }
.c-center { --c: var(--center); }
.c-installments { --c: var(--installments); }
.c-plans { --c: var(--plans); }
.c-collect { --c: var(--collect); }
.c-follow { --c: var(--follow); }
.c-reports { --c: var(--reports); }
.c-gate { --c: var(--gate); }
.c-students { --c: var(--students); }
.c-alerts { --c: var(--alerts); }
.c-teachers { --c: var(--teachers); }

/* The bar over the page. color-mix() is young: wherever it is used, the line before it is what an older browser shows. */
.bar {
  position: sticky; top: 0; z-index: 10;
  background: var(--paper);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1.5px solid var(--rule);
}
.bar-row { display: flex; align-items: center; gap: 24px; min-height: 62px; }
.guide .brand { color: var(--ink); font-size: 1.4rem; }
.guide .nav a { color: var(--ink-soft); font-size: .97rem; font-weight: 600; }
.guide .nav a:hover { color: var(--ink); }

.guide .btn { padding: 12px 24px; border-radius: 8px; border-width: 1.5px; font-size: 1.04rem; line-height: 1.4; width: auto; }
.guide .btn svg { flex: none; }
.guide .btn-small { padding: 7px 18px; font-size: .95rem; }
.guide .btn-big { padding: 14px 30px; font-size: 1.1rem; }
.guide .btn-main { background: var(--main); color: var(--main-text); box-shadow: 0 1px 0 rgba(11, 42, 34, .25); }
.guide .btn-c { background: var(--c); color: var(--chip-text); }
.guide .btn-line { background: var(--card); color: var(--ink); border-color: var(--rule-2); }
.guide .btn-line:hover { border-color: var(--ink); }

/* The masthead */
.mast { padding: 44px 0 28px; border-bottom: 2px solid var(--ink); margin-bottom: var(--sp-lg); }
.kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.kicker .no {
  font-size: .82rem; font-weight: 700; line-height: 1; color: var(--ink-faint);
  border: 1.5px solid var(--rule-2); border-radius: 4px; padding: 7px 10px;
}
.kicker .lbl { font-size: .98rem; font-weight: 700; color: var(--ink-soft); }
.guide h1 { font-weight: 700; font-size: clamp(2.2rem, 5.2vw, 4.1rem); line-height: 1.22; max-width: 1050px; }
.guide .hl { position: relative; white-space: nowrap; z-index: 0; }
.guide .hl::before {
  content: ""; position: absolute; inset-inline: -6px; bottom: .16em; height: .36em;
  background: var(--mark); z-index: -1; transform: rotate(-.6deg);
}
.sub { margin-top: 16px; font-size: clamp(1.08rem, 1.7vw, 1.32rem); color: var(--ink-soft); max-width: 920px; line-height: 1.75; }
.sub b { color: var(--ink); font-weight: 700; }

.promises { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 22px; }
.promises li {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px;
  border: 1.5px solid var(--rule-2); border-radius: 6px; background: var(--card);
  font-weight: 700; font-size: .96rem;
}
.promises svg { width: 19px; height: 19px; color: var(--main); }
.mast .cta { margin-top: 22px; }
.guide .fine { margin-top: 12px; color: var(--ink-faint); font-size: .92rem; }

.legend { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; }
.legend .lt { font-size: .86rem; font-weight: 700; color: var(--ink-faint); }
.key { display: flex; align-items: center; gap: 9px; font-size: .96rem; font-weight: 600; color: var(--ink-soft); }
.key i { width: 26px; height: 9px; border-radius: 2px; display: block; background: var(--c); }

/* The rows. A row is a <details>: its summary is what the place looks like on the right and what the program does for
   it on the left, and it opens on why. */
.stack { display: flex; flex-direction: column; gap: var(--sp); }
.row {
  background: var(--card);
  border: 1.5px solid var(--rule);
  border-inline-start: 6px solid var(--c);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .16s, box-shadow .16s;
}
.row:hover { border-color: color-mix(in srgb, var(--c) 32%, var(--rule)); border-inline-start-color: var(--c); box-shadow: 0 12px 28px -22px rgba(11, 42, 34, .55); }
.row[open] { border-color: color-mix(in srgb, var(--c) 42%, var(--rule)); border-inline-start-color: var(--c); box-shadow: 0 16px 34px -22px rgba(11, 42, 34, .6); }
.row > summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 84px minmax(0, 1fr) minmax(360px, 420px);
  align-items: start; gap: 0 34px;
  padding: 22px 22px 22px 26px;
}
.row > summary::-webkit-details-marker { display: none; }
.row > summary:hover { background: color-mix(in srgb, var(--c) 4%, transparent); }

.gutter { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 4px; }
.gnum { font-weight: 700; font-size: 3.4rem; line-height: .8; color: var(--c); }
.meter { display: flex; gap: 5px; align-items: flex-end; height: 19px; }
.meter i { width: 9px; border-radius: 2px; background: var(--rule-2); display: block; }
.meter i.on { background: var(--c); }
.meter i:nth-child(1) { height: 8px; }
.meter i:nth-child(2) { height: 12px; }
.meter i:nth-child(3) { height: 15px; }
.meter i:nth-child(4) { height: 19px; }
.tile { width: 58px; height: 58px; border-radius: 13px; }

.body { display: block; min-width: 0; }
.forklabel { display: block; font-size: .88rem; font-weight: 700; color: var(--c); margin-bottom: 4px; }
.tname { display: block; font-weight: 700; font-size: 1.75rem; line-height: 1.3; }
.shape { display: block; margin-top: 6px; font-size: 1.06rem; line-height: 1.7; color: var(--ink-soft); }
.shape b { color: var(--ink); font-weight: 700; }
.eg { margin-top: 8px; font-size: .95rem; display: flex; align-items: baseline; gap: 10px; }
.eg .egl { flex: none; font-size: .8rem; font-weight: 700; color: var(--ink-faint); }
.eg .egv { color: var(--ink-soft); font-weight: 600; }
.callout { display: block; margin-top: 8px; font-size: .98rem; color: var(--ink-soft); max-width: 700px; }
.callout u {
  text-decoration: none; background: linear-gradient(var(--mark), var(--mark)) right bottom / 100% .42em no-repeat;
  padding: 0 2px; font-weight: 700; color: var(--ink);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

.does {
  align-self: stretch; display: flex; align-items: flex-start; justify-content: space-between; gap: 22px;
  border-inline-start: 1.5px solid var(--rule);
  border-inline-start-color: color-mix(in srgb, var(--c) 24%, var(--rule));
  padding-inline-start: 30px;
}
.dstack { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  background: var(--c); color: var(--chip-text); border-radius: 6px; padding: 7px 15px;
  font-weight: 700; font-size: 1.16rem; line-height: 1.5;
}
.chip .free { font-size: .76rem; line-height: 1; color: var(--gold-text); background: var(--gold); border-radius: 999px; padding: 5px 10px; }
.chip .soon { font-size: .76rem; line-height: 1; color: var(--c); background: var(--card); border-radius: 999px; padding: 5px 10px; }
.dmeta { font-size: .92rem; font-weight: 600; color: var(--ink-soft); line-height: 1.6; }
.dmeta .dot { color: var(--ink-faint); margin: 0 5px; }
.alts { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; font-size: .9rem; }
.alts .al { font-size: .76rem; font-weight: 700; color: var(--ink-faint); }
.alts .ac { display: flex; align-items: center; gap: 7px; font-weight: 700; color: var(--ink-soft); }
.alts .ac i { width: 9px; height: 9px; border-radius: 2px; display: block; background: var(--c); }

.disc { flex: none; display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--c); margin-top: 2px; }
.disc .cv {
  width: 42px; height: 42px; border-radius: 50%; border: 1.8px solid var(--c);
  display: flex; align-items: center; justify-content: center; transition: transform .22s, background .16s;
}
.disc svg { width: 20px; height: 20px; stroke-width: 2.2; }
.row:hover .disc .cv { background: color-mix(in srgb, var(--c) 12%, var(--card)); }
.row[open] .disc .cv { transform: rotate(180deg); background: var(--c); color: var(--chip-text); }
.disc .wl { font-size: .8rem; font-weight: 700; min-width: 46px; text-align: center; line-height: 1.3; }
.disc .wl-close, .row[open] .disc .wl-open { display: none; }
.row[open] .disc .wl-close { display: block; }

.why { padding: 0 26px 24px; background: var(--card); background: color-mix(in srgb, var(--c) 4.5%, var(--card)); }
.why .inner {
  border-top: 1.5px dashed var(--rule-2);
  border-top-color: color-mix(in srgb, var(--c) 35%, var(--rule));
  padding-top: 16px; animation: reveal .22s cubic-bezier(.22, 1, .36, 1);
}
@keyframes reveal { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .why .inner { animation: none; } }
.whyhead { font-weight: 700; font-size: 1.14rem; color: var(--c); margin-bottom: 12px; }
.why ul { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 34px; }
.why li { position: relative; padding-inline-start: 21px; font-size: .98rem; line-height: 1.7; color: var(--ink-soft); }
.why li::before { content: ""; position: absolute; inset-inline-start: 0; top: .62em; width: 9px; height: 9px; border-radius: 2px; background: var(--c); }
.why li b { color: var(--ink); font-weight: 700; }
.why .cta { margin-top: 20px; align-items: center; }
.why .cta .note { color: var(--ink-faint); font-size: .92rem; }

/* The row a visitor starts from, set apart from the numbered ones under it. */
.row.fork { background: color-mix(in srgb, var(--c) 5%, var(--card)); }
.row.fork .why { background: color-mix(in srgb, var(--c) 8%, var(--card)); }

.split { display: flex; align-items: center; gap: 20px; margin: var(--sp-lg) 0 18px; }
.split .tx { font-size: .95rem; font-weight: 700; color: var(--ink-soft); }
.split .ln { flex: 1; border-top: 1.5px dashed var(--rule-2); }

/* The sections under the rows */
.field { margin-top: 56px; }
.field-head { display: flex; align-items: baseline; gap: 6px 16px; margin-bottom: 16px; flex-wrap: wrap; }
.field-head h2 { font-weight: 700; font-size: 1.55rem; line-height: 1.4; }
.field-head .fs { font-size: .98rem; color: var(--ink-faint); font-weight: 600; }
.field-lead { color: var(--ink-soft); max-width: 920px; margin-bottom: 18px; }

/* A sign in the place, and the row it points to. */
.field-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp); }
.fcard {
  background: var(--card); border: 1.5px solid var(--rule); border-inline-start: 5px solid var(--c);
  border-radius: 11px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px;
}
.fcard .sign { font-weight: 600; font-size: 1rem; line-height: 1.65; color: var(--ink); flex: 1; }
.fcard .res { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.05rem; color: var(--c); }
.fcard .res svg { width: 18px; height: 18px; stroke-width: 2.4; flex: none; }

/* Screenshots, each with the colour of its part of the program. */
.shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp); }
.shot {
  background: var(--card); border: 1.5px solid var(--rule); border-inline-start: 5px solid var(--c);
  border-radius: 11px; padding: 10px;
}
.shot img { border-radius: 6px; border: 1px solid var(--rule); }
.shot figcaption { display: flex; align-items: center; gap: 9px; padding: 10px 6px 2px; font-weight: 700; }
.shot figcaption i { width: 9px; height: 9px; border-radius: 2px; background: var(--c); display: block; }
.shot figcaption span { color: var(--ink-faint); font-weight: 600; font-size: .92rem; margin-inline-start: auto; }
.shot.wide { grid-column: 1 / -1; }

/* Steps: how to start, and how to buy. */
.gsteps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp); }
.gstep { background: var(--card); border: 1.5px solid var(--rule); border-top: 5px solid var(--ink); border-radius: 11px; padding: 18px 20px 20px; }
.gstep .gnum { display: block; font-size: 2.6rem; margin: 6px 0 14px; }
.gstep h3 { font-size: 1.16rem; line-height: 1.5; margin-bottom: 4px; }
.gstep p { color: var(--ink-soft); font-size: .98rem; }

.buy { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--sp); align-items: stretch; }
.buy .gsteps { grid-template-columns: 1fr; }
.buy .gstep {
  display: grid; grid-template-columns: 56px 1fr; column-gap: 8px;
  border-top: 1.5px solid var(--rule); border-inline-start: 5px solid var(--ink);
}
.buy .gstep .gnum { grid-row: span 2; margin: 8px 0 0; }
.pay {
  background: var(--card); border: 2px solid var(--ink); border-radius: 12px; padding: 26px 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px;
}
.pay .pl { color: var(--ink-faint); font-weight: 700; font-size: .9rem; }
.pay .pm { font-size: 2.1rem; font-weight: 700; line-height: 1.3; }
.pay .pm span { background: linear-gradient(var(--mark), var(--mark)) right bottom / 100% .38em no-repeat; padding: 0 6px; }
.pay .platin { color: var(--ink-faint); font-weight: 700; }
.pay p { color: var(--ink-soft); font-size: .95rem; }
.guide .pay .btn { margin: 12px 0 6px; justify-content: center; width: 100%; }

/* The Windows dialogs keep the rules above, and take this look's frame and numerals. */
.guide .win-steps { gap: var(--sp); }
.guide .win-step { border-width: 1.5px; border-radius: 11px; padding: 18px; }
.guide .win-step figcaption { align-items: baseline; font-weight: 700; line-height: 1.6; }
.win-step .gnum { font-size: 2rem; line-height: 1; flex: none; }
.guide .win-dialog { margin-top: auto; }
.guide .win-note { margin-top: 12px; color: var(--ink-faint); font-size: .95rem; }
.guide .code, .guide .hash {
  font-size: .88rem; background: var(--paper); border-width: 1.5px; border-radius: 6px;
  padding: 9px 12px; margin: 8px 0; color: var(--ink);
}

.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp); margin-top: var(--sp); }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp); }
.info { background: var(--card); border: 1.5px solid var(--rule); border-inline-start: 5px solid var(--ink); border-radius: 11px; padding: 20px 22px; }
.info h3 { font-size: 1.2rem; line-height: 1.5; margin-bottom: 8px; }
.info ul { list-style: none; display: grid; gap: 8px; }
.info li { position: relative; padding-inline-start: 21px; color: var(--ink-soft); font-size: .98rem; }
.info li::before { content: ""; position: absolute; inset-inline-start: 0; top: .62em; width: 9px; height: 9px; border-radius: 2px; background: var(--ink); }
.info p { color: var(--ink-soft); font-size: .98rem; }

/* Questions: the same row, without what the program does beside it. */
.q {
  background: var(--card); border: 1.5px solid var(--rule); border-inline-start: 5px solid var(--ink);
  border-radius: 11px;
}
.q[open] { border-color: var(--rule-2); border-inline-start-color: var(--ink); }
.q > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 20px; font-weight: 700; font-size: 1.06rem;
}
.q > summary::-webkit-details-marker { display: none; }
.q > summary svg { width: 20px; height: 20px; flex: none; color: var(--ink-faint); transition: transform .22s; stroke-width: 2.2; }
.q[open] > summary svg { transform: rotate(180deg); }
.q p { padding: 0 20px 16px; color: var(--ink-soft); max-width: 900px; }
.qs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp); align-items: start; }
.qs > div { display: flex; flex-direction: column; gap: var(--sp); }

/* The foot */
.gfoot {
  margin-top: 56px; padding: 26px 0 40px; border-top: 2px solid var(--ink);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px 24px;
}
.wm { font-weight: 700; font-size: 1.7rem; line-height: 1.3; }
.wm small { display: block; font-size: .98rem; color: var(--ink-soft); font-weight: 600; }
.stamp { width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; color: var(--ink-faint); font-size: .92rem; font-weight: 600; }

@media (max-width: 1080px) {
  .row > summary { grid-template-columns: 70px 1fr; gap: 14px 18px; }
  .does {
    grid-column: 1 / -1; border-inline-start: 0; padding-inline-start: 0; padding-top: 14px;
    border-top: 1.5px solid var(--rule);
    border-top-color: color-mix(in srgb, var(--c) 24%, var(--rule));
  }
  .why ul { grid-template-columns: 1fr; }
  .field-grid { grid-template-columns: 1fr 1fr; }
  .gsteps, .guide .win-steps, .three { grid-template-columns: 1fr; }
  .buy, .qs { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .bar-row { justify-content: space-between; }
  .mast { padding-top: 28px; }
  .guide .cta .btn { width: 100%; justify-content: center; }
  .row > summary { grid-template-columns: 1fr; padding: 18px 16px; gap: 12px; }
  .gutter { flex-direction: row; align-items: flex-end; gap: 14px; }
  .gutter .gnum { font-size: 2.8rem; }
  .tile { width: 48px; height: 48px; }
  .tname { font-size: 1.45rem; }
  .why { padding: 0 16px 20px; }
  .field-grid, .shots, .two { grid-template-columns: 1fr; }
  .field { margin-top: 44px; }
}
/* The highlighted words do not wrap, and on the narrowest phones the longest of them ("والباقي على البرنامج") are
   wider than the page at the headline's smallest size. There the headline shrinks with the window until they fit,
   and a big button lets its words fall onto a second line. */
@media (max-width: 370px) {
  .guide h1 { font-size: clamp(1.5rem, calc((100vw - 44px) * .112), 2.2rem); }
  .guide .btn-big { padding-inline: 16px; flex-wrap: wrap; }
}

/* The receipt look (2026-10-17): the colour of the icon at the top, a receipt coming out of a printer slot beside
   the headline, and quiet ink on a pale page under it. The receipt is the one bold thing on the page; everything
   under it is type and rules. A page wears it through the class "till" on <body>, beside its theme class. Every class
   it adds is its own, and what it restyles of a shared one (.brand, .nav, .btn, .cta, .fine, the Windows dialogs,
   code) is scoped by .till, so the other two looks are untouched. */
.till {
  --page: #eef2ef;
  --card: #ffffff;
  --ink: #1e2b26;
  --ink-soft: #4f5d57;
  --ink-faint: #5d6963;
  --rule: #cdd6d1;
  --rule-2: #b3beb8;
  --accent: #136650;         /* links, meters and step numbers on the page */
  --field: #0e4b3b;          /* the top and the foot: the icon's deep green */
  --field-deep: #082f25;     /* the printer's slot */
  --on-field: #d6e8e0;
  --on-field-soft: #a9c6ba;
  --on-field-line: rgba(214, 232, 224, .45);
  --wheat: #f0b955;          /* the main button: the grain */
  --wheat-hover: #f5c873;
  --wheat-ink: #3b2706;
  --slip: #fcfcfa;           /* thermal paper */
  --slip-ink: #1e2b26;
  --slip-soft: #5b6661;
  --slip-rule: #9aa39f;
  /* Each program on the home page: on the page, and on the field. */
  --sunbula: #0f6a52;
  --center: #2150d8;
  --installments: #9f4f0d;
  --on-sunbula: #4fc79f;
  --on-center: #8eaaff;
  --on-installments: #ea9a52;
  /* What the shared rules above call these. */
  --bg: var(--page);
  --surface: var(--card);
  --text: var(--ink);
  --muted: var(--ink-soft);
  --line: var(--rule);
  --radius: 10px;
  --accent-glow: rgba(240, 185, 85, .25);
  background: var(--page);
  color: var(--ink);
  font-family: "HS Sans Arabic", Tahoma, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.75;
}
.till.theme-home {
  /* The logo's navy and gold. */
  --page: #eef1f4;
  --ink: #1d2733;
  --ink-soft: #4d5967;
  --ink-faint: #5c6774;
  --rule: #cfd6de;
  --rule-2: #b5bfca;
  --accent: #2b5d86;
  --field: #18263a;
  --field-deep: #0d1622;
  --on-field: #d3dce7;
  --on-field-soft: #a2b2c5;
  --on-field-line: rgba(211, 220, 231, .45);
  --wheat: #e8b04b;
  --wheat-hover: #efc26f;
  --wheat-ink: #2e1f04;
  --slip-ink: #1d2733;
  --slip-soft: #586473;
  --slip-rule: #a2a9b0;
  --accent-glow: rgba(232, 176, 75, .25);
}
@media (prefers-color-scheme: dark) {
  .till {
    --page: #0b1512;
    --card: #111e19;
    --ink: #e4eee9;
    --ink-soft: #a9bbb3;
    --ink-faint: #849990;
    --rule: #24372f;
    --rule-2: #355046;
    --accent: #5fd0a8;
    --slip: #eceee9;           /* paper is still paper, a little dimmer */
    --sunbula: #4fc79f;
    --center: #8eaaff;
    --installments: #ea9a52;
    --accent-glow: rgba(240, 185, 85, .14);
  }
  .till.theme-home {
    --page: #0b1118;
    --card: #111a24;
    --ink: #e5edf2;
    --ink-soft: #a7b6c2;
    --ink-faint: #8090a0;
    --rule: #233240;
    --rule-2: #344656;
    --accent: #8ab8e0;
    --accent-glow: rgba(232, 176, 75, .14);
  }
}

/* The look sets its own spacing. */
.till :where(h1, h2, h3, p, ul, ol, figure, pre) { margin: 0; padding: 0; }
.till :where(h1, h2, h3) { font-family: "El Messiri", Tahoma, sans-serif; font-weight: 700; }
.till [id] { scroll-margin-top: 24px; }
.till a { color: var(--accent); text-underline-offset: 4px; }
.till svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.till :focus-visible { outline: 3px solid var(--wheat); outline-offset: 3px; }
.till b { font-weight: 600; color: var(--ink); }

/* Buttons */
.till .btn { padding: 12px 24px; border-radius: 10px; border-width: 1.5px; font-weight: 600; font-size: 1.02rem; line-height: 1.4; width: auto; }
.till .btn svg { width: 20px; height: 20px; flex: none; }
.till .btn-big { padding: 14px 28px; font-size: 1.08rem; }
.till .btn-small { padding: 8px 18px; font-size: .95rem; }
.till .btn-wheat { background: var(--wheat); color: var(--wheat-ink); }
.till .btn-wheat:hover { background: var(--wheat-hover); }
.till .btn-ghost { border-color: var(--on-field-line); color: #fff; }
.till .btn-ghost:hover { border-color: #fff; }
.till .btn-line { border-color: var(--rule-2); color: var(--ink); background: transparent; }
.till .btn-line:hover { border-color: var(--ink); }

/* The top: the bar and the headline on the icon's colour. */
.till-top { background: var(--field); color: var(--on-field); }
.topbar { display: flex; align-items: center; gap: 28px; min-height: 76px; }
.till .brand { font-family: "El Messiri", Tahoma, sans-serif; font-size: 1.45rem; color: #fff; }
.till .nav { gap: 24px; }
.till .nav a { color: var(--on-field); font-size: .97rem; }
.till .nav a:hover { color: #fff; }

.lede { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 64px; align-items: start; padding-top: 48px; }
.lede-text { padding-bottom: 96px; }
.lede h1 { color: #fff; font-size: clamp(2.3rem, 5vw, 4rem); line-height: 1.22; max-width: 13ch; }
.lede h1 .nw { white-space: nowrap; }
.lede-sub { margin-top: 22px; font-size: 1.15rem; max-width: 52ch; }
.lede .cta { margin-top: 32px; }
.till .lede .fine { margin-top: 16px; color: var(--on-field-soft); font-size: .92rem; max-width: 62ch; }

/* The printer: a slot, and the receipt coming out of it. The receipt hangs below the colour into the page (the
   feed's negative margin), and on load it prints once - unless the visitor asked for less motion. */
.printer { position: relative; }
.slot {
  position: relative; z-index: 2; height: 18px; margin: 0 -14px; border-radius: 9px;
  background: var(--field-deep); box-shadow: inset 0 3px 6px rgba(0, 0, 0, .45);
}
/* The feed reaches no further sideways than the page's 16px gutter, at every width; the shadow needs its room below. */
.feed { position: relative; z-index: 1; overflow: hidden; margin: -9px -16px -190px; padding: 0 22px 60px; }
.slip {
  position: relative; padding: 34px 30px 46px;
  background: var(--slip); color: var(--slip-ink); font-size: .95rem; line-height: 1.65;
  box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .55);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 24px 100% repeat-x;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 24px 100% repeat-x;
  animation: print 1.4s cubic-bezier(.3, .7, .2, 1) .3s both;
}
@keyframes print { from { transform: translateY(-101%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .slip { animation: none; } }
.slip-head { text-align: center; }
.slip-head img { width: 46px; height: 46px; margin: 0 auto 6px; border-radius: 10px; filter: grayscale(1) contrast(1.2); }
.slip-name { display: block; font-family: "El Messiri", Tahoma, sans-serif; font-weight: 700; font-size: 1.55rem; line-height: 1.2; }
.slip-soft { color: var(--slip-soft); font-size: .88rem; }
.cut { border: 0; border-top: 1.5px dashed var(--slip-rule); margin: 14px 0; }
.slip-row { display: flex; justify-content: space-between; gap: 12px; }
.slip-row > :last-child { font-weight: 600; font-variant-numeric: tabular-nums; }
.slip-lines { list-style: none; }
.slip-lines li { display: flex; gap: 8px; align-items: baseline; }
.slip-lines li::after { content: ""; order: 1; flex: 1; border-bottom: 1.5px dotted var(--slip-rule); transform: translateY(-5px); }
.slip-lines li svg { order: 2; width: 15px; height: 15px; stroke-width: 2.6; flex: none; align-self: center; }
.slip-total { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
.slip-total b { font-family: "El Messiri", Tahoma, sans-serif; font-size: 1.7rem; color: inherit; }
.slip-foot { text-align: center; color: var(--slip-soft); font-size: .88rem; }
.bars {
  height: 46px; margin: 14px 18px 0;
  background: repeating-linear-gradient(90deg, var(--slip-ink) 0 2px, transparent 2px 4px, var(--slip-ink) 4px 7px,
    transparent 7px 9px, var(--slip-ink) 9px 10px, transparent 10px 13px, var(--slip-ink) 13px 16px, transparent 16px 17px);
}

/* The sections under the top. The first one leaves room on the left for the hanging receipt. */
.part { padding-top: 72px; }
.part-first { padding-top: 64px; }
.part-first .part-head { margin-inline-end: 470px; min-height: 150px; }
.part-head { margin-bottom: 28px; max-width: 760px; }
.part-head h2 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); line-height: 1.35; }
.part-lead { margin-top: 8px; color: var(--ink-soft); max-width: 58ch; }

/* Which shop is yours: rows that open on why, the simplest first. The meter is how much of the program a row uses. */
.fits { border-top: 2px solid var(--ink); }
.fit { border-bottom: 1px solid var(--rule); }
.fit > summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(260px, 340px) 40px; gap: 0 28px; align-items: start;
  padding: 24px 0;
}
.fit > summary::-webkit-details-marker { display: none; }
.fit-meter { display: flex; gap: 4px; padding-top: 14px; }
.fit-meter i { width: 14px; height: 6px; border-radius: 2px; background: var(--rule-2); }
.fit-meter i.on { background: var(--accent); }
.fit-main { min-width: 0; }
.fit-name { display: block; font-family: "El Messiri", Tahoma, sans-serif; font-weight: 700; font-size: 1.5rem; line-height: 1.35; }
.fit-desc { display: block; margin-top: 4px; color: var(--ink-soft); }
.fit-eg { display: block; margin-top: 6px; color: var(--ink-faint); font-size: .93rem; }
.fit-does { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
.fit-chip { font-weight: 600; font-size: 1.08rem; color: var(--ink); }
.fit-meta { color: var(--ink-soft); font-size: .93rem; }
.fit-toggle {
  width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--rule-2); color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center; transition: transform .2s, border-color .15s;
}
.fit-toggle svg { width: 18px; height: 18px; }
.fit > summary:hover .fit-toggle { border-color: var(--ink); color: var(--ink); }
.fit[open] .fit-toggle { transform: rotate(180deg); }
.fit-why { padding: 0 100px 28px 68px; }
.fit-whyhead { font-weight: 600; color: var(--accent); margin-bottom: 8px; }
.fit-why ul { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 32px; }
.fit-why li { color: var(--ink-soft); font-size: .97rem; }

/* What leaving the notebook changes: six points in two columns. */
.swap { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; border-top: 2px solid var(--ink); }
.swap li { padding: 16px 0; border-bottom: 1px solid var(--rule); color: var(--ink-soft); }
.swap li b { display: block; font-size: 1.06rem; }
.part .cta { margin-top: 26px; align-items: center; }
.part .cta .note { color: var(--ink-faint); font-size: .93rem; }

/* A sign in the place, and what answers it, joined by the receipt's dotted leader. */
.tally { list-style: none; max-width: 900px; border-top: 2px solid var(--ink); }
.tally li { display: flex; align-items: baseline; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.tally li::after { content: ""; order: 1; flex: 1; min-width: 24px; border-bottom: 1.5px dotted var(--rule-2); }
.tally .to { order: 2; flex: none; font-weight: 600; color: var(--accent); }
.tally .to.c-sunbula, .tally .to.c-center, .tally .to.c-installments { color: var(--c); }

/* Screenshots */
.frames { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; }
.frame img { border-radius: 8px; border: 1px solid var(--rule); box-shadow: 0 18px 30px -24px rgba(0, 0, 0, .5); }
.frame figcaption { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; font-weight: 600; }
.frame figcaption span { color: var(--ink-faint); font-weight: 400; }
.frame.wide { grid-column: 1 / -1; }

/* Steps: these are a sequence, so they are numbered. */
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; border-top: 2px solid var(--ink); }
.step { padding-top: 18px; }
.step-no { display: block; font-family: "El Messiri", Tahoma, sans-serif; font-weight: 700; font-size: 2.4rem; line-height: 1; color: var(--accent); margin-bottom: 12px; }
.step h3 { font-size: 1.18rem; line-height: 1.5; margin-bottom: 4px; }
.step p { color: var(--ink-soft); font-size: .98rem; }

.notes { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 48px; margin-top: 40px; }
.note h3 { font-size: 1.15rem; margin-bottom: 8px; }
.note ul { list-style: none; }
.note li { padding: 6px 0; border-bottom: 1px solid var(--rule); color: var(--ink-soft); font-size: .98rem; }
.note p { color: var(--ink-soft); font-size: .98rem; margin-top: 6px; }

/* How to buy: the steps, and the payment on a small receipt of its own. */
.buy-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.buy-grid .steps { grid-template-columns: 1fr; gap: 0; }
.buy-grid .step { display: grid; grid-template-columns: 56px 1fr; column-gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.buy-grid .step-no { grid-row: span 2; margin: 0; }
.payslip {
  background: var(--slip); color: var(--slip-ink); padding: 28px 26px 44px; text-align: center;
  box-shadow: 0 22px 36px -24px rgba(0, 0, 0, .55);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 24px 100% repeat-x;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 24px 100% repeat-x;
}
.pay-way { display: block; font-family: "El Messiri", Tahoma, sans-serif; font-weight: 700; font-size: 2rem; line-height: 1.3; }
.payslip p { color: var(--slip-soft); font-size: .95rem; }
.till .payslip .btn { width: 100%; justify-content: center; margin: 18px 0 10px; }

/* The Windows dialogs keep the rules above; here they take this look's frame and numbers. */
.till .win-steps { gap: 24px; }
.till .win-step { padding: 18px; }
.till .win-step figcaption { align-items: baseline; line-height: 1.6; }
.till .win-step .step-no { font-size: 1.9rem; margin: 0; flex: none; }
.till .win-dialog { margin-top: auto; }
.till .win-note { color: var(--ink-faint); font-size: .95rem; }
.till .code, .till .hash { border-radius: 6px; color: var(--ink); padding: 9px 12px; margin: 8px 0; }

/* Questions */
.asks { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; align-items: start; }
.asks > div { border-top: 2px solid var(--ink); }
.ask { border-bottom: 1px solid var(--rule); }
.ask > summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px 0; font-weight: 600; font-size: 1.05rem;
}
.ask > summary::-webkit-details-marker { display: none; }
.ask > summary svg { width: 18px; height: 18px; flex: none; color: var(--ink-faint); transition: transform .2s; }
.ask[open] > summary svg { transform: rotate(180deg); }
.ask p { padding-bottom: 18px; color: var(--ink-soft); }

/* The foot, back on the icon's colour. */
.till-foot { margin-top: 88px; background: var(--field); color: var(--on-field); padding: 48px 0 36px; }
.till-foot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 28px; }
.foot-line { font-family: "El Messiri", Tahoma, sans-serif; font-weight: 700; font-size: 1.8rem; line-height: 1.3; color: #fff; }
.foot-line small { display: block; font-family: "HS Sans Arabic", Tahoma, sans-serif; font-weight: 400; font-size: 1rem; color: var(--on-field-soft); }
.till-foot .stamp { width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; padding-top: 22px; border-top: 1px solid var(--on-field-line); color: var(--on-field-soft); font-size: .92rem; }
.till-foot a { color: #fff; }
/* The channel and the page, each with its mark drawn here: the CSP refuses an image from another site. The marks are
   filled shapes, so they undo the look's outlined icons. */
.social { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.social a { display: inline-flex; align-items: center; gap: 6px; }
.till .social svg { width: 20px; height: 20px; flex: none; fill: currentColor; stroke: none; }

/* The home page: on the counter, the paper each trade already knows, and under it the program behind that paper. */
.lede-home { display: block; padding-top: 52px; }
.lede-home h1 { max-width: 18ch; }
.lede-home .lede-sub { max-width: 60ch; }
.counter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; align-items: start; padding: 56px 0 72px; }
.ware-paper {
  /* The programs keep their light colours on paper, in the dark too. */
  --center: #2150d8; --installments: #b3590f;
  background: var(--slip); color: var(--slip-ink); font-size: .92rem; line-height: 1.65;
  box-shadow: 0 26px 40px -22px rgba(0, 0, 0, .7);
}
.ware-paper .cut { margin: 12px 0; }
.ware-slip {
  padding: 26px 24px 36px; text-align: center;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 22px 100% repeat-x;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 22px 100% repeat-x;
}
.ware-slip .slip-row { text-align: start; }
.ware-slip .bars { height: 36px; margin: 12px 12px 0; }
.idcard { border-radius: 14px; overflow: hidden; margin-top: 36px; transform: rotate(-1.5deg); }
.idcard-top { display: flex; align-items: center; gap: 10px; padding: 14px 20px; background: var(--center); color: #fff; }
.idcard-top img { width: 34px; height: 34px; border-radius: 8px; background: #fff; }
.idcard-top .slip-name { font-size: 1.12rem; }
.idcard-body { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 16px 20px 0; }
.idcard-body .slip-name { font-size: 1.1rem; }
.idcard-photo { width: 64px; height: 76px; border-radius: 8px; background: #dfe5f3; color: #9eb0d8; display: flex; align-items: center; justify-content: center; }
.idcard-photo svg { width: 36px; height: 36px; fill: currentColor; stroke: none; }
.idcard .bars { height: 32px; margin: 14px 20px 18px; }
.plancard { border-top: 8px solid var(--installments); padding: 22px 22px 24px; margin-top: 12px; transform: rotate(1deg); }
.months { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 12px; }
.months li { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: 1.5px solid #c7ccd2; border-radius: 4px; color: var(--slip-soft); font-size: .74rem; position: relative; }
.months .paid { border-color: var(--installments); color: var(--installments); font-weight: 600; }
.months .paid::after { content: ""; position: absolute; inset: 3px; border: 2px solid var(--installments); border-radius: 50%; opacity: .55; transform: rotate(-12deg); }
.months .due { background: #fbe9d9; border-color: var(--installments); color: var(--installments); font-weight: 600; }

.who { margin-top: 28px; }
.who h2 { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 1.5rem; line-height: 1.3; }
.who h2 i { width: 12px; height: 12px; border-radius: 3px; background: var(--k); flex: none; }
.who-for { margin-top: 2px; color: var(--on-field-soft); font-size: .93rem; }
.who-shape { margin-top: 10px; font-size: .97rem; }
.till .who b { color: #fff; }
.who ul { list-style: none; margin-top: 10px; }
.who li { padding: 6px 0; border-top: 1px solid rgba(211, 220, 231, .16); font-size: .93rem; }
.who-state { margin-top: 12px; color: var(--on-field-soft); font-size: .9rem; }
.who .cta { margin-top: 14px; gap: 10px; }
.who-sunbula { --k: var(--on-sunbula); }
.who-center { --k: var(--on-center); }
.who-installments { --k: var(--on-installments); }

.reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; border-top: 2px solid var(--ink); }
.reasons > div { padding-top: 18px; }
.reasons h3 { font-size: 1.2rem; margin-bottom: 6px; }
.reasons p { color: var(--ink-soft); font-size: .98rem; }

/* The centre's page and Installments' (2026-10-17), in the colours of their icons: the centre's navy and its tassel's
   gold, and Installments' teal. A theme sets every colour the page reads, light and dark, because it outweighs the
   dark block of .till above. */
.till.theme-center {
  --page: #eef1f7;
  --ink: #141d3a;
  --ink-soft: #48506b;
  --ink-faint: #5a6380;
  --rule: #cfd5e3;
  --rule-2: #b4bcd0;
  --accent: #2150d8;
  --field: #142456;
  --field-deep: #0a1433;
  --on-field: #d5def3;
  --on-field-soft: #a6b4d6;
  --on-field-line: rgba(213, 222, 243, .45);
  --wheat: #f2b632;
  --wheat-hover: #f6c75c;
  --wheat-ink: #2f2003;
  --slip-ink: #141d3a;
  --slip-soft: #565f7a;
  --slip-rule: #a3a9b8;
  --accent-glow: rgba(242, 182, 50, .25);
}
.till.theme-installments {
  --page: #edf3f2;
  --ink: #0f2a28;
  --ink-soft: #48605d;
  --ink-faint: #586f6c;
  --rule: #cad8d5;
  --rule-2: #afc2bf;
  --accent: #096e66;
  --field: #0c4440;
  --field-deep: #062a27;
  --on-field: #d3ebe7;
  --on-field-soft: #a3c9c3;
  --on-field-line: rgba(211, 235, 231, .45);
  --slip-ink: #0f2a28;
  --slip-soft: #566b68;
  --slip-rule: #9eaba9;
}
@media (prefers-color-scheme: dark) {
  .till.theme-center {
    --page: #0a0f1c;
    --card: #111830;
    --ink: #e6ebf7;
    --ink-soft: #a9b3cf;
    --ink-faint: #8590b0;
    --rule: #222b47;
    --rule-2: #313c5e;
    --accent: #8eaaff;
    --accent-glow: rgba(242, 182, 50, .14);
  }
  .till.theme-installments {
    --page: #091312;
    --card: #0f1e1c;
    --ink: #e5f0ee;
    --ink-soft: #a8bdba;
    --ink-faint: #82a09c;
    --rule: #1f3330;
    --rule-2: #2e4744;
    --accent: #4fc0b5;
  }
}

/* The centre's paper is the student's card, printed by the program, coming out of the slot as the receipt does on
   Sunbula's page. Its colours stay the light ones on paper, in the dark too. */
.slip-card {
  --center: #2150d8;
  padding: 0; border-radius: 0 0 14px 14px; overflow: hidden;
  -webkit-mask: none; mask: none;
}
/* The card is shorter than the headline beside it: it sits at the bottom of the colour, so it still hangs into the
   page. */
.theme-center .lede > .printer { align-self: end; }
.slip-card .idcard-body { padding-top: 18px; }
.slip-card .slip-rows { padding: 12px 20px 0; }
.slip-card .bars { height: 40px; margin: 16px 20px 22px; }
.slip-card .gate { display: flex; align-items: center; gap: 8px; margin: 14px 20px 0; padding: 8px 12px; border-radius: 8px; background: #e6f4ee; color: #0b5a40; font-weight: 600; font-size: .9rem; }
.slip-card .gate svg { width: 18px; height: 18px; stroke-width: 2.6; flex: none; }

/* Installments' paper is the receipt a payment prints: the company's logo, the instalment, and the plan's months
   stamped as they are paid, in the page's teal. */
.slip-plan { --installments: #096e66; }
.slip-logo {
  width: 52px; height: 52px; margin: 0 auto 8px; border-radius: 50%; border: 1.5px dashed var(--slip-rule);
  display: flex; align-items: center; justify-content: center; color: var(--slip-soft); font-size: .72rem;
}
.slip-plan .months { margin-top: 10px; }
.slip-plan .months .due { background: #dff1ee; }

/* A row in a day, or in a sale: its step number on the side, and when it happens above its name. */
.fit-no { font-family: "El Messiri", Tahoma, sans-serif; font-weight: 700; font-size: 2.4rem; line-height: 1; color: var(--accent); padding-top: 6px; }
.fit-when { display: block; color: var(--accent); font-weight: 600; font-size: .93rem; }

@media (max-width: 1080px) {
  .lede { grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; }
  .part-first .part-head { margin-inline-end: 400px; }
  .fit > summary { grid-template-columns: 60px minmax(0, 1fr) 40px; gap: 12px 20px; }
  .fit-does { grid-column: 2; grid-row: 2; }
  .fit-toggle { grid-column: 3; grid-row: 1; }
  .fit-why { padding: 0 80px 24px 60px; }
  .fit-why ul { grid-template-columns: 1fr; }
  .counter { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; gap: 64px; }
  .idcard, .plancard { margin-top: 0; }
}
@media (max-width: 860px) {
  .till .nav { display: none; }
  .topbar { justify-content: space-between; }
  .lede { grid-template-columns: 1fr; gap: 0; padding-top: 24px; }
  .lede-text { padding-bottom: 40px; }
  .printer { width: 100%; max-width: 380px; margin-inline: auto; }
  .feed { margin-bottom: -130px; }
  .part-first { padding-top: 150px; }
  .part-first .part-head { margin-inline-end: 0; min-height: 0; }
  .frames, .notes, .asks, .swap, .reasons, .buy-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 0; }
  .steps .step { border-bottom: 1px solid var(--rule); padding-bottom: 18px; }
  .asks > div + div { border-top: 0; }
  .till .win-steps { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .till .cta .btn { width: 100%; justify-content: center; }
  .till .topbar .btn { width: auto; }
  .fit > summary { grid-template-columns: minmax(0, 1fr) 40px; padding: 20px 0; }
  .fit-meter { grid-column: 1; grid-row: 1; padding-top: 0; }
  .fit-main { grid-column: 1; grid-row: 2; }
  .fit-does { grid-column: 1; grid-row: 3; }
  .fit-toggle { grid-column: 2; grid-row: 1 / span 2; }
  .fit-why { padding: 0 0 22px; }
  .tally li { flex-wrap: wrap; gap: 2px 12px; }
  .tally li::after { display: none; }
  .till-foot { margin-top: 64px; }
}
@media (max-width: 370px) {
  .till .brand { font-size: 1.2rem; white-space: nowrap; }
  .lede h1 { font-size: clamp(1.7rem, calc((100vw - 32px) * .12), 2.3rem); }
  .till .btn-big { padding-inline: 16px; flex-wrap: wrap; }
  .slip { padding-inline: 20px; }
}
@media (max-width: 720px) {
  .fit-no { grid-column: 1; grid-row: 1; padding-top: 0; font-size: 2rem; }
}