/* ============================================================================
   ASKMAE.AI  —  FONTS ONLY

   This file changes nothing but typeface and size. No colors, no spacing,
   no layout. Load it last on every page.
   ========================================================================== */

/* ---- NO SERIF ANYWHERE ---- */

body, h1, h2, h3, h4, h5, h6,
p, li, a, span, div, button, input, textarea, select, label,
.acc-trigger, .layer-name, .layer-desc, .layer-tag,
.section-head h2, .section-head p, .eyebrow, .lede,
.tag, .btn, .v-chip, .label, em, i, strong, b{
  font-family: Arial, Helvetica, sans-serif !important;
  font-style: normal !important;
}

h7{
  font-family: Arial, Helvetica, sans-serif !important;
  font-style: italic !important;
}


/* The terminal stays monospace. It is meant to look like one. */
.terminal, .terminal *, code, pre, kbd{
  font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace !important;
}


/* ---- SIZES.  14px floor, 24px mid, 46px top. ---- */

body, p, li, td, th{ font-size: 17px !important; }

h1{ font-size: 42px !important; }
h2{ font-size: 30px !important; }
h3{ font-size: 22px !important; }
h4{ font-size: 18px !important; }

.lede{ font-size: 20px !important; }
.section-head p{ font-size: 18px !important; }

.acc-trigger{ font-size: 20px !important; }
.acc-panel-inner p{ font-size: 17px !important; }

.btn{ font-size: 16px !important; }

/* Nothing goes below 14. */
.label, .eyebrow, .layer-tag, .hint, .qr-caption,
small, figcaption, .trust-track span, .tag{
  font-size: 14px !important;
}


/* ---- The Step and FAQ labels beside every row are noise. ---- */

#steps .acc-trigger .tag,
#faq .acc-trigger .tag,
#faqs .acc-trigger .tag{ display: none !important; }


@media (max-width: 720px){
  h1{ font-size: 32px !important; }
  h2{ font-size: 24px !important; }
  body, p, li{ font-size: 16px !important; }
}

/* VISION doors: make the "Show me ..." call to action yellow */
#vision .door .go{
  color: var(--gold-bright, #EFC463) !important;
  font-weight: 600;
}
#vision .door:hover .go{
  color: #FFD873 !important;
}

/* ===========================================================================
   THREE COLUMNS OF PARAGRAPHS ON A PHONE.

   .stack-verticals is a three column grid. On the About page it holds the six
   Door cards, each one a heading and a whole paragraph. On a phone that is
   three strips of text about a hundred and twenty pixels wide, which is the
   exact layout your own rule says never to put in front of you.

   The version of it inside the Who We Are section already stacks on a phone.
   This one never did, because that rule was written scoped to that section
   and nothing covered the rest.

   Below 900 pixels it goes straight to ONE column. Not two. Your rule says no
   side by side columns and two of them is still two of them, so it does not
   stop at two on the way down. Nothing changes on a desktop.
   =========================================================================== */
@media (max-width: 900px){
  .stack-verticals{ grid-template-columns: 1fr !important; }
}