/* The landing pages (app/Config/LandingPages.php) - their own pieces. What they share with the
   home page and /compare (the comparison table, .dev-card, .pipe-code, .fxtex-grid) stays in
   home.css, which they also load. */


/* ---- The opening: heading, one line, and what comes out ---- */

.landing-hero {
  text-align: center;
  padding-top: 34px;
  padding-bottom: 6px;
}

.landing-hero h1 {
  font-size: clamp(32px, 5vw, 50px);
  margin-bottom: 10px;
}

.landing-lede {
  max-width: 62ch;
  margin: 0 auto 14px;
  font-size: 1.15rem;
  line-height: 1.6;
  color: #33414f;
}

/* "MathML · SVG · PNG · ..." - what a visitor gets, said once and small. */
.landing-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* No bullet: style.css gives every ul li an orange one. */
.landing-chips li::before,
.landing-more-list li::before { content: none; }

.landing-chips li {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: #e2ebfb;
  color: #003794;
  padding: 3px 10px;
  border-radius: 999px;
}


/* ---- The live editor (templates/landing_demo.php) ---- */

.landing-demo {
  max-width: 920px;
  margin: 22px auto 0;
  padding: 10px;
  background: #fff;
  border: 1px solid #dbe2ec;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(16, 29, 51, 0.06);
}

/* The same blue edge and Courier as the home page's markup pane (#latexInput in fxeditor.css). */
.landing-latex {
  text-align: left;
  border: 1px solid #003794;
  border-radius: 5px;
  padding: 5px;
  margin-top: 6px;
  height: 64px;
  overflow: auto;
  resize: vertical;
  white-space: pre-wrap;
  font-family: "Courier New", monospace;
}

.landing-latex:focus { outline: 1px solid #000; }

.landing-mathview {
  margin-top: 6px;
  min-height: 110px;
  font-size: 1.15rem;
}

/* The bundle's own 8px under every MathView (.CCMathViewWrap) - the spoken line follows here. */
.landing-demo .CCMathViewWrap { margin-bottom: 0; }

.landing-spoken {
  margin: 8px 2px 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #33414f;
  text-align: left;
}

.landing-spoken span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #54647c;
  margin-right: 4px;
}

.landing-spoken q { font-style: italic; }
.landing-spoken q:empty { display: none; }

.landing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

/* The home page's download buttons (.mathview-actions-grid in fxeditor.css), a little larger. */
.landing-actions button {
  font-family: inherit;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85rem;
  line-height: 1.3;
  padding: 6px 12px;
  border: 1px solid #b7c8e3;
  border-radius: 4px;
  background: #e4ecf9;
  color: #003794;
  cursor: pointer;
  white-space: nowrap;
}

.landing-actions button:hover { background: #c5d8f2; border-color: #003794; }
.landing-actions button:active { background: #a9c3ea; }
.landing-actions button.is-done { background: #1f8b57; border-color: #1f8b57; color: #fff; }

.landing-full {
  margin-left: auto;
  font-size: 0.9rem;
  font-weight: 600;
  color: #136b42 !important;
  text-decoration: none;
}

.landing-full:hover { text-decoration: underline; }


/* ---- The sections between ---- */

.landing-band { padding-top: 34px; padding-bottom: 20px; }
.landing-band > h2 { margin-top: 0; }
.landing-band p { line-height: 1.65; }
.landing-band .band-lede { max-width: 68ch; }

/* Three short claims side by side, as cards - .dev-card in home.css, without the code. */
.landing-points {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: 18px;
}

@media (min-width: 760px) {
  .landing-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  .landing-points { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.landing-points .dev-card p:last-child { margin-bottom: 0; }

/* Pale blue, on alternate groups of cards so a page of them does not read as one long grid: the
   tint and hairline the home page marks its blocks with (.server-band, .configure-card in home.css). */
.landing-points.is-tinted .dev-card { background: #f7f9fd; border-color: #dbe2ec; }

/* Numbered steps: "write it, copy it, paste it". */
.landing-steps {
  counter-reset: step;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
  max-width: 760px;
}

.landing-steps li {
  counter-increment: step;
  position: relative;
  padding-left: 46px;
  line-height: 1.6;
}

.landing-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -2px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #003794;
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Code that is the point of a section, at reading size - .pipe-code is sized for the pipeline's
   narrow columns. */
.landing-band .pipe-code { font-size: 0.82rem; position: relative; }

/* Live images from fxTeX Server, on a white ground in case a dark one is ever behind them. */
.landing-renders {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  align-items: center;
  margin: 12px 0 0;
}

.landing-renders figure { margin: 0; }
.landing-renders img { background: #fff; display: block; }
.landing-renders figcaption { font-size: 0.75rem; color: #54647c; margin-top: 4px; }

/* Questions and answers, closed until asked. The measure is on the questions rather than the
   section, which would otherwise centre itself and stand in from every heading around it. */
.landing-faq details { max-width: 820px; }

.landing-faq details {
  border-top: 1px solid #e4e9f0;
  padding: 12px 0;
}

.landing-faq details:last-child { border-bottom: 1px solid #e4e9f0; }

.landing-faq summary {
  cursor: pointer;
  font-weight: 600;
  color: #12171d;
}

.landing-faq details p { margin: 8px 0 0; color: #33414f; }

/* Small print under a table or a claim. */
.landing-note {
  font-size: 0.85rem;
  color: #54647c;
  max-width: 820px;
}

.landing-hero .landing-note { margin: 10px auto 0; }


/* ---- The close (templates/landing_more.php) ---- */

.landing-close { padding-top: 40px; }

.landing-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.landing-ctas.is-left { justify-content: flex-start; }

/* The header's green button (.site-header-cta), at page scale. */
.landing-cta {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 6px;
  background: #136b42;
  border: 1px solid #136b42;
  color: #fff !important;
  font-weight: 600;
  text-decoration: none;
}

.landing-cta:hover { background: #0f5735; }

.landing-cta.is-quiet {
  background: #fff;
  color: #136b42 !important;
}

.landing-cta.is-quiet:hover { background: #eef7f1; }

.landing-more { padding-top: 30px; padding-bottom: 40px; }
.landing-more h2 { font-size: 22px; }

.landing-more-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}

.landing-more-list a {
  display: block;
  height: 100%;
  padding: 12px 14px;
  border: 1px solid #e4e9f0;
  border-radius: 6px;
  text-decoration: none;
  color: #12171d !important;
}

.landing-more-list a:hover { border-color: #136b42; background: #f6faf7; }
.landing-more-list strong { display: block; color: #136b42; margin-bottom: 2px; }
.landing-more-list span { font-size: 0.85rem; line-height: 1.45; color: #54647c; }


/* ---- The logo beside the heading, as on the home page (.header in home.css) ----
   Beside the title where there is room for both on one line; above it on a phone, where the title
   needs the width. Decorative: the heading says what the page is. */

.landing-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px 20px;
  margin-bottom: 10px;
}

.landing-title img { width: 76px; height: auto; flex: 0 0 auto; }
.landing-hero .landing-title h1 { margin: 0; }

@media (max-width: 760px) {
  .landing-title { flex-direction: column; }
  .landing-title img { width: 60px; }
}


/* ---- Examples, drawn in the reader's browser (landing.ts) ---- */

/* One example (templates/landing_ex.php): what the LaTeX makes, and the LaTeX under it. */
.landing-ex {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.landing-ex-out {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3em;
  max-width: 100%;
  /* Room inside the scroll box for a label a picture places just past its own edge - fxTeX
     draws those overflow:visible, which the scroll box would otherwise clip. */
  padding: 4px 14px;
  overflow-x: auto;
  font-size: 1.15rem;
}

.landing-ex.is-tall .landing-ex-out { min-height: 7em; }

.landing-ex figcaption {
  max-width: 100%;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #54647c;
}

/* The LaTeX on one line, scrolling rather than wrapping: a wrapped \chemfig reads as two. */
.landing-ex figcaption code {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  white-space: pre;
  padding: 2px 4px;
  font-size: 0.72rem;
  color: #33414f;
}

.landing-ex figcaption span { display: block; }

/* An equation in a line of prose, drawn where it stands. */
span.landing-ex { display: inline; }

/* The example at the foot of a card, in a white box - the home page's .configure-card-preview -
   pushed down so the boxes in a row line up however long the words above them are. */
.landing-card-ex {
  margin-top: auto;
  padding: 12px 10px 8px;
  background: #fff;
  border: 1px solid #e4e9f0;
  border-radius: 5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  gap: 10px 16px;
}

/* Code that is the example: a wrapper, a URL, a pair of before-and-after. */
.landing-card-ex pre {
  margin: 0;
  width: 100%;
  overflow-x: auto;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.6;
  color: #12171d;
  white-space: pre;
}

.landing-card-ex .landing-arrow { color: #003794; font-weight: 700; }

kbd {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid #c7d0dc;
  border-bottom-width: 2px;
  border-radius: 4px;
  background: #fff;
  font: 600 0.8rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #12171d;
}

/* A list of keys and what each does. */
.landing-keys { margin: 0; padding: 0; list-style: none; width: 100%; }
.landing-keys li { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: #33414f; padding: 3px 0; }
.landing-keys li::before { content: none; }
.landing-keys kbd + kbd { margin-left: -6px; }

/* An imitation of the suggestion list, beside what was typed. */
.landing-suggest { width: 100%; font-size: 0.85rem; }
.landing-suggest > code { display: block; margin-bottom: 4px; font-size: 0.8rem; }
.landing-suggest ul { margin: 0; padding: 0; list-style: none; border: 1px solid #c7d0dc; border-radius: 4px; overflow: hidden; }
.landing-suggest li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 3px 8px; }
.landing-suggest li::before { content: none; }
.landing-suggest li:first-child { background: #e2ebfb; }
.landing-suggest li code { font-size: 0.78rem; }


/* ---- MathML, laid out to be read ---- */

.landing-mathml-src pre {
  margin: 0;
  max-height: 230px;
  overflow: auto;
  padding: 10px 12px;
  background: #101d33;
  border-radius: 4px;
}

.landing-mathml-src code {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.55;
  color: #cbd8ec;
  white-space: pre;
  background: none;
  padding: 0;
}

.landing-card-ex .landing-mathml-src { width: 100%; }
.landing-card-ex .landing-mathml-src pre { max-height: 150px; }

/* LaTeX beside its MathML: the same equation, stored two ways. */
.landing-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 16px;
}

@media (min-width: 760px) {
  .landing-pair { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; }
}

.landing-pair-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #54647c;
  margin-bottom: 6px;
}

.landing-pair-label span { font-weight: 400; letter-spacing: 0; text-transform: none; margin-left: 6px; }


/* ---- MathML into Word (templates/landing_mathml_word.php) ---- */

.landing-word {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-top: 22px;
}

@media (min-width: 860px) {
  .landing-word { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 20px; }
}

.landing-word figure { margin: 0; }

.landing-word-src {
  background: #fff;
  border: 1px solid #dbe2ec;
  border-radius: 6px;
  padding: 12px;
}

.landing-word-src .landing-ex { margin-bottom: 10px; }

.landing-word-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #54647c;
  margin-bottom: 6px;
}

.landing-word-label span { font-weight: 400; letter-spacing: 0; text-transform: none; margin-left: 6px; }

.landing-word-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: #003794;
  font-size: 0.75rem;
  font-weight: 700;
}

@media (max-width: 859px) {
  .landing-word-arrow svg { transform: rotate(90deg); margin: 10px 0; }
}

/* Word, drawn: its blue title bar, grey canvas and white page. The equation is in Cambria Math,
   Word's own maths font, where the reader has it. */
.landing-word-doc {
  border: 1px solid #c8d0dc;
  border-radius: 6px;
  overflow: hidden;
  background: #eef0f3;
  box-shadow: 0 2px 10px rgba(16, 29, 51, 0.08);
}

.landing-word-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #185abd;
  color: #fff;
  font: 12px/1.4 "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
}

.landing-word-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  background: #fff;
  color: #185abd;
  font-weight: 800;
  font-size: 11px;
}

.landing-word-page {
  margin: 14px auto 6px;
  width: 88%;
  min-height: 150px;
  padding: 18px 22px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  font: 14px/1.5 Calibri, Carlito, "Segoe UI", sans-serif;
  color: #000;
}

.landing-word-page p { margin: 0 0 8px; }
.landing-ex.is-word math { font-family: "Cambria Math", "STIX Two Math", "Latin Modern Math", serif; }

.landing-word-doc figcaption {
  padding: 4px 12px 10px;
  font-size: 0.78rem;
  color: #54647c;
  text-align: center;
}


/* ---- SVG beside PNG (templates/landing_svg_png.php) ---- */

.landing-svgpng {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-top: 18px;
}

@media (min-width: 760px) {
  .landing-svgpng { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.landing-svgpng figure {
  margin: 0;
  background: #fff;
  border: 1px solid #dbe2ec;
  border-radius: 6px;
  overflow: hidden;
}

.landing-svgpng-head {
  display: flex;
  justify-content: space-between;
  padding: 6px 12px;
  background: #f2f6fc;
  border-bottom: 1px solid #dbe2ec;
  font-size: 0.85rem;
  color: #33414f;
}

.landing-svgpng-head [data-bytes-of] { color: #54647c; }

.landing-svgpng-img {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  padding: 16px;
  overflow: hidden;
}

.landing-svgpng-img img { max-width: 100%; height: auto; }

.landing-svgpng figcaption {
  padding: 0 14px 12px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #54647c;
}

/* In a card: the two pictures alone, no words. */
.landing-svgpng.is-mini { margin-top: 0; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.landing-svgpng.is-mini .landing-svgpng-img { min-height: 70px; padding: 8px; }
.landing-svgpng.is-mini .landing-svgpng-head { padding: 3px 8px; font-size: 0.75rem; }


/* ---- Spoken text, in a card ---- */

.landing-a11y.is-card { width: 100%; }
.landing-a11y.is-card .a11y-eq { display: flex; justify-content: center; }
.landing-a11y.is-card .a11y-expect { font-size: 0.82rem; font-style: italic; color: #33414f; text-align: center; margin-top: 4px; }

/* The rows (style.css's .a11y-case), as on the home page. */
.landing-a11y:not(.is-card) { margin-top: 18px; }


/* ---- An equation locked to its structure ---- */

.landing-lock { width: 100%; }
.landing-lock-view { min-height: 54px; display: flex; align-items: center; justify-content: center; }
.landing-lock .configure-card-answers { margin-top: 6px; }


/* ---- A rich-text editor, drawn (the CKEditor page) ---- */

.landing-rte {
  max-width: 760px;
  margin: 26px 0 0;
  border: 1px solid #c4c9d1;
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
}

.landing-rte-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  background: #fafafa;
  border-bottom: 1px solid #c4c9d1;
}

.landing-rte-bar span {
  min-width: 28px;
  padding: 3px 6px;
  border-radius: 3px;
  text-align: center;
  font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #333;
}

.landing-rte-bar .sep { min-width: 0; width: 1px; padding: 0; align-self: stretch; margin: 2px 4px; background: #d6d9de; }
.landing-rte-bar .fx { font-style: italic; font-weight: 700; font-family: Georgia, serif; color: #003794; background: #e2ebfb; box-shadow: inset 0 0 0 1px #003794; }

.landing-rte-body { padding: 14px 18px; font-size: 0.95rem; line-height: 1.6; }
.landing-rte-body p { margin: 0 0 8px; }
/* The display equation, as wide as itself, so its selection outline hugs it as an editor's would. */
.landing-rte-body div.landing-ex { width: fit-content; margin: 8px auto 4px; padding: 2px 10px; }
.landing-rte-body .landing-ex.is-selected { outline: 2px solid #1f8b57; outline-offset: 3px; border-radius: 2px; }

.landing-rte + figcaption, .landing-rte-caption { font-size: 0.82rem; color: #54647c; margin-top: 6px; max-width: 760px; }

/* A line under a card's example saying what it shows. */
.landing-card-says { width: 100%; margin: 0 !important; text-align: center; font-size: 0.85rem !important; color: #33414f !important; }
.landing-card-says q { font-style: italic; }

/* An equation image in a line of text, sitting on the text's baseline. */
.landing-inline-img { vertical-align: middle; }

/* ---- The plugin grid (templates/plugin_grid.php, styled in home.css), in its places here ---- */

/* In a card, three across: smaller tiles, the logos scaled down to suit. */
.landing-card-ex .plugin-grid { margin: 0; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 5px; }
.landing-card-ex .plugin-grid a { padding: 6px 2px 5px; }
.landing-card-ex .plugin-grid img { width: 100%; max-width: 50px; height: 24px; }
/* On its own in a section, beside the words that introduce it. */
.landing-band > .plugin-grid { margin-top: 14px; max-width: 900px; }
/* Under a developer card's example, its link needs a gap .dev-more's own margin:0 does not give. */
.landing-card-ex + .dev-more { margin-top: 12px !important; }
/* In an answer, under the words. */
.landing-faq details .plugin-grid { margin-top: 10px; max-width: 700px; }