/* ===========================================================================
   MAGNIFIRE TE SYSTEM
   The shared "technical instrument" design language, extracted from the
   /meet-your-ai-marketing-director/ landing page so every page can speak it.

   Everything is scoped under `.mfte`. Put that class on the page's outermost
   wrapper and nothing here can leak into the rest of the site.

   ── THE METAPHOR ────────────────────────────────────────────────────────────
   The page is a device.

     chassis   the warm grey body the whole page sits on            .mfte
     plate     a white panel bolted to the chassis, 14px corners    .te-plate
     display   a dark plate that reads as a screen                  .te-plate--dark
     module    a recessed tile inside a plate, 6px corners          .te-module
     readout   a sunk display window with an inset shadow           .te-readout
     part no.  a bare mono numeral in the plate margin              .te-part

   ── THE RULES ───────────────────────────────────────────────────────────────
   1. SHAPE LOCK. Exactly two radii on any page: 14px for plates and panels,
      6px for controls (buttons, keys, modules). 6px is the site-wide button
      spec from _11-buttons-global.scss and is not ours to change. Never add a
      third value.

   2. ONE ACCENT. #FF8833, the brand orange, used functionally: LEDs, status
      bars, keys, the one word that matters. Never decoratively, never a second
      accent. TE's real hardware is multi-colour; the brand is not.

   3. TYPE SPLIT. Sebino carries every headline and every sentence. The mono
      carries every technical label, and those labels are lowercase. PT Serif
      appears only as an editorial accent (a deck, a pull quote). Three fonts,
      three jobs, no overlap.

   4. MONO IS SYSTEM MONO. No webfont request. TE's own labelling is plain
      technical type, so the platform mono is both honest and free.

   5. LEDS AND TICKS ARE RATIONED. An LED means "this module is powered" and
      appears only in a strip where every item has one. Registration ticks
      appear on one plate per page. Spraying either everywhere is exactly how
      this language collapses into pastiche.

   ── CASCADE NOTE ────────────────────────────────────────────────────────────
   The global typescale in custom.scss sets h1/h2/h3 with !important inside
   @layer site, and master.css forces `font-family: Sebino !important` on
   p/a/li/span unlayered. For !important the layer order is reversed, so an
   unlayered !important is the weakest author declaration there is. Every rule
   that has to beat those lives in the @layer site block at the bottom of this
   file. Load this stylesheet AFTER the site bundle (link it from inside the
   layout, as the layouts here do) or those rules lose on source order.
   =========================================================================== */

.mfte {
  /* Ink */
  --te-fg: #1a1a1a;
  --te-fg-soft: #33383e;
  --te-fg-mute: #6b7178;
  --te-heading: #333333;
  --te-accent: #ff8833;
  --te-accent-dim: #e07020;

  /* Chassis and plates */
  --te-chassis: #d4d3ce;
  --te-plate: #ffffff;
  --te-plate-edge: #c4c3be;
  --te-module: #f2f1ed;
  --te-recess: #edece7;
  --te-tick: #9a9994;
  --te-rule: #e4e6ea;

  /* Display plates */
  --te-ink: #14181d;
  --te-ink-fg: #f4f5f7;
  --te-ink-soft: #cfd5db;
  --te-ink-mute: #9aa2ab;
  --te-ink-rule: #2b3138;
  --te-ink-module: #20262d;

  /* Shape lock. Two values. See rule 1. */
  --te-r-plate: 14px;
  --te-r-control: 6px;

  /* Type */
  --te-serif: 'PT Serif', Georgia, 'Times New Roman', serif;
  --te-mono: ui-monospace, 'SFMono-Regular', 'SF Mono', Menlo, Consolas,
             'Liberation Mono', monospace;
  --te-measure: 68ch;

  background: var(--te-chassis);
  color: var(--te-fg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Chassis under the site header.

   html/body/main are locked white by _visual-refresh.scss, so the in-flow
   header sits on a white strip above the grey. :has(.mfte) is the leak-proof
   gate — nothing here can paint a page that is not running this system.

   Nav overlap matches .myd in meet-your-amd.css:
   >=992px the nav is in flow and pushes <main> down. Pull .mfte up by the
   nav height so the chassis paints under the logo and nav; matching padding
   keeps the first plate clear.
   <=991px the nav is already position:absolute, so <main> starts at y=0.
   Padding-top is still required or the first plate slides under the nav and
   the logo sits on the plate instead of on the chassis. */
html:has(.mfte) { --te-chassis: #d4d3ce; }

html:has(.mfte),
html:has(.mfte) body,
html:has(.mfte) main {
  background: var(--te-chassis) !important;
  background-color: var(--te-chassis) !important;
}

html:has(.mfte) header.navigation,
html:has(.mfte) .navigation,
html:has(.mfte) .navigation .navbar,
html:has(.mfte) .navigation.nav-scrolled,
html:has(.mfte) .navigation.nav-scrolled .navbar {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

@media (min-width: 992px) {
  .mfte {
    --te-nav-h: 73px;
    margin-top: calc(-1 * var(--te-nav-h));
    padding-top: var(--te-nav-h);
  }
}

@media (max-width: 991px) {
  .mfte {
    --te-nav-h: 69px;
    padding-top: var(--te-nav-h);
  }
}

.mfte *,
.mfte *::before,
.mfte *::after { box-sizing: border-box; }

/* ── BAND: the chassis gap around a plate ─────────────────────────────────── */

.mfte .te-band {
  position: relative;
  padding: 11px 0;
  background: transparent;
}

.mfte .te-band--first { padding-top: 22px; }
.mfte .te-band--last { padding-bottom: 30px; }

/* ── PLATE: a panel bolted to the chassis ─────────────────────────────────── */

.mfte .te-plate {
  position: relative;
  width: min(100% - 44px, 1101.6px);
  margin: 0 auto;
  padding: 68px 56px;
  background: var(--te-plate);
  border: 1px solid var(--te-plate-edge);
  border-radius: var(--te-r-plate);
}

.mfte .te-plate--dark {
  background: var(--te-ink);
  border-color: #000000;
  color: var(--te-ink-fg);
}

/* A secondary label plate, the way a device carries a small strip below the
   main face. Stack it directly under a full plate. */
.mfte .te-plate--sub {
  margin-top: 11px;
  padding: 22px 56px;
}

.mfte .te-plate--tight { padding: 44px 56px; }

/* Registration ticks. One plate per page. See rule 5. */
.mfte .te-plate--ticks::before,
.mfte .te-plate--ticks::after {
  content: '';
  position: absolute;
  width: 13px;
  height: 13px;
  pointer-events: none;
}

.mfte .te-plate--ticks::before {
  top: 16px; left: 16px;
  border-top: 1px solid var(--te-tick);
  border-left: 1px solid var(--te-tick);
}

.mfte .te-plate--ticks::after {
  bottom: 16px; right: 16px;
  border-bottom: 1px solid var(--te-tick);
  border-right: 1px solid var(--te-tick);
}

/* ── PART NUMBER: schematic callout in the plate margin ───────────────────── */
/* Deliberately a bare numeral. Giving it a caption turns it back into the
   templated eyebrow this replaced. */

.mfte .te-part {
  position: absolute;
  top: 22px;
  left: 24px;
  margin: 0;
  font-family: var(--te-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--te-tick);
}

.mfte .te-plate--dark .te-part { color: #5c646d; }

/* ── TECHNICAL LABELS ─────────────────────────────────────────────────────── */

.mfte .te-label,
.mfte .te-eyebrow,
.mfte .te-kicker {
  display: block;
  margin: 0 0 20px;
  font-family: var(--te-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: lowercase;
  color: var(--te-fg-mute);
}

.mfte .te-kicker { color: var(--te-accent); }
.mfte .te-plate--dark .te-label { color: var(--te-ink-mute); }

/* The brand mark must never be lowercased or uppercased by a label. */
.mfte .te-mark { text-transform: none; letter-spacing: 0.04em; }

.mfte .te-mono {
  font-family: var(--te-mono);
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  text-transform: lowercase;
  color: var(--te-fg-mute);
}

/* ── HEADINGS ─────────────────────────────────────────────────────────────── */
/* Sizes are enforced in the @layer site block at the bottom. Only colour,
   spacing and tracking live here. */

.mfte .te-h1 {
  color: var(--te-heading);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 20px;
}

.mfte .te-h2 {
  color: var(--te-heading);
  line-height: 1.12;
  letter-spacing: -0.022em;
  margin: 0 0 24px;
}

.mfte .te-h3 {
  color: var(--te-heading);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}

.mfte .te-plate--dark .te-h1,
.mfte .te-plate--dark .te-h2,
.mfte .te-plate--dark .te-h3 { color: #ffffff; }

.mfte .te-accent { color: var(--te-accent); }

/* The deck. PT Serif italic, the one place the page lets its voice show. */
.mfte .te-deck {
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 2.1vw, 1.6rem);
  line-height: 1.35;
  color: var(--te-fg-soft);
  margin: 0 0 26px;
}

.mfte .te-plate--dark .te-deck { color: var(--te-accent); }

.mfte .te-lede {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--te-fg-soft);
  max-width: 46ch;
}

/* ── MODULE: a recessed tile inside a plate ───────────────────────────────── */

.mfte .te-module {
  padding: 18px 18px 22px;
  background: var(--te-module);
  border: 1px solid var(--te-plate-edge);
  border-radius: var(--te-r-control);
}

.mfte .te-plate--dark .te-module {
  background: var(--te-ink-module);
  border-color: #2f363e;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Status bar across a module's top edge. */
.mfte .te-module--barred { position: relative; }

.mfte .te-module--barred::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 18px;
  right: 18px;
  height: 3px;
  background: var(--te-accent);
  border-radius: 0 0 2px 2px;
}

/* Module header: LED plus channel number. See rule 5. */
.mfte .te-module__n {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
  font-family: var(--te-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--te-fg-mute);
}

.mfte .te-module__n::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--te-accent);
  flex: 0 0 auto;
}

/* ── READOUT: a display window sunk into the plate ────────────────────────── */

.mfte .te-readout {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  border: 1px solid var(--te-plate-edge);
  border-radius: var(--te-r-plate);
  background: var(--te-recess);
  box-shadow: inset 0 2px 4px rgba(20, 24, 29, 0.09);
}

.mfte .te-readout__text {
  font-family: var(--te-mono);
  font-size: clamp(0.9375rem, 1.4vw, 1.125rem);
  color: var(--te-heading);
  letter-spacing: 0.01em;
  text-transform: lowercase;
  display: inline-flex;
  align-items: center;
}

.mfte .te-caret {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 4px;
  background: var(--te-accent);
  animation: te-blink 1.1s steps(1, end) infinite;
}

@keyframes te-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ── CONTROLS ─────────────────────────────────────────────────────────────── */
/* Markup carries .unstyled to opt out of the global button matrix, so the
   brand spec is restated here: black on light, accent on dark, 6px, weight 400. */

.mfte .te-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 30px;
  border-radius: var(--te-r-control);
  border: 1px solid transparent;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.005em;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.mfte .te-btn--primary {
  background: #000000;
  border-color: #000000;
  color: #ffffff;
}

.mfte .te-btn--primary:hover {
  background: var(--te-accent);
  border-color: var(--te-accent);
}

.mfte .te-btn--onDark {
  background: var(--te-accent);
  border-color: var(--te-accent);
  color: #ffffff;
}

.mfte .te-btn--onDark:hover {
  background: var(--te-accent-dim);
  border-color: var(--te-accent-dim);
}

.mfte .te-btn--ghost {
  background: transparent;
  border-color: var(--te-plate-edge);
  color: var(--te-heading);
}

.mfte .te-btn--ghost:hover {
  border-color: var(--te-accent);
  color: var(--te-accent);
}

.mfte .te-btn--lg { padding: 20px 38px; font-size: 1.0625rem; }

.mfte .te-btn__arrow { transition: transform 0.2s ease; font-size: 1.05em; }
.mfte .te-btn:hover .te-btn__arrow { transform: translateX(3px); }

.mfte .te-btn:focus-visible,
.mfte a:focus-visible,
.mfte button:focus-visible {
  outline: 2px solid var(--te-accent);
  outline-offset: 3px;
  border-radius: var(--te-r-control);
}

/* ── PROSE: long-form document body ───────────────────────────────────────── */
/* Privacy, Terms and the Help Center are documents, not landing pages. They get
   a real reading measure and a flat hierarchy. Headings are set here rather
   than through .te-h2/.te-h3 because prose headings come out of .Content and
   cannot carry classes. */

.mfte .te-prose {
  max-width: var(--te-measure);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--te-fg-soft);
}

.mfte .te-prose > *:first-child { margin-top: 0; }
.mfte .te-prose > *:last-child { margin-bottom: 0; }

.mfte .te-prose p { margin: 0 0 1.15em; }

.mfte .te-prose h2 {
  margin: 2.4em 0 0.7em;
  padding-top: 1.5em;
  border-top: 1px solid var(--te-rule);
  color: var(--te-heading);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.mfte .te-prose h3 {
  margin: 2em 0 0.55em;
  color: var(--te-heading);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.mfte .te-prose h4 {
  margin: 1.7em 0 0.5em;
  color: var(--te-heading);
}

.mfte .te-prose ul,
.mfte .te-prose ol { margin: 0 0 1.15em; padding-left: 1.35em; }
.mfte .te-prose li { margin-bottom: 0.45em; }

.mfte .te-prose a {
  color: var(--te-heading);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--te-accent);
  text-decoration-thickness: 1px;
}

.mfte .te-prose a:hover { color: var(--te-accent); }

.mfte .te-prose strong { color: var(--te-heading); font-weight: 700; }

.mfte .te-prose blockquote {
  margin: 1.6em 0;
  padding: 0 0 0 22px;
  border-left: 3px solid var(--te-accent);
  color: var(--te-fg-soft);
}

.mfte .te-prose code {
  font-family: var(--te-mono);
  font-size: 0.875em;
  padding: 2px 6px;
  background: var(--te-module);
  border: 1px solid var(--te-plate-edge);
  border-radius: 4px;
}

/* Tables scroll inside their own box; the plate never scrolls sideways. */
.mfte .te-prose .te-table-wrap { overflow-x: auto; margin: 0 0 1.4em; }

.mfte .te-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.mfte .te-prose th,
.mfte .te-prose td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--te-rule);
}

.mfte .te-prose th {
  font-family: var(--te-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--te-fg-mute);
}

/* ── INDEX RAIL: the on-this-page nav beside a document ───────────────────── */

.mfte .te-index {
  position: sticky;
  top: 108px;
  align-self: start;
}

.mfte .te-index ul,
.mfte .te-index ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: te-idx;
}

.mfte .te-index li { margin: 0; }

.mfte .te-index a {
  display: flex;
  gap: 11px;
  padding: 8px 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--te-fg-mute);
  text-decoration: none;
  border-bottom: 1px solid var(--te-rule);
}

.mfte .te-index a::before {
  counter-increment: te-idx;
  content: counter(te-idx, decimal-leading-zero);
  font-family: var(--te-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--te-tick);
  flex: 0 0 auto;
  padding-top: 2px;
}

.mfte .te-index a:hover { color: var(--te-accent); }

/* Nested TOC levels are flattened. A legal document with a three-deep index
   rail is harder to scan, not easier. */
.mfte .te-index ul ul { display: none; }

/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
  .mfte .te-plate { padding: 48px 32px; }
  .mfte .te-plate--sub { padding: 20px 32px; }
  .mfte .te-plate--tight { padding: 36px 32px; }
}

@media (max-width: 767px) {
  .mfte .te-plate {
    width: calc(100% - 24px);
    padding: 40px 22px;
  }
  .mfte .te-plate--sub { padding: 18px 22px; }
  .mfte .te-plate--tight { padding: 30px 22px; }
  .mfte .te-part { top: 14px; left: 14px; }
  .mfte .te-btn { width: 100%; justify-content: center; }
  .mfte .te-readout { padding: 16px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .mfte .te-btn,
  .mfte .te-btn__arrow { transition: none; }
  .mfte .te-caret { animation: none; }
}

/* ═══ CASCADE OVERRIDES ═══════════════════════════════════════════════════ */
/* Layered on purpose. See the cascade note at the top of this file. The body
   prefix and doubled class buy the specificity needed to beat
   `body.mf-typescale.mf-typescale h1:not(...)` in the site bundle. Do not
   "simplify" these selectors. */

@layer site {
  body.mf-typescale.mf-typescale .mfte .te-h1.te-h1 {
    font-size: clamp(2.5rem, 5.4vw, 4rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.02 !important;
  }

  body.mf-typescale.mf-typescale .mfte .te-h2.te-h2 {
    font-size: clamp(1.875rem, 3.6vw, 2.75rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.022em !important;
    line-height: 1.12 !important;
  }

  body.mf-typescale.mf-typescale .mfte .te-h3.te-h3 {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
  }

  /* Technical labelling. master.css forces Sebino on p/a/li/span with an
     unlayered !important, so the mono has to be layered to win. */
  .mfte .te-part,
  .mfte .te-label,
  .mfte .te-eyebrow,
  .mfte .te-kicker,
  .mfte .te-mono,
  .mfte .te-module__n,
  .mfte .te-readout__text,
  .mfte .te-mono-num {
    font-family: ui-monospace, 'SFMono-Regular', 'SF Mono', Menlo, Consolas,
                 'Liberation Mono', monospace !important;
  }

  /* PT Serif accents, same fight. */
  .mfte .te-deck,
  .mfte .te-serif {
    font-family: 'PT Serif', Georgia, 'Times New Roman', serif !important;
  }
}