/* Home page (and the pieces compare.php shares with it) - split out of style.css. */


/* -----------------
   ---- Spites -----
   ----------------- */

.favourite_block {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gridspacing);
  margin-top: var(--margin);
}

.favourite_block a {
  color: var(--black);
  flex: 1 1 auto;
  text-decoration: none;
}

.favourite_block .sprite {
  --c-sprite-icon-width: auto;
  background-color: var(--grey);
  border-radius: 5px;
  display: flex;
  justify-content: center;
  padding: var(--margin);
}

.sprite > img {
  height:20px;
}


/* ------------------
   --- Home Page ----
   ------------------ */

/* Header message about the Equation Editor */
.header {
	display: grid;
	grid-template-columns: 1fr;
	grid-column-gap: 10px;
	font-size: 12px;
	margin: auto;
  /* Trimmed from 10px: with the tab strip and the editor both needing to sit
     above the fold, the hero's own furniture is where the space has to come
     from. */
  margin-bottom: 4px;
}

/* Moved here from style.css - has to live in the same file as the bare .header rule above
   it overrides. Equal specificity resolves by which file loads last on the page, not by
   which one is wrapped in a media query - see the same note in api.css. */
@media (min-width: 990px) {
  .header {
    max-width:800px;
    grid-template-columns: 100px 1fr;
  }
}


.header h1 {
	font-size: 3rem;
	font-weight: 300;
	margin: 0;
	margin-top:10px;
  margin-left:-100px;
}

.header h1>small {
	font-size: 60%;
	white-space: nowrap;
	font-weight: unset;
}

.header img {
	width:100px;
	/* Was 20px. The logo is the tallest thing in the hero and set its height;
	   the padding bought nothing that the grid gap does not already give. */
	padding-bottom: 0;
}

.header div {
	text-align: center;
}


/* ============================================================================
   ---- Home page: tabbed hero ----
   ============================================================================
   Three answers to "what do I do with this?". The editor is the default so it
   stays above the fold; the other two are one click rather than a scroll.

   Folder tabs: the selected tab shares a surface with the panel beneath it, and
   its own white bottom edge erases the strip's rule where it sits - so the tab
   visibly opens into the panel rather than floating above it. That only reads
   if the panel is a real surface, which is why the panel carries the card here
   and the editor inside it gives up its own border (see further down).

   The accent is orange because everything else on this page is the house blue -
   the logo, the toolbar, the switch, every heading - and a blue active tab read
   as more blue furniture. Inactive tabs are mid-slate rather than light grey,
   which reads as clickable instead of disabled. */

.hero-claim {
  max-width: 70ch;
  margin: 0 auto 10px;
  color: #444;
}

/* The hero used to open onto a tab strip - "Try the editor", "Maths anywhere",
   "Accessibility". A tab's shape promises three of the same kind of thing, and
   those were an application, an install snippet and a screen-reader demo, so it
   never read right however it was painted. The editor now has the hero to
   itself and the other two are sections of their own below it.

   What the strip's rules did for the editor still has to happen: it sat inside
   a panel that drew the edge, so the editor suppressed its own. */

/* Sections carrying a demo rather than a centred pitch: left-aligned, with the
   same measure the rest of the page reads at. */
.home-band { padding-top: 34px; padding-bottom: 34px; }
.home-band > h2 { margin-top: 0; }
.home-band .band-lede { max-width: 68ch; }

/* ---- "Drop fxTeX in" ---- */

.fxtex-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}

@media (min-width: 860px) {
  .fxtex-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

.fxtex-size {
  border-left: 3px solid #1f7a4d;
  background: rgba(31, 122, 77, 0.07);
  padding: 9px 14px;
  border-radius: 0 4px 4px 0;
  font-size: 0.92rem;
}

.fxtex-demo {
  border: 1px solid #dbe2ec;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 12px;
}

.fxtex-demo.is-after { border-color: #003794; }

.fxtex-demo-head {
  background: #f2f6fc;
  border-bottom: 1px solid #dbe2ec;
  padding: 6px 12px;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #54647c;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.fxtex-demo.is-after .fxtex-demo-head { background: #e6eefb; border-bottom-color: #003794; }

#fxtex-timing { font-weight: 500; text-transform: none; letter-spacing: 0; color: #1f7a4d; }

.fxtex-demo-src { margin: 0; border-radius: 0; font-size: 0.78rem; line-height: 1.55; }
.fxtex-demo-src code { white-space: pre; }

.fxtex-demo-out {
  padding: 12px 14px;
  background: #fff;
  color: #000;
  min-height: 92px;
  font-size: 0.95rem;
}
.fxtex-demo-out p { margin: 0; }


/* ---- "Or just ask for a picture" ---- */

/* Tinted, because it sits directly under the band that argues the other way and shares its
   two-column grid: on the same white ground the pair read as one long section rather than as
   two answers to the same question. Same tint and hairlines as the benchmark band further
   down, so the page has one way of saying "this is a block", not three. */
.server-band {
  background: #f7f9fd;
  border-top: 1px solid #e4e9f0;
  border-bottom: 1px solid #e4e9f0;
}

.server-links { font-size: 0.95rem; font-weight: 600; }

/* The line that says how long this has been running and for how many people. Large enough
   to be read before the paragraphs it sits between, and deliberately not a heading: sentence
   case, ordinary weight, no rule and no box, so it reads as something said rather than as a
   new section starting. It sits well under the h2 so the two never compete.

   The figure is the part anybody repeats afterwards, so it takes the colour and the only
   extra weight in the line - the section already spends its bold twice in the prose, and a
   third would stop any of the three landing. */
.server-claim {
  /* Centred in the column, not just centred text in a box that is still flush left - that
     reads as a mistake rather than a choice. More air above and below than between the
     paragraphs, so the break in the left margin is clearly deliberate. */
  margin: 30px auto;
  text-align: center;
  font-size: 1.35rem;
  line-height: 1.35;
  font-weight: 400;
  color: #2b3a52;
  /* Two lines that balance, rather than a long one and an orphan. */
  text-wrap: balance;
  max-width: 30ch;
}
.server-claim .n {
  color: #003794;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .server-claim { font-size: 1.15rem; max-width: none; }
}

/* The demo is one image and nothing else, so the frame gives it room rather than the
   92px of empty the converted-in-your-browser box needs while it waits. */
.server-shot {
  min-height: 0;
  padding: 18px 14px;
  text-align: center;
}
/* Alt text inherits these when the image does not arrive, so a server that is not answering
   degrades to the LaTeX that would have been drawn - which is readable - rather than to a
   broken-image box in the middle of the section arguing for how simple this is. */
.server-shot img {
  max-width: 100%;
  height: auto;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.85rem;
  color: #54647c;
}

/* Four formats, one line each: the word that changes, then what you would pick it for.
   A table would be three columns of nothing; a sentence would bury the four words that
   are the whole point. */
.server-formats {
  /* Keeps the site's own 1em list indent rather than zeroing it, so the list reads as
     belonging to the line that introduces it instead of as another block down the column. */
  margin: 6px 0 0;
  display: grid;
  gap: 6px;
}
.server-formats li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.9rem;
}
/* The site's orange square, suppressed here only: the word in the chip is what marks each
   line, and it is the thing being named. A marker in front of it would be a second bullet
   for one item. Needed because `display: flex` on the li makes that generated marker a flex
   item, where its hanging `margin-left: -1em` no longer hangs - it just shoves the chip in. */
.server-formats li::before { content: none; }
.server-formats code {
  flex: 0 0 auto;
  min-width: 5.5em;
  background: #e6eefb;
  color: #003794;
  padding: 2px 7px;
  border-radius: 3px;
  font-weight: 700;
  font-size: 0.85rem;
}
.server-formats span { color: #54647c; }


/* ---- "Your editor, any way you like it." ---- */

.configure-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.configure-card {
  border: 1px solid #dbe2ec;
  border-radius: 6px;
  padding: 16px;
  background: #fbfcfe;
  display: flex;
  flex-direction: column;
}
.configure-card h3 { margin: 0 0 4px; font-size: 1.02rem; }
.configure-card p { margin: 0 0 12px; color: #3a4658; font-size: 0.9rem; }

.configure-card-preview {
  margin-top: auto;
  border: 1px solid #eef1f6;
  border-radius: 4px;
  background: #fff;
  padding: 8px;
  /* The padding alone is symmetric; centred too, so the group stays
     centred if mini and full ever end up genuinely different heights. */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.configure-card-preview .CCToolbar { --cc-toolbar-glyph: 20px; }
/* The bundle scales a toolbar's icons and panels from the factor passed to
   Toolbar.link() (1.5 for 'mini', 0.9 for 'full' - see configure-demo.js),
   but the vertical rule it draws between panels (.vertical-line) is a flat
   height:35px/margin-top:12px in its own injected CSS, with nothing reading
   that factor - not a rule of ours to edit. So at any scale but 1 the rule
   is visibly the wrong height for the panels either side of it: too short
   at 1.5, a little tall at 0.9. --cc-toolbar-scale is set per instance by
   configure-demo.js; this scales the two fixed values by it. A stopgap
   for our two examples, not the fix - anyone else embedding a scaled
   toolbar on their own page still has the bug, which belongs in the
   bundle: the rule should read the same factor the icons already do.

   By id, not by .configure-card-preview: the bundle injects its own
   <style> after ours loads, so an equal-specificity class selector lost
   the cascade order and never took effect - .CCToolbar .vertical-line
   (its rule) and .configure-card-preview .vertical-line (this one, first
   attempt) are both two classes, and later-in-the-document wins a tie.
   #cfg-mini/#cfg-full outrank it regardless of order. */
#cfg-mini .vertical-line, #cfg-full .vertical-line {
  height: calc(35px * var(--cc-toolbar-scale, 1));
  margin-top: calc(12px * var(--cc-toolbar-scale, 1));
}
/* The editor bundle gives every mounted MathView an 8px margin-bottom of
   its own (.CCMathViewWrap, injected by eqneditor.api.min.js - not a rule
   of ours to edit) and no matching margin-top, so the toolbar+mathview
   group sat 9px from this box's top edge but 17px from its bottom: real,
   visible blank space, not "unused room" the flex centring above could
   redistribute - the box has none to give. Zeroed here rather than in the
   bundle's own class, so it changes only inside this preview, not
   wherever else a MathView is mounted on the site. */
.configure-card-preview .CCMathViewWrap { margin-bottom: 0; }
.configure-card-mv {
  margin-top: 6px;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}

/* The third card - the API/customisation pitch and the design-tool link,
   folded in here rather than left as a lede above the grid plus an outro
   below it. .configure-card p already sets the body copy, so the
   description needs nothing extra: it stays top-aligned, reading like the
   other two cards' own text.

   Grid stretches every card in the row to the tallest one, which here is
   whichever preview widget is bigger - with no preview of its own, this
   card would otherwise leave that whole difference as dead space below the
   description. The CTA line takes it instead: flex:1 grows it to fill
   what's left down to the card's bottom, and centres itself within that,
   so the link sits in the middle of the leftover space rather than pinned
   to the top of it or left to float at a fixed distance under the text. */
.configure-card-text .configure-card-cta {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  margin: 0;
}
.configure-card-text a {
  font-weight: 600;
  color: #003794;
}

/* ---- Product grid ---- */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  max-width: var(--maxwidth);
  margin: 20px auto 0;
  text-align: left;
}

a.product {
  display: block;
  border: 1px solid #dbe2ec;
  border-radius: 6px;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color .12s, box-shadow .12s;
}

a.product:hover { border-color: #003794; box-shadow: 0 2px 10px rgba(0, 55, 148, 0.12); }
a.product:focus-visible { outline: 2px solid #003794; outline-offset: 2px; }

a.product.is-new { border-color: #003794; box-shadow: inset 0 -3px 0 0 #e2ebfb; }

a.product h3 {
  margin: 0 0 5px;
  font-size: 1rem;
  color: #003794;
  display: inlinw-block;
  align-items: center;
  gap: 8px;
}

a.product p { margin: 0; font-size: 0.85rem; color: #54647c; line-height: 1.5; }

.tag-new {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-transform: uppercase;
  background: #c2570f;
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
}

/* ---- Key features, side by side ----
   Sits on the dark band, so the palette is white on #000020: green tick for
   "yes", amber for a qualified answer, dimmed for "no". Our column is lifted
   with a faint wash rather than a colour so the ticks stay the loudest thing. */

.compare-lead {
  max-width: 68ch;
  margin: 0 0 4px;
  font-size: 0.92rem;
}



/* ============================================================================
   ---- Home page: the pipeline showcase ----
   ============================================================================
   LaTeX in, readable maths and runnable code out. Numbered because it genuinely
   is a sequence - the same equation at three stages, not three unrelated
   features - and the arrows say the same thing to anyone skimming. */

.pipeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: stretch;
  max-width: var(--maxwidth);
  margin: 26px auto 0;
  text-align: left;
}

@media (min-width: 900px) {
  .pipeline { grid-template-columns: 1fr auto 1fr auto 1fr; gap: 10px; }
}

.pipe-step {
  position: relative;
  border: 1px solid #dbe2ec;
  border-radius: 6px;
  padding: 16px 16px 14px;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.pipe-num {
  position: absolute;
  top: -11px;
  left: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #003794;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.pipe-step h3 {
  margin: 4px 0 10px;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Pushed to the panel's right edge, so it lines up with the edge of the
   rendered maths or code below rather than trailing the heading text. */
.pipe-tag {
  margin-left: auto;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  background: #e2ebfb;
  color: #003794;
  padding: 2px 7px;
  border-radius: 3px;
}

/* The one lowercase letter in the wordmark. Written as its own element rather than left to
   text-transform, which has no way to spare a single character - the names are set in caps
   apart from the x, so FxTEX, not FXTEX. Sized up a touch because a lowercase x beside caps
   at the same font-size reads as a mistake rather than a choice. */

.pipe-arrow {
  display: none;
  align-self: center;
  color: #b8c6d8;
  font-size: 1.5rem;
}

@media (min-width: 900px) { .pipe-arrow { display: block; } }

.pipe-code {
  margin: 0 0 10px;
  padding: 10px 12px;
  background: #101d33;
  color: #cbd8ec;
  border-radius: 4px;
  font-family: "Courier New", monospace;
  font-size: 0.74rem;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
}

.pipe-code .t { color: #f0914b; }   /* types */
.pipe-code .k { color: #c99bf5; }   /* keywords */

/* The rendered equation, directly under the LaTeX that produced it. A quiet
   ground and a little room, so it reads as the result rather than as a second
   code block. */
.pipe-math {
  background: #f7f9fd;
  border: 1px solid #e4e9f0;
  border-radius: 4px;
  padding: 14px 12px;
  margin: 10px 0 0;
  font-size: 1.05rem;
  overflow-x: auto;
  text-align: center;
}

.pipe-note {
  margin: auto 0 0;
  font-size: 0.8rem;
  color: #54647c;
  line-height: 1.5;
}

/* ---- Benchmark, a quiet band low on the page ----
   It was a dark full-bleed block high up, which on an otherwise white page read
   as the most important thing there. It is confirmation of a claim made higher
   up, not the claim itself - so it gets the same light treatment as everything
   around it, sits below the products and features, and takes half the width
   rather than all of it, with the correctness story alongside. */

.benchmark-band {
  background: #f7f9fd;
  border-top: 1px solid #e4e9f0;
  border-bottom: 1px solid #e4e9f0;
  padding: 30px var(--spacing);
}

.bench-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  align-items: center;
  /* Deliberately narrower than the page. A chart of four numbers does not earn
     1200px, and the prose beside it needs a readable measure anyway. */
  max-width: 940px;
  margin: 0 auto;
}

@media (min-width: 820px) {
  .bench-grid { grid-template-columns: 1fr 1.05fr; gap: 40px; }
}

.bench-words h2 { margin-top: 0; }
.bench-words p { font-size: 0.9rem; line-height: 1.55; max-width: 46ch; margin-bottom: 10px; }
.bench-cta a { font-weight: 600; }

/* ---- the chart ---- */

.bench-chart { margin: 0; }

.bench-chart figcaption {
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #54647c;
  font-weight: 700;
  margin-bottom: 12px;
}

/* The speed chart's own rules live in assets/css/bench-chart.css, which the benchmark
   runner loads as well - see the note at the top of that file. */



/* ============================================================================
   ---- Home page: feature comparison ----
   ============================================================================
   Grouped into sections rather than run as one long list, because the argument
   is about categories: everything the other three can do sits in one group
   (rendering an equation), and the rest is ours alone. The groups carry that
   without the copy having to say it twice. */

.compare-wrap {
  overflow-x: auto;
  max-width: 940px;
  margin: 22px auto 0;
  border: 1px solid #999;
  border-radius: 2px;
  -webkit-overflow-scrolling: touch;
}

.compare {
  border-collapse: collapse;
  width: 100%;
  min-width: 680px;
  text-align: left;
  font-size: 0.9rem;
}

.compare th, .compare td {
  padding: 9px 14px;
  border-bottom: 1px solid #e4e9f0;
  vertical-align: middle;
  text-align: center;
}

.compare thead th {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #54647c;
  font-weight: 700;
  border-bottom: 2px solid #c3d0e2;
  white-space: nowrap;
}

/* Our column is tinted the whole way down, so the eye can follow it without
   having to re-find it on every row. */
.compare thead th.us-col {
  color: #003794;
  background: #e2ebfb;
  border-bottom-color: #003794;
  border-radius: 5px 5px 0 0;
}

.compare tbody th {
  font-weight: 500;
  color: #2b3a4f;
  width: 42%;
  line-height: 1.45;
}

.compare .yes { color: #1f7a4d; font-weight: 600; }

/* Not a yes and not a no: a qualified answer, which is worth looking different
   from both rather than being rounded to whichever is convenient. */
.compare .part { color: #54647c; }

.compare .no { color: #9aa8bb; }

/* After the three above on purpose. Our column's qualified answers - "Via
   LaTeXRender", "Node, C++, Docker, PHP" - are capabilities, not caveats, and
   were otherwise rendering in the same grey as a competitor's shortfall. */
.compare .us-cell {
  background: #f2f6fc;
  color: #003794;
  font-weight: 600;
}

.compare .grouprow td {
  background: #f7f9fd;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #54647c;
  font-weight: 700;
  padding: 7px 14px;
  border-bottom: 1px solid #e4e9f0;
  text-align: left;
}

.compare tbody tr:not(.grouprow):hover th,
.compare tbody tr:not(.grouprow):hover td { background: #fafbfe; }
.compare tbody tr:not(.grouprow):hover .us-cell { background: #e8f0fc; }

.compare-note {
  max-width: 72ch;
  margin: 16px auto 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: #54647c;
}

/* ---- Two comparisons in one section ---- */

/* Both align to the same 940px column the tables use, so the heading, its lead
   and the table it introduces share a left edge instead of each finding their
   own. */
.compare-sub {
  max-width: 940px;
  margin: 34px auto 2px;
  font-size: 1.1rem;
}

.compare-sub-lead {
  max-width: 940px;
  margin: 0 auto 8px;
  font-size: 0.88rem;
  color: #54647c;
}

/* Five columns of competitors need more room than four, and the row labels here
   are phrases rather than single words. */
.compare-wide { min-width: 780px; }
.compare-wide tbody th { width: 28%; }
.compare-wide th, .compare-wide td { padding: 9px 10px; }

/* "Not yet" is neither a yes nor a dash. A gap we are naming ourselves should
   look like a considered answer, not a failure - and not like a competitor's
   blank either, or the table reads as if we were hiding it. */
.compare .us-cell.soon {
  color: #c2570f;
  background: #fdf4ec;
  font-weight: 600;
}

.compare-link {
  font-family: inherit;
  font-weight: 600;
  margin-top: 6px;
}

.compare-sub-first { margin-top: 0; }


/* The LaTeX one-liner quoted inside the fxTeX argument. Allowed to wrap - it is
   a sentence about a string, not a code block, and forcing it onto one line
   pushes a scrollbar through the middle of a paragraph. */
.fxtex-inline {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.84em;
  background: #f1f3f6;
  color: #1b4b8f;
  padding: 1px 5px;
  border-radius: 3px;
  overflow-wrap: anywhere;
}

/* Which product a section belongs to, beside its heading - the same job
   .pipe-tag does in the pipeline, at heading scale. Deliberately not part of
   the sentence: "Store the LaTeX, not the MathML" is the argument, and folding
   a product name into it makes it a worse sentence. Not uppercased, because
   the names are cased on purpose (fxTeX, not FXTEX). */
.band-tag {
  display: inline-block;
  vertical-align: 0.32em;
  margin-left: auto;
  font-size: 0.42em;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: #e2ebfb;
  color: #003794;
  padding: 3px 8px;
  border-radius: 3px;
  white-space: nowrap;
}

/* The same wordmark on the editor itself, at the right-hand end of the strip
   above the toolbar. Only the size is restated: .band-tag's 0.42em is relative
   to the heading it normally sits in, and against the editor bar's ordinary
   body text that would come out at about 6px.

   Styled here rather than in eqneditor.css, which is a build artefact copied
   in from eqneditor-v5-api - an edit there is lost on the next build. */
.editor-wordmark {
  font-size: 11px;
  letter-spacing: 0.04em;
  align-self: center;
}

/* Puts .band-tag at the right-hand end of its heading, the way .pipe-tag sits at the end of
   the pipeline steps' headings. The heading's own text is the other flex item.

   A descendant selector, not a child one: the heading sits inside the band's grid column, not
   directly under the band. */
.home-band h2:has(.band-tag) {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
}

/* ============================================================================
   ---- Home: ready for developers ----
   ============================================================================
   Three cards, each answering one question with code rather than adjectives.
   Left-aligned inside a section that is otherwise centred: code cannot be
   centred, and a paragraph explaining code should start where the code does. */

.dev-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: var(--maxwidth);
  margin: 26px auto 0;
  text-align: left;
}

@media (min-width: 900px) {
  /* minmax(0, 1fr), not 1fr: a grid track's default minimum is auto, so the widest line
     inside a <pre white-space:pre> pushes its column past its share and the whole page
     scrolls sideways. A zero minimum lets the code scroll inside its own card instead. */
  .dev-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}

.dev-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e4e9f0;
  border-radius: 8px;
  padding: 20px 22px 18px;
}

.dev-card h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 600;
  color: #12171d;
  line-height: 1.3;
}

.dev-card p {
  margin: 0 0 14px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #54647c;
}

/* Dark, because a code block that looks like the prose around it stops being a
   code block. Scrolls rather than wraps: a wrapped script tag reads as two. */
.dev-code {
  background: #12171d;
  border-radius: 5px;
  padding: 12px 14px;
  margin: 0 0 14px;
  overflow-x: auto;
}

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

/* Pushed to the bottom edge so the three cards' links line up however uneven
   the text above them is. */
.dev-note {
  font-size: 0.82rem !important;
  color: #6b7480 !important;
  margin-top: auto !important;
  margin-bottom: 10px !important;
}

.dev-more { margin: 0 !important; font-size: 0.88rem !important; }
.dev-more a { color: #136b42; font-weight: 600; text-decoration: none; }
.dev-more a:hover { text-decoration: underline; }

.dev-terms {
  max-width: 760px;
  margin: 22px auto 0;
}

.dev-terms p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #54647c;
  margin: 0;
}

.dev-integrations-lede {
  margin-top: 34px !important;
  color: #6b7480;
  font-size: 0.9rem !important;
}
.pipe-tag .x,
.band-tag .x {
  text-transform: lowercase;
  font-size: 1.12em;
  letter-spacing: 0;
}