/* ===== «عن البرنامج» — the product deck =====
 *
 * A page of a ledger, nine times over. The visual world is gl.css's: this file adds no
 * colours of its own beyond the parent company's mark on the closing slide, and aliases the
 * --gl-* tokens once at the top the way body.gl-login-page does.
 *
 * Logical properties only, everywhere including inside media queries. This stylesheet has no
 * `body.gl-rtl-shell` to hang an RTL correction on -- the deck is its own shell, like the
 * login page -- so `inset-inline-start` / `padding-inline` / `text-align: start` are what
 * make it read correctly in both languages, and tests/i18n/test_css_has_no_direction_leaks.py
 * fails the build if a physical side gets in.
 */

body.gl-about-page {
  /* The sibling company's own mark, sampled from its logo file. The one colour on this page
     that is not the product's, and it appears only inside the two company tiles. */
  --about-company-blue: #231eff;
  --about-paper: var(--gl-bg);
  --about-leaf: var(--gl-surface);
  --about-leaf-muted: var(--gl-surface-muted);
  --about-border: var(--gl-border);
  --about-border-strong: var(--gl-border-strong);
  --about-ink: var(--gl-text);
  --about-muted: var(--gl-muted);
  --about-accent: var(--gl-primary);
  --about-accent-dark: var(--gl-primary-dark);
  --about-accent-soft: var(--gl-primary-soft);
  --about-panel: var(--gl-sidebar-bg);
  --about-panel-deep: var(--gl-sidebar-panel);
  --about-panel-soft: var(--gl-sidebar-hover);

  --about-rail: 56px;
  --about-margin-rule: clamp(0.9rem, 2.4vw, 2rem);

  /* The most-used easing across the eight premium sites in _playbook/3-animation, and the
     only one there that is a design decision rather than a framework default. */
  --about-ease: cubic-bezier(0.65, 0.05, 0.36, 1);
  --about-dur-micro: 150ms;
  --about-dur-base: 300ms;
  --about-dur-slow: 500ms;

  margin: 0;
  block-size: 100vh;
  block-size: 100dvh;
  overflow: hidden;
  background: var(--about-paper);
  color: var(--about-ink);
  font-family: "Cairo", "Inter", "Segoe UI", sans-serif;
  font-size: 0.9rem;
  line-height: 1.6;
  /* AdminLTE ships `body { text-align: left }` and this page never loads the app shell that
     corrects it, so every block would sit against the wrong edge in Arabic. */
  text-align: start;

  display: grid;
  grid-template-rows: var(--about-rail) minmax(0, 1fr);
  grid-template-areas:
    "rail"
    "deck";
}

/* ---------- the rail ---------- */

.gl-about-rail {
  grid-area: rail;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-inline: clamp(1rem, 3vw, 2.25rem);
  border-block-end: 1px solid var(--about-border);
  background: var(--about-leaf);
}

.gl-about-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--about-ink);
  text-decoration: none;
}

.gl-about-brand:hover {
  color: var(--about-accent-dark);
  text-decoration: none;
}

.gl-about-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 32px;
  block-size: 32px;
  border-radius: var(--gl-radius-sm);
  background: var(--about-panel);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.gl-about-mark span {
  color: #9fd2cb;
}

.gl-about-brand-name {
  font-size: 0.92rem;
  font-weight: 800;
}

.gl-about-progress {
  margin: 0;
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  color: var(--about-muted);
  font-size: 0.78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.gl-about-progress-now {
  color: var(--about-accent);
  font-size: 0.95rem;
  font-weight: 800;
}

.gl-about-progress-sep {
  opacity: 0.5;
}

.gl-about-exit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0.34rem 0.8rem;
  border: 1px solid var(--about-border);
  border-radius: var(--gl-radius-sm);
  color: var(--about-muted);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  transition: color var(--about-dur-micro) var(--about-ease),
    background var(--about-dur-micro) var(--about-ease),
    border-color var(--about-dur-micro) var(--about-ease);
}

.gl-about-exit:hover,
.gl-about-exit:focus-visible {
  border-color: var(--about-accent);
  background: var(--about-accent-soft);
  color: var(--about-accent-dark);
  text-decoration: none;
}

/* Font Awesome does not mirror its arrows, and this one points backwards -- correct as
   drawn in Arabic, wrong in English, which is the direction that needs the flip. */
[dir="ltr"] .gl-about-exit > i {
  transform: scaleX(-1);
}

/* ---------- the fore-edge: nine page edges, the current one named ---------- */

.gl-about-ticks {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: auto;
  min-inline-size: 0;
}

.gl-about-tab {
  display: flex;
  align-items: center;
  block-size: 26px;
  padding: 0 3px;
  color: var(--about-muted);
  text-decoration: none;
}

/* The page edge itself. A hairline block rather than a dot, because what you see on the
   side of a closed book is the edge of a sheet. */
.gl-about-tab::before {
  content: "";
  inline-size: 14px;
  block-size: 2px;
  background: var(--about-border-strong);
  transition: background var(--about-dur-micro) var(--about-ease);
}

.gl-about-tab:hover::before,
.gl-about-tab:focus-visible::before {
  background: var(--about-muted);
}

.gl-about-tab.is-current::before {
  background: var(--about-accent);
}

/* Only the edge you are on carries its name -- the tab sticking out of the book. */
.gl-about-tab-name {
  max-inline-size: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.76rem;
  font-weight: 700;
}

.gl-about-tab.is-current .gl-about-tab-name {
  max-inline-size: 16ch;
  margin-inline-start: 7px;
  color: var(--about-accent-dark);
  text-overflow: ellipsis;
}

.gl-about-tab:focus-visible {
  outline: 2px solid var(--about-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---------- the deck ---------- */

.gl-about-deck {
  grid-area: deck;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.gl-about-deck::-webkit-scrollbar {
  display: none;
}

.gl-about-deck:focus {
  outline: none;
}

.gl-about-slide {
  flex: 0 0 100%;
  inline-size: 100%;
  block-size: 100%;
  overflow-y: auto;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: flex;
  /* `align-items: center` is what a centred leaf wants and is also the classic way to lose
     the top of one: a flex item taller than its container overflows in *both* directions,
     and the overflow above the start edge is unreachable by scrolling. Auto margins centre
     the same way while collapsing to zero the moment the leaf stops fitting, so a long page
     on a short window scrolls from its first line instead of starting halfway down it. */
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1rem, 2.6vw, 2.25rem);
}

/* The leaf. One page-sized surface per slide rather than a grid of cards -- the page is the
   container, and the ruled margin down its reading edge is what a ledger page has. */
.gl-about-page-inner {
  position: relative;
  inline-size: min(100%, 60rem);
  margin-block: auto;
  padding: clamp(1.35rem, 3.2vw, 2.6rem);
  padding-inline-start: calc(var(--about-margin-rule) + clamp(1.35rem, 3.2vw, 2.6rem));
  border: 1px solid var(--about-border);
  border-radius: var(--gl-radius);
  background: var(--about-leaf);
  box-shadow: var(--gl-shadow);
}

.gl-about-page-inner::before {
  content: "";
  position: absolute;
  inset-block: clamp(1rem, 2.4vw, 1.8rem);
  inset-inline-start: var(--about-margin-rule);
  inline-size: 1px;
  background: var(--about-border-strong);
  opacity: 0.75;
}

/* ---------- type ---------- */

.gl-about-title {
  margin: 0 0 0.35rem;
  font-size: clamp(1.32rem, 2.6vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.012em;
  line-height: 1.28;
}

.gl-about-lead {
  margin: 0 0 1.35rem;
  max-inline-size: 62ch;
  color: var(--about-muted);
  font-size: 0.94rem;
}

.gl-about-page-inner p {
  max-inline-size: 62ch;
}

/* ---------- the two-column page: a claim set opposite its proof ---------- */

.gl-about-ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.6vw, 2.1rem);
  margin-block: 1.1rem 1.5rem;
}

.gl-about-side-credit {
  padding-inline-start: clamp(1rem, 2.6vw, 2.1rem);
  border-inline-start: 1px solid var(--about-border);
}

.gl-about-side-head {
  margin: 0 0 0.4rem;
  color: var(--about-accent);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.gl-about-side p {
  margin: 0;
  font-size: 0.9rem;
}

/* ---------- the double underline: "this total is final" ---------- */

.gl-about-rule {
  block-size: 4px;
  margin-block-start: 1.5rem;
  border-block-start: 1px solid var(--about-border-strong);
  border-block-end: 1px solid var(--about-border-strong);
}

.gl-about-rule-accent {
  border-block-start-color: var(--about-accent);
  border-block-end-color: var(--about-accent);
}

/* ---------- the cover ---------- */

.gl-about-cover .gl-about-page-inner {
  padding-block: clamp(2rem, 5vw, 3.4rem);
}

.gl-about-cover-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 62px;
  block-size: 62px;
  margin-block-end: 1.15rem;
  border-radius: var(--gl-radius);
  background: var(--about-panel);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 800;
}

.gl-about-cover-mark span {
  color: #9fd2cb;
}

.gl-about-cover-title {
  margin: 0 0 0.6rem;
  font-size: clamp(1.9rem, 5vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.14;
}

.gl-about-cover-lead {
  margin: 0;
  max-inline-size: 46ch;
  color: var(--about-muted);
  font-size: clamp(0.95rem, 1.6vw, 1.08rem);
}

.gl-about-cover .gl-about-rule {
  max-inline-size: 12rem;
}

.gl-about-cover-meta {
  margin-block: 1rem 1.4rem;
  color: var(--about-muted);
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.gl-about-start {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0.6rem 1.35rem;
  border: 0;
  border-radius: var(--gl-radius);
  background: var(--about-accent);
  color: #fff;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(28, 35, 31, 0.08), 0 10px 22px rgba(22, 106, 97, 0.2);
  transition: transform var(--about-dur-micro) var(--about-ease),
    background var(--about-dur-micro) var(--about-ease),
    box-shadow var(--about-dur-micro) var(--about-ease);
}

.gl-about-start:hover,
.gl-about-start:focus-visible {
  background: var(--about-accent-dark);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(28, 35, 31, 0.1), 0 14px 26px rgba(22, 106, 97, 0.26);
}

.gl-about-start:focus-visible {
  outline: 3px solid rgba(22, 106, 97, 0.28);
  outline-offset: 3px;
}

/* The chevron points forward, so it is the English rendering that needs the flip. */
[dir="ltr"] .gl-about-start > i,
[dir="ltr"] .gl-about-flow-arrow {
  transform: scaleX(-1);
}

.gl-about-start-exit {
  margin-block-start: 1.4rem;
}

/* ---------- miniatures: the real screens, at a tenth of the size ---------- */

.gl-about-figure {
  margin: 0;
}

.gl-about-figure figcaption {
  margin-block-start: 0.6rem;
  color: var(--about-muted);
  font-size: 0.78rem;
}

.gl-about-mini {
  border: 1px solid var(--about-border);
  border-radius: var(--gl-radius-sm);
  background: var(--about-leaf-muted);
  padding: 0.7rem 0.85rem 0.8rem;
}

.gl-about-mini-head {
  margin: 0 0 0.5rem;
  padding-block-end: 0.4rem;
  border-block-end: 1px solid var(--about-border);
  color: var(--about-muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.gl-about-mini-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.gl-about-mini-table th {
  padding-block: 0.18rem;
  color: var(--about-muted);
  font-size: 0.7rem;
  font-weight: 700;
}

.gl-about-mini-table td {
  padding-block: 0.24rem;
}

.gl-about-mini-table .num {
  text-align: end;
  white-space: nowrap;
}

.gl-about-mini-table .muted {
  color: var(--gl-muted-light);
}

.gl-about-mini-table tfoot .is-total td {
  padding-block-start: 0.34rem;
  border-block-start: 1px solid var(--about-border-strong);
  font-weight: 800;
}

/* The accountant's double underline again, this time doing its literal job under a total. */
.gl-about-mini-table tfoot .is-total {
  box-shadow: inset 0 -4px 0 -3px var(--about-ink), inset 0 -1px 0 0 var(--about-ink);
}

.gl-about-balance {
  margin: 0.55rem 0 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  background: var(--gl-success-soft);
  color: var(--gl-success);
  font-size: 0.72rem;
  font-weight: 800;
}

.gl-about-flow {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 2vw, 1.4rem);
}

.gl-about-flow .gl-about-mini {
  flex: 1 1 0;
  min-inline-size: 0;
}

.gl-about-flow-arrow {
  flex: none;
  color: var(--about-accent);
  font-size: 0.95rem;
}

/* the chart branch */

.gl-about-tree {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gl-about-tree li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-block: 0.24rem;
  padding-inline-start: calc(var(--depth) * 1.15rem);
  font-size: 0.79rem;
}

.gl-about-tree .code {
  flex: none;
  min-inline-size: 3.1rem;
  color: var(--about-muted);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.gl-about-tree .name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gl-about-tree .lvl {
  margin-inline-start: auto;
  flex: none;
  color: var(--gl-muted-light);
  font-size: 0.7rem;
  white-space: nowrap;
}

.gl-about-tree .tag {
  margin-inline-start: auto;
  flex: none;
  padding: 0.08rem 0.45rem;
  border-radius: 999px;
  background: var(--about-accent-soft);
  color: var(--about-accent-dark);
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
}

.gl-about-tree .is-postable .name,
.gl-about-tree li.is-postable .code {
  color: var(--about-accent-dark);
}

/* the permission grid */

.gl-about-grid-table th,
.gl-about-grid-table td {
  padding: 0.24rem 0.3rem;
}

.gl-about-grid-table thead th {
  text-align: center;
  font-size: 0.68rem;
  line-height: 1.25;
}

.gl-about-grid-table thead th:first-child {
  inline-size: 38%;
}

.gl-about-grid-table tbody td {
  border-block-start: 1px solid var(--about-border);
}

.gl-about-grid-table .yes,
.gl-about-grid-table .no {
  text-align: center;
}

.gl-about-grid-table .yes {
  color: var(--gl-success);
}

.gl-about-grid-table .no {
  color: var(--gl-muted-light);
}

/* ---------- lists ---------- */

.gl-about-steps {
  margin: 0 0 1.2rem;
  padding: 0;
  list-style: none;
  counter-reset: about-step;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.1rem clamp(1rem, 2.6vw, 2.1rem);
}

.gl-about-steps li {
  counter-increment: about-step;
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding-block: 0.42rem;
  border-block-end: 1px solid var(--about-border);
}

.gl-about-steps li::before {
  content: counter(about-step, decimal-leading-zero);
  flex: none;
  color: var(--about-accent);
  font-size: 0.72rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.gl-about-step-name {
  font-size: 0.86rem;
  font-weight: 700;
}

.gl-about-step-note {
  margin-inline-start: auto;
  color: var(--about-muted);
  font-size: 0.78rem;
  text-align: end;
}

.gl-about-two {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1rem, 2.6vw, 2.1rem);
  align-items: start;
}

.gl-about-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gl-about-list li {
  padding-block: 0.4rem;
  border-block-end: 1px solid var(--about-border);
  font-size: 0.86rem;
  font-weight: 600;
}

.gl-about-list li:last-child {
  border-block-end: 0;
}

.gl-about-figure-flush {
  margin-block-start: 0.1rem;
}

.gl-about-export {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-inline-end: 0.7rem;
  color: var(--about-muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.gl-about-chips {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
}

.gl-about-chips li {
  font-size: 0.78rem;
  color: var(--about-muted);
}

.gl-about-chips b {
  color: var(--about-ink);
  font-weight: 800;
}

.gl-about-note {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 0;
  padding: 0.6rem 0.8rem;
  border-radius: var(--gl-radius-sm);
  background: var(--about-leaf-muted);
  color: var(--about-muted);
  font-size: 0.82rem;
}

.gl-about-note i {
  flex: none;
  color: var(--about-accent);
}

/* rows, not cards: four claims that each carry their own proof */
.gl-about-sealed {
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
}

.gl-about-sealed li {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding-block: 0.85rem;
  border-block-end: 1px solid var(--about-border);
}

.gl-about-sealed li:last-child {
  border-block-end: 0;
}

.gl-about-sealed i {
  flex: none;
  inline-size: 30px;
  block-size: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--gl-radius-sm);
  background: var(--about-accent-soft);
  color: var(--about-accent-dark);
  font-size: 0.82rem;
}

.gl-about-sealed b {
  display: block;
  font-size: 0.9rem;
  font-weight: 800;
}

.gl-about-sealed span {
  color: var(--about-muted);
  font-size: 0.84rem;
}

/* ---------- the close ---------- */

.gl-about-companies {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.8rem, 2vw, 1.4rem);
  margin-block-start: 1.2rem;
}

.gl-about-company {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid var(--about-border);
  border-radius: var(--gl-radius);
  background: var(--about-leaf-muted);
  color: var(--about-ink);
  text-decoration: none;
  transition: border-color var(--about-dur-base) var(--about-ease),
    transform var(--about-dur-base) var(--about-ease),
    box-shadow var(--about-dur-base) var(--about-ease);
}

.gl-about-company:hover,
.gl-about-company:focus-visible {
  border-color: var(--about-border-strong);
  color: var(--about-ink);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--gl-shadow);
}

.gl-about-company-logo {
  flex: none;
  inline-size: 52px;
  block-size: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--gl-radius-sm);
}

/* `contain`, not `cover`: the mark sits inside its own blue field with generous margin, and
   cover cropped the roof stroke off the top. The tile takes the artwork's own background so
   the letterboxing contain leaves has nothing to show. */
.gl-about-company-sh .gl-about-company-logo {
  background: var(--about-company-blue);
}

.gl-about-company-logo img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

/* The one non-teal colour on this page: the sibling company's own mark. Contained inside
   this tile, and nowhere else -- a brand, not a second accent. */
.gl-about-company-wordmark {
  background: var(--about-company-blue);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.gl-about-company-body {
  min-inline-size: 0;
}

.gl-about-company-body b {
  display: block;
  font-size: 0.92rem;
  font-weight: 800;
}

.gl-about-company-body > span {
  display: block;
  color: var(--about-muted);
  font-size: 0.82rem;
}

.gl-about-company-url {
  margin-block-start: 0.3rem;
  color: var(--about-accent) !important;
  font-size: 0.76rem !important;
  font-weight: 700;
}

.gl-about-company-url i {
  font-size: 0.62rem;
}

/* Centred, like the login page's own footer notice. The line is an LTR island inside an RTL
   page, so any start/end alignment resolves against the island rather than the leaf and the
   notice lands somewhere neither language expects; `center` means the same thing in both. */
.gl-about-page-inner .gl-about-copyright {
  margin: 1.4rem 0 0;
  /* Outranks `.gl-about-page-inner p`'s 62ch measure, which is right for prose and wrong
     for a line that has to centre on the leaf rather than on a column inside it. */
  max-inline-size: none;
  color: var(--gl-muted-light);
  font-size: 0.74rem;
  font-weight: 600;
  text-align: center;
}

/* ---------- prev / next ---------- */

.gl-about-controls {
  position: fixed;
  inset-block-end: 1.1rem;
  inset-inline-end: 1.1rem;
  display: flex;
  gap: 6px;
  z-index: 5;
}

.gl-about-step-btn {
  inline-size: 38px;
  block-size: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--about-border);
  border-radius: var(--gl-radius-sm);
  background: var(--about-leaf);
  color: var(--about-muted);
  cursor: pointer;
  box-shadow: var(--gl-shadow);
  transition: color var(--about-dur-micro) var(--about-ease),
    border-color var(--about-dur-micro) var(--about-ease),
    background var(--about-dur-micro) var(--about-ease);
}

.gl-about-step-btn:hover:not(:disabled) {
  border-color: var(--about-accent);
  background: var(--about-accent-soft);
  color: var(--about-accent-dark);
}

.gl-about-step-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ---------- the page turn: the deck's one authored moment ----------
 *
 * Every rule here fires only on the slide that has just become current, and the resting
 * state of every element is its finished state. If the script never runs, or the browser
 * has no IntersectionObserver, the whole deck reads exactly as it should -- nothing is
 * hidden waiting for JavaScript to reveal it.
 */

@keyframes gl-about-settle {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@keyframes gl-about-draw {
  from {
    transform: scaleX(0);
  }
}

.gl-about-slide.is-current .gl-about-title,
.gl-about-slide.is-current .gl-about-cover-title,
.gl-about-slide.is-current .gl-about-lead,
.gl-about-slide.is-current .gl-about-cover-lead,
.gl-about-slide.is-current .gl-about-side,
.gl-about-slide.is-current .gl-about-figure,
.gl-about-slide.is-current .gl-about-note,
.gl-about-slide.is-current .gl-about-chips,
.gl-about-slide.is-current .gl-about-two,
.gl-about-slide.is-current .gl-about-companies,
.gl-about-slide.is-current .gl-about-cover-meta,
.gl-about-slide.is-current .gl-about-start,
.gl-about-slide.is-current .gl-about-steps li,
.gl-about-slide.is-current .gl-about-sealed li {
  animation: gl-about-settle var(--about-dur-slow) var(--about-ease) both;
}

.gl-about-slide.is-current .gl-about-rule {
  /* From the centre outward, so the rule draws the same way whichever way the page reads. */
  transform-origin: center;
  animation: gl-about-draw var(--about-dur-slow) var(--about-ease) both;
}

/* The stagger. Steps and sealed rows arrive as a run of entries down a page, not all at
   once -- 40ms apart, which reads as settling rather than as a sequence of events. */
.gl-about-slide.is-current .gl-about-side:nth-child(2) { animation-delay: 60ms; }
.gl-about-slide.is-current .gl-about-figure { animation-delay: 110ms; }
.gl-about-slide.is-current .gl-about-note { animation-delay: 160ms; }
.gl-about-slide.is-current .gl-about-chips { animation-delay: 160ms; }
.gl-about-slide.is-current .gl-about-rule { animation-delay: 200ms; }
.gl-about-slide.is-current .gl-about-cover-meta { animation-delay: 240ms; }
.gl-about-slide.is-current .gl-about-start { animation-delay: 300ms; }

.gl-about-slide.is-current .gl-about-steps li:nth-child(1),
.gl-about-slide.is-current .gl-about-sealed li:nth-child(1) { animation-delay: 60ms; }
.gl-about-slide.is-current .gl-about-steps li:nth-child(2),
.gl-about-slide.is-current .gl-about-sealed li:nth-child(2) { animation-delay: 100ms; }
.gl-about-slide.is-current .gl-about-steps li:nth-child(3),
.gl-about-slide.is-current .gl-about-sealed li:nth-child(3) { animation-delay: 140ms; }
.gl-about-slide.is-current .gl-about-steps li:nth-child(4),
.gl-about-slide.is-current .gl-about-sealed li:nth-child(4) { animation-delay: 180ms; }
.gl-about-slide.is-current .gl-about-steps li:nth-child(5) { animation-delay: 220ms; }
.gl-about-slide.is-current .gl-about-steps li:nth-child(6) { animation-delay: 260ms; }
.gl-about-slide.is-current .gl-about-steps li:nth-child(7) { animation-delay: 300ms; }
.gl-about-slide.is-current .gl-about-steps li:nth-child(8) { animation-delay: 340ms; }

/* ---------- phones and small laptops ---------- */

@media (max-width: 860px) {
  body.gl-about-page {
    --about-rail: 52px;
  }

  /* The deck stands up: swiping sideways through nine full pages on a phone means either a
     cramped page or a nested scroll, and a vertical stack is what a reader on a phone
     already knows how to move through. */
  .gl-about-deck {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y proximity;
  }

  .gl-about-slide {
    flex: 0 0 auto;
    block-size: auto;
    min-block-size: 100%;
    overflow: visible;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    padding: 0.85rem;
  }

  .gl-about-ledger,
  .gl-about-steps,
  .gl-about-two,
  .gl-about-companies {
    grid-template-columns: minmax(0, 1fr);
  }

  .gl-about-side-credit {
    padding-inline-start: 0;
    padding-block-start: 0.9rem;
    border-inline-start: 0;
    border-block-start: 1px solid var(--about-border);
  }

  .gl-about-flow {
    flex-direction: column;
    align-items: stretch;
  }

  .gl-about-flow-arrow {
    transform: rotate(-90deg);
    align-self: center;
  }

  /* Rotated by the block axis, so it points down in both languages and the LTR mirror
     above must not also apply. */
  [dir="ltr"] .gl-about-flow-arrow {
    transform: rotate(90deg);
  }

  .gl-about-tree .lvl {
    display: none;
  }

  .gl-about-controls {
    inset-block-end: 0.8rem;
    inset-inline-end: 0.8rem;
  }
}

/* A short window -- a 1366x768 laptop, or any machine at 125% display scaling -- leaves about
   580 CSS pixels of viewport, and the three densest pages ran past it. They scroll rather than
   clip, but a page whose closing rule is below the fold has lost the thing that closes it, so
   the leaf tightens instead. */
@media (max-height: 700px) and (min-width: 861px) {
  .gl-about-page-inner {
    padding-block: clamp(1rem, 2.2vh, 1.6rem);
  }

  .gl-about-ledger {
    margin-block: 0.8rem 1rem;
  }

  .gl-about-title {
    font-size: clamp(1.2rem, 2.1vw, 1.5rem);
  }

  .gl-about-rule {
    margin-block-start: 1rem;
  }

  .gl-about-lead {
    margin-block-end: 0.9rem;
  }

  .gl-about-sealed li {
    padding-block: 0.6rem;
  }

  .gl-about-chips {
    margin-block-start: 0.7rem;
  }

  .gl-about-mini {
    padding-block: 0.55rem 0.6rem;
  }

  .gl-about-mini-table td {
    padding-block: 0.16rem;
  }

  .gl-about-note {
    padding-block: 0.45rem;
  }

  .gl-about-cover .gl-about-page-inner {
    padding-block: clamp(1.4rem, 3vh, 2.2rem);
  }
}

@media (max-width: 700px) {
  /* The rail runs out of room before the ticks do. The name goes first: the page's own
     heading is a scroll away, and the edges still say how far along the reader is. */
  .gl-about-tab.is-current .gl-about-tab-name {
    max-inline-size: 0;
    margin-inline-start: 0;
  }

  .gl-about-tab {
    padding: 0 2px;
  }

  .gl-about-tab::before {
    inline-size: 10px;
  }
}

@media (max-width: 575.98px) {
  .gl-about-brand-name {
    display: none;
  }

  .gl-about-exit span {
    display: none;
  }

  .gl-about-grid-table {
    font-size: 0.7rem;
  }

  .gl-about-step-note {
    display: none;
  }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .gl-about-slide.is-current *,
  .gl-about-slide.is-current .gl-about-rule {
    animation: none !important;
  }

  .gl-about-deck {
    scroll-snap-type: none;
    scroll-behavior: auto;
  }

  .gl-about-company:hover,
  .gl-about-start:hover {
    transform: none;
  }
}