/* ═══════════════════════════════════════════════════════════════════
   META AI SEO

   Loads on top of product-opt.css and collection-opt.css, which between them
   carry the shared mock chrome: .po-sec, .po-two, .po-copy, .po-num, .po-do,
   .mk, .pox-row, .mk-tag, .mk-note, the .flow workflow, the .co-flow4 problem
   steps, .co-tree, .co-readers and .faq. Only what is new to this page is here,
   so the seven deep dives cannot drift apart visually.

   WHAT THIS PAGE DRAWS. Fields. A search result is a username and a name, a
   profile is a name and a bio with a limit on each, a post is a first line and
   what hides behind "more". The argument is that the place a word sits decides
   what it does, so the component everything is built from is a labelled field.

   EVERY CLASS IS PREFIXED, modifiers included. The YouTube page lost an
   afternoon to a bare .stack modifier that already meant a rotating 3D card
   stack in product-opt.css, and .chip, .stat, .surf and .serp all exist bare
   somewhere in the theme. Nothing here is a bare single word.

   No avatar or tile tries to be a photograph: tonal fills and initials, which
   CSS renders cleanly at 26px and at 52px. Nothing below 10px anywhere.

   Accent: the service's own lavender (#B8A9FF in inc/services.php). It is too
   light for text on white, so --mt-ink carries the readable version.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --mt:#B8A9FF;
  --mt-soft:rgba(124,108,255,.10);
  --mt-line:rgba(124,108,255,.30);
  --mt-ink:#5A45CF;
  --mt-t1:linear-gradient(150deg,#7B68E8,#3B2F86);
  --mt-t2:linear-gradient(150deg,#4B566E,#1B2131);
  --mt-t3:linear-gradient(150deg,#8C93A6,#565D70);
  --mt-t4:linear-gradient(150deg,#6A5A44,#2A2218);
  --mt-t5:linear-gradient(150deg,#3F6A74,#17292E);
  --mt-good:#0E7A5B;
  --mt-bad:#C2453F;
}

.mt-hero .po-h1 .grad-text{display:inline;margin-top:0}
.mt-hero::before{
  background:
    radial-gradient(820px 420px at 8% -10%,rgba(124,108,255,.24),transparent 62%),
    radial-gradient(640px 400px at 96% 106%,rgba(184,169,255,.16),transparent 60%);
}

/* ══════════ SHARED SMALL PARTS ══════════ */
.mt-lab{
  display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
}
.mt-tag{background:var(--mt-soft);color:var(--mt-ink);border:1px solid var(--mt-line)}
.mt-pill{
  display:inline-block;font-size:10px;padding:2px 8px;border-radius:99px;margin-left:6px;vertical-align:middle;
  background:var(--mt-soft);color:var(--mt-ink);border:1px solid var(--mt-line);font-weight:500;
}
.mt-count{font-size:10.5px;color:var(--ink-3);margin-left:6px;font-weight:400}
.mt-sum.mono{
  display:block;margin:12px 0 0;padding-top:11px;border-top:1px dashed var(--line);
  font-size:11px;color:var(--ink-3);
}
.mt-n{
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;
  color:var(--mt-ink);background:var(--mt-soft);border:1px solid var(--mt-line);border-radius:6px;
  height:20px;min-width:26px;display:grid;place-items:center;flex:none;
}
.mt-chip{
  display:inline-flex;align-items:center;font-size:10.5px;padding:3px 9px;border-radius:99px;
  background:var(--paper-3);border:1px solid var(--line-2);color:var(--ink-3);
}
.mt-chip.mt-on{background:var(--mt-soft);border-color:var(--mt-line);color:var(--mt-ink);font-weight:600}
.mt-chip.mt-ban{background:#FFF1F4;border-color:#FFD2DE;color:var(--mt-bad);font-weight:600;text-decoration:line-through}
.mt-picked{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:11px}
.mt-picked .mt-lab{margin-right:2px}
.mt-none{color:var(--ink-3);font-style:italic}
.mt-mark{
  background:rgba(124,108,255,.16);color:var(--mt-ink);border-radius:3px;padding:0 2px;font-weight:600;
}
.mt-kw{
  display:inline-flex;align-items:center;font-size:11px;padding:3px 9px;border-radius:7px;line-height:1.3;
  background:var(--mt-soft);border:1px solid var(--mt-line);color:var(--mt-ink);font-weight:500;
}
.mt-svc-link{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-size:13px;font-weight:600;color:var(--mt-ink);
  border-bottom:1px solid var(--mt-line);padding-bottom:2px;
  transition:border-color .18s ease,gap .18s ease;
}
.mt-svc-link:hover{border-bottom-color:var(--mt-ink);gap:10px}
.mt-cite{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--mt-ink);
  text-decoration:underline;text-decoration-color:var(--mt-line);text-underline-offset:3px;white-space:nowrap;
}

/* The "more" fold. The first line is what people read before tapping, so the
   fold is drawn wherever a mock shows where that line ends. */
.mt-fold{display:block;margin:9px 0;border-bottom:1px dashed var(--line);position:relative}
.mt-fold::after{
  content:'\2026 more';position:absolute;right:0;top:-8px;
  font-size:10px;color:var(--ink-3);background:#fff;padding:0 6px;
}

/* ══════════ AVATARS AND TILES ══════════ */
.mt-av{
  display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;
  background:var(--mt-t1);color:#fff;font-size:11px;font-weight:700;letter-spacing:.02em;
  box-shadow:0 1px 2px rgba(16,20,40,.14);
}
.mt-av.mt-xs{width:28px;height:28px;font-size:10px}
.mt-av.mt-lg{width:52px;height:52px;font-size:14px}
.mt-av.mt-hash{background:#fff;color:var(--mt-ink);border:1px solid var(--mt-line);font-size:15px;font-weight:600;box-shadow:none}
.mt-av.mt-hash.mt-xs{font-size:13px}
.mt-t1{background:var(--mt-t1)}
.mt-t2{background:var(--mt-t2)}
.mt-t3{background:var(--mt-t3)}
.mt-t4{background:var(--mt-t4)}
.mt-t5{background:var(--mt-t5)}
.mt-tile{display:block;flex:none;width:38px;height:38px;border-radius:7px;box-shadow:0 1px 2px rgba(16,20,40,.14)}

/* ══════════ HERO STAGE ══════════ */
.mt-stage{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.mt-serp{
  background:#fff;border:1px solid var(--line-2);border-radius:16px;padding:12px;
  box-shadow:0 1px 2px rgba(16,20,40,.04),0 18px 40px -28px rgba(16,20,40,.4);
}
.mt-bar{
  display:flex;align-items:center;gap:9px;background:var(--paper-3);
  border-radius:11px;padding:9px 13px;color:var(--ink-3);
}
.mt-bar svg{width:13px;height:13px;flex:none}
.mt-bar span{font-size:12.5px;color:var(--ink);font-weight:500}

.mt-reads{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin:10px 2px 8px}
.mt-reads-lab{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-right:3px}
.mt-read{
  font-family:'IBM Plex Mono',monospace;font-size:10px;padding:2px 7px;border-radius:99px;
  background:#F4F5FA;border:1px solid var(--line-2);color:var(--ink-3);
}
.mt-read.mt-on{background:var(--mt-soft);border-color:var(--mt-line);color:var(--mt-ink);font-weight:600}

.mt-results{display:flex;flex-direction:column;gap:4px}
.mt-res{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:9px 10px;border-radius:11px;border:1px solid transparent;
}
.mt-res.mt-win{background:var(--mt-soft);border-color:var(--mt-line)}
.mt-res-main{display:flex;align-items:center;gap:11px;width:100%;min-width:0}
.mt-res-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.mt-user{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.3}
.mt-name{font-size:11.5px;color:var(--ink-2);line-height:1.35}
.mt-kind{
  flex:none;font-size:10px;letter-spacing:.04em;color:var(--ink-3);
  border:1px solid var(--line-2);border-radius:99px;padding:1px 7px;background:#fff;
}

/* The tags name the field that made a result match, in flow above it, never
   absolutely positioned (see the YouTube hero for why). */
.mt-field-tag{
  display:inline-flex;align-self:flex-start;white-space:nowrap;margin-bottom:7px;
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:#fff;
  background:linear-gradient(150deg,#A594FF,#6B55E0);
  border-radius:99px;padding:3px 9px;
  box-shadow:0 3px 10px rgba(91,71,209,.28);
}
.mt-stage-note{margin:9px 2px 0;font-size:10px;color:var(--ink-3)}

.mt-layers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;min-width:0}
.mt-layer{
  display:flex;flex-direction:column;padding:13px 14px;border-radius:12px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);
  border-left:2px solid var(--mt);
}
.mt-layer-lab{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--night-ink-2)}
.mt-layer p{font-size:12px;line-height:1.55;color:var(--night-ink-2);margin:7px 0 0}
.mt-layer p b{color:#fff;font-weight:600}

.mt-index{padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
.mt-index .mt-lab{color:var(--night-ink-2);margin-bottom:10px}
.mt-index-chips{display:flex;flex-wrap:wrap;gap:6px}
.mt-index-chips a{
  display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--night-ink-2);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:99px;padding:4px 11px 4px 5px;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.mt-index-chips a b{
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;color:#CFC5FF;
  background:rgba(184,169,255,.2);border-radius:99px;padding:2px 6px;
}
.mt-index-chips a:hover{background:rgba(184,169,255,.16);border-color:var(--mt-line);color:#fff}

/* ══════════ WORKFLOW EXAMPLES ══════════ */
.flow-stages .fstage{display:flex;flex-direction:column}
.fstage .fs-d{margin-bottom:11px}
.mt-eg{margin-top:auto;padding-top:11px;border-top:1px dashed var(--line-2)}
.mt-eg-lab{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
.mt-eg-row{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.mt-eg-chip,.mt-eg-kw{font-size:10.5px;padding:4px 9px;border-radius:7px;line-height:1.3}
.mt-eg-chip{background:var(--paper-3);border:1px solid var(--line-2);color:var(--ink-2)}
.mt-eg-more{font-size:10px;color:var(--ink-3)}
.mt-eg-kw{background:var(--mt-soft);border:1px solid var(--mt-line);color:var(--mt-ink);font-weight:600}
.mt-eg-type{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.04em;
  padding:3px 7px;border-radius:99px;background:#fff;border:1px solid var(--line-2);color:var(--ink-3);
}
.mt-eg-type.mt-fit{background:rgba(14,122,91,.1);border-color:rgba(14,122,91,.3);color:var(--mt-good)}
.mt-eg-type.mt-idea{background:var(--mt-soft);border-color:var(--mt-line);color:var(--mt-ink)}

/* ══════════ THE THREE SURFACES ══════════ */
.mt-surf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.mt-surf{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:17px 16px 15px;overflow:hidden;
  box-shadow:0 1px 2px rgba(16,20,40,.04),0 16px 34px -22px rgba(16,20,40,.34);
}
.mt-surf::before{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--violet),var(--mt) 62%,rgba(184,169,255,0));
}
.mt-surf-head{display:flex;align-items:center;gap:9px;margin-bottom:13px}
.mt-surf-n{
  width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;color:#fff;
  background:linear-gradient(150deg,var(--violet),#A594FF);
}
.mt-surf-head h3{font-size:14.5px;font-weight:600;letter-spacing:-.015em;color:var(--ink);margin:0}
.mt-surf-flag{margin-left:auto;flex:none;font-size:10px;letter-spacing:.04em;color:var(--mt-good);white-space:nowrap}
.mt-surf-flag::after{content:' \2713'}
.mt-surf-note{
  font-size:11.5px;line-height:1.5;color:var(--ink-3);
  margin:13px 0 0;padding-top:12px;border-top:1px dashed var(--line-2);
}
.mt-surf .mt-surf-note{margin-top:auto}

.mt-mini-bar{
  display:flex;align-items:center;gap:7px;background:var(--paper-3);border-radius:99px;
  padding:6px 11px;color:var(--ink-3);margin-bottom:9px;font-size:10.5px;
}
.mt-mini-bar svg{width:12px;height:12px;flex:none}
.mt-mini-bar span{color:var(--ink)}
.mt-mini-list{list-style:none;display:flex;flex-direction:column;gap:6px;margin:0;padding:0}
.mt-mini-list li{
  display:flex;gap:9px;align-items:center;padding:7px 9px;border-radius:10px;
  background:#F4F6FB;border:1px solid transparent;
}
.mt-mini-list li.mt-win{background:var(--mt-soft);border-color:var(--mt-line)}
.mt-mini-list b{display:block;font-size:11.5px;font-weight:600;color:var(--ink);line-height:1.3}
.mt-mini-list em{display:block;font-style:normal;font-size:10.5px;color:var(--ink-3)}

.mt-tagpage-head{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.mt-tagpage-head b{display:block;font-size:11.5px;font-weight:600;color:var(--ink)}
.mt-tagpage-head em{display:block;font-style:normal;font-size:10px;color:var(--ink-3)}
.mt-grid6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}
.mt-grid6 i{display:block;aspect-ratio:1/1;border-radius:4px;position:relative}
.mt-grid6 i.mt-yours{outline:2px solid var(--mt-ink);outline-offset:-2px;display:grid;place-items:end start;padding:5px}
.mt-grid6 i.mt-yours b{
  font-size:10px;font-weight:600;color:#fff;background:var(--mt-ink);border-radius:4px;padding:1px 5px;
}

.mt-g{padding:11px 12px;border-radius:12px;background:#F7F8FC;border:1px solid var(--line-2)}
.mt-g-url{display:block;font-size:10px;color:var(--ink-3)}
.mt-g-title{display:block;font-size:13px;font-weight:500;color:#2A3FB3;line-height:1.35;margin:3px 0 10px}
.mt-g-lab{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.mt-g-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.mt-g-list li{display:flex;align-items:baseline;gap:7px;font-size:11px;color:var(--ink-2);line-height:1.4}
.mt-g-list li::before{content:'\2713';color:var(--mt-good);font-weight:700;font-size:10px;flex:none}

/* ══════════ DEMAND ══════════ */
.mt-demand{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:940px;margin:0 auto}
.mt-stat{
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:clamp(20px,2.6vw,28px);box-shadow:var(--shadow-sm);
}
.mt-stat b{
  display:block;font-family:Unbounded,Inter,sans-serif;font-size:clamp(40px,5vw,58px);
  font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--mt-ink);margin-bottom:14px;
}
.mt-stat p{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0 0 12px}
.mt-stat cite{font-style:normal;font-size:12px;color:var(--ink-3);font-family:'IBM Plex Mono',monospace}
.mt-stat cite a{color:var(--mt-ink);text-decoration:underline;text-decoration-color:var(--mt-line);text-underline-offset:3px}
.mt-stat cite a:hover{text-decoration-color:var(--mt-ink)}
.mt-stat-note{grid-column:1 / -1;background:var(--night-2);border-radius:var(--r-lg);padding:clamp(18px,2.4vw,24px)}
.mt-stat-note .mt-lab{color:var(--night-ink-2);margin-bottom:9px}
.mt-stat-note p{font-size:15px;line-height:1.6;color:#fff;margin:0}

/* ══════════ THE PROBLEM ══════════ */
.mt-q-vis{padding:12px 14px}
.mt-q-vis .mt-mini-bar{margin:0;background:#fff;border:1px solid var(--line-2)}
.mt-fields-vis{display:flex;flex-wrap:wrap;gap:4px;padding:12px 14px}
.mt-empty-vis{display:flex;flex-direction:column;gap:2px;padding:11px 14px}
.mt-empty-vis b{font-size:11.5px;font-weight:600;color:var(--ink)}
.mt-empty-vis span{font-size:11px;color:var(--ink-2)}
.mt-empty-vis em{font-style:normal;font-size:11px;color:var(--ink-3)}

/* ══════════ 01 · THE BOUNDARY ══════════ */
.mt-tree .l1{display:flex;align-items:center;flex-wrap:wrap}
.mt-tree .l2{display:flex;align-items:baseline;flex-wrap:wrap}
.mt-dns{margin-bottom:4px}
.mt-dns .mt-lab{margin-bottom:7px;color:var(--mt-bad)}
.mt-dns-pills{display:flex;flex-wrap:wrap;gap:5px}
.mt-dns-pill{
  font-size:11px;padding:3px 9px;border-radius:99px;
  background:#FFF1F4;border:1px solid #FFD2DE;color:var(--mt-bad);
}
.mt-gate{list-style:none;display:flex;flex-direction:column;gap:9px;margin:12px 0 0;padding:0}
.mt-gate li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:2px 9px;align-items:start}
.mt-gate li i{width:14px;height:14px;border-radius:50%;margin-top:2px;display:block}
.mt-gate li.mt-ok i{background:#E6F7F0;border:1px solid #C6EBDC;box-shadow:inset 0 0 0 3px var(--mt-good)}
.mt-gate li.mt-no i{background:#FFE9EF;border:1px solid #FFD2DE;box-shadow:inset 0 0 0 3px var(--mt-bad)}
.mt-gate li span{display:block;font-size:12.5px;color:var(--ink);overflow-wrap:anywhere}
.mt-gate li em{display:block;font-style:normal;font-size:11.5px;color:var(--ink-3);grid-column:2}
.mt-gate li.mt-ok em{color:var(--mt-good)}
.mt-gate li.mt-no span{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--mt-bad)}
.mt-gate li.mt-no em{color:var(--mt-bad)}

/* Paragraph rules inside a mock carry a .mk prefix on purpose. product-opt.css
   sets .pox-row p{font-size:14px;line-height:1.6}, which outranks a single
   class, so without the prefix every caption line below rendered at 14px. */
/* ══════════ 02 · THE PROFILE KIT ══════════ */
.mt-prof{display:grid;grid-template-columns:52px minmax(0,1fr);gap:13px;align-items:start}
.mt-flds{display:flex;flex-direction:column;gap:10px;min-width:0}
.mt-fld{display:grid;grid-template-columns:64px minmax(0,1fr);gap:4px 10px;align-items:baseline}
.mt-fld-lab{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.mt-fld-v{font-size:12.5px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.mt-fld-v.mono{font-size:12px}
.mt-opt{font-style:normal;font-size:10px;color:var(--ink-3);margin-left:6px;font-family:Inter,sans-serif}
.mt-cnt{grid-column:2;display:inline-flex;align-items:center;gap:7px;font-size:10px;color:var(--ink-3)}
.mt-cnt u{display:block;width:56px;height:4px;border-radius:99px;background:var(--paper-3);overflow:hidden;text-decoration:none}
.mt-cnt i{display:block;height:100%;width:var(--w);border-radius:99px;background:var(--mt-good)}
.pox-row.bad .mt-cnt i{background:#AEB5C4}
.mk .mt-verdict{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:12px 0 0;font-size:12.5px;color:var(--ink-3)}
.mt-verdict .mt-lab{display:inline}
.mt-verdict.mt-bad{color:var(--mt-bad)}

/* ══════════ 03 · KEYWORDS ══════════ */
.mt-kws{display:flex;flex-wrap:wrap;gap:6px}
.mt-post{background:#fff;border:1px solid var(--line-2);border-radius:12px;overflow:hidden}
.mt-post-cap,.mt-post-cmt{font-size:12.5px;line-height:1.6;color:var(--ink-2);padding:11px 13px}
.mt-post-cap b,.mt-post-cmt b{color:var(--ink);font-weight:600;margin-right:4px}
.mt-post-cmt{background:#F6F7FB;border-top:1px solid var(--line-2);font-size:12px}
.mt-post-cmt .mono{color:var(--ink-3);font-size:11px}
.mt-post-tags{display:block;margin-top:5px;font-size:11px;color:var(--mt-ink)}
.mk-note a{color:var(--mt-ink);text-decoration:underline;text-decoration-color:var(--mt-line);text-underline-offset:3px}

/* ══════════ 04 · THE POST KIT ══════════ */
.mt-kit-head{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin-bottom:12px}
.mt-kit-head b{font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.mt-kit{display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px 12px;margin:0;align-items:baseline}
.mt-kit dt{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.mt-kit dd{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.mt-kit .mt-fold{margin:9px 0 2px}
.mt-fitnote{font-size:10px;color:var(--mt-good);margin-left:6px}
.mt-jump{font-size:12px;font-weight:600;color:var(--mt-ink);border-bottom:1px solid var(--mt-line)}
.mt-jump:hover{border-bottom-color:var(--mt-ink)}

/* ══════════ 05 · THE HASHTAG MIX ══════════ */
.mt-mix{display:flex;flex-direction:column}
.mt-mix-row{
  display:grid;grid-template-columns:118px minmax(0,1fr);gap:8px 12px;align-items:start;
  padding:10px 0;border-bottom:1px solid var(--line-2);
}
.mt-mix-row:first-child{padding-top:0}
.mt-mix-row:last-child{border-bottom:0;padding-bottom:0}
.mt-mix-lab b{display:block;font-size:12.5px;font-weight:600;color:var(--ink)}
.mt-mix-lab em{display:block;font-style:normal;font-size:10.5px;color:var(--ink-3);margin-top:1px}
.mt-mix-tags{display:flex;flex-wrap:wrap;gap:5px;min-width:0}
.mt-htag{
  font-size:11px;padding:3px 8px;border-radius:7px;overflow-wrap:anywhere;
  background:var(--mt-soft);border:1px solid var(--mt-line);color:var(--mt-ink);
}
.mt-mix-empty .mt-mix-tags{font-size:12px}

/* ══════════ 06 · SEVEN FORMATS ══════════ */
.mt-fmt{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.mt-fmt li{
  display:grid;grid-template-columns:132px minmax(0,1fr) auto;gap:6px 12px;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--line-2);
}
.mt-fmt li:first-child{padding-top:0}
.mt-fmt li:last-child{border-bottom:0}
.mt-fmt-lab b{display:block;font-size:12px;font-weight:600;color:var(--ink);line-height:1.3}
.mt-fmt-lab em{display:block;font-style:normal;font-size:10px;color:var(--ink-3);margin-top:1px}
.mt-fmt-t{font-size:12.5px;color:var(--ink-2);line-height:1.4;min-width:0}
.mt-badge{
  font-size:10px;letter-spacing:.04em;padding:2px 7px;border-radius:99px;
  background:#F4F5FA;border:1px solid var(--line-2);color:var(--ink-3);
}
.mt-badge.mt-real{background:rgba(14,122,91,.1);border-color:rgba(14,122,91,.3);color:var(--mt-good);font-weight:600}

/* ══════════ 07 · THE POST WRITER ══════════ */
.mt-in{background:#F7F8FC;border:1px dashed var(--line);border-radius:12px;padding:11px 13px}
.mt-in .mt-lab{margin-bottom:5px}
.mk .mt-in p{font-size:12.5px;line-height:1.55;color:var(--ink);margin:0}
.mt-cap{background:#fff;border:1px solid var(--line-2);border-radius:12px;padding:12px 13px}
.mt-cap-kw{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.mt-cap-kw .mt-lab{display:inline}
.mk .mt-cap-first{font-size:13px;line-height:1.5;color:var(--ink);font-weight:500;margin:0}
.mk .mt-cap-rest{font-size:12px;line-height:1.55;color:var(--ink-3);margin:0}
.mk .mt-cap-alt{
  font-size:11.5px;line-height:1.5;color:var(--ink-2);margin:10px 0 0;padding-top:9px;
  border-top:1px solid var(--line-2);
}
.mt-cap-alt .mt-lab{display:inline;margin-right:6px}
.mk .mt-dropped{
  font-size:13px;line-height:1.5;color:var(--ink-3);margin:0;
  text-decoration:line-through;text-decoration-color:var(--mt-bad);
}

/* ══════════ 08 · COVERAGE ══════════ */
.mt-cov{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.mt-cov li{
  display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:5px 10px;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--line-2);
}
.mt-cov li:first-child{padding-top:0}
.mt-cov li:last-child{border-bottom:0}
.mt-cov li i{width:14px;height:14px;border-radius:4px;display:block}
.mt-cov li.mt-done i{background:var(--mt-good);box-shadow:inset 0 0 0 3px #E6F7F0}
.mt-cov li.mt-open i{background:#fff;border:1.5px solid #C9D0E0}
.mt-cov-t{font-size:12.5px;color:var(--ink);line-height:1.4;min-width:0}
.mt-cov li.mt-open .mt-cov-t{color:var(--ink-3)}
.mt-cov-links{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.mt-ln{font-size:10px;padding:2px 7px;border-radius:99px;white-space:nowrap}
.mt-ln-ig{background:var(--mt-soft);border:1px solid var(--mt-line);color:var(--mt-ink)}
.mt-ln-fb{background:rgba(42,63,179,.08);border:1px solid rgba(42,63,179,.26);color:#2A3FB3}
.mt-ln-none{background:#F4F5FA;border:1px dashed var(--line);color:var(--ink-3)}
.mt-cov-foot{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.mk .mt-cov-foot p{font-size:12.5px;line-height:1.55;color:var(--ink-3);margin:6px 0 0}

/* ══════════ THE CLOSING TABLE ══════════ */
.mt-shift{
  max-width:900px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(18px,2.6vw,28px);box-shadow:var(--shadow-sm);
}
.mt-shift-same{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:13px 15px;border-radius:13px;margin-bottom:22px;
  background:linear-gradient(120deg,rgba(124,108,255,.08),rgba(184,169,255,.12));
  border:1px solid var(--mt-line);
}
.mt-shift-same .mt-lab{color:var(--mt-ink);margin-right:3px}
.mt-shift-same b{
  font-size:12.5px;font-weight:600;color:var(--ink);background:#fff;
  border:1px solid var(--mt-line);border-radius:99px;padding:5px 12px;
}
.mt-shift-head,.mt-shift-row{
  display:grid;grid-template-columns:30px minmax(0,1fr) minmax(0,178px) 18px minmax(0,178px);
  gap:12px;align-items:center;
}
.mt-shift-head{padding-bottom:11px;border-bottom:1px solid var(--line-2)}
.mt-shift-head span{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.mt-shift-head .mt-h-c{text-align:center}
.mt-shift-row{
  padding:11px 0;border-bottom:1px solid var(--line-2);color:inherit;
  border-radius:10px;transition:background .18s ease;
}
.mt-shift-row:last-of-type{border-bottom:0}
a.mt-shift-row:hover{background:rgba(124,108,255,.055)}
a.mt-shift-row:hover .mt-shift-what{color:var(--mt-ink)}
.mt-shift-row .mt-n{margin-left:4px}
.mt-shift-what{font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.35;transition:color .18s ease}
.mt-shift-b,.mt-shift-a{text-align:center;font-size:12px;line-height:1.4;border-radius:9px;padding:7px 10px}
.mt-shift-b{color:var(--ink-3);background:#F6F7FB;border:1px dashed var(--line-2)}
.mt-shift-a{color:var(--mt-ink);background:var(--mt-soft);border:1px solid var(--mt-line);font-weight:600}
.mt-shift-arrow{text-align:center;color:var(--violet);font-size:14px;line-height:1}
.mt-shift-note{
  font-size:12.5px;line-height:1.6;color:var(--ink-3);
  margin:18px 0 0;padding-top:15px;border-top:1px dashed var(--line);
}

/* ══════════ RESPONSIVE ══════════ */
@media (max-width:1100px){
  .mt-surf-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .mt-surf .mt-surf-note{margin-top:12px}
}
@media (max-width:1000px){
  .mt-layers{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .mt-demand{grid-template-columns:1fr}
}
@media (max-width:820px){
  .mt-shift-head{display:none}
  .mt-shift-row{grid-template-columns:30px minmax(0,1fr) 16px minmax(0,1fr);gap:9px 10px;padding:13px 0}
  .mt-shift-what{grid-column:2 / -1}
  .mt-shift-b{grid-column:2;text-align:left}
  .mt-shift-arrow{grid-column:3;font-size:12px}
  .mt-shift-a{grid-column:4;text-align:left}
}
@media (max-width:700px){
  .mt-layers{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .mt-prof{grid-template-columns:minmax(0,1fr);gap:10px}
  .mt-av.mt-lg{width:40px;height:40px;font-size:12px}
  .mt-fld{grid-template-columns:minmax(0,1fr)}
  .mt-cnt{grid-column:1}
  .mt-kit{grid-template-columns:minmax(0,1fr);gap:3px}
  .mt-kit dd{margin-bottom:9px}
  .mt-mix-row{grid-template-columns:minmax(0,1fr);gap:6px}
  .mt-fmt li{grid-template-columns:minmax(0,1fr) auto}
  .mt-fmt-t{grid-column:1 / -1;grid-row:2}
  .mt-fmt .mt-badge{grid-column:2;grid-row:1;justify-self:end}
  .mt-cov li{grid-template-columns:16px minmax(0,1fr)}
  .mt-cov-links{grid-column:2;justify-content:flex-start}
  .mt-kind{display:none}
}
@media (max-width:520px){
  .mt-shift-same{gap:7px;padding:11px 12px}
  .mt-shift-same b{font-size:11.5px;padding:4px 10px}
  .mt-shift-row{grid-template-columns:26px minmax(0,1fr) 14px minmax(0,1fr);gap:8px}
  .mt-shift-what{font-size:12.5px}
  .mt-shift-b,.mt-shift-a{font-size:10.5px;padding:6px 7px}
}