/* Mobile edition — separate screens, single-column layout.
   Desktop pages keep using styles.css. */

:root {
  --paper: #f3efe4;
  --paper-2: #fffdf6;
  --ink: #121212;
  --muted: #5b574e;
  --blue: #1f3bff;
  --tomato: #f0522d;
  --butter: #f4c84a;
  --sage: #b9c8a9;
  --white: #fff;
  --paper-3: #e7e3d7;
  --paper-4: #efe7d9;
  --green: #55663f;
  --wechat: #4f9b55;
  --line: rgba(18, 18, 18, .18);
  --line-strong: rgba(18, 18, 18, .5);
  --sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "Space Grotesk", "Noto Sans SC", monospace;
  --pad: 20px;
  --bar-h: 58px;
  --tab-h: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  padding-top: calc(var(--bar-h) + env(safe-area-inset-top));
  padding-bottom: calc(var(--tab-h) + 4px + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.menu-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
p, h1, h2, h3, h4, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--blue); color: var(--white); }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.m-skip {
  position: fixed;
  top: -80px;
  left: 12px;
  z-index: 200;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
}
.m-skip:focus { top: 12px; }

/* ---------- app bar ---------- */

.m-bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 70;
  height: calc(var(--bar-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  background: rgba(243, 239, 228, .96);
  border-bottom: 2px solid var(--ink);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.m-bar-inner {
  width: 100%;
  max-width: 680px;
  height: var(--bar-h);
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.m-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.m-brand-mark {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 2px solid var(--ink);
  background: var(--tomato);
  color: var(--paper);
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.m-brand-text { min-width: 0; }
.m-brand-text strong {
  display: block;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.m-brand-text small {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1;
  letter-spacing: .16em;
  color: var(--muted);
}

.m-menu-btn {
  min-width: 78px;
  height: 38px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  border: 2px solid var(--ink);
  background: var(--paper);
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  cursor: pointer;
}
.m-menu-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.m-menu-btn i {
  position: relative;
  width: 14px;
  height: 10px;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}
.m-menu-btn i::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
}

/* ---------- menu ---------- */

.m-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: calc(env(safe-area-inset-top) + 18px) var(--pad) calc(env(safe-area-inset-bottom) + 24px);
  background: var(--paper);
}
.m-menu[hidden] { display: none; }

.m-menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
}
.m-menu-top span {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .16em;
  color: var(--muted);
}
.m-menu-close {
  min-height: 36px;
  padding: 0 10px;
  border: 2px solid var(--ink);
  background: var(--paper);
  font-size: 12px;
  cursor: pointer;
}

.m-menu-list {
  margin-top: 8px;
  border-top: 1px solid var(--line);
}
.m-menu-list a {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.m-menu-list a span {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--muted);
  letter-spacing: .08em;
}
.m-menu-list strong {
  font-size: 19px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -.03em;
}
.m-menu-list em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 8px;
  letter-spacing: .12em;
  color: var(--muted);
}
.m-menu-list a[aria-current="page"] strong { color: var(--blue); }
.m-menu-list a[aria-current="page"] span { color: var(--blue); }

.m-menu-foot {
  margin-top: auto;
  padding-top: 22px;
  display: grid;
  gap: 12px;
  font-size: 12px;
}
.m-menu-contact {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.m-menu-contact span {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--muted);
}
.m-menu-contact strong,
.m-menu-contact a { font-weight: 500; overflow-wrap: anywhere; }
.m-menu-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .08em;
  color: var(--muted);
}
.m-menu-links a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- bottom tab bar ---------- */

.m-tabbar {
  position: fixed;
  inset: auto 0 0;
  z-index: 70;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--paper-2);
  border-top: 2px solid var(--ink);
}
.m-tabbar-inner {
  width: 100%;
  max-width: 680px;
  height: var(--tab-h);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.m-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1;
  letter-spacing: .02em;
}
.m-tab svg { width: 19px; height: 19px; }
.m-tab[aria-current="page"] { color: var(--blue); }
.m-tab[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 20%;
  right: 20%;
  height: 3px;
  background: var(--blue);
}
.m-tab:active { background: rgba(31, 59, 255, .06); }

/* ---------- base layout ---------- */

.m-main {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  animation: m-page-in .32s var(--ease) both;
}
@keyframes m-page-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.m-hero,
.m-page-head {
  position: relative;
  overflow: hidden;
  padding: 32px var(--pad) 30px;
  border-bottom: 2px solid var(--ink);
}
.m-hero::after {
  content: "";
  position: absolute;
  right: -58px;
  bottom: -64px;
  width: 190px;
  height: 190px;
  border: 2px solid rgba(18, 18, 18, .12);
  border-radius: 50%;
  pointer-events: none;
}
.m-page-head { padding-top: 26px; padding-bottom: 24px; }
.m-page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(18, 18, 18, .045) 1px, transparent 1px);
  background-size: 100% 28px;
  pointer-events: none;
}
.m-page-head > * { position: relative; z-index: 1; }

.m-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.m-kicker::before {
  content: "";
  width: 14px;
  height: 2px;
  flex: 0 0 auto;
  background: currentColor;
}
.m-kicker b { font-weight: 500; color: var(--blue); }

.m-display {
  margin: 15px 0 0;
  font-size: clamp(40px, 12.4vw, 58px);
  line-height: .98;
  font-weight: 700;
  letter-spacing: -.06em;
}
.m-page-head .m-display {
  margin-top: 12px;
  font-size: clamp(32px, 9.6vw, 44px);
  line-height: 1.02;
}
.m-display .m-blue { color: var(--blue); }
.m-display .m-stroke {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
  text-stroke: 1.5px var(--ink);
}
.m-display .m-butter {
  display: inline-block;
  padding: 0 6px 2px;
  background: var(--butter);
  color: var(--ink);
}

.m-lead {
  max-width: 34em;
  margin-top: 18px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.78;
}
.m-page-head .m-lead { margin-top: 14px; font-size: 13px; }

.m-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .08em;
  color: var(--muted);
}
.m-hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
.m-hero-meta span::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--blue);
}

.m-actions {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.m-btn {
  width: 100%;
  min-height: 52px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 2px solid var(--ink);
  background: var(--paper-2);
  box-shadow: 4px 4px 0 var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.m-btn span:last-child {
  font-family: var(--mono);
  font-size: 13px;
}
.m-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.m-btn-primary { background: var(--blue); color: var(--white); }
.m-btn-ink { background: var(--ink); color: var(--paper); }
.m-btn-butter { background: var(--butter); color: var(--ink); }
.m-btn-line { background: transparent; }

.m-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 10.5px;
  color: var(--muted);
}
.m-proof span { display: inline-flex; align-items: center; gap: 6px; }
.m-proof span::before {
  content: "";
  width: 5px;
  height: 5px;
  border: 1px solid var(--ink);
  background: var(--butter);
}

.m-section {
  padding: 28px var(--pad);
  border-bottom: 2px solid var(--ink);
}
.m-section-alt { background: var(--paper-2); }
.m-section-butter { background: var(--butter); }
.m-section-blue { background: var(--blue); color: var(--white); }
.m-section-ink { background: var(--ink); color: var(--paper); }
.m-section-ink .m-kicker,
.m-section-blue .m-kicker { color: rgba(255, 255, 255, .66); }
.m-section-ink .m-lead,
.m-section-blue .m-lead { color: rgba(255, 255, 255, .72); }
.m-section-ink .m-proof,
.m-section-blue .m-proof { border-color: rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .66); }
.m-section-ink .m-proof span::before { border-color: var(--paper); }
.m-section-blue .m-proof span::before { border-color: var(--white); }

.m-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.m-section-head h2 {
  margin-top: 8px;
  font-size: clamp(26px, 8.2vw, 34px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -.05em;
}
.m-section-head .m-count {
  flex: 0 0 auto;
  padding-bottom: 4px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--muted);
}
.m-section-ink .m-count,
.m-section-blue .m-count { color: rgba(255, 255, 255, .6); }

.m-section-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  font-size: 12px;
  font-weight: 500;
}
.m-section-link span { font-family: var(--mono); font-size: 11px; }

.m-note {
  margin-top: 16px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.65;
}
.m-section-ink .m-note,
.m-section-blue .m-note { color: rgba(255, 255, 255, .6); }

.m-card {
  padding: 16px;
  border: 2px solid var(--ink);
  background: var(--paper-2);
  box-shadow: 4px 4px 0 var(--ink);
}
.m-card + .m-card { margin-top: 14px; }
.m-card h3 {
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -.03em;
}
.m-card p {
  margin-top: 7px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.7;
}
.m-card .m-case-link { margin-top: 13px; }
.m-card-butter { background: var(--butter); }
.m-card-ink { background: var(--ink); color: var(--paper); }
.m-card-ink p { color: rgba(255, 255, 255, .65); }
.m-card-ink .m-case-link { border-color: rgba(255, 255, 255, .25); }
.m-card-ink .m-case-link span { color: var(--butter); }

/* ---------- service dossiers ---------- */

.m-dossier {
  --dossier-accent: var(--ink);
  --dossier-on: var(--paper);
  position: relative;
  border: 2px solid var(--ink);
  background: var(--paper-2);
  box-shadow: 4px 4px 0 var(--ink);
  scroll-margin-top: calc(var(--bar-h) + 16px);
}
.m-dossier + .m-dossier { margin-top: 14px; }
.m-dossier-blue { --dossier-accent: var(--blue); --dossier-on: var(--white); }
.m-dossier-butter { --dossier-accent: var(--butter); --dossier-on: var(--ink); }
.m-dossier-tomato { --dossier-accent: var(--tomato); --dossier-on: var(--white); }
.m-dossier-sage { --dossier-accent: var(--sage); --dossier-on: var(--ink); }
.m-dossier-plain { --dossier-accent: var(--paper-3); --dossier-on: var(--ink); }
.m-dossier-ink {
  --dossier-accent: var(--butter);
  --dossier-on: var(--ink);
}
.m-dossier summary {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  gap: 12px;
  align-items: center;
  min-height: 100px;
  padding: 12px 14px 12px 0;
  cursor: pointer;
  list-style: none;
}
.m-dossier summary::-webkit-details-marker { display: none; }
.m-dossier summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.m-dossier-no {
  align-self: stretch;
  display: grid;
  place-items: center;
  border-right: 2px solid var(--ink);
  background: var(--dossier-accent);
  color: var(--dossier-on);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .04em;
}
.m-dossier-head {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.m-dossier-head .m-kicker { color: var(--muted); font-size: 8px; }
.m-dossier-head strong {
  font-size: 21px;
  line-height: 1.12;
  letter-spacing: -.04em;
}
.m-dossier-head small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.m-dossier-plus {
  position: relative;
  width: 16px;
  height: 16px;
  justify-self: end;
}
.m-dossier-plus::before,
.m-dossier-plus::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform .2s var(--ease);
}
.m-dossier-plus::before { top: 7px; left: 0; right: 0; height: 2px; }
.m-dossier-plus::after { top: 0; bottom: 0; left: 7px; width: 2px; }
.m-dossier[open] .m-dossier-plus::after { transform: scaleY(0); }
.m-dossier[open] summary { border-bottom: 1px solid var(--line); }
.m-dossier-ink summary { background: var(--ink); color: var(--paper); }
.m-dossier-ink .m-dossier-head .m-kicker,
.m-dossier-ink .m-dossier-head small { color: rgba(255, 255, 255, .62); }
.m-dossier-ink .m-dossier-no { border-right-color: var(--paper); }
.m-dossier-body { padding: 16px 14px 17px; }
.m-dossier-lead {
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.75;
}
.m-dossier-facts {
  margin-top: 15px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 2px solid var(--ink);
  border-left: 2px solid var(--ink);
}
.m-dossier-facts div {
  min-width: 0;
  padding: 9px 10px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.m-dossier-facts div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.m-dossier-facts span {
  display: block;
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: .08em;
  color: var(--muted);
}
.m-dossier-facts strong {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.5;
  font-weight: 600;
}
.m-dossier-body h3 {
  margin-top: 20px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.m-dossier-list {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}
.m-dossier-list li {
  position: relative;
  padding-left: 17px;
  font-size: 12px;
  line-height: 1.65;
}
.m-dossier-list li::before {
  content: "↳";
  position: absolute;
  left: 0;
  color: var(--dossier-accent);
  font-family: var(--mono);
  font-size: 11px;
}
.m-dossier-boundary {
  margin-top: 16px;
  padding: 11px 12px;
  border: 1px dashed var(--line-strong);
  background: var(--paper);
}
.m-dossier-boundary span {
  display: block;
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: .08em;
  color: var(--muted);
}
.m-dossier-boundary p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.65;
}
.m-dossier-actions {
  margin-top: 16px;
  display: grid;
  gap: 8px;
}
.m-dossier-actions .m-btn { width: 100%; }

/* ---------- industry dossiers ---------- */

.m-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 18px 0 16px;
}
.m-filter-chip {
  min-height: 33px;
  padding: 0 9px;
  border: 1.5px solid var(--ink);
  background: var(--paper-2);
  font-size: 10.5px;
  line-height: 1;
  cursor: pointer;
}
.m-filter-chip span {
  font-family: var(--mono);
  font-size: 8px;
  color: var(--muted);
}
.m-filter-chip[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}
.m-filter-chip[aria-pressed="true"] span { color: var(--butter); }

.m-industry {
  --industry-accent: var(--blue);
  border: 2px solid var(--ink);
  background: var(--paper-2);
  box-shadow: 4px 4px 0 var(--ink);
  scroll-margin-top: calc(var(--bar-h) + 16px);
}
.m-industry + .m-industry { margin-top: 14px; }
.m-industry[hidden] { display: none; }
.m-industry-blue { --industry-accent: var(--blue); }
.m-industry-butter { --industry-accent: var(--butter); }
.m-industry-tomato { --industry-accent: var(--tomato); }
.m-industry-sage { --industry-accent: var(--sage); }
.m-industry-plain { --industry-accent: var(--paper-3); }
.m-industry-ink { --industry-accent: var(--ink); }
.m-industry summary {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 18px;
  gap: 12px;
  align-items: center;
  min-height: 96px;
  padding: 12px 14px 12px 0;
  cursor: pointer;
  list-style: none;
}
.m-industry summary::-webkit-details-marker { display: none; }
.m-industry summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.m-industry-no {
  align-self: stretch;
  display: grid;
  place-items: center;
  border-right: 2px solid var(--ink);
  background: var(--industry-accent);
  color: var(--white);
  font-family: var(--mono);
  font-size: 13px;
}
.m-industry-butter .m-industry-no,
.m-industry-sage .m-industry-no,
.m-industry-plain .m-industry-no { color: var(--ink); }
.m-industry-ink .m-industry-no { color: var(--butter); }
.m-industry-head {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.m-industry-head .m-kicker { color: var(--muted); font-size: 8px; }
.m-industry-head strong {
  font-size: 21px;
  line-height: 1.12;
  letter-spacing: -.04em;
}
.m-industry-head small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.m-industry[open] summary { border-bottom: 1px solid var(--line); }
.m-industry-body { padding: 16px 14px 17px; }
.m-industry-lead {
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.75;
}
.m-industry-facts {
  margin-top: 15px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 2px solid var(--ink);
  border-left: 2px solid var(--ink);
}
.m-industry-facts div {
  min-width: 0;
  padding: 9px 10px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.m-industry-facts span,
.m-industry-cols span,
.m-industry-notes span {
  display: block;
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: .08em;
  color: var(--muted);
}
.m-industry-facts strong {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.5;
  font-weight: 600;
}
.m-industry-cols {
  margin-top: 16px;
  display: grid;
  gap: 14px;
}
.m-industry-cols > div,
.m-industry-notes {
  padding-top: 10px;
  border-top: 1px solid var(--line-strong);
}
.m-industry-cols ul,
.m-industry-notes ul {
  margin-top: 7px;
  display: grid;
  gap: 6px;
}
.m-industry-cols li,
.m-industry-notes li {
  position: relative;
  padding-left: 15px;
  font-size: 11.5px;
  line-height: 1.6;
}
.m-industry-cols li::before,
.m-industry-notes li::before {
  content: "↳";
  position: absolute;
  left: 0;
  color: var(--industry-accent);
  font-family: var(--mono);
  font-size: 10px;
}
.m-industry-notes { margin-top: 16px; }
.m-industry-notes span { color: var(--tomato); }
.m-industry-actions {
  margin-top: 16px;
  display: grid;
  gap: 8px;
}
.m-industry-actions .m-btn { width: 100%; }
.m-industry-service {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  font-size: 10.5px;
  color: var(--muted);
}
.m-industry-service span { font-family: var(--mono); }

/* ---------- scope builder ---------- */

.m-scope-grid {
  margin-top: 18px;
  display: grid;
  gap: 18px;
}
.m-scope-group {
  padding-top: 12px;
  border-top: 2px solid var(--ink);
}
.m-scope-group > p {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}
.m-scope-group > p span {
  font-size: 12px;
  font-weight: 600;
}
.m-scope-group > p em {
  font-family: var(--mono);
  font-size: 8px;
  font-style: normal;
  letter-spacing: .08em;
  color: var(--muted);
}
.m-scope-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.m-scope-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 5px 8px;
  border: 1px solid var(--line-strong);
  background: var(--paper-2);
  font-size: 10.5px;
  line-height: 1.35;
  cursor: pointer;
}
.m-scope-option input {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--ink);
}
.m-scope-option:has(input:checked) {
  border-color: var(--ink);
  background: var(--butter);
}
.m-scope-out {
  margin-top: 18px;
  padding: 14px;
  border: 2px solid var(--ink);
  background: var(--paper-3);
  box-shadow: 5px 5px 0 var(--ink);
}
.m-scope-count {
  margin-top: 8px;
  font-size: 12px;
}
.m-scope-count strong {
  font-family: var(--mono);
  font-size: 24px;
  line-height: 1;
}
.m-scope-tier {
  margin-top: 8px;
  font-size: 27px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -.04em;
}
.m-scope-reason,
.m-scope-phase {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.65;
  color: var(--muted);
}
.m-scope-phase {
  padding-top: 8px;
  border-top: 1px dashed var(--line-strong);
  color: var(--ink);
}
.m-scope-out .m-actions { margin-top: 14px; }
.m-scope-out .m-note { margin-top: 12px; }
.m-brief-buttons { display: flex; gap: 6px; }

.m-btn-light {
  background: transparent;
  color: var(--paper);
  border-color: var(--paper);
  box-shadow: 4px 4px 0 var(--paper);
}

/* ---------- home quick grid ---------- */

.m-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.m-quick {
  position: relative;
  min-height: 126px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--ink);
  background: var(--paper-2);
  box-shadow: 3px 3px 0 var(--ink);
}
.m-quick:nth-child(2) { background: var(--butter); }
.m-quick:nth-child(3) { background: var(--ink); color: var(--paper); }
.m-quick:nth-child(4) { background: var(--paper-3); }
.m-quick > span {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .1em;
  color: var(--muted);
}
.m-quick:nth-child(3) > span { color: rgba(255, 255, 255, .55); }
.m-quick strong {
  margin-top: auto;
  font-size: 17px;
  line-height: 1.16;
  letter-spacing: -.04em;
}
.m-quick em {
  margin-top: 4px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 7.5px;
  letter-spacing: .08em;
  color: var(--muted);
}
.m-quick:nth-child(3) em { color: rgba(255, 255, 255, .55); }
.m-quick i {
  position: absolute;
  top: 9px;
  right: 10px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 12px;
}

/* ---------- case cards ---------- */

.m-case {
  border: 2px solid var(--ink);
  background: var(--paper-2);
  box-shadow: 4px 4px 0 var(--ink);
}
.m-case + .m-case { margin-top: 14px; }
.m-case-top {
  padding: 11px 14px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .1em;
  color: var(--muted);
}
.m-case-body { padding: 15px 14px 16px; }
.m-case-body h3 {
  font-size: 19px;
  line-height: 1.22;
  letter-spacing: -.035em;
}
.m-case-body p {
  margin-top: 7px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.68;
}
.m-case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.m-case-tags span {
  padding: 3px 6px;
  border: 1px solid var(--line-strong);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .04em;
}
.m-case-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
}
.m-case-link span { font-family: var(--mono); font-size: 12px; }

.m-case-art {
  position: relative;
  min-height: 108px;
  padding: 14px;
  overflow: hidden;
  border-bottom: 2px solid var(--ink);
}
.m-case-art-steel { background: var(--ink); color: var(--paper); }
.m-case-art-campus { background: var(--blue); color: var(--white); }
.m-case-art-factory { background: var(--butter); color: var(--ink); }
.m-art-kicker {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .12em;
  opacity: .65;
}
.m-art-big {
  position: absolute;
  right: 12px;
  bottom: -14px;
  font-size: 82px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.08em;
  opacity: .18;
}
.m-art-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 42px;
  margin-top: 12px;
}
.m-art-bars i {
  width: 12px;
  height: var(--h);
  background: var(--butter);
}
.m-art-phone {
  width: 92px;
  margin: 12px auto 0;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .1);
}
.m-art-phone b { display: block; font-size: 11px; line-height: 1.3; }
.m-art-phone small {
  display: block;
  margin-top: 6px;
  padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, .3);
  font-size: 7px;
  opacity: .7;
}
.m-art-stamp {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 4px 6px;
  border: 1px solid currentColor;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .08em;
}

.m-case-detail { padding: 0; }
.m-case-detail summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  gap: 5px 12px;
  align-items: center;
  padding: 14px;
  list-style: none;
  cursor: pointer;
}
.m-case-detail summary::-webkit-details-marker { display: none; }
.m-case-index {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .1em;
  color: var(--muted);
}
.m-case-detail summary strong {
  min-width: 0;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -.03em;
}
.m-case-plus {
  position: relative;
  width: 18px;
  height: 18px;
}
.m-case-plus::before,
.m-case-plus::after {
  content: "";
  position: absolute;
  background: var(--ink);
}
.m-case-plus::before { top: 8px; left: 0; right: 0; height: 2px; }
.m-case-plus::after { top: 0; bottom: 0; left: 8px; width: 2px; transition: transform .2s var(--ease); }
.m-case-detail[open] .m-case-plus::after { transform: scaleY(0); }
.m-case-detail[open] summary { border-bottom: 1px solid var(--line); }
.m-case-detail-body { padding: 0 14px 16px; }
.m-case-detail-body .m-lead { margin-top: 12px; font-size: 12px; }
.m-case-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.m-case-meta div { min-width: 0; }
.m-case-meta dt {
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: .08em;
  color: var(--muted);
}
.m-case-meta dd { margin-top: 2px; font-size: 11px; line-height: 1.5; }
.m-case-detail-body h3 {
  margin: 16px 0 5px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .08em;
  color: var(--blue);
}
.m-case-detail-body p,
.m-case-detail-body li {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.75;
}
.m-case-detail-body li {
  position: relative;
  padding-left: 12px;
}
.m-case-detail-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .75em;
  width: 4px;
  height: 4px;
  background: var(--ink);
}
.m-case-detail-body .m-btn { margin-top: 16px; }

.m-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 5px;
  margin-top: 12px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  background: var(--paper);
}
.m-flow b {
  margin-right: 2px;
  font-family: var(--mono);
  font-size: 7px;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--muted);
}
.m-flow span {
  padding: 3px 6px;
  border: 1px solid var(--ink);
  background: var(--paper-2);
  font-size: 9.5px;
  line-height: 1.35;
  white-space: nowrap;
}
.m-flow i {
  font-family: var(--mono);
  font-style: normal;
  font-size: 9px;
  color: var(--muted);
}

/* ---------- match teaser ---------- */

.m-match-teaser {
  margin-top: 16px;
  padding: 15px;
  border: 2px solid var(--ink);
  background: var(--butter);
  box-shadow: 4px 4px 0 var(--ink);
}
.m-match-teaser h3 {
  margin-top: 8px;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -.04em;
}
.m-match-teaser p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.65;
}
.m-match-teaser .m-btn {
  margin-top: 12px;
  min-height: 46px;
  box-shadow: 3px 3px 0 var(--ink);
}

/* ---------- matcher ---------- */

.m-match {
  border: 2px solid var(--ink);
  background: var(--paper-2);
  box-shadow: 5px 5px 0 var(--ink);
}
.m-match-stage[hidden],
.m-match-question[hidden],
.m-match-result[hidden] { display: none; }

.m-match-top,
.m-match-result-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .1em;
}
.m-match-top span:last-child { color: var(--butter); }
.m-match-result-top span:last-child { color: var(--butter); }

.m-match-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  padding: 10px 14px 0;
}
.m-match-track i { height: 4px; background: var(--line); }
.m-match-track i.on { background: var(--blue); }

.m-match-question { padding: 20px 14px 16px; }
.m-match-question h2 {
  margin-top: 9px;
  font-size: clamp(28px, 8.6vw, 36px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -.05em;
}
.m-match-help {
  margin-top: 9px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.7;
}
.m-match-options {
  display: grid;
  gap: 7px;
  margin-top: 16px;
}
.m-match-options button {
  min-width: 0;
  min-height: 52px;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 18px;
  gap: 9px;
  align-items: center;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  text-align: left;
  cursor: pointer;
}
.m-match-options button[aria-pressed="true"] {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--white);
}
.m-match-letter {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1;
}
.m-match-option-copy { min-width: 0; }
.m-match-option-copy strong {
  display: block;
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 600;
}
.m-match-option-copy small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}
.m-match-options button[aria-pressed="true"] small { color: rgba(255, 255, 255, .7); }
.m-match-check {
  position: relative;
  width: 16px;
  height: 16px;
  border: 1.5px solid currentColor;
}
.m-match-options button[aria-pressed="true"] .m-match-check {
  border-color: var(--butter);
  background: var(--butter);
}
.m-match-options button[aria-pressed="true"] .m-match-check::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(42deg);
}

.m-match-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 8px;
  padding: 0 14px 14px;
}
.m-match-nav button {
  min-height: 46px;
  border: 2px solid var(--ink);
  background: var(--paper);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.m-match-nav .m-match-next {
  padding: 0 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--ink);
  color: var(--paper);
}
.m-match-next span:last-child { font-family: var(--mono); }
.m-match-back:disabled,
.m-match-next:disabled { opacity: .35; cursor: default; }

.m-match-result { --match-accent: var(--blue); }
.m-match-result[data-path="brand"] { --match-accent: var(--blue); }
.m-match-result[data-path="landing"] { --match-accent: var(--tomato); }
.m-match-result[data-path="commerce"] { --match-accent: var(--tomato); }
.m-match-result[data-path="system"] { --match-accent: var(--blue); }
.m-match-result[data-path="upgrade"] { --match-accent: var(--ink); }
.m-match-result[data-path="personal"] { --match-accent: var(--green); }

.m-match-result-body {
  padding: 18px 14px 16px;
  border-top: 6px solid var(--match-accent);
}
.m-match-result .m-kicker { color: var(--match-accent); }
.m-match-result h2 {
  margin-top: 10px;
  font-size: clamp(27px, 8.4vw, 35px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -.05em;
}
.m-match-summary {
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.75;
}
.m-match-facts {
  margin-top: 14px;
  border-top: 2px solid var(--ink);
}
.m-match-facts div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.m-match-facts span {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .08em;
  color: var(--muted);
}
.m-match-facts strong {
  min-width: 0;
  text-align: right;
  font-size: 11.5px;
  line-height: 1.5;
  font-weight: 500;
}
.m-match-alt {
  margin-top: 10px;
  padding: 8px 10px;
  border-left: 3px solid var(--match-accent);
  background: rgba(31, 59, 255, .055);
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.65;
}
.m-match-alt[hidden] { display: none; }
.m-match-result h3 {
  margin: 16px 0 5px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .08em;
  color: var(--match-accent);
}
.m-match-result h3 + p {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.75;
}
.m-match-steps li {
  position: relative;
  counter-increment: match-step;
  padding: 6px 0 6px 26px;
  border-bottom: 1px solid var(--line);
  font-size: 11.5px;
  line-height: 1.6;
}
.m-match-steps { counter-reset: match-step; }
.m-match-steps li::before {
  content: counter(match-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 8px;
  font-family: var(--mono);
  font-size: 8px;
  color: var(--muted);
}
.m-match-answers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}
.m-match-answers div {
  min-width: 0;
  padding: 8px;
  background: var(--paper);
}
.m-match-answers span {
  display: block;
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: .08em;
  color: var(--muted);
}
.m-match-answers strong {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  line-height: 1.45;
  font-weight: 500;
}
.m-match-detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
  padding: 11px 0;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
}
.m-match-detail span:last-child {
  font-family: var(--mono);
  color: var(--match-accent);
}
.m-match-actions {
  display: grid;
  gap: 7px;
  margin-top: 16px;
}
.m-match-actions button {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--ink);
  background: transparent;
  font-size: 11.5px;
  text-align: left;
  cursor: pointer;
}
.m-match-actions button.primary {
  border: 2px solid var(--ink);
  background: var(--blue);
  color: var(--white);
  font-weight: 600;
}
.m-match-actions button:active { transform: translateY(1px); }

/* ---------- audit ---------- */

.m-audit {
  border: 2px solid var(--ink);
  background: var(--paper-2);
  box-shadow: 5px 5px 0 var(--ink);
}
.m-audit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 2px solid var(--ink);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .1em;
  color: var(--muted);
}
.m-audit-count { display: flex; align-items: baseline; gap: 3px; color: var(--ink); }
.m-audit-count b { font-size: 20px; line-height: 1; }
.m-audit-count em { font-style: normal; font-size: 9px; color: var(--muted); }

.m-audit-list {
  border: 0;
  border-bottom: 2px solid var(--ink);
  margin: 0;
  padding: 0;
}
.m-audit-item {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 22px;
  gap: 8px;
  align-items: start;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.m-audit-item:last-child { border-bottom: 0; }
.m-audit-item input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.m-audit-no {
  padding-top: 1px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--muted);
}
.m-audit-item strong {
  display: block;
  font-size: 12.5px;
  line-height: 1.48;
  font-weight: 500;
}
.m-audit-item small {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--muted);
}
.m-audit-mark {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 2px solid var(--ink);
  background: var(--paper);
}
.m-audit-item input:checked ~ .m-audit-mark {
  background: var(--blue);
  box-shadow: inset 0 0 0 4px var(--paper);
}
.m-audit-item:has(input:checked) { background: rgba(31, 59, 255, .045); }
.m-audit-item:has(input:focus-visible) {
  outline: 3px solid var(--blue);
  outline-offset: -3px;
}

.m-audit-result {
  padding: 16px 14px;
  background: var(--ink);
  color: var(--paper);
  --signal: var(--butter);
}
.m-audit-result[data-level="low"] { --signal: var(--sage); }
.m-audit-result[data-level="mid"] { --signal: var(--butter); }
.m-audit-result[data-level="high"] { --signal: var(--tomato); }
.m-audit-scoreline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.m-audit-scoreline > span {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .6);
}
.m-audit-scoreline strong {
  font-family: var(--mono);
  font-size: 35px;
  line-height: 1;
  letter-spacing: -.04em;
}
.m-audit-scoreline strong em {
  font-style: normal;
  font-size: 12px;
  color: rgba(255, 255, 255, .55);
}
.m-meter {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 3px;
  margin-top: 10px;
}
.m-meter i {
  height: 5px;
  background: rgba(255, 255, 255, .16);
}
.m-meter i.on { background: var(--signal); }

.m-audit-level {
  display: inline-block;
  margin-top: 14px;
  padding: 3px 7px;
  border: 1px solid var(--signal);
  color: var(--signal);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .1em;
}
.m-audit-verdict h3 {
  margin-top: 8px;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -.035em;
}
.m-audit-verdict p {
  margin-top: 7px;
  color: rgba(255, 255, 255, .68);
  font-size: 11.5px;
  line-height: 1.68;
}
.m-audit-focus {
  padding-left: 10px;
  border-left: 2px solid var(--signal);
  color: rgba(255, 255, 255, .86) !important;
}
.m-audit-actions {
  display: grid;
  gap: 7px;
  margin-top: 14px;
}
.m-audit-actions button {
  min-height: 43px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .38);
  background: transparent;
  color: var(--paper);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.m-audit-actions button.primary {
  border-color: var(--butter);
  background: var(--butter);
  color: var(--ink);
  font-weight: 600;
}
.m-audit-actions button:disabled { opacity: .38; cursor: default; }
.m-audit-manual {
  display: block;
  margin-top: 12px;
  font-size: 10px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .7);
}
.m-audit-manual[hidden] { display: none; }
.m-audit-manual textarea {
  width: 100%;
  margin-top: 6px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .06);
  color: var(--paper);
  font: 10px/1.6 var(--mono);
  resize: vertical;
}

/* ---------- steps / process ---------- */

.m-steps { display: grid; gap: 0; }
.m-step {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  padding-bottom: 20px;
}
.m-step::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 38px;
  bottom: 0;
  width: 1px;
  background: var(--line-strong);
}
.m-step:last-child { padding-bottom: 0; }
.m-step:last-child::before { display: none; }
.m-step-no {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 2px solid var(--ink);
  background: var(--butter);
  font-family: var(--mono);
  font-size: 10px;
}
.m-step-copy h3 {
  margin-top: 5px;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -.02em;
}
.m-step-copy p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}
.m-step-copy em {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 8px;
  letter-spacing: .08em;
  color: var(--blue);
}
.m-step-grid {
  margin-top: 9px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.m-step-grid div {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--line);
  background: var(--paper);
}
.m-step-grid span {
  display: block;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .08em;
  color: var(--muted);
}
.m-step-grid strong {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  line-height: 1.45;
  font-weight: 500;
}

.m-split-note {
  margin-top: 22px;
  display: grid;
  gap: 1px;
  border: 2px solid var(--ink);
  background: var(--ink);
}
.m-split-note div {
  padding: 12px 14px;
  background: var(--paper-2);
}
.m-split-note span {
  display: block;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .1em;
  color: var(--muted);
}
.m-split-note p { margin-top: 4px; font-size: 12px; }

.m-accept {
  margin-top: 22px;
  border: 2px solid var(--ink);
  background: var(--paper-2);
  box-shadow: 4px 4px 0 var(--ink);
}
.m-accept-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .1em;
}
.m-accept h3 {
  padding: 15px 14px 0;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -.04em;
}
.m-accept-list {
  margin: 13px 14px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
}
.m-accept-list li {
  min-width: 0;
  padding: 8px 9px;
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.m-accept-list li > span {
  display: block;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .08em;
  color: var(--tomato);
}
.m-accept-list strong {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  line-height: 1.4;
}
.m-accept-list small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 9.5px;
  line-height: 1.45;
}
.m-accept .m-note { margin-top: 11px; padding: 0 14px 14px; }

/* ---------- pricing ---------- */

.m-tier {
  padding: 17px 16px;
  border: 2px solid var(--ink);
  background: var(--paper-2);
}
.m-tier + .m-tier { margin-top: 14px; }
.m-tier-featured {
  background: var(--butter);
  box-shadow: 5px 5px 0 var(--ink);
}
.m-tier-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .09em;
  color: var(--muted);
}
.m-tier-badge {
  padding: 3px 6px;
  border: 1px solid var(--ink);
  background: var(--paper-2);
  color: var(--ink);
  font-size: 7.5px;
}
.m-tier h3 {
  margin-top: 12px;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.04em;
}
.m-tier-price {
  margin-top: 4px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.03em;
}
.m-tier-price em {
  margin-left: 3px;
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  color: var(--muted);
}
.m-tier-for {
  margin-top: 8px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.65;
}
.m-tier ul { margin-top: 12px; border-top: 1px solid var(--line); }
.m-tier li {
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 11.5px;
  line-height: 1.55;
}
.m-tier .m-btn { margin-top: 14px; min-height: 46px; box-shadow: 3px 3px 0 var(--ink); }

/* ---------- personal / price list ---------- */

.m-feature-grid {
  display: grid;
  gap: 10px;
}
.m-feature {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border: 2px solid var(--ink);
  background: var(--paper-2);
}
.m-feature:nth-child(2) { background: var(--butter); }
.m-feature:nth-child(3) { background: var(--paper-3); }
.m-feature:nth-child(4) { background: var(--ink); color: var(--paper); }
.m-feature h3 { font-size: 17px; line-height: 1.2; letter-spacing: -.03em; }
.m-feature p { margin-top: 4px; font-size: 10.5px; line-height: 1.55; color: var(--muted); }
.m-feature:nth-child(4) p { color: rgba(255, 255, 255, .6); }
.m-feature strong {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 12px;
  white-space: nowrap;
}

.m-price-list { border-top: 2px solid var(--ink); }
.m-price-group {
  padding: 14px 0 4px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .12em;
  color: var(--muted);
}
.m-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
}
.m-price-row span { min-width: 0; }
.m-price-row b { font-family: var(--mono); font-size: 11px; font-weight: 500; white-space: nowrap; }

.m-more {
  margin-top: 16px;
  border: 2px solid var(--ink);
  background: var(--paper-2);
}
.m-more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px;
  list-style: none;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.m-more summary::-webkit-details-marker { display: none; }
.m-more summary span { font-family: var(--mono); font-size: 12px; }
.m-more[open] summary { border-bottom: 1px solid var(--line); }
.m-more .m-price-list { padding: 0 14px 8px; }

/* ---------- samples ---------- */

.m-sample {
  border: 2px solid var(--ink);
  background: var(--paper-2);
  box-shadow: 4px 4px 0 var(--ink);
}
.m-sample + .m-sample { margin-top: 14px; }
.m-sample-preview {
  position: relative;
  min-height: 154px;
  padding: 15px;
  overflow: hidden;
  border-bottom: 2px solid var(--ink);
}
.m-sample-meta { padding: 14px; }
.m-sample-meta h3 { font-size: 17px; letter-spacing: -.03em; }
.m-sample-meta p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.65;
}
.m-sample-meta a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  font-size: 11.5px;
  font-weight: 600;
}
.m-sample-meta a span { font-family: var(--mono); }

.m-sample-personal { background: var(--paper); }
.m-sp-kicker {
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: .12em;
  color: var(--muted);
}
.m-sp-name {
  margin-top: 18px;
  font-size: 34px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.06em;
}
.m-sp-sub { margin-top: 6px; font-size: 10.5px; color: var(--muted); }
.m-sp-lines {
  position: absolute;
  right: 15px;
  bottom: 15px;
  text-align: right;
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1.8;
  color: var(--muted);
}
.m-sample-portfolio { background: var(--ink); color: var(--paper); }
.m-sample-portfolio .m-sp-kicker { color: rgba(255, 255, 255, .62); }
.m-sp-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}
.m-sp-grid i {
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .3);
}
.m-sp-grid i:nth-child(1) { background: var(--tomato); }
.m-sp-grid i:nth-child(2) { background: var(--paper-3); }
.m-sp-grid i:nth-child(3) { background: var(--butter); }
.m-sp-grid i:nth-child(4) { background: var(--blue); }
.m-sample-wedding { background: var(--paper-4); text-align: center; }
.m-sp-wedding {
  margin-top: 16px;
  padding: 12px 6px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.m-sp-wedding strong {
  display: block;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -.04em;
}
.m-sp-wedding span {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .1em;
  color: var(--muted);
}
.m-sample-shop { background: var(--butter); }
.m-sp-menu { margin-top: 14px; }
.m-sp-menu div {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 0;
  font-size: 10.5px;
}
.m-sp-menu div i {
  flex: 1;
  border-bottom: 1px dotted rgba(18, 18, 18, .45);
}
.m-sp-menu div b { font-family: var(--mono); font-size: 9px; }
.m-sample-stamp {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 5px;
  border: 1px solid currentColor;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .08em;
  opacity: .65;
}

/* ---------- faq ---------- */

.m-faq { border-top: 2px solid var(--ink); }
.m-faq details { border-bottom: 1px solid var(--line); }
.m-faq summary {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 15px 0;
  list-style: none;
  cursor: pointer;
}
.m-faq summary::-webkit-details-marker { display: none; }
.m-faq-no {
  flex: 0 0 auto;
  padding-top: 2px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--muted);
}
.m-faq-q {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 500;
}
.m-faq-plus {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 3px;
}
.m-faq-plus::before,
.m-faq-plus::after {
  content: "";
  position: absolute;
  background: var(--ink);
}
.m-faq-plus::before { top: 7px; left: 0; right: 0; height: 2px; }
.m-faq-plus::after { top: 0; bottom: 0; left: 7px; width: 2px; transition: transform .2s var(--ease); }
.m-faq details[open] .m-faq-plus::after { transform: scaleY(0); }
.m-faq-answer {
  padding: 0 0 16px 25px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.78;
}

/* ---------- forms ---------- */

.m-form { display: grid; gap: 20px; }
.m-field { min-width: 0; }
.m-field-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .1em;
  color: var(--muted);
}
.m-field-label span { font-family: var(--sans); font-size: 10px; letter-spacing: 0; }
.m-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.m-chip {
  min-height: 34px;
  padding: 0 9px;
  border: 1.5px solid var(--ink);
  background: transparent;
  font-size: 11.5px;
  line-height: 1;
  cursor: pointer;
}
.m-chip[aria-pressed="true"] {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}
.m-chip:active { transform: translateY(1px); }

.m-textarea {
  width: 100%;
  min-height: 82px;
  padding: 10px 11px;
  border: 2px solid var(--ink);
  background: var(--paper-2);
  color: var(--ink);
  font: 12px/1.65 var(--sans);
  resize: vertical;
}

.m-brief-out {
  margin-top: 4px;
  padding: 13px;
  border: 2px solid var(--ink);
  background: var(--butter);
}
.m-brief-out-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 10px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .08em;
}
.m-copy-small {
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid var(--ink);
  background: var(--paper-2);
  font-size: 9.5px;
  cursor: pointer;
}
.m-brief-text {
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.72;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.m-selected {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid rgba(18, 18, 18, .25);
  font-size: 10px;
  color: var(--muted);
}
.m-selected strong { color: var(--ink); }
.m-manual {
  margin-top: 10px;
  font-size: 10px;
  line-height: 1.6;
  color: var(--muted);
}
.m-manual[hidden] { display: none; }
.m-manual textarea {
  width: 100%;
  margin-top: 6px;
  padding: 8px;
  border: 1px solid var(--line-strong);
  background: var(--paper-2);
  font: 10px/1.6 var(--mono);
  resize: vertical;
}
.m-audit-handoff {
  margin-bottom: 16px;
  padding: 10px 12px;
  border: 2px solid var(--ink);
  background: var(--butter);
  font-size: 11px;
  line-height: 1.6;
}
.m-audit-handoff[hidden] { display: none; }

/* ---------- contact ---------- */

.m-contact-card {
  border: 2px solid var(--ink);
  background: var(--paper-2);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 0 14px;
}
.m-contact-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.m-contact-row:last-child { border-bottom: 0; }
.m-contact-row > span {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .08em;
  color: var(--muted);
}
.m-contact-row strong,
.m-contact-row a {
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.m-contact-row small {
  display: block;
  margin-top: 2px;
  font-size: 9.5px;
  color: var(--muted);
}
.m-contact-copy {
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid var(--ink);
  background: transparent;
  font-size: 9.5px;
  white-space: nowrap;
  cursor: pointer;
}
.m-contact-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
.m-contact-actions .m-btn { min-height: 46px; box-shadow: 3px 3px 0 var(--ink); font-size: 11.5px; }
.m-availability {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 10px;
  color: var(--muted);
}
.m-availability i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wechat);
  box-shadow: 0 0 0 3px rgba(79, 155, 85, .15);
}
.m-contact-list { margin-top: 14px; border-top: 1px solid var(--line); }
.m-contact-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 11.5px;
}

/* ---------- footer ---------- */

.m-footer {
  padding: 24px var(--pad) 26px;
  background: var(--ink);
  color: var(--paper);
}
.m-footer-brand {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.m-footer-brand span {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .5);
}
.m-footer p {
  margin-top: 10px;
  color: rgba(255, 255, 255, .6);
  font-size: 10.5px;
  line-height: 1.7;
}
.m-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .2);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .65);
}
.m-footer-links a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- utilities ---------- */

.m-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.m-mt-14 { margin-top: 14px; }
.m-mt-22 { margin-top: 22px; }

@media (min-width: 680px) {
  :root { --pad: 24px; }
  .m-hero { padding-top: 40px; padding-bottom: 36px; }
  .m-quick-grid { gap: 14px; }
  .m-quick { min-height: 148px; }
  .m-footer { padding-bottom: 32px; }
}

@media (max-width: 359px) {
  :root { --pad: 16px; }
  .m-display { font-size: 36px; }
  .m-quick strong { font-size: 15.5px; }
  .m-audit-item { grid-template-columns: 21px minmax(0, 1fr) 20px; gap: 7px; padding: 11px 12px; }
  .m-menu-btn { min-width: 70px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- home more links ---------- */

.m-more-links {
  margin-top: 16px;
  border-top: 2px solid var(--ink);
}
.m-more-links a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  gap: 3px 10px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.m-more-links span {
  grid-column: 1;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .08em;
  color: var(--muted);
}
.m-more-links strong {
  grid-column: 1;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
}
.m-more-links i {
  grid-column: 2;
  grid-row: 1 / 3;
  font-family: var(--mono);
  font-style: normal;
  font-size: 13px;
}

.m-section-ink .m-hero-meta,
.m-section-blue .m-hero-meta { color: rgba(255, 255, 255, .6); }