/* =========================================================
   ALACRITY — refresh (report #1, 1405/06/23)
   loaded last: contrast (WCAG AA ≥ 4.5:1), 1.25 type scale,
   Persian line-height, pager, trust section, full mobile pass
   ========================================================= */

/* ---------- 0. Persian digits ----------
   Peyda and the mono fonts draw ۰–۹ very tight. Only the digit glyphs
   (and Persian separators) are routed to Vazirmatn via unicode-range. */
@font-face {
  font-family: 'FaNum';
  src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 100 550;
  font-display: swap;
  unicode-range: U+06F0-06F9, U+0660-0669, U+066B-066C, U+066A;
}

@font-face {
  font-family: 'FaNum';
  src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 551 900;
  font-display: swap;
  unicode-range: U+06F0-06F9, U+0660-0669, U+066B-066C, U+066A;
}

html[lang="fa"] {
  --font-fa-head: 'FaNum', 'Peyda', 'Peyda Web', 'Dana', 'Vazirmatn', sans-serif;
  --font-fa-body: 'FaNum', 'Peyda Text', 'Peyda', 'Dana', 'Vazirmatn', sans-serif;
  --font-mono: 'FaNum', 'Geist Mono', 'JetBrains Mono', 'IBM Plex Mono', monospace;
}

html[lang="fa"] body {
  font-family: var(--font-fa-body);
}

/* elements that hard-code a Latin mono font but show Persian numbers */
html[lang="fa"] .lbl,
html[lang="fa"] .mono,
html[lang="fa"] .pager,
html[lang="fa"] .sidx .n,
html[lang="fa"] .cs-head .yr,
html[lang="fa"] .graph-num,
html[lang="fa"] .process-num,
html[lang="fa"] .flow-status,
html[lang="fa"] .flow-index button,
html[lang="fa"] .careers-card-index,
html[lang="fa"] .hc-d-step,
html[lang="fa"] .pp-num,
html[lang="fa"] .metrics b,
html[lang="fa"] .timeline-phase,
html[lang="fa"] .fbot {
  font-family: 'FaNum', 'Peyda', 'Vazirmatn', sans-serif !important;
  letter-spacing: 0 !important;
}

/* ---------- 1. contrast tokens ----------
   --faint was #71717A (4.1:1 on #0A0A0A) → #A1A1AA (7.9:1)
   --line3 is also used as a text colour in places → lifted   */
:root,
html[data-theme="dark"] {
  --faint: #A1A1AA;
  --zinc-500: #A1A1AA;
  --dim: #D4D4D8;
  --line3: rgba(255, 255, 255, .34);

  /* type scale — Major Third (1.25) on a 16px base */
  --fs-xs: 12.8px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 20px;
  --fs-lg: 25px;
  --fs-xl: 31.25px;
  --fs-2xl: 39px;
  --fs-3xl: 48.8px;
  --lh-fa: 1.9;
}

@media (min-width: 981px) {
  :root,
  html[data-theme="dark"] {
    --fs-base: 17px;
    --fs-md: 21.25px;
    --fs-lg: 26.5px;
    --fs-xl: 33.2px;
    --fs-2xl: 41.5px;
    --fs-3xl: 61px;
  }
}

/* ---------- 2. readable body text ---------- */
html[lang="fa"] body {
  line-height: var(--lh-fa);
}

html[lang="fa"] p,
html[lang="fa"] li {
  line-height: var(--lh-fa);
}

.lead,
html[lang="fa"] .lead {
  font-size: var(--fs-base) !important;
  line-height: 1.85 !important;
  color: var(--dim) !important;
}

/* ---------- 3. headings on one rhythm ---------- */
html[lang="fa"] h1.hero-t {
  font-size: clamp(var(--fs-2xl), 7vw, var(--fs-3xl) * 1.25) !important;
  line-height: 1.25 !important;
}

html[lang="fa"] .hero-t .dim {
  color: var(--dim) !important;
  font-weight: 600 !important;
}

h1.hero-t {
  font-size: clamp(var(--fs-2xl), 6.4vw, var(--fs-3xl) * 1.25);
}

.hero-t > span {
  white-space: normal !important;
}

h2.sect,
html[lang="fa"] h2.sect,
html[lang="fa"] .careers-section-title {
  font-size: var(--fs-xl) !important;
  line-height: 1.45 !important;
}

html[lang="fa"] .careers-hero-title {
  font-size: clamp(var(--fs-xl), 4.5vw, var(--fs-2xl)) !important;
  line-height: 1.4 !important;
}

.pe-intro-title,
.dual-cta-heading,
.hc-title,
.eng-services-title,
html[lang="fa"] .pe-intro-title,
html[lang="fa"] .dual-cta-heading,
html[lang="fa"] .hc-title,
html[lang="fa"] .eng-services-title {
  font-size: var(--fs-lg) !important;
  line-height: 1.5 !important;
}

.agent-title,
.pipeline-card-title,
.eng-srv-title,
.dual-cta-card-title,
.careers-card-title,
.stage-copy h3,
html[lang="fa"] .agent-title,
html[lang="fa"] .pipeline-card-title,
html[lang="fa"] .eng-srv-title,
html[lang="fa"] .dual-cta-card-title,
html[lang="fa"] .careers-card-title,
html[lang="fa"] .stage-copy h3 {
  font-size: var(--fs-md) !important;
  line-height: 1.55 !important;
}

.agent-subtitle,
html[lang="fa"] .agent-subtitle {
  font-size: var(--fs-sm) !important;
  line-height: 1.8 !important;
  color: var(--dim) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* body copy inside cards */
.mission-statement,
.spectrum-desc,
.pipe-text,
.eng-srv-desc,
.srv-meta-val,
.dual-cta-card-desc,
.hc-subtext,
.careers-card-text,
.pe-intro-desc,
.stage-copy p,
.graph-detail p,
.bio,
.drawer-text,
.drawer-list li {
  font-size: var(--fs-sm) !important;
  line-height: 1.9 !important;
  color: var(--dim) !important;
}

.hc-quote,
html[lang="fa"] .hc-quote {
  font-size: var(--fs-md) !important;
  line-height: 1.8 !important;
}

/* ---------- 4. small labels: bigger + readable ----------
   everything that used to sit at 9–11px in --faint          */
.lbl,
.mono,
.status,
.chip,
.flow-status,
.graph-num,
.process-num,
.kv span,
.detail-kicker,
.stage-kicker,
.pe-tab-tag,
.agent-status-badge,
.mission-label,
.spectrum-title,
.spectrum-val-label,
.integrations-label,
.proto-tag,
.console-badge,
.hc-tag,
.hc-d-step,
.dual-cta-track-badge,
.dual-cta-meta,
.pipe-subhead,
.pipe-foot-tag,
.pipeline-phase-num,
.pipeline-guarantee-badge,
.srv-meta-label,
.eng-srv-type,
.eng-srv-badge,
.eng-srv-tagline,
.eng-srv-timeline,
.careers-card-index,
.careers-status-label,
.careers-status-val,
.job-domain,
.job-mode,
.job-badge,
.challenge-badge,
.ecosystem-chip,
.li-link,
.fbot,
.field label {
  font-size: 12.5px !important;
  color: var(--faint);
}

html[lang="fa"] .lbl,
html[lang="fa"] .mono,
html[lang="fa"] .detail-kicker,
html[lang="fa"] .stage-kicker,
html[lang="fa"] .pe-tab-tag,
html[lang="fa"] .agent-status-badge,
html[lang="fa"] .mission-label,
html[lang="fa"] .spectrum-title,
html[lang="fa"] .spectrum-val-label,
html[lang="fa"] .integrations-label,
html[lang="fa"] .proto-tag,
html[lang="fa"] .console-badge,
html[lang="fa"] .hc-tag,
html[lang="fa"] .dual-cta-track-badge,
html[lang="fa"] .dual-cta-meta,
html[lang="fa"] .pipe-subhead,
html[lang="fa"] .pipe-foot-tag,
html[lang="fa"] .pipeline-phase-num,
html[lang="fa"] .pipeline-guarantee-badge,
html[lang="fa"] .srv-meta-label,
html[lang="fa"] .eng-srv-type,
html[lang="fa"] .eng-srv-badge,
html[lang="fa"] .eng-srv-tagline,
html[lang="fa"] .eng-srv-timeline,
html[lang="fa"] .careers-status-label,
html[lang="fa"] .careers-status-val,
html[lang="fa"] .job-domain,
html[lang="fa"] .job-mode,
html[lang="fa"] .job-badge,
html[lang="fa"] .challenge-badge,
html[lang="fa"] .field label {
  font-family: var(--font-fa-body) !important;
  font-size: 13.5px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.7 !important;
}

/* labels that carry meaning use the stronger grey */
.pipe-subhead,
.srv-meta-label,
.mission-label,
.spectrum-title,
.integrations-label,
.stage-kicker,
.detail-kicker,
.field label,
.careers-status-label {
  color: var(--dim) !important;
}

.sidx .w2,
html[lang="fa"] .sidx .w2 {
  font-size: var(--fs-sm) !important;
  color: var(--dim) !important;
}

/* ---------- 5. hero eyebrow (text above the main title) ---------- */
.hero > div:first-child > .lbl,
.hero > div:first-child > .lbl + .lbl {
  font-size: var(--fs-sm) !important;
  color: var(--dim) !important;
  letter-spacing: .06em;
  line-height: 1.8;
}

html[lang="fa"] .hero > div:first-child > .lbl,
html[lang="fa"] .hero > div:first-child > .lbl + .lbl {
  font-family: var(--font-fa-body) !important;
  letter-spacing: 0 !important;
}

.hero > div:first-child > .lbl:first-child {
  color: var(--text) !important;
  font-weight: 700 !important;
  font-size: var(--fs-base) !important;
}

.hero > div:first-child > p[data-k="heroSub"] {
  font-size: var(--fs-base) !important;
  line-height: 1.95 !important;
  color: var(--dim) !important;
}

.hero p[data-k="heroNote"] {
  font-size: var(--fs-sm) !important;
  color: var(--text) !important;
}

.hero p[data-k="heroNoteSub"] {
  font-size: var(--fs-sm) !important;
  color: var(--faint) !important;
}

/* ---------- 6. careers "system status" box ---------- */
.careers-status-sidebar {
  background: #141416 !important;
  border: 1px solid var(--line2) !important;
  border-radius: 14px !important;
  padding: 22px !important;
}

.careers-live-status {
  font-size: var(--fs-sm) !important;
  color: var(--text) !important;
  font-weight: 600;
}

html[lang="fa"] .careers-live-status {
  font-family: var(--font-fa-body) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.careers-status-val,
html[lang="fa"] .careers-status-val {
  color: var(--text) !important;
  font-size: var(--fs-base) !important;
  font-weight: 700 !important;
}

.careers-status-item {
  padding: 12px 14px !important;
}

/* ---------- 7. pager — real, tappable navigation buttons ---------- */
.pager,
html[lang="fa"] .pager {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 14px !important;
  padding: 32px 0 clamp(48px, 8vh, 90px) !important;
  font-size: var(--fs-base) !important;
  letter-spacing: 0 !important;
  border-top: 1px solid var(--line);
}

.pager .pg {
  display: flex !important;
  align-items: center;
  gap: 14px !important;
  max-width: none !important;
  min-height: 72px;
  padding: 16px 20px;
  border: 1px solid var(--line2);
  border-radius: 14px;
  background: #121214;
  color: var(--text) !important;
  transition: border-color var(--t1, .2s), background var(--t1, .2s), transform var(--t1, .2s);
}

.pager .pg:hover,
.pager .pg:focus-visible {
  border-color: var(--text);
  background: #18181B;
}

.pager .pg:active {
  transform: scale(.985);
}

.pager .pg-next {
  grid-column: 2;
  justify-content: space-between;
  text-align: end !important;
}

.pager .pg-prev {
  grid-column: 1;
  justify-content: flex-start;
}

.pager .pg-empty {
  display: none;
}

.pager .pg-txt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.pager .pg-next .pg-txt {
  margin-inline-start: auto;
  align-items: flex-end;
}

.pager .k {
  color: var(--faint) !important;
  font-size: 13px;
}

.pager .pg-name {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--text);
  line-height: 1.5;
}

html[lang="fa"] .pager .pg-name {
  font-family: var(--font-fa-head);
}

.pager .arw {
  flex: 0 0 auto;
  display: grid !important;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  font-size: 18px;
}

/* ---------- 8. delivered work + R&D (home page) ----------
   both reuse the .pp-product card language from the products page */
.home-case {
  display: grid;
  gap: 24px;
}

.home-case .pp-product-head {
  grid-template-columns: auto 1fr auto;
}

.rd-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.rd-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border: 1px dashed var(--line3);
  border-radius: 16px;
  background: #111113;
}

.rd-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.rd-card-top h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
}

.rd-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--line2);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--dim);
  white-space: nowrap;
}

.rd-badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--faint);
}

.rd-card p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--dim);
}

.rd-status {
  font-size: 13px;
  color: var(--faint);
}

.rd-card a {
  align-self: flex-start;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--line3);
}

.rd-note {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--faint);
}

/* ---------- 9. buttons & tap targets ---------- */
.btn-s,
.btn-o {
  min-height: 48px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 14px !important;
}

html[lang="fa"] .btn-s,
html[lang="fa"] .btn-o,
html[lang="fa"] .cta {
  font-family: var(--font-fa-body) !important;
  letter-spacing: 0 !important;
  font-weight: 700 !important;
}

.careers-filter-btn {
  min-height: 40px;
  font-size: 13px !important;
}

.li-link {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
}

.consent-checkbox {
  width: 20px !important;
  height: 20px !important;
}

.field input,
.field select,
.field textarea {
  font-size: 16px !important; /* stops iOS zooming into fields */
}

.field input,
.field select {
  min-height: 48px;
}

/* ---------- 10. footer ---------- */
.fbot,
.fcol a,
.fcol .lbl {
  font-size: 13px !important;
}

.fcol a {
  color: var(--dim) !important;
}

.fcol a:hover {
  color: var(--text) !important;
}

/* =========================================================
   MOBILE (≤ 720px)
   ========================================================= */
@media (max-width: 720px) {
  :root,
  html[data-theme="dark"] {
    --fs-base: 16px;
    --fs-md: 19px;
    --fs-lg: 22px;
    --fs-xl: 25px;
    --fs-2xl: 36px;
  }

  .wrap {
    padding-inline: 18px !important;
  }

  #stage .latin-bracket {
    white-space: normal !important;
    display: inline !important;
  }

  #stage .latin,
  #stage p,
  #stage h3,
  #stage h4 {
    overflow-wrap: anywhere;
  }

  section {
    padding-block: 44px !important;
  }

  /* header: keep brand + menu, move CTA into drawer to avoid crowding */
  .navbar {
    height: 64px !important;
  }

  .navutil {
    gap: 8px !important;
  }

  .navutil .cta {
    display: none !important;
  }

  .lang button {
    min-width: 40px;
    min-height: 36px;
    font-size: 12px !important;
  }

  .menubtn {
    width: 44px !important;
    height: 44px !important;
    display: grid !important;
    place-items: center;
    border: 1px solid var(--line2) !important;
    border-radius: 12px !important;
  }

  .menubtn svg {
    width: 22px;
    height: 22px;
  }

  .drawer.open {
    max-height: calc(100dvh - 64px) !important;
    overflow-y: auto;
  }

  #drawernav {
    display: flex !important;
    flex-direction: column;
    gap: 0 !important;
    padding: 8px 0 20px;
  }

  #drawernav a {
    display: flex !important;
    align-items: center;
    min-height: 54px;
    padding: 0 4px !important;
    border-bottom: 1px solid var(--line);
    font-size: 17px !important;
    font-weight: 600;
    color: var(--text) !important;
    letter-spacing: 0 !important;
  }

  html[lang="fa"] #drawernav a {
    font-family: var(--font-fa-head) !important;
  }

  /* hero */
  .hero {
    padding-top: 36px !important;
    gap: 28px !important;
  }

  html[lang="fa"] h1.hero-t,
  h1.hero-t {
    font-size: clamp(40px, 13vw, 56px) !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
  }

  .hero .btn-s,
  .hero .btn-o,
  .careers-hero-actions .btn-s,
  .careers-hero-actions .btn-o {
    flex: 1 1 100%;
    width: 100%;
  }

  #heroSvg {
    max-width: 420px;
    margin-inline: auto;
    display: block;
  }

  /* before / after */
  .ba {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .ba li {
    font-size: 15px !important;
    line-height: 1.8 !important;
  }

  /* capabilities graph: detail text readable */
  .graph-detail strong {
    font-size: 18px !important;
    line-height: 1.6 !important;
  }

  .graph-title {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }

  /* process rail: keep it inside the screen */
  .process-shell,
  .process-tour {
    overflow: hidden !important;
  }

  .process-track {
    max-width: 100% !important;
  }

  .process-node {
    max-width: 100% !important;
  }

  .flow-index button {
    min-width: 40px;
    min-height: 40px;
  }

  /* products: one column everywhere */
  .pe-switcher {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .pe-tab {
    min-height: 64px;
    padding: 10px 12px !important;
  }

  .pe-tab-title {
    font-size: 15px !important;
    white-space: normal !important;
  }

  .agent-spec-card,
  .pipeline-grid,
  .eng-services-grid,
  .dual-cta-grid,
  .careers-cards-grid,
  .form-grid-2,
  .hc-diagram,
  .eng-srv-meta-grid {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }

  .agent-spec-side,
  .agent-console-side,
  .pipeline-card,
  .eng-service-card,
  .dual-cta-card,
  .hc-body {
    padding: 20px !important;
    min-width: 0 !important;
  }

  .agent-spec-top,
  .eng-srv-top,
  .pipeline-card-header,
  .dual-cta-top,
  .hc-top {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .agent-card-actions,
  .eng-srv-action,
  .dual-cta-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .agent-card-actions .btn-s,
  .eng-srv-action .btn-s,
  .dual-cta-footer .btn-s,
  .btn-ghost-sim {
    width: 100% !important;
    min-height: 48px;
    justify-content: center;
  }

  .console-titlebar {
    flex-wrap: wrap;
    gap: 6px;
  }

  .console-title {
    white-space: normal !important;
    overflow-wrap: anywhere;
    font-size: 11.5px !important;
  }

  .console-screen,
  .console-screen * {
    overflow-wrap: anywhere;
  }

  .reasoning-body,
  .output-content,
  .console-input-text {
    font-size: 13px !important;
    line-height: 1.85 !important;
  }

  .hc-quote {
    font-size: 17px !important;
  }

  /* team */
  .team {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* careers */
  .careers-hero {
    flex-direction: column !important;
    gap: 28px !important;
  }

  .careers-status-sidebar {
    width: 100% !important;
  }

  .careers-status-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .careers-board-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 16px !important;
  }

  .careers-filters {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    gap: 8px !important;
    padding-bottom: 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .careers-filters::-webkit-scrollbar {
    display: none;
  }

  .careers-filter-btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* job board rows: stack cleanly instead of spreading to the edges */
  .job-row {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 18px;
  }

  .job-info-col {
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
  }

  .job-title {
    font-size: 16px;
    line-height: 1.5;
  }

  .job-meta-row {
    gap: 8px 10px;
  }

  .job-status-col {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }

  .job-action-link {
    font-size: 13px !important;
  }

  .careers-form-container {
    grid-template-columns: 1fr !important;
    display: grid !important;
    gap: 28px !important;
  }

  .careers-form .btn-s,
  form .btn-s[type="submit"] {
    width: 100%;
  }

  .careers-drawer {
    width: 100% !important;
    max-width: 100% !important;
  }

  .ecosystem-chips {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }

  /* contact */
  #p-contact form > div[style*="grid"] {
    grid-template-columns: 1fr !important;
  }

  /* R&D cards: one column on phones */
  .rd-grid {
    grid-template-columns: 1fr;
  }

  .rd-card {
    padding: 20px;
  }

  /* pager stacks, full width, big targets */
  .pager,
  html[lang="fa"] .pager {
    grid-template-columns: 1fr !important;
    padding: 24px 0 calc(40px + env(safe-area-inset-bottom)) !important;
    font-size: var(--fs-base) !important;
  }

  .pager .pg-next,
  .pager .pg-prev {
    grid-column: 1;
    max-width: none !important;
  }

  .pager .pg-next {
    order: -1; /* forward action first on phones */
  }

  .fbot {
    font-size: 12.5px !important;
  }
}

/* tour labels are set with !important deep in style.css — out-rank them */
html body #stage .graph-title {
  font-size: 13px !important;
  line-height: 1.5 !important;
}

html body #stage .flow-index button,
html body #stage .process-num,
html body #stage .graph-num {
  font-size: 12.5px !important;
}

html body #stage .flow-status,
html body #stage .stage-kicker,
html body #stage .detail-kicker,
html body #stage .flow-kv span,
html body #stage .hc-d-step,
html body #stage .careers-card-index,
html body #stage .ecosystem-chip,
html body #stage .challenge-toggle-btn .lbl {
  font-size: 12.5px !important;
  color: var(--dim) !important;
}

html body #stage .rl,
html body #stage .job-action-link,
html body #stage .ecosystem-footnote,
html body #stage .console-title {
  font-size: 12.5px !important;
}

html body #stage .sim-icon {
  font-size: 12px !important;
}

@media (max-width: 380px) {
  html[lang="fa"] h1.hero-t,
  h1.hero-t {
    font-size: 38px !important;
  }

  .careers-status-grid {
    grid-template-columns: 1fr !important;
  }

  .lang button {
    min-width: 36px;
  }
}

/* the active graph node gets a light fill — keep its number dark */
html body #stage .graph-node.on .graph-num {
  color: #0A0A0A !important;
}

/* <button class="btn-o"> — drop the browser's default grey fill */
button.btn-o {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line3);
  cursor: pointer;
}

button.btn-o:hover {
  border-color: var(--text);
  background: rgba(255, 255, 255, .04);
}

button.btn-s {
  border: 0;
  cursor: pointer;
}

/* buttons are flex boxes: keep the space around Latin words (e.g. "Flux") */
.btn-s > .latin,
.btn-o > .latin,
.btn-s span > .latin,
.btn-o span > .latin {
  margin-inline: .3em;
}

/* all headings inside the products page use the heading face */
html[lang="fa"] .pp h3,
html[lang="fa"] .pp h4 {
  font-family: var(--font-fa-head) !important;
}

/* runs of Persian digits (wrapped by localizeDigits in main.js) */
html[lang="fa"] .fnum {
  font-family: 'FaNum', 'Vazirmatn', sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: .025em;
}