@omniharmonic/openspace-cli 0.1.13 → 0.1.15

package/dist/{chunk-B5C7S4S5.js → chunk-PBN36VUE.js}

@@ -22,14 +22,16 @@ import {
   platformLabel,
   sectionsFrom,
   sectionsFromLayoutHtml,
+  signupAsksName,
   sitePath,
   socialNetwork,
   stripSuffix,
   stripTags,
+  subscribersAdvice,
   text,
   themeFromCss,
   videoUrl
-} from "./chunk-EFSGZWAO.js";
+} from "./chunk-YAPLQ4OA.js";
 import {
   BREAKPOINT_INFO,
   BUTTON_STYLES,
@@ -130,6 +132,8 @@ import {
   parseColor,
   parseComponentPreviewPath,
   parseCss,
+  phoneColumns,
+  phonePadding,
   plainText,
   presetCatalog,
   presetSampleStrings,
@@ -147,7 +151,7 @@ import {
   toHex,
   toJsonSchema,
   toMarkdown
-} from "./chunk-IXN2CNGL.js";
+} from "./chunk-GMKHKHUR.js";
 import {
   __commonJS,
   __export,
@@ -7788,10 +7792,10 @@ function withPages(doc, pages) {
 // ../schema/src/secrets.ts
 function shannonEntropy(value) {
   if (!value) return 0;
-  const counts = /* @__PURE__ */ new Map();
-  for (const c of value) counts.set(c, (counts.get(c) ?? 0) + 1);
+  const counts2 = /* @__PURE__ */ new Map();
+  for (const c of value) counts2.set(c, (counts2.get(c) ?? 0) + 1);
   let h = 0;
-  for (const n of counts.values()) {
+  for (const n of counts2.values()) {
     const p = n / value.length;
     h -= p * Math.log2(p);
   }
@@ -12600,7 +12604,15 @@ function autoMobileLayout(section, options = {}) {
     }
   };
   for (const pl of [...placed]) placeLayered(pl.id);
-  for (const { id, rect: d } of readingOrder(pending.filter((it) => !hostOf.has(it.id)))) {
+  let stacking = readingOrder(pending.filter((it) => !hostOf.has(it.id)));
+  if (options.textFirst) {
+    const isText2 = (id) => {
+      const b = blocks2.get(id);
+      return !!b && isTextBlock(b);
+    };
+    stacking = [...stacking.filter((i) => isText2(i.id)), ...stacking.filter((i) => !isText2(i.id))];
+  }
+  for (const { id, rect: d } of stacking) {
     if (placedById.has(id)) continue;
     const block4 = blocks2.get(id);
     const m = { x: 1, y: cursor, w: cols, h: mobileHeight(block4, d, width) };
@@ -12641,6 +12653,690 @@ function autoMobileLayoutOps(doc, page, sectionId, options = {}) {
   return ops;
 }
 
+// ../lint/src/phone.ts
+var PHONE = 360;
+var GLYPH = 0.48;
+var GLYPH_CAPS = 0.62;
+function* sectionsOf2(doc, pageId) {
+  const pages = pageId ? [doc.pages[pageId]].filter((p) => !!p) : Object.values(doc.pages);
+  for (const p of pages)
+    for (const s2 of p.sections) if (!s2.hidden) yield { page: p.id, section: s2 };
+  yield { page: FOOTER, section: doc.site.footer };
+}
+function phonePx(value) {
+  if (!value) return void 0;
+  const v = value.trim();
+  const m = /^clamp\(\s*([\d.]+)(rem|px)/.exec(v) ?? /^([\d.]+)(rem|px)$/.exec(v);
+  if (!m) return void 0;
+  return Number(m[1]) * (m[2] === "rem" ? 16 : 1);
+}
+var words2 = (s2) => s2.match(/[\p{L}\p{N}]{2,}/gu)?.length ?? 0;
+var PhoneCtx = class {
+  constructor(doc, options) {
+    this.doc = doc;
+    this.options = options;
+    this.meta = opMeta(options);
+    this.root = compileStyles(doc.styles).tokens.vars.root;
+    const density = doc.styles.choices.density;
+    this.space = SPACE_SCALES[density ?? "comfortable"] ?? SPACE_SCALES.comfortable;
+    this.gutter = phonePx(this.root["--os-section-gutter"]) ?? 24;
+  }
+  doc;
+  options;
+  issues = [];
+  meta;
+  root;
+  space;
+  gutter;
+  add(i) {
+    this.issues.push(issue(i));
+  }
+  section({ page, section }) {
+    if (section.layout.mode === "stack") this.columns(page, section);
+    else this.grid(page, section, section.layout);
+    this.padding(page, section);
+    this.tallPhoto(page, section);
+    for (const b of section.blocks) if (!b.hidden) this.headingWords(page, section, b);
+  }
+  /** Text columns kept side by side on phones (an explicit phone column setting). */
+  columns(page, section) {
+    const layout = section.layout;
+    if (layout.mode !== "stack") return;
+    const cols = phoneColumns(layout.columns);
+    if (cols.length < 2) return;
+    const content3 = PHONE - 2 * this.gutter;
+    const squeezed = cols.some((span, i) => {
+      const longest = section.blocks.filter((b) => !b.hidden && (b.column ?? 0) === i && isTextBlock(b)).reduce((n, b) => Math.max(n, words2(blockText(b))), 0);
+      return longest >= 25 && span / STACK_UNITS * content3 < 170;
+    });
+    if (!squeezed) return;
+    this.add({
+      rule: "phone-columns",
+      severity: "warning",
+      page,
+      section: section.id,
+      message: `On phones this section keeps ${cols.length} columns side by side, so its text is squeezed into a narrow strip.`,
+      fix: "Stack the columns on phones (one under the other).",
+      autofix: {
+        label: "Stack the columns on phones",
+        ops: [
+          {
+            op: "section.update",
+            ...this.meta(),
+            page,
+            section: section.id,
+            set: { "layout.columns.m": [STACK_UNITS] }
+          }
+        ]
+      }
+    });
+  }
+  /** Grid sections: missing or partial phone layouts, text squeezed into narrow phone columns. */
+  grid(page, section, layout) {
+    const items = Object.entries(layout.items);
+    if (!items.length) return;
+    const placed = items.filter(([, i]) => i.m).length;
+    const blocks2 = new Map(section.blocks.map((b) => [b.id, b]));
+    const fill = () => autoMobileLayoutOps(this.doc, page, section.id, this.options);
+    if (placed > 0 && placed < items.length) {
+      this.add({
+        rule: "phone-layout-missing",
+        severity: "warning",
+        page,
+        section: section.id,
+        message: `${items.length - placed === 1 ? "A block was" : `${items.length - placed} blocks were`} added on desktop but not placed for phones, so on a phone ${items.length - placed === 1 ? "it shows" : "they show"} at the bottom of the section.`,
+        fix: "Place the new blocks in reading order on phones (your other phone placements stay).",
+        autofix: { label: "Place them for phones", ops: fill() }
+      });
+    } else if (placed === 0 && items.length > 1) {
+      const fallback2 = fallbackMobileRects(layout);
+      const stacked = Object.entries(fallback2).sort(([, a], [, b]) => a.y - b.y).map(([id]) => id);
+      const reading = readingOrder(items.map(([id, i]) => ({ id, rect: i.d }))).map((i) => i.id);
+      if (stacked.join() !== reading.join())
+        this.add({
+          rule: "phone-layout-order",
+          severity: "warning",
+          page,
+          section: section.id,
+          message: "On phones this section's blocks would stack in a confusing order (by where each one starts, not how the section reads).",
+          fix: "Lay the section out for phones in reading order.",
+          autofix: { label: "Lay it out for phones", ops: fill() }
+        });
+    }
+    for (const [id, item2] of items) {
+      const b = blocks2.get(id);
+      if (!item2.m || !b || b.hidden || !isTextBlock(b)) continue;
+      const n = words2(blockText(b));
+      const width = item2.m.w / 8 * (PHONE - 2 * this.gutter);
+      if (n < 8 || width >= 150 || width >= 120 && n < 25) continue;
+      const restack = autoMobileLayout(section, { reset: true });
+      this.add({
+        rule: "phone-narrow-text",
+        severity: "warning",
+        page,
+        section: section.id,
+        block: id,
+        message: `On phones this ${b.type} block is only about ${Math.round(width)}px wide, so its text is squeezed into a narrow strip.`,
+        fix: "Re-stack the section for phones so every block is full width.",
+        ...restack ? {
+          autofix: { label: "Re-stack for phones", ops: this.placeOps(page, section, restack) }
+        } : {}
+      });
+    }
+  }
+  placeOps(page, section, items) {
+    return Object.entries(items).flatMap(
+      ([block4, item2]) => item2.m ? [
+        {
+          op: "grid.place",
+          ...this.meta(),
+          page,
+          section: section.id,
+          block: block4,
+          bp: "m",
+          rect: item2.m
+        }
+      ] : []
+    );
+  }
+  /** A phone padding so large the screen is mostly empty space. */
+  padding(page, section) {
+    const pad3 = section.style.padding;
+    if (!pad3) return;
+    const token = phonePadding(pad3);
+    const px3 = this.space[token] ?? 0;
+    if (px3 <= 100) return;
+    this.add({
+      rule: "phone-padding",
+      severity: "warning",
+      page,
+      section: section.id,
+      message: `On phones this section has ${px3}px of empty space above and below it, which pushes its content off the screen.`,
+      fix: "Use less padding on phones (your desktop spacing stays).",
+      autofix: {
+        label: "Tighten the spacing on phones",
+        ops: [
+          {
+            op: "section.update",
+            ...this.meta(),
+            page,
+            section: section.id,
+            set: { "style.padding.m": "lg" }
+          }
+        ]
+      }
+    });
+  }
+  /** A photo section taller than most of a phone screen (the words and button get pushed down). */
+  tallPhoto(page, section) {
+    const bg = section.style.background;
+    const mh = section.style.minHeight;
+    if (!mh || !bg || bg.type !== "image" && bg.type !== "video") return;
+    const m = mh.m ?? mh.t ?? mh.d;
+    const vh = /^(\d+)(?:vh|svh|dvh|lvh)$/.exec(m);
+    const px3 = /^(\d+)px$/.exec(m);
+    if (!(vh && Number(vh[1]) > 75) && !(px3 && Number(px3[1]) > 640)) return;
+    this.add({
+      rule: "phone-tall-photo",
+      severity: "warning",
+      page,
+      section: section.id,
+      message: `On phones this photo section is at least ${m} tall, so the photo fills most of the screen and pushes everything else down.`,
+      fix: "Make it a little shorter on phones (70% of the screen); desktop keeps its height.",
+      autofix: {
+        label: "Shorten it on phones",
+        ops: [
+          {
+            op: "section.update",
+            ...this.meta(),
+            page,
+            section: section.id,
+            set: { "style.minHeight.m": "70svh" }
+          }
+        ]
+      }
+    });
+  }
+  /** Heading words that can't fit on one phone line at the heading's phone size. */
+  headingWords(page, section, b) {
+    if (b.type !== "heading") return;
+    const fields = b.fields;
+    const size2 = fields.phoneSize && fields.phoneSize !== "auto" ? fields.phoneSize : b.style?.typography?.heading ?? (fields.size && fields.size !== "auto" ? fields.size : fields.level ?? "h2");
+    const px3 = this.typePx(size2);
+    if (!px3) return;
+    const width = PHONE - 2 * this.gutter - this.blockPad(b);
+    const caps = this.root[`--os-type-${size2}-text-transform`] === "uppercase";
+    const longest = (fields.text ?? "").split(/[\s\-‐–—/]+/).reduce((a, w) => w.length > a.length ? w : a, "");
+    const est = longest.length * px3 * (caps || longest === longest.toUpperCase() ? GLYPH_CAPS : GLYPH);
+    if (est <= width * 1.1) return;
+    const smaller = this.fittingSize(longest, width, caps);
+    this.add({
+      rule: "phone-long-word",
+      severity: "warning",
+      page,
+      section: section.id,
+      block: b.id,
+      message: `\u201C${longest}\u201D is too long to fit on one line of a phone at this heading size, so it would break in the middle of the word.`,
+      fix: smaller ? "Use a smaller heading size on phones (desktop keeps its size), or a shorter word." : "Use a shorter word or phrase.",
+      ...smaller ? {
+        autofix: {
+          label: "Use a smaller size on phones",
+          ops: [
+            {
+              op: "block.update",
+              ...this.meta(),
+              page,
+              block: b.id,
+              set: { phoneSize: smaller }
+            }
+          ]
+        }
+      } : {}
+    });
+  }
+  typePx(preset) {
+    const px3 = phonePx(this.root[`--os-type-${preset}-font-size`]);
+    if (!px3) return void 0;
+    const content3 = PHONE - 2 * this.gutter;
+    if (preset === "display") return Math.min(px3, 0.16 * content3);
+    if (preset === "h1") return Math.min(px3, 0.12 * content3);
+    return px3;
+  }
+  blockPad(b) {
+    const pad3 = b.style?.padding;
+    const token = pad3 ? pad3.m ?? pad3.t ?? pad3.d : b.style?.colorTheme ? "md" : void 0;
+    return token ? 2 * (this.space[token] ?? 0) : 0;
+  }
+  fittingSize(word, width, caps) {
+    for (const s2 of ["h1", "h2", "h3", "h4"]) {
+      const px3 = this.typePx(s2);
+      if (px3 && word.length * px3 * (caps ? GLYPH_CAPS : GLYPH) <= width) return s2;
+    }
+    return void 0;
+  }
+  /** A header logo that leaves no room for the menu button on phones. */
+  header() {
+    const h = this.doc.site.header.logoHeight;
+    if (!h) return;
+    const m = h.m ?? h.t ?? h.d;
+    if (m <= 64) return;
+    this.add({
+      rule: "phone-logo",
+      severity: "warning",
+      message: `The logo is ${m}px tall on phones, which makes the header take up a big part of a phone screen.`,
+      fix: "Use a smaller logo on phones (around 40px; desktop keeps its size).",
+      autofix: {
+        label: "Use a 40px logo on phones",
+        ops: [{ op: "site.update", ...this.meta(), set: { "header.logoHeight.m": 40 } }]
+      }
+    });
+  }
+  /** Custom CSS or components that fix something wider than a phone. */
+  css() {
+    const sources = [];
+    if (this.doc.site.customCss)
+      sources.push({ css: this.doc.site.customCss, where: "Your custom CSS" });
+    for (const [name, c] of Object.entries(this.doc.components ?? {}))
+      if (c.css) sources.push({ css: c.css, where: `The \u201C${name}\u201D component`, component: name });
+    for (const s2 of sources) {
+      const wide = wideRules(s2.css);
+      if (!wide.length) continue;
+      this.add({
+        rule: "phone-fixed-width",
+        severity: "warning",
+        key: s2.component ?? "custom-css",
+        message: `${s2.where} sets a fixed width (${wide.slice(0, 2).join(", ")}) that is wider than a phone screen, so the page may scroll sideways or be cut off on phones.`,
+        fix: "Use max-width (or a percentage) instead of a fixed width, or add a phone rule (@media (max-width: 767px))."
+      });
+    }
+  }
+};
+function wideRules(css) {
+  let plain3 = css;
+  for (let guard = 0; guard < 50; guard++) {
+    const m = /@media[^{]*min-width\s*:\s*(\d+)/i.exec(plain3);
+    if (!m || Number(m[1]) < 400) break;
+    const start = plain3.indexOf("{", m.index);
+    let depth = 0;
+    let end = start;
+    for (; end < plain3.length; end++) {
+      if (plain3[end] === "{") depth++;
+      else if (plain3[end] === "}" && --depth === 0) break;
+    }
+    plain3 = plain3.slice(0, m.index) + plain3.slice(end + 1);
+  }
+  const out = [];
+  for (const m of plain3.matchAll(/(?:^|[;{\s])((?:min-)?width)\s*:\s*([\d.]+)(px|rem|em)\b/gi)) {
+    const px3 = Number(m[2]) * (m[3]?.toLowerCase() === "px" ? 1 : 16);
+    if (px3 > 340) out.push(`${m[1]}: ${m[2]}${m[3]}`);
+  }
+  return out;
+}
+function phoneCheck(doc, pageId, options = {}) {
+  const ctx = new PhoneCtx(doc, options);
+  for (const w of sectionsOf2(doc, pageId)) ctx.section(w);
+  ctx.header();
+  ctx.css();
+  return sortIssues(ctx.issues);
+}
+var SEVERITY = {
+  "page-overflow": "error",
+  "cut-off": "error",
+  overlap: "error",
+  "photo-contrast": "error",
+  "low-contrast": "error",
+  "broken-word": "warning",
+  "big-heading": "warning",
+  "small-text": "warning",
+  "tiny-text": "warning",
+  "narrow-text": "warning",
+  "tap-target": "warning",
+  "edge-text": "warning",
+  "header-crowded": "warning",
+  "loose-padding": "warning",
+  "tall-image": "info",
+  "heavy-crop": "info",
+  "long-footer": "info",
+  "cta-below-fold": "warning"
+};
+var MESSAGE = {
+  "page-overflow": (_f, w) => [
+    `On phones the page is wider than the screen, so it scrolls sideways${w}.`,
+    "Something has a fixed width wider than a phone. Re-stack the section for phones or make the element narrower."
+  ],
+  "cut-off": (_f, w) => [
+    `On phones something${w} is cut off at the edge of the screen.`,
+    "Re-stack the section for phones, or make the element narrower."
+  ],
+  overlap: (_f, w) => [
+    `On phones two pieces of text${w} are drawn on top of each other, so neither can be read.`,
+    "Re-stack the section for phones so the blocks sit one under the other."
+  ],
+  "photo-contrast": (f, w) => [
+    `On phones the text \u201C${f.text ?? ""}\u201D${w} sits on a photo where it can drop to ${f.value}:1 contrast (it needs ${f.limit}:1), so it is hard to read on bright or dark parts of the photo.`,
+    "Darken (or lighten) the photo overlay, or put the text on a solid panel."
+  ],
+  "low-contrast": (f, w) => [
+    `On phones the text \u201C${f.text ?? ""}\u201D${w} has only ${f.value}:1 contrast with its background (it needs ${f.limit}:1).`,
+    "Use a color theme instead of a custom color, or a darker/lighter text color."
+  ],
+  "broken-word": (f, w) => [
+    `On phones a word in the heading \u201C${f.text ?? ""}\u201D${w} doesn't fit on one line and breaks in the middle.`,
+    "Use a smaller heading size on phones, or a shorter word."
+  ],
+  "big-heading": (f, w) => [
+    `On phones the heading \u201C${f.text ?? ""}\u201D${w} is so large it fills most of the screen.`,
+    "Use a smaller heading size on phones, or a shorter heading."
+  ],
+  "small-text": (f, w) => [
+    `On phones the text${w} is ${f.value}px \u2014 too small to read comfortably (${f.limit === 14 ? "14px is the minimum for small print" : "16px is the minimum for reading text"}).`,
+    f.limit === 14 ? "Use the body text style for it, or shorten it to a note." : "Use the body text style for paragraphs instead of the small style."
+  ],
+  "tiny-text": (f, w) => [
+    `On phones the label \u201C${f.text ?? ""}\u201D${w} is only ${f.value}px tall, too small to read.`,
+    "Make it at least 12px."
+  ],
+  "narrow-text": (_f, w) => [
+    `On phones the text${w} is squeezed into a very narrow column.`,
+    "Stack the columns on phones so the text is full width."
+  ],
+  "tap-target": (f, w) => [
+    `On phones the link or button \u201C${f.text ?? ""}\u201D${w} is small and close to another one, so it's easy to tap the wrong one.`,
+    "Make it a button, or put more space around it."
+  ],
+  "edge-text": (_f, w) => [
+    `On phones the text${w} touches the edge of the screen.`,
+    "Keep text inside the page margins (don't let text blocks bleed to the edge)."
+  ],
+  "header-crowded": () => [
+    "On phones the header is crowded: its logo, title and buttons overlap or wrap.",
+    "Use a smaller logo on phones or a shorter site title."
+  ],
+  "loose-padding": (f, w) => [
+    `On phones there is ${f.value}px of empty space above or below${w || " a section"}.`,
+    "Use less padding on phones."
+  ],
+  "tall-image": (_f, w) => [
+    `On phones an image${w} is taller than the whole screen.`,
+    "Crop it to a landscape or square shape, or set a focus point."
+  ],
+  "heavy-crop": (_f, w) => [
+    `On phones most of a photo${w} is cropped away.`,
+    "Set the photo's focus point so the important part stays in view on phones."
+  ],
+  "cta-below-fold": (f) => [
+    `On phones the main button (\u201C${f.text ?? ""}\u201D) is about ${Math.round(f.value ?? 0)}px down the page, below the first screen \u2014 visitors have to scroll before they see what to do.`,
+    "Put the words and button first on phones (photos after them), or use a shorter headline."
+  ],
+  "long-footer": () => [
+    "On phones the footer is several screens long.",
+    "Keep the footer to the essentials (a few links, contact details, social icons)."
+  ]
+};
+function locate(doc, pageId, f) {
+  const lookup = (id) => {
+    if (!id) return void 0;
+    const pages = [pageId, FOOTER];
+    for (const p of pages) {
+      const hit = findSection(doc, p, id);
+      if (hit) return { page: p, section: hit.section };
+    }
+    return void 0;
+  };
+  const sec = lookup(f.section);
+  if (sec) {
+    const block4 = f.block ? sec.section.blocks.find((b) => b.id === f.block) : void 0;
+    return { page: sec.page, section: sec.section, ...block4 ? { block: block4 } : {} };
+  }
+  if (f.area === "footer") return { page: FOOTER, section: doc.site.footer };
+  return { page: pageId };
+}
+function fixFor(at, f, meta) {
+  const { section, block: block4, page } = at;
+  if (!section) return void 0;
+  const restack = (label) => {
+    if (section.layout.mode === "grid") {
+      const items = autoMobileLayout(section, { reset: true });
+      if (!items) return void 0;
+      const ops = Object.entries(items).flatMap(
+        ([b, item2]) => item2.m ? [
+          {
+            op: "grid.place",
+            ...meta(),
+            page,
+            section: section.id,
+            block: b,
+            bp: "m",
+            rect: item2.m
+          }
+        ] : []
+      );
+      return ops.length ? { label, ops } : void 0;
+    }
+    if (phoneColumns(section.layout.columns).length > 1)
+      return {
+        label: "Stack the columns on phones",
+        ops: [
+          {
+            op: "section.update",
+            ...meta(),
+            page,
+            section: section.id,
+            set: { "layout.columns.m": [STACK_UNITS] }
+          }
+        ]
+      };
+    return void 0;
+  };
+  switch (f.kind) {
+    case "overlap":
+    case "cut-off":
+    case "page-overflow":
+    case "narrow-text":
+    case "edge-text":
+      return f.component ? void 0 : restack("Re-stack for phones");
+    case "photo-contrast": {
+      const bg = section.style.background;
+      if (bg && (bg.type === "image" || bg.type === "video")) {
+        const now = bg.overlay?.opacity ?? 0;
+        if (now >= 0.85) break;
+        const target = Math.min(0.85, Math.ceil((now + 0.15) * 20) / 20);
+        return {
+          label: `Raise the photo overlay to ${Math.round(target * 100)}%`,
+          ops: [
+            {
+              op: "section.update",
+              ...meta(),
+              page,
+              section: section.id,
+              set: {
+                "style.background.overlay": {
+                  color: bg.overlay?.color ?? "background",
+                  opacity: target
+                }
+              }
+            }
+          ]
+        };
+      }
+      if (block4 && isTextBlock(block4) && !block4.style?.colorTheme)
+        return {
+          label: "Put the text on a panel",
+          ops: [
+            {
+              op: "block.update",
+              ...meta(),
+              page,
+              block: block4.id,
+              style: {
+                ...block4.style ?? {},
+                colorTheme: section.style.colorTheme ?? "light",
+                padding: block4.style?.padding ?? { d: "lg", m: "md" }
+              }
+            }
+          ]
+        };
+      return void 0;
+    }
+    case "broken-word":
+    case "big-heading": {
+      if (block4?.type !== "heading") return void 0;
+      const fields = block4.fields;
+      const order = ["display", "h1", "h2", "h3", "h4"];
+      const current2 = fields.phoneSize && fields.phoneSize !== "auto" ? fields.phoneSize : fields.size && fields.size !== "auto" ? fields.size : fields.level ?? "h2";
+      const next = order[order.indexOf(current2) + 1];
+      if (!next) return void 0;
+      return {
+        label: "Use a smaller size on phones",
+        ops: [
+          {
+            op: "block.update",
+            ...meta(),
+            page,
+            block: block4.id,
+            set: { phoneSize: next }
+          }
+        ]
+      };
+    }
+    case "cta-below-fold": {
+      if (section.layout.mode === "grid") {
+        const items = autoMobileLayout(section, { reset: true, textFirst: true });
+        if (!items) return void 0;
+        return {
+          label: "Put the words first on phones",
+          ops: Object.entries(items).flatMap(
+            ([b, item2]) => item2.m ? [
+              {
+                op: "grid.place",
+                ...meta(),
+                page,
+                section: section.id,
+                block: b,
+                bp: "m",
+                rect: item2.m
+              }
+            ] : []
+          )
+        };
+      }
+      const col = section.blocks.find((b) => b.type === "button")?.column ?? 0;
+      const count2 = section.layout.columns.d.length;
+      if (count2 < 2 || col === 0) return void 0;
+      const order = [col, ...Array.from({ length: count2 }, (_, i) => i).filter((i) => i !== col)];
+      return {
+        label: "Put the words first on phones",
+        ops: [
+          {
+            op: "section.update",
+            ...meta(),
+            page,
+            section: section.id,
+            set: { "layout.order.m": order }
+          }
+        ]
+      };
+    }
+    case "loose-padding":
+      return {
+        label: "Tighten the spacing on phones",
+        ops: [
+          {
+            op: "section.update",
+            ...meta(),
+            page,
+            section: section.id,
+            set: { "style.padding.m": "lg" }
+          }
+        ]
+      };
+    default:
+      return void 0;
+  }
+  return void 0;
+}
+function phoneIssuesFromProbe(doc, pageId, results, options = {}) {
+  const meta = opMeta(options);
+  const out = /* @__PURE__ */ new Map();
+  const sorted = [...results].sort((a, b) => a.width - b.width);
+  for (const r of sorted)
+    for (const f of r.findings) {
+      const at = locate(doc, pageId, f);
+      if (f.kind === "cta-below-fold" && at.section?.preset && !at.section.preset.startsWith("hero/"))
+        continue;
+      const sectionName = at.section && at.page !== FOOTER ? " in this section" : at.page === FOOTER ? " in the footer" : "";
+      const where2 = f.component ? ` in the \u201C${f.component}\u201D component` : sectionName;
+      const [message, fix] = MESSAGE[f.kind](f, where2);
+      const key2 = `${f.kind}:${at.block?.id ?? f.block ?? ""}:${f.kind === "tap-target" || f.kind === "photo-contrast" ? f.text ?? "" : ""}`;
+      const i = issue({
+        rule: `phone-${f.kind}`,
+        severity: SEVERITY[f.kind],
+        page: at.page,
+        ...at.section ? { section: at.section.id } : {},
+        ...at.block ? { block: at.block.id } : {},
+        key: `${r.width}`,
+        message,
+        fix
+      });
+      const id = `${i.rule}:${i.page}:${i.section ?? ""}:${key2}`;
+      if (out.has(id)) continue;
+      const autofix = fixFor(at, f, meta);
+      out.set(id, { ...i, id: id.replace(/:+$/, ""), ...autofix ? { autofix } : {} });
+    }
+  return sortIssues([...out.values()]);
+}
+function fixForPhones(doc, opts = {}) {
+  let registry3;
+  const getRegistry = () => {
+    registry3 ??= blocksRegistry();
+    return registry3;
+  };
+  const apply2 = opts.validateOp ?? ((d, op2) => {
+    const r = validate(d, op2, { trusted: true, registry: getRegistry() });
+    return r.ok ? r.doc : null;
+  });
+  let cur = doc;
+  const ops = [];
+  const fixed = [];
+  const tried = /* @__PURE__ */ new Set();
+  const run2 = (i) => {
+    if (!i.autofix || tried.has(i.id)) return;
+    tried.add(i.id);
+    let work = cur;
+    for (const op2 of i.autofix.ops) {
+      const next = apply2(work, op2);
+      if (!next) return;
+      work = next;
+    }
+    cur = work;
+    ops.push(...i.autofix.ops);
+    fixed.push({ id: i.id, label: i.autofix.label });
+  };
+  for (let guard = 0; guard < 200; guard++) {
+    const next = phoneCheck(cur, opts.pageId, opts).find((i) => i.autofix && !tried.has(i.id));
+    if (!next) break;
+    run2(next);
+  }
+  const restacked = /* @__PURE__ */ new Set();
+  for (const i of opts.rendered ?? []) {
+    if (!i.autofix) continue;
+    const key2 = `${i.section}:${i.autofix.label}`;
+    if (restacked.has(key2)) {
+      tried.add(i.id);
+      fixed.push({ id: i.id, label: i.autofix.label });
+      continue;
+    }
+    const before = fixed.length;
+    run2(i);
+    if (fixed.length > before) restacked.add(key2);
+  }
+  const remaining = [
+    ...phoneCheck(cur, opts.pageId, opts),
+    ...(opts.rendered ?? []).filter((i) => !tried.has(i.id))
+  ];
+  return { ops, fixed, doc: cur, remaining };
+}
+
 // ../lint/src/photo-contrast.ts
 var SOLID_PRIMARY = /* @__PURE__ */ new Set(["solid", "pill-solid"]);
 function richChecks(doc, out) {
@@ -12679,6 +13375,11 @@ function photoTextChecks(block4, buttons) {
       if (f.note) out.push({ role: "text-muted", label: "Button note", min: 4.5 });
       break;
     }
+    case "quote":
+    case "countdown":
+      out.push({ role: "text", label: "Text", min: 4.5 });
+      out.push({ role: "text-muted", label: "Secondary text", min: 4.5 });
+      break;
     default:
       out.push({ role: "text", label: "Text", min: 4.5 });
   }
@@ -12732,6 +13433,7 @@ function designCheck(doc, pageId, options = {}) {
   ctx.container(FOOTER, [doc.site.footer], { footer: true });
   ctx.issues.push(...linkIssues(doc, pageId, options, ctx.meta));
   ctx.issues.push(...componentIssues(doc, pageId));
+  ctx.issues.push(...phoneCheck(doc, pageId, options));
   for (const w of hostingWarnings(doc, pageId))
     ctx.issues.push(
       issue({
@@ -13407,9 +14109,25 @@ var Ctx = class {
       return this.tokens.palette[m[1]][Number(m[2])];
     return /^(?:#|oklch|oklab|rgb|hsl|lab|lch)/.test(value) ? value : void 0;
   }
+  /**
+   * A custom component (an imported or uploaded design) whose template draws a button from a
+   * filled link field: that's a call to action too (wave 4: "no clear call to action" on a hero
+   * with two buttons).
+   */
+  componentHasButton(b) {
+    if (!b.type.startsWith("component/")) return false;
+    const def = this.doc.components?.[b.type.slice("component/".length)];
+    if (!def || !/\{\{\s*(?:button|#link)\s/.test(def.template)) return false;
+    const fields = b.fields;
+    return Object.entries(def.fields).some(
+      ([k, f]) => f.kind === "link" && fields[k] !== void 0 && fields[k] !== null
+    );
+  }
   cta(page, sections) {
     if (sections.length === 0) return;
-    const has3 = sections.some((s2) => s2.blocks.some((b) => ACTION_BLOCKS.has(b.type)));
+    const has3 = sections.some(
+      (s2) => s2.blocks.some((b) => ACTION_BLOCKS.has(b.type) || this.componentHasButton(b))
+    );
     const navButton = this.doc.site.nav.some((n) => n.type === "button" && !n.hidden);
     if (has3 || navButton) return;
     this.add({
@@ -13483,6 +14201,457 @@ function plain(node2) {
   return parts.join("");
 }
 
+// ../lint/src/phone-probe.ts
+var PHONE_LIMITS = {
+  /** Apple HIG / Material: 44 CSS px square. */
+  tapTarget: 44,
+  /** Nothing smaller than this, however isolated. */
+  tapTargetMin: 16,
+  /** Reading text (paragraphs, lists, quotes). */
+  bodyText: 16,
+  /** Any text (labels, eyebrows, captions). */
+  anyText: 12,
+  /** Text never closer than this to the screen edge. */
+  edge: 12,
+  /** Heading font size as a share of the viewport width. */
+  headingShare: 0.16,
+  /** Heading block height as a share of the viewport height. */
+  headingScreen: 0.6,
+  /** Images taller than this share of the viewport height. */
+  imageScreen: 1.05,
+  /** Section padding (each side) above which a phone shows "a lot of empty space". */
+  loosePadding: 128,
+  /** Text columns narrower than this (px) with more than a few words. */
+  narrowColumn: 130,
+  /** Visible share of a photo below which it counts as heavily cropped. */
+  crop: 0.34
+};
+var PHONE_WIDTHS = [360, 390];
+var PHONE_HEIGHT = 780;
+var PHONE_PROBE_SCRIPT = `(async () => {
+  const L = ${JSON.stringify(PHONE_LIMITS)};
+  const vw = document.documentElement.clientWidth || window.innerWidth;
+  // The phone screen's height (an editor canvas may be as tall as the page: it says so here).
+  const vh = Number(window.__osPhoneScreenHeight) || window.innerHeight;
+  const viewH = window.innerHeight;
+  const findings = [];
+  const seen = new Set();
+  const style = document.createElement("style");
+  // elementsFromPoint skips pointer-events:none layers (photo backgrounds, overlays).
+  style.textContent = "*,*::before,*::after{pointer-events:auto!important;scroll-behavior:auto!important}";
+  document.head.appendChild(style);
+  const cs = (el) => getComputedStyle(el);
+  const txt = (el) => (el.textContent || "").replace(/\\s+/g, " ").trim();
+  const short = (s) => (s.length > 60 ? s.slice(0, 59) + "\u2026" : s);
+  const where = (el) => {
+    const out = {};
+    const blk = el.closest("[data-os-block]");
+    const sec = el.closest("[data-os-section]");
+    if (blk && blk.getAttribute("data-os-id")) out.block = blk.getAttribute("data-os-id");
+    if (sec && sec.getAttribute("data-os-id")) out.section = sec.getAttribute("data-os-id");
+    const comp = el.closest("[data-os-component]");
+    if (comp) out.component = comp.getAttribute("data-os-component") || "component";
+    out.area = el.closest(".os-menu") ? "menu" : el.closest("[data-os-header],.os-header,.os-announcement") ? "header" : el.closest(".os-footer,footer") ? "footer" : el.closest(".os-popup,dialog") ? "other" : "main";
+    return out;
+  };
+  const add = (kind, el, extra) => {
+    const w = where(el);
+    const key = kind + "|" + (w.block || "") + "|" + (w.section || "") + "|" + (extra && extra.key ? extra.key : "") + "|" + (w.block || w.section ? "" : el.tagName + txt(el).slice(0, 30));
+    if (seen.has(key)) return;
+    seen.add(key);
+    const f = { kind, ...w, tag: el.tagName.toLowerCase() };
+    const cls = (e) => (e && typeof e.className === "string" ? e.className.split(/\\s+/).filter((c) => c.startsWith("os-") && !/^os-(theme|align|talign|malign)/.test(c)).slice(0, 2).join(".") : "");
+    const where2 = [cls(el), cls(el.parentElement), cls(el.parentElement && el.parentElement.parentElement)].filter(Boolean).join(" < ");
+    if (where2) f.path = where2.slice(0, 120);
+    const t = txt(el);
+    if (t) f.text = short(t);
+    if (extra) { if (extra.value !== undefined) f.value = Math.round(extra.value * 100) / 100; if (extra.limit !== undefined) f.limit = extra.limit; }
+    findings.push(f);
+  };
+  const hiddenByStyle = (el) => {
+    for (let e = el; e && e !== document.documentElement; e = e.parentElement) {
+      const s = cs(e);
+      if (s.display === "none" || s.visibility === "hidden" || s.visibility === "collapse" || Number(s.opacity) === 0) return true;
+      if (e.hasAttribute("hidden") || e.getAttribute("aria-hidden") === "true") return true;
+      if (e.classList && (e.classList.contains("os-visually-hidden") || e.classList.contains("os-skip-link") || e.classList.contains("os-hp") || e.classList.contains("os-empty"))) return true;
+      // Editor-only notes and Studio's own canvas chrome are not part of the published page.
+      if (e.hasAttribute && e.hasAttribute("data-os-editor")) return true;
+      if (e.tagName === "DIALOG" && !e.open) return true;
+      if (e.tagName === "DETAILS" && !e.open && e !== el && !(el.closest("summary") && el.closest("summary").parentElement === e)) return true;
+    }
+    return false;
+  };
+  const visible = (el) => {
+    const r = el.getBoundingClientRect();
+    if (r.width < 1 || r.height < 1) return false;
+    return !hiddenByStyle(el);
+  };
+  /** Inside something that scrolls sideways on purpose (carousels, tab bars, marquees, code). */
+  const inScroller = (el) => {
+    for (let e = el.parentElement; e && e !== document.body; e = e.parentElement) {
+      const ox = cs(e).overflowX;
+      if (ox === "auto" || ox === "scroll") return true;
+      if (e.classList.contains("os-marquee") || e.classList.contains("os-carousel")) return true;
+    }
+    return false;
+  };
+  /** The nearest ancestor that clips horizontally (overflow hidden/clip), if any. */
+  const clipper = (el) => {
+    for (let e = el.parentElement; e && e !== document.body; e = e.parentElement) {
+      const ox = cs(e).overflowX;
+      if (ox === "hidden" || ox === "clip") return e;
+    }
+    return null;
+  };
+  /** Bounding box of an element's own text (not hidden child spans). */
+  const ownRect = (el) => {
+    let l = Infinity, t = Infinity, r = -Infinity, b = -Infinity;
+    for (const n of el.childNodes) {
+      if (n.nodeType !== 3 || !n.textContent.trim()) continue;
+      const range = document.createRange();
+      range.selectNodeContents(n);
+      for (const x of range.getClientRects()) {
+        if (x.width < 0.5) continue;
+        l = Math.min(l, x.left); t = Math.min(t, x.top); r = Math.max(r, x.right); b = Math.max(b, x.bottom);
+      }
+    }
+    return l === Infinity ? { left: 0, top: 0, right: 0, bottom: 0, width: 0, height: 0 } : { left: l, top: t, right: r, bottom: b, width: r - l, height: b - t };
+  };
+  const ownText = (el) => { let s = ""; for (const n of el.childNodes) if (n.nodeType === 3) s += n.textContent; return s.replace(/\\s+/g, " ").trim(); };
+  const decorative = (el) => !!el.closest(".os-section__bg,.os-img,.os-section__overlay,[aria-hidden=true],.os-marquee,.os-header__cart-count");
+
+  // Text leaves: elements with their own (non-blank) text.
+  const all = Array.from(document.body.querySelectorAll("*"));
+  const SKIP = new Set(["SCRIPT","STYLE","NOSCRIPT","TEMPLATE","SVG","PATH","OPTION","HEAD","TITLE","META","LINK","BR"]);
+  const leaves = [];
+  const leafSet = new Set();
+  for (const el of all) {
+    if (SKIP.has(el.tagName.toUpperCase())) continue;
+    let own = "";
+    for (const n of el.childNodes) if (n.nodeType === 3) own += n.textContent;
+    if (!own.trim()) continue;
+    if (!visible(el)) continue;
+    leaves.push(el);
+    leafSet.add(el);
+  }
+
+  // --- sideways scrolling and cut-off content ---------------------------------------------
+  const scrollWidth = Math.max(document.documentElement.scrollWidth, document.body ? document.body.scrollWidth : 0);
+  const content = all.filter((el) => {
+    const t = el.tagName;
+    return (t === "IMG" || t === "IFRAME" || t === "VIDEO" || t === "TABLE" || t === "PRE" || t === "INPUT" || t === "SELECT" || t === "TEXTAREA" || t === "BUTTON" || t === "A" || t === "svg" || t === "SVG" || el.classList.contains("os-img") || el.classList.contains("os-block") || leafSet.has(el));
+  });
+  let overflowCulprit = null;
+  for (const el of content) {
+    if (el.tagName === "IMG" || el.tagName === "svg" || el.tagName === "SVG") continue; // cropped by their frame on purpose
+    if (!visible(el) || decorative(el) && !el.classList.contains("os-img") || inScroller(el)) continue;
+    if (el.classList.contains("os-img") && el.closest(".os-section__bg")) continue;
+    const r = leafSet.has(el) && !el.classList.contains("os-block") ? ownRect(el) : el.getBoundingClientRect();
+    if (r.width < 1) continue;
+    const over = Math.max(r.right - vw, -r.left);
+    if (over <= 2) continue;
+    // Full-bleed media is drawn edge to edge on purpose.
+    if ((el.tagName === "IMG" || el.classList.contains("os-img") || el.tagName === "VIDEO") && r.left >= -2 && r.right <= vw + 2) continue;
+    const clip = clipper(el);
+    const clipRect = clip ? clip.getBoundingClientRect() : null;
+    if (clipRect && clipRect.left >= -2 && clipRect.right <= vw + 2) {
+      // Clipped by a box inside the screen: is the element cut by it?
+      if (r.right > clipRect.right + 2 || r.left < clipRect.left - 2) {
+        add("cut-off", el, { value: over, key: el.tagName });
+      }
+    } else if (!overflowCulprit || r.right > overflowCulprit.getBoundingClientRect().right) overflowCulprit = el;
+  }
+  if (scrollWidth > vw + 1) add("page-overflow", overflowCulprit || document.body, { value: scrollWidth - vw });
+
+  // --- headings: broken words and huge sizes ------------------------------------------------
+  const heads = all.filter((el) => /^H[1-6]$/.test(el.tagName) || el.classList.contains("os-type-display") || el.classList.contains("os-type-h1") || el.classList.contains("os-header__title"));
+  for (const h of heads) {
+    if (!visible(h)) continue;
+    const s = cs(h);
+    const size = parseFloat(s.fontSize);
+    const r = h.getBoundingClientRect();
+    if (size > vw * L.headingShare || r.height > vh * L.headingScreen) add("big-heading", h, { value: size, limit: Math.round(vw * L.headingShare) });
+    // A word broken across lines: one word, more than one line box.
+    const walker = document.createTreeWalker(h, NodeFilter.SHOW_TEXT);
+    let broken = false;
+    for (let n = walker.nextNode(); n && !broken; n = walker.nextNode()) {
+      const text = n.textContent || "";
+      const re = /[^\\s\\-\u2010\u2013\u2014/]+/g;
+      let m;
+      while ((m = re.exec(text)) && !broken) {
+        if (m[0].length < 4) continue;
+        const range = document.createRange();
+        range.setStart(n, m.index);
+        range.setEnd(n, m.index + m[0].length);
+        const rects = Array.from(range.getClientRects()).filter((x) => x.width > 0.5);
+        const tops = new Set(rects.map((x) => Math.round(x.top)));
+        if (tops.size > 1) broken = true;
+        else if (rects.length && h.getBoundingClientRect().right + 1 < Math.max(...rects.map((x) => x.right))) broken = true;
+      }
+    }
+    if (broken) add("broken-word", h, { value: size });
+  }
+
+  // --- text size, narrow columns, edges ------------------------------------------------------
+  const READING = new Set(["P","LI","DD","BLOCKQUOTE","TD","FIGCAPTION"]);
+  // The site's small-print size (notes, captions), measured once.
+  const smallProbe = document.createElement("span");
+  smallProbe.className = "os-type-small";
+  smallProbe.textContent = "x";
+  smallProbe.style.cssText = "position:absolute;visibility:hidden";
+  (document.querySelector("main") || document.body).appendChild(smallProbe);
+  const smallPx = parseFloat(cs(smallProbe).fontSize) || 14;
+  smallProbe.remove();
+  for (const el of leaves) {
+    if (decorative(el) && !el.closest(".os-img figcaption")) continue;
+    const s = cs(el);
+    const size = parseFloat(s.fontSize);
+    const t = ownText(el);
+    // Reading text: block-level paragraphs and list items (inline code or links are part of them).
+    const inline = s.display.startsWith("inline");
+    const reading = !inline && (READING.has(el.tagName) || (!!el.closest(".os-rich") && !el.closest("h1,h2,h3,h4,h5,h6,.os-type-eyebrow,small,label,button,.os-button")));
+    // Body text must be 16px. Text styled as small print (notes, captions) may be 14px.
+    const smallPrint = !!el.closest(".os-type-small,small,figcaption,.os-muted") || Math.abs(size - smallPx) < 0.5;
+    if (reading && t.length >= 60 && (smallPrint ? size < 13.5 : size < L.bodyText - 0.5)) add("small-text", el, { value: size, limit: smallPrint ? 14 : L.bodyText });
+    else if (size < L.anyText - 0.5 && t.length > 1) add("tiny-text", el, { value: size, limit: L.anyText });
+    const r = el.getBoundingClientRect();
+    if (!el.closest("h1,h2,h3,h4,h5,h6") && (t.match(/[A-Za-z\\u00C0-\\uFFFF]{2,}/g) || []).length >= 6 && r.width < L.narrowColumn && !inScroller(el)) add("narrow-text", el, { value: r.width, limit: L.narrowColumn });
+    if (!inScroller(el) && r.right <= vw + 2 && r.left >= -2) {
+      // The text itself (not its box) against the screen edges.
+      const tr = ownRect(el);
+      if (tr.width > 0 && (tr.left < L.edge - 0.5 || tr.right > vw - L.edge + 0.5) && !el.closest(".os-announcement")) add("edge-text", el, { value: Math.min(tr.left, vw - tr.right), limit: L.edge });
+    }
+  }
+
+  // --- tap targets ---------------------------------------------------------------------------
+  // (A map's legal attribution link is exempt: it's required, tiny by convention and rarely tapped.)
+  const targets = all.filter((el) => el.matches("a[href],button,input:not([type=hidden]),select,textarea,summary,[role=button],[role=tab]") && visible(el) && !el.closest(".os-hp,.os-map__attribution"));
+  const proseLink = (el) => el.tagName === "A" && !el.classList.contains("os-button") && !!el.parentElement && el.parentElement.closest("p,li,dd,blockquote,td,figcaption") && txt(el.parentElement.closest("p,li,dd,blockquote,td,figcaption")).length > txt(el).length + 10;
+  /** A "stretched" link (an absolutely positioned ::after) is as big as the card it covers. */
+  const hitRect = (el) => {
+    const after = getComputedStyle(el, "::after");
+    if (after && after.content && after.content !== "none" && after.position === "absolute") {
+      for (let e = el.parentElement; e && e !== document.body; e = e.parentElement)
+        if (cs(e).position !== "static") return e.getBoundingClientRect();
+    }
+    return el.getBoundingClientRect();
+  };
+  const rects = targets.map(hitRect);
+  // What a neighbour visibly occupies (its padding is tap area, not something to collide with).
+  const inner = targets.map((el, i) => {
+    const r = rects[i], st = cs(el), b = el.getBoundingClientRect();
+    if (Math.abs(r.width - b.width) > 0.5 || Math.abs(r.height - b.height) > 0.5) return r; // a stretched link
+    const pt = parseFloat(st.paddingTop) || 0, pb = parseFloat(st.paddingBottom) || 0;
+    return { left: r.left, right: r.right, top: r.top + pt, bottom: r.bottom - pb };
+  });
+  targets.forEach((el, i) => {
+    if (proseLink(el)) return;
+    if (el.type === "checkbox" || el.type === "radio") { const lab = el.closest("label"); if (lab) return; }
+    const r = rects[i];
+    if (r.width >= L.tapTarget - 0.5 && r.height >= L.tapTarget - 0.5) return;
+    // Too short to tap reliably (44px), or so narrow and close to another target that it's easy to miss.
+    const tiny = r.height < L.tapTarget - 0.5 || r.width < L.tapTargetMin - 0.5;
+    // Tall enough: is it so narrow that a neighbour on the same line sits inside its 44px-wide zone?
+    const cx = r.left + r.width / 2, half = L.tapTarget / 2;
+    const zone = { left: cx - half, right: cx + half, top: r.top + r.height * 0.25, bottom: r.bottom - r.height * 0.25 };
+    let crowded = false;
+    targets.forEach((o, j) => {
+      if (j === i || crowded || o.contains(el) || el.contains(o)) return;
+      const q = inner[j];
+      if (q.left < zone.right && q.right > zone.left && q.top < zone.bottom && q.bottom > zone.top) crowded = true;
+    });
+    if (tiny || crowded) add("tap-target", el, { value: Math.min(r.width, r.height), limit: L.tapTarget, key: txt(el).slice(0, 20) || el.getAttribute("aria-label") || String(i) });
+  });
+
+  // --- text over text --------------------------------------------------------------------------
+  const blockOf = (el) => el.closest("[data-os-block]") || el.closest("[data-os-id]");
+  /** Line boxes of an element's own text (a drop cap or a tall first letter stays within its line). */
+  const lineRects = (el) => {
+    const out = [];
+    for (const n of el.childNodes) {
+      if (n.nodeType !== 3 || !n.textContent.trim()) continue;
+      const range = document.createRange();
+      range.selectNodeContents(n);
+      for (const x of range.getClientRects()) if (x.width >= 0.5) out.push(x);
+    }
+    return out;
+  };
+  const boxes = leaves.filter((el) => !decorative(el) && ownText(el).length > 1).map((el) => ({ el, r: ownRect(el), lines: lineRects(el), b: blockOf(el) }));
+  const linesMeet = (a, b) => a.lines.some((x) => b.lines.some((y) => Math.min(x.right, y.right) - Math.max(x.left, y.left) > 4 && Math.min(x.bottom, y.bottom) - Math.max(x.top, y.top) > Math.max(8, 0.3 * Math.min(x.height, y.height))));
+  for (let i = 0; i < boxes.length; i++)
+    for (let j = i + 1; j < boxes.length; j++) {
+      const a = boxes[i], b = boxes[j];
+      if (!a.b || !b.b || a.b === b.b || a.b.contains(b.b) || b.b.contains(a.b)) continue;
+      const w = Math.min(a.r.right, b.r.right) - Math.max(a.r.left, b.r.left);
+      const hgt = Math.min(a.r.bottom, b.r.bottom) - Math.max(a.r.top, b.r.top);
+      if (w > 4 && hgt > 4 && linesMeet(a, b)) add("overlap", b.el, { key: a.b.getAttribute("data-os-id") || String(i) });
+    }
+
+  // --- contrast (text over photos and on solid colors) ---------------------------------------
+  const canvas = document.createElement("canvas");
+  canvas.width = canvas.height = 1;
+  const ctx2d = canvas.getContext("2d", { willReadFrequently: true });
+  const colors = new Map();
+  /** Any CSS color (rgb, color(), oklab, color-mix results\u2026) as 0\u2013255 RGB + alpha. */
+  const parse = (c) => {
+    if (!c || c === "transparent") return null;
+    if (colors.has(c)) return colors.get(c);
+    let out = null;
+    const m = /^rgba?\\(([^)]+)\\)$/.exec(c);
+    if (m) {
+      const p = m[1].split(/[ ,/]+/).filter(Boolean).map(Number);
+      out = { r: p[0], g: p[1], b: p[2], a: p.length > 3 ? p[3] : 1 };
+    } else if (ctx2d) {
+      const a = /\\/\\s*([\\d.]+)(%?)\\s*\\)$/.exec(c);
+      const alpha = a ? Number(a[1]) / (a[2] ? 100 : 1) : 1;
+      ctx2d.clearRect(0, 0, 1, 1);
+      ctx2d.fillStyle = "#000";
+      ctx2d.fillStyle = c.replace(/\\/\\s*[\\d.]+%?\\s*\\)$/, ")");
+      ctx2d.fillRect(0, 0, 1, 1);
+      const d = ctx2d.getImageData(0, 0, 1, 1).data;
+      out = { r: d[0], g: d[1], b: d[2], a: alpha };
+    }
+    colors.set(c, out);
+    return out;
+  };
+  const lin = (v) => { v /= 255; return v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4); };
+  const lum = (c) => 0.2126 * lin(c.r) + 0.7152 * lin(c.g) + 0.0722 * lin(c.b);
+  const ratio = (a, b) => { const x = lum(a), y = lum(b); return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05); };
+  const over = (top, base) => ({ r: top.r * top.a + base.r * (1 - top.a), g: top.g * top.a + base.g * (1 - top.a), b: top.b * top.a + base.b * (1 - top.a), a: 1 });
+  const opacityOf = (el) => { let o = 1; for (let e = el; e && e !== document.documentElement; e = e.parentElement) o *= Number(cs(e).opacity); return o; };
+  const PHOTO = new Set(["IMG","VIDEO","CANVAS","PICTURE","IFRAME"]);
+  const pageBg = parse(cs(document.body).backgroundColor) || { r: 255, g: 255, b: 255, a: 1 };
+  const checkPoint = (el, x, y) => {
+    const stack = document.elementsFromPoint(x, y);
+    const at = stack.indexOf(el);
+    if (at < 0) return null;
+    const layers = [];
+    let photo = false, base = null;
+    for (const e of stack.slice(at)) {
+      if (PHOTO.has(e.tagName)) { photo = true; break; }
+      const s = cs(e);
+      if (/url\\(/.test(s.backgroundImage)) { photo = true; break; }
+      if (s.backgroundImage && s.backgroundImage !== "none") return null; // gradients: checked from the document
+      const bg = parse(s.backgroundColor);
+      if (bg && bg.a > 0) {
+        const a = bg.a * opacityOf(e);
+        if (a >= 0.98) { base = { ...bg, a: 1 }; break; }
+        layers.push({ ...bg, a });
+      }
+    }
+    return { photo, base: base || (photo ? null : pageBg), layers };
+  };
+  for (const el of leaves) {
+    if (decorative(el) || ownText(el).length < 2) continue;
+    const s = cs(el);
+    const fg = parse(s.color);
+    if (!fg || fg.a === 0) continue;
+    const size = parseFloat(s.fontSize);
+    const bold = Number(s.fontWeight) >= 700;
+    const need = size >= 24 || (bold && size >= 18.66) ? 3 : 4.5;
+    const r = ownRect(el);
+    if (r.width < 1) continue;
+    const sy = window.scrollY;
+    const pts = [[r.left + Math.min(8, r.width / 2), r.top + sy + r.height / 2], [r.left + r.width / 2, r.top + sy + r.height / 2]];
+    let worst = Infinity, photo = false;
+    for (const [px, docY] of pts) {
+      if (docY < window.scrollY + 80 || docY > window.scrollY + viewH - 20) window.scrollTo(0, Math.max(0, docY - viewH / 2));
+      const py = docY - window.scrollY;
+      if (py < 0 || py > viewH) continue;
+      const hit = checkPoint(el, Math.max(0, Math.min(vw - 1, px)), py);
+      if (!hit) continue;
+      const bases = hit.photo ? [{ r: 0, g: 0, b: 0, a: 1 }, { r: 255, g: 255, b: 255, a: 1 }] : [hit.base];
+      for (const b0 of bases) {
+        let c = b0;
+        for (const l of hit.layers.slice().reverse()) c = over(l, c);
+        const text = fg.a < 1 ? over(fg, c) : fg;
+        worst = Math.min(worst, ratio(text, c));
+      }
+      photo = photo || hit.photo;
+    }
+    if (worst < need - 0.05) add(photo ? "photo-contrast" : "low-contrast", el, { value: worst, limit: need });
+  }
+  window.scrollTo(0, 0);
+
+  // --- images --------------------------------------------------------------------------------
+  for (const box of document.querySelectorAll(".os-img,iframe,video")) {
+    if (!visible(box) || box.closest(".os-section__bg,.os-header,.os-lightbox,.os-carousel__track,.os-marquee")) continue;
+    const r = box.getBoundingClientRect();
+    if (r.height > vh * L.imageScreen) add("tall-image", box, { value: r.height, limit: Math.round(vh * L.imageScreen) });
+    const img = box.querySelector && box.querySelector("img");
+    if (img && img.naturalWidth > 0 && cs(img).objectFit === "cover") {
+      const ir = img.getBoundingClientRect();
+      const nat = img.naturalWidth / img.naturalHeight, shown = ir.width / Math.max(1, ir.height);
+      const share = Math.min(nat / shown, shown / nat);
+      if (share < L.crop && !box.style.getPropertyValue("--focal") && !img.style.getPropertyValue("--focal")) add("heavy-crop", box, { value: share, limit: L.crop });
+    }
+  }
+  for (const bg of document.querySelectorAll(".os-section__bg img")) {
+    const sec = bg.closest("[data-os-section]");
+    if (!sec || !visible(sec) || bg.naturalWidth === 0) continue;
+    const r = sec.getBoundingClientRect();
+    const nat = bg.naturalWidth / bg.naturalHeight, shown = r.width / Math.max(1, r.height);
+    const share = Math.min(nat / shown, shown / nat);
+    const focal = (bg.getAttribute("style") || "") + (bg.closest("[style*='--focal']") ? "focal" : "");
+    if (share < L.crop && !/--focal|focal/.test(focal)) add("heavy-crop", sec, { value: share, limit: L.crop, key: "bg" });
+  }
+
+  // --- section rhythm, header, footer ---------------------------------------------------------
+  for (const sec of document.querySelectorAll("main [data-os-section]")) {
+    if (!visible(sec)) continue;
+    const s = cs(sec);
+    const pad = Math.max(parseFloat(s.paddingTop), parseFloat(s.paddingBottom));
+    const header = document.querySelector(".os-header");
+    const overlayExtra = sec.classList.contains("os-section--first") && document.querySelector(".has-overlay-header") && header ? header.getBoundingClientRect().height : 0;
+    const top = parseFloat(s.paddingTop) - overlayExtra, bottom = parseFloat(s.paddingBottom);
+    const minh = parseFloat(s.minHeight) || 0;
+    if (Math.max(top, bottom) > L.loosePadding && minh < vh * 0.5) add("loose-padding", sec, { value: Math.max(top, bottom), limit: L.loosePadding });
+    void pad;
+  }
+  const bar = document.querySelector(".os-header__bar");
+  if (bar && visible(bar)) {
+    const parts = Array.from(bar.children).filter(visible);
+    let crowded = bar.getBoundingClientRect().height > 120;
+    for (let i = 0; i < parts.length && !crowded; i++)
+      for (let j = i + 1; j < parts.length; j++) {
+        const a = parts[i].getBoundingClientRect(), b = parts[j].getBoundingClientRect();
+        if (Math.min(a.right, b.right) - Math.max(a.left, b.left) > 2 && Math.min(a.bottom, b.bottom) - Math.max(a.top, b.top) > 2) { crowded = true; break; }
+      }
+    if (bar.scrollWidth > bar.clientWidth + 2) crowded = true;
+    if (crowded) add("header-crowded", bar, { value: bar.getBoundingClientRect().height });
+  }
+  // The first section's main action: visible without scrolling?
+  const first = Array.from(document.querySelectorAll("main [data-os-section]")).find(visible);
+  // Only a first section with photos or video (a hero) can push its words and button down.
+  if (first && first.querySelector("img,video,.os-section__bg")) {
+    // A form's own submit button sits at its end, wherever that is; look at call-to-action buttons.
+    const cta = Array.from(first.querySelectorAll(".os-button--primary")).find((b) => visible(b) && !b.closest("form,.os-form,.os-newsletter"));
+    if (cta) {
+      const top = cta.getBoundingClientRect().top + window.scrollY;
+      if (top + Math.min(44, cta.getBoundingClientRect().height) > vh) add("cta-below-fold", cta, { value: top, limit: vh });
+    }
+  }
+  const footer = document.querySelector(".os-footer");
+  if (footer && visible(footer) && footer.getBoundingClientRect().height > vh * 2.5) add("long-footer", footer, { value: footer.getBoundingClientRect().height, limit: Math.round(vh * 2.5) });
+
+  style.remove();
+  return { width: vw, height: vh, scrollWidth, findings };
+})()`;
+var PHONE_PREPARE_SCRIPT = `(async () => {
+  for (const img of Array.from(document.images)) { img.loading = "eager"; img.decoding = "sync"; }
+  document.documentElement.classList.remove("os-reveal-ready");
+  const step = Math.max(300, Math.floor(window.innerHeight * 0.8));
+  for (let y = 0, i = 0; y < document.documentElement.scrollHeight && i < 80; y += step, i++) {
+    window.scrollTo(0, y);
+    await new Promise((r) => setTimeout(r, 25));
+  }
+  window.scrollTo(0, 0);
+  const done = Promise.all(Array.from(document.images).map((img) => img.complete ? null :
+    new Promise((r) => { img.addEventListener("load", r, { once: true }); img.addEventListener("error", r, { once: true }); })));
+  await Promise.race([done, new Promise((r) => setTimeout(r, 5000))]);
+  if (document.fonts) await Promise.race([document.fonts.ready, new Promise((r) => setTimeout(r, 3000))]);
+})()`;
+
 // ../lint/src/seo.ts
 function seoCheck(page, doc, options = {}) {
   const meta = opMeta(options);
@@ -13575,12 +14744,12 @@ function seoCheck(page, doc, options = {}) {
       } : {}
     });
   }
-  const words3 = blocks2.map(blockText).join(" ").split(/\s+/).filter(Boolean).length;
-  if (!page.seo?.noindex && words3 < 80) {
+  const words4 = blocks2.map(blockText).join(" ").split(/\s+/).filter(Boolean).length;
+  if (!page.seo?.noindex && words4 < 80) {
     add({
       rule: "seo-thin-content",
       severity: "info",
-      message: `The page has about ${words3} words of text; search engines have little to go on.`,
+      message: `The page has about ${words4} words of text; search engines have little to go on.`,
       fix: "Add a short paragraph that explains what's on the page in your own words."
     });
   }
@@ -14206,6 +15375,20 @@ async function runCheck(root, options = {}) {
         });
     }
   }
+  if (doc) {
+    try {
+      for (const i of phoneCheck(doc)) {
+        if (i.severity === "info") continue;
+        add({
+          severity: "warning",
+          rule: "phone",
+          file: i.page && i.page !== "footer" ? pageFiles2[i.page] ?? PAGES_DIR : i.page === "footer" ? SITE_FILE : SITE_FILE,
+          message: `${i.message} ${i.autofix ? `Fix: \`openspace check --phone --fix\` (${i.autofix.label.toLowerCase()}).` : i.fix}`
+        });
+      }
+    } catch {
+    }
+  }
   const mediaOnDisk = /* @__PURE__ */ new Map();
   for (const rel of await listFiles(root, "media")) {
     const bytes = (await stat(join2(root, rel))).size;
@@ -14515,7 +15698,7 @@ function setupChecklist(sq, build) {
       id: "newsletter",
       kind: "newsletter",
       title: "Bring your newsletter subscribers",
-      detail: `Sign-up forms came across, but subscribers stay with ${from}. Export them there and import them here.`,
+      detail: subscribersAdvice(sq.platform),
       where: newsletter.where,
       status: "todo"
     });
@@ -15069,7 +16252,7 @@ function nearestOpenFont(family, metrics) {
     let best;
     for (const [name, cat, xHeight, capHeight, width] of list5) {
       let d = metricDistance(metrics, { xHeight, capHeight, width });
-      if (eq.includes(name)) d -= 0.02 * (eq.length - eq.indexOf(name));
+      if (eq.includes(name)) d -= 4e-3 * (eq.length - eq.indexOf(name));
       if (!best || d < (best.distance ?? Number.POSITIVE_INFINITY))
         best = { family: name, category: cat, via: "metrics", distance: Math.max(0, d) };
     }
@@ -15169,6 +16352,11 @@ async function fitGoogleWeights(font, fetchImpl = fetch) {
 // ../import/src/fidelity/look.ts
 var norm2 = (s2) => (s2 ?? "").toLowerCase().replace(/[^a-z0-9]/g, "");
 var GENERIC = /^(?:serif|sans-serif|monospace|system-ui|ui-\w+|-apple-system|blinkmacsystemfont)$/i;
+var colorGap = (a, b) => {
+  const p = (h) => [1, 3, 5].map((i) => Number.parseInt(h.slice(i, i + 2), 16) || 0);
+  const [x, y] = [p(a), p(b)];
+  return Math.sqrt(x.reduce((n, v, i) => n + (v - (y[i] ?? 0)) ** 2, 0));
+};
 var round = (n, d = 1) => Math.round(n * 10 ** d) / 10 ** d;
 function stepOf(t, mobile, opts = {}) {
   return {
@@ -15241,7 +16429,12 @@ function lookFromProbe(d, m) {
         scale[p] = { ...scale[p], font: "heading", ...w >= 100 && w <= 900 ? { weight: w } : {} };
     }
   }
-  if (scale.h1) scale.display = { ...scale.h1 };
+  if (P.display)
+    scale.display = {
+      ...stepOf(P.display, M.display, { weight: true }),
+      font: roleOf(P.display)
+    };
+  else if (scale.h1) scale.display = { ...scale.h1 };
   if (P.lead) scale.lead = { ...stepOf(P.lead, M.lead), font: roleOf(P.lead) };
   if (P.small) scale.small = stepOf(P.small, M.small);
   if (P.eyebrow)
@@ -15263,6 +16456,17 @@ function lookFromProbe(d, m) {
   const mobileLeft = m?.layout.left;
   if (L2.contentWidth && L2.contentWidth >= 480 && L2.contentWidth <= 2400 && L2.contentWidth < d.viewport - 40)
     layout.contentWidth = Math.round(L2.contentWidth / 8) * 8;
+  const page = d.pageBackground;
+  const panels = d.sections.filter(
+    (s2) => page && s2.background && s2.left !== void 0 && s2.width !== void 0 && s2.left >= 24 && s2.left + s2.width <= d.viewport - 24 && s2.raised === true && colorGap(s2.background, page) >= 10
+  );
+  if (page && d.viewport >= 768 && panels.length && panels.length * 2 >= d.sections.length) {
+    layout.surface = "card";
+    layout.pageBackground = page;
+    const measures = panels.map((s2) => s2.textWidth).filter((w2) => !!w2);
+    const w = measures.sort((a, b) => a - b)[Math.floor(measures.length / 2)];
+    if (w && w >= 480 && w <= 1600) layout.contentWidth = Math.round(w / 8) * 8;
+  }
   if (L2.sectionPadding && L2.sectionPadding >= 16 && L2.sectionPadding <= 320)
     layout.sectionPadding = Math.round(L2.sectionPadding);
   if (layout.sectionPadding && m?.layout.sectionPadding && m.layout.sectionPadding <= 240)
@@ -15304,6 +16508,17 @@ function lookFromProbe(d, m) {
     ...d.eyebrowRule ? { eyebrowRule: true } : {},
     ...d.fonts && Object.keys(d.fonts).length ? { metrics: { ...m?.fonts, ...d.fonts } } : {},
     ...hosts.length ? { fontHosts: hosts } : {},
+    ...d.logoHeight && d.logoHeight >= 16 ? {
+      logoHeight: {
+        d: Math.min(240, d.logoHeight),
+        ...m?.logoHeight && m.logoHeight >= 16 ? { m: Math.min(240, m.logoHeight) } : {}
+      }
+    } : {},
+    ...d.footerBackground ? { footerBackground: d.footerBackground } : {},
+    ...d.footerColumns && d.footerColumns >= 2 && d.footerColumns <= 4 ? {
+      footerColumns: d.footerColumns,
+      ...d.footerText && d.footerText.size <= 14 && (d.footerText.case === "uppercase" || d.footerText.letterSpacing >= 0.08) ? { footerLabels: true } : {}
+    } : {},
     ...d.sidebar ? {
       sidebar: {
         side: d.sidebar.side,
@@ -15331,6 +16546,13 @@ function applyLook(theme, look, source, mode = "override") {
     theme.headerLayout = "sidebar";
     if (look.sidebar.background) theme.headerBackground = look.sidebar.background;
   }
+  if (look.logoHeight && !keep(theme.logoHeight)) theme.logoHeight = look.logoHeight;
+  if (look.footerBackground && !keep(theme.footerBackground))
+    theme.footerBackground = look.footerBackground;
+  if (look.footerColumns && !keep(theme.footerColumns)) {
+    theme.footerColumns = look.footerColumns;
+    if (look.footerLabels) theme.footerLabels = true;
+  }
   if (look.metrics) theme.fontMetrics = { ...look.metrics, ...theme.fontMetrics ?? {} };
   if (look.fontHosts)
     theme.fontHosts = [.../* @__PURE__ */ new Set([...theme.fontHosts ?? [], ...look.fontHosts])];
@@ -15541,7 +16763,15 @@ var PROBE_SCRIPT = String.raw`(async () => {
       const er = e.getBoundingClientRect();
       return visible(e) && er.width >= r.width * 0.9 && er.height >= r.height * 0.7;
     });
-    const res = { index, top: Math.round(r.top), height: Math.round(r.height), background: bgOf(sec.els ? sec.els[0] : sec), columns: 1, italicLines: 0, text: ownText(sec).slice(0, 120), words: ownText(sec).slice(0, 20000) };
+    const res = { index, top: Math.round(r.top), height: Math.round(r.height), left: Math.round(r.left), width: Math.round(r.width), background: bgOf(sec.els ? sec.els[0] : sec), columns: 1, italicLines: 0, text: ownText(sec).slice(0, 120), words: ownText(sec).slice(0, 20000) };
+    // A raised panel: the section's own box draws a shadow or a border (a theme's content card).
+    // (Its own box, or a panel around it narrower than the page: an article card around a band.)
+    for (let e = sec.els ? sec.els[0] : sec, k = 0; e && e !== document.body && k < 5; e = e.parentElement, k++) {
+      const st = cs(e);
+      const er = e.getBoundingClientRect();
+      if (k > 0 && er.width >= vw * 0.95) break;
+      if ((st.boxShadow && st.boxShadow !== "none") || (k === 0 && !sec.els && parseFloat(st.borderTopWidth) >= 1)) { res.raised = true; break; }
+    }
     if (bgEl || coverImg) res.backgroundImage = true;
     const h = [...sec.querySelectorAll(headSel)].find((e) => visible(e) && ownText(e).length > 1);
     if (h) {
@@ -15600,18 +16830,79 @@ var PROBE_SCRIPT = String.raw`(async () => {
       res.body = best.t;
       if (best.t.color) res.textColor = best.t.color;
     }
+    // How wide the running text is set (the measure), and where it starts.
+    const measures = paras.map((p) => rect(p)).filter((x) => x.width > 120);
+    if (measures.length) {
+      res.textWidth = Math.round(Math.max(...measures.map((x) => x.width)));
+      res.textLeft = Math.round(Math.min(...measures.map((x) => x.left)));
+    }
     // Columns: text items whose vertical spans overlap, at distinct left edges.
-    const items = [...sec.querySelectorAll(textSel + ", h2, img")].filter((e) => visible(e) && (e.tagName === "IMG" ? e.getBoundingClientRect().width > 60 : ownText(e).length >= 12)).map(rect);
-    for (const a of items) {
-      const mid = a.top + Math.min(a.height, 40) / 2;
-      const lefts = [];
-      for (const b of items) if (b.top <= mid && b.bottom >= mid && !lefts.some((l) => Math.abs(l - b.left) < 40)) lefts.push(b.left);
-      res.columns = Math.max(res.columns, Math.min(6, lefts.length));
+    const itemEls = [...sec.querySelectorAll(textSel + ", h2, img")].filter((e) => visible(e) && (e.tagName === "IMG" ? e.getBoundingClientRect().width > 60 : ownText(e).length >= 12));
+    const columnsOf = (items) => {
+      let n = 1;
+      for (const a of items) {
+        const mid = a.top + Math.min(a.height, 40) / 2;
+        const lefts = [];
+        for (const b of items) if (b.top <= mid && b.bottom >= mid && !lefts.some((l) => Math.abs(l - b.left) < 40)) lefts.push(b.left);
+        n = Math.max(n, Math.min(6, lefts.length));
+      }
+      return n;
+    };
+    res.columns = columnsOf(itemEls.map(rect));
+    // Corrected score only (the strict v3 count above is kept): columns a visitor can see.
+    // A box that clips content running sideways out of it (a scroll-snap slideshow, a map's
+    // tiles) is one picture on screen, however many slides or tiles it holds; anything else
+    // counts when at least half of it (or half the viewport's width) is inside the viewport.
+    // (A clearfix row with
+    // overflow: hidden doesn't overflow sideways, so its columns stay columns.)
+    const clipBox = (el) => {
+      for (let e = el.parentElement; e && e !== document.body && e !== doc; e = e.parentElement) {
+        const st = cs(e);
+        if ((st.overflowX !== "visible" || st.overflow !== "visible") && e.scrollWidth > e.clientWidth + 2) return e;
+      }
+      return null;
+    };
+    const shownRects = [];
+    const boxes = new Set();
+    for (const el of itemEls) {
+      const box = clipBox(el);
+      if (box) {
+        if (boxes.has(box)) continue;
+        boxes.add(box);
+        const br = rect(box);
+        const L = Math.max(0, br.left), R = Math.min(vw, br.right);
+        if (R - L > 2) shownRects.push({ ...br, left: L, right: R, width: R - L });
+        continue;
+      }
+      const r = el.getBoundingClientRect();
+      const L = Math.max(0, r.left), R = Math.min(vw, r.right);
+      // Half of it on screen — or half the screen (a wide cover photo cropped at both sides).
+      if (R - L >= Math.min(r.width, vw) * 0.5) shownRects.push(rect(el));
     }
+    const shown = columnsOf(shownRects);
+    if (shown !== res.columns) res.columnsOnScreen = shown;
     // The section's parts and where they sit (to recreate it as a component when needed).
     if (!sec.querySelector("form, input, textarea, select, iframe, video, canvas, embed, object")) {
       const parts = [];
       const inPart = (e) => parts.some((p) => p.el.contains(e));
+      // Inline links and emphasis inside a paragraph (kept as rich text when it's recreated).
+      const runsOf = (el) => {
+        const out = [];
+        const walk = (n, m) => {
+          for (const c of n.childNodes) {
+            if (c.nodeType === 3) { const t = (c.textContent || "").replace(/\s+/g, " "); if (t) out.push({ t, ...m }); }
+            else if (c.nodeType === 1 && cs(c).display !== "none") {
+              const mm = { ...m };
+              if (c.tagName === "A" && c.getAttribute("href")) mm.href = c.href;
+              if (/^(STRONG|B)$/.test(c.tagName)) mm.b = 1;
+              if (/^(EM|I)$/.test(c.tagName)) mm.i = 1;
+              if (c.tagName === "BR") out.push({ t: "\n" }); else walk(c, mm);
+            }
+          }
+        };
+        walk(el, {});
+        return out.length <= 80 && out.some((r) => r.href || r.b || r.i) ? out : undefined;
+      };
       const btnLike = (e) => { const st = cs(e); return (toHex(st.backgroundColor) || parseFloat(st.borderTopWidth) >= 1) && parseFloat(st.paddingLeft) >= 8; };
       const els = [...sec.querySelectorAll("h1, h2, h3, h4, h5, h6, p, li, blockquote, img, a, button")].filter((e) => visible(e));
       for (const e of els) {
@@ -15630,10 +16921,34 @@ var PROBE_SCRIPT = String.raw`(async () => {
           parts.push({ el: e, item: { kind: btnLike(e) ? "button" : "link", text: t, href: e.getAttribute("href") || "", box: at, style: { ...textOf(e), align: cs(e).textAlign } } });
         } else {
           if (!t || e.querySelector("p, li, h1, h2, h3, h4, h5, h6, img")) continue;
-          parts.push({ el: e, item: { kind: "text", text: t.slice(0, 1500), box: at, style: { ...textOf(e), align: cs(e).textAlign } } });
+          const runs = runsOf(e);
+          parts.push({ el: e, item: { kind: "text", text: t.slice(0, 1500), box: at, style: { ...textOf(e), align: cs(e).textAlign }, ...(runs ? { runs } : {}) } });
+        }
+      }
+      // Accent rules (thin bars, <hr>) and panels (boxes with their own fill or border) behind
+      // the words: recreated on theme colors.
+      const secBg = res.background;
+      let decor = 0;
+      for (const e of sec.querySelectorAll("hr, div, span, section, article, aside, figure, li")) {
+        if (decor >= 6 || !visible(e) || parts.some((p) => p.el === e)) continue;
+        const b = rect(e);
+        const st = cs(e);
+        const fill = toHex(st.backgroundColor);
+        const bw = parseFloat(st.borderTopWidth) || 0;
+        const line = e.tagName === "HR" || (b.height <= 4 && b.width >= 16 && (fill || bw >= 1));
+        if (line) {
+          parts.push({ el: e, item: { kind: "rule", box: { x: Math.round(b.left), y: Math.round(b.top), w: Math.round(b.width), h: Math.max(1, Math.round(e.tagName === "HR" ? bw || 1 : b.height)) }, color: fill || toHex(st.borderTopColor) } });
+          decor++;
+          continue;
+        }
+        const own = fill && fill !== secBg;
+        const framed = bw >= 1 && st.borderTopStyle !== "none" && parseFloat(st.borderLeftWidth) >= 1;
+        if ((own || framed) && b.width >= 120 && b.height >= 60 && b.width < r.width * 0.95 && !e.querySelector("img, video, iframe") && ownText(e)) {
+          parts.push({ el: e, item: { kind: "panel", box: { x: Math.round(b.left), y: Math.round(b.top), w: Math.round(b.width), h: Math.round(b.height) }, ...(own ? { color: fill } : {}), ...(framed ? { border: { width: Math.round(bw), color: toHex(st.borderTopColor) } } : {}), radius: parseFloat(st.borderTopLeftRadius) || 0 } });
+          decor++;
         }
       }
-      if (parts.length && parts.length <= 30) res.blueprint = parts.map((p) => p.item);
+      if (parts.length && parts.length <= 36) res.blueprint = parts.map((p) => p.item);
     }
     // Where the section's own content starts and ends (for the spacing between sections).
     const content = [...sec.querySelectorAll(textSel + ", h1, h2, img, picture, video, iframe, form, button, a")].filter((e) => visible(e) && (/^(IMG|PICTURE|VIDEO|IFRAME|FORM)$/.test(e.tagName) || ownText(e).length > 1)).map(rect);
@@ -15661,12 +16976,28 @@ var PROBE_SCRIPT = String.raw`(async () => {
   const inMain = (el) => !chrome(el) && !el.closest("footer, .os-footer");
   const styleOfAll = (sel) => [...document.querySelectorAll(sel)].filter((e) => visible(e) && inMain(e) && ownText(e).length > 1).map(textOf);
   const presets = {};
+  // Measurements only the corrected score uses (the strict v3 ones above stay as they were).
+  const corrections = {};
   const h1s = styleOfAll("h1");
   if (h1s.length) presets.h1 = h1s.sort((a, b) => b.size - a.size)[0];
   const h2 = median(styleOfAll("h2"));
   if (h2) presets.h2 = h2;
   const h3 = median(styleOfAll("h3"));
   if (h3) presets.h3 = h3;
+  // A display line: the page's largest short text, well above its headings (a banner's title
+  // set in a paragraph). Read when importing; the comparison doesn't check it.
+  {
+    const ref = Math.max(presets.h1 ? presets.h1.size : 0, presets.h2 ? presets.h2.size : 0, 16);
+    let best;
+    for (const e of document.querySelectorAll("p, strong, b, span, h1, h2, h3, div")) {
+      if (!visible(e) || !inMain(e)) continue;
+      const t = ownText(e);
+      if (t.length < 3 || t.length > 60 || [...e.children].some((k) => ownText(k) === t && k.tagName !== "BR" && !/^(STRONG|B|EM|I|SPAN)$/.test(k.tagName))) continue;
+      const st = textOf(e);
+      if (st.size >= ref * 1.3 && (!best || st.size > best.size)) best = st;
+    }
+    if (best) presets.display = best;
+  }
   const tally = new Map();
   for (const { el, t } of all) {
     const k = t.family + "|" + t.size;
@@ -15697,6 +17028,21 @@ var PROBE_SCRIPT = String.raw`(async () => {
     if (!links.length) links = [...header.querySelectorAll("a")].filter(linkOk);
     const mid = links[Math.floor(links.length / 2)];
     if (mid) presets.nav = textOf(mid);
+    else {
+      // Corrected score only: "[class*=brand]" above is meant for logo boxes, but it also
+      // matches a header's colour theme (OpenSpace's "os-theme-brand" sidebar). A class naming a
+      // theme isn't a logo box: look again without it.
+      const logoBox = (a) => {
+        for (let e = a; e && e.nodeType === 1; e = e.parentElement)
+          if ([...e.classList].some((c) => /brand/i.test(c) && !/theme[-_]?brand/i.test(c))) return true;
+        return false;
+      };
+      const linkOk2 = (a) => visible(a) && ownText(a).length > 1 && ownText(a).length < 30 && toHex(cs(a).backgroundColor) === undefined && !a.matches(".os-header__brand, .os-button, [rel=home]") && !a.closest(".os-header__brand, [class*=site-title]") && !logoBox(a) && !homeLink(a);
+      let again = navEl ? [...navEl.querySelectorAll("a")].filter(linkOk2) : [];
+      if (!again.length) again = [...header.querySelectorAll("a")].filter(linkOk2);
+      const mid2 = again[Math.floor(again.length / 2)];
+      if (mid2) corrections.nav = textOf(mid2);
+    }
     // The site title set as text (a wordmark), not a logo image.
     // The innermost element holding the title text (an OpenSpace title span, not its link).
     const brandOk = (e) => visible(e) && ownText(e).length > 1 && ownText(e).length <= 40 && !e.querySelector("img, svg");
@@ -15717,7 +17063,7 @@ var PROBE_SCRIPT = String.raw`(async () => {
   if (btn) {
     presets.button = textOf(btn);
     const s = cs(btn);
-    buttons = { radius: parseFloat(s.borderTopLeftRadius) || 0, background: toHex(s.backgroundColor), border: parseFloat(s.borderTopWidth) || 0, paddingX: parseFloat(s.paddingLeft) || 0, text: ownText(btn).slice(0, 40), element: btn.tagName.toLowerCase() + (btn.className && typeof btn.className === "string" ? "." + btn.className.trim().split(/\s+/).slice(0, 2).join(".") : "") };
+    buttons = { radius: parseFloat(s.borderTopLeftRadius) || 0, background: toHex(s.backgroundColor), border: parseFloat(s.borderTopWidth) || 0, paddingX: parseFloat(s.paddingLeft) || 0, text: ownText(btn).slice(0, 40), element: btn.tagName.toLowerCase() + (btn.className && typeof btn.className === "string" ? "." + btn.className.trim().split(/\s+/).slice(0, 2).join(".") : ""), ...(inMain(btn) ? {} : { chrome: true }) };
   }
 
   // --- layout ---------------------------------------------------------------------------------
@@ -15806,10 +17152,40 @@ var PROBE_SCRIPT = String.raw`(async () => {
     ...(buttons ? { buttons } : {}),
     ...(eyebrows.length ? { eyebrowRule: out.filter((s) => s.rule).length >= Math.max(1, eyebrows.length / 2) } : {}),
     layout,
+    ...(Object.keys(corrections).length ? { corrections } : {}),
     sections: out,
     height: doc.scrollHeight,
     fonts,
     fontRequests,
+    pageBackground: toHex(cs(document.body).backgroundColor) || toHex(cs(doc).backgroundColor) || "#ffffff",
+    ...(() => {
+      // The header's logo picture (its shown height) and the footer's own color.
+      const out = {};
+      const head = document.querySelector(".os-header, header, [role=banner], #header");
+      const logo = head && [...head.querySelectorAll("img, svg")].find((e) => visible(e) && e.getBoundingClientRect().height >= 16 && e.getBoundingClientRect().width >= 24);
+      if (logo) out.logoHeight = Math.round(logo.getBoundingClientRect().height);
+      const foot = [...document.querySelectorAll(".os-footer, footer, [role=contentinfo], #footer")].filter(visible).pop();
+      if (foot) {
+        const c = toHex(cs(foot).backgroundColor) || [...foot.querySelectorAll("*")].map((e) => toHex(cs(e).backgroundColor)).find(Boolean);
+        if (c) out.footerBackground = c;
+        // Its first line of words: how many groups sit side by side, and their style.
+        const leaves = [...foot.querySelectorAll("p, li, a, span, small, div, h2, h3, h4")].filter((e) => visible(e) && ownText(e) && ![...e.children].some((k) => ownText(k) && /^(P|DIV|UL|LI|H2|H3|H4)$/.test(k.tagName)));
+        const lines = leaves.map((e) => ({ e, r: rect(e) }));
+        if (lines.length) {
+          const top = Math.min(...lines.map((l) => l.r.top));
+          const row = lines.filter((l) => l.r.top <= top + 24);
+          const groups = [];
+          for (const l of row.sort((a, b) => a.r.left - b.r.left)) {
+            const g = groups[groups.length - 1];
+            if (g && l.r.left - g.right < 48) g.right = Math.max(g.right, l.r.right);
+            else groups.push({ left: l.r.left, right: l.r.right });
+          }
+          out.footerColumns = groups.length;
+          out.footerText = textOf(row[0].e);
+        }
+      }
+      return out;
+    })(),
     ...(sidebar ? { sidebar } : {}),
   };
 })()`;
@@ -19510,15 +20886,15 @@ function truncate(v, l = 50, o = "...") {
     return v;
   return str5.substring(0, l - o.length) + o;
 }
-function truncatewords(v, words3 = 15, o = "...") {
+function truncatewords(v, words4 = 15, o = "...") {
   const str5 = stringify(v);
   o = stringify(o);
   this.context.memoryLimit.use(str5.length + o.length);
   const arr = str5.split(/\s+/);
-  if (words3 <= 0)
-    words3 = 1;
-  let ret = arr.slice(0, words3).join(" ");
-  if (arr.length >= words3)
+  if (words4 <= 0)
+    words4 = 1;
+  let ret = arr.slice(0, words4).join(" ");
+  if (arr.length >= words4)
     ret += o;
   return ret;
 }
@@ -28355,28 +29731,28 @@ function gfmFootnoteHtml(options) {
       },
       gfmFootnoteCallString(token) {
         let calls = this.getData("gfmFootnoteCallOrder");
-        let counts = this.getData("gfmFootnoteCallCounts");
+        let counts2 = this.getData("gfmFootnoteCallCounts");
         const id = normalizeIdentifier(this.sliceSerialize(token));
         let counter;
         this.resume();
         if (!calls) this.setData("gfmFootnoteCallOrder", calls = []);
-        if (!counts) this.setData("gfmFootnoteCallCounts", counts = {});
+        if (!counts2) this.setData("gfmFootnoteCallCounts", counts2 = {});
         const index = calls.indexOf(id);
         const safeId = sanitizeUri(id.toLowerCase());
         if (index === -1) {
           calls.push(id);
-          counts[id] = 1;
+          counts2[id] = 1;
           counter = calls.length;
         } else {
-          counts[id]++;
+          counts2[id]++;
           counter = index + 1;
         }
-        const reuseCounter = counts[id];
+        const reuseCounter = counts2[id];
         this.tag('<sup><a href="#' + clobberPrefix + "fn-" + safeId + '" id="' + clobberPrefix + "fnref-" + safeId + (reuseCounter > 1 ? "-" + reuseCounter : "") + '" data-footnote-ref="" aria-describedby="footnote-label">' + String(counter) + "</a></sup>");
       },
       null() {
         const calls = this.getData("gfmFootnoteCallOrder") || [];
-        const counts = this.getData("gfmFootnoteCallCounts") || {};
+        const counts2 = this.getData("gfmFootnoteCallCounts") || {};
         const definitions = this.getData("gfmFootnoteDefinitions") || {};
         let index = -1;
         if (calls.length > 0) {
@@ -28392,7 +29768,7 @@ function gfmFootnoteHtml(options) {
           const safeId = sanitizeUri(id.toLowerCase());
           let referenceIndex = 0;
           const references = [];
-          while (++referenceIndex <= counts[id]) {
+          while (++referenceIndex <= counts2[id]) {
             references.push('<a href="#' + clobberPrefix + "fnref-" + safeId + (referenceIndex > 1 ? "-" + referenceIndex : "") + '" data-footnote-backref="" aria-label="' + this.encode(typeof backLabel === "string" ? backLabel : backLabel(index, referenceIndex)) + '" class="data-footnote-backref">\u21A9' + (referenceIndex > 1 ? "<sup>" + referenceIndex + "</sup>" : "") + "</a>");
           }
           const reference = references.join(" ");
@@ -30809,7 +32185,7 @@ var typeOf = (o) => {
   for (const k of TYPE_KEYS) if (typeof o[k] === "string") return o[k];
   return void 0;
 };
-function sectionsOf2(o) {
+function sectionsOf3(o) {
   if (!isObj3(o)) return void 0;
   for (const k of SECTION_KEYS) {
     const v = o[k];
@@ -30840,7 +32216,7 @@ async function findStructuredPages(source, files) {
       data = p.data;
       body = p.body;
     }
-    if (sectionsOf2(data)) out.push({ path: f, data, ...body ? { body } : {} });
+    if (sectionsOf3(data)) out.push({ path: f, data, ...body ? { body } : {} });
   }
   return out;
 }
@@ -30956,6 +32332,7 @@ function formFrom(v, ctx) {
   if (signupOnly)
     return {
       kind: "newsletter",
+      ...fields.some((f) => f.type !== "email") ? { askName: true } : {},
       ...button ? { buttonLabel: plain2(button) } : {},
       ...str3(v.email_placeholder) ? { placeholder: str3(v.email_placeholder) } : {},
       ...filled(v.success_message) ? { success: filled(v.success_message) } : {}
@@ -31407,7 +32784,7 @@ ${siteBg ? `body{background-color:${siteBg};}` : ""}`
       placeholders,
       fg: fgFor
     };
-    const raw2 = sectionsOf2(file.data) ?? [];
+    const raw2 = sectionsOf3(file.data) ?? [];
     const sections = [];
     for (const s2 of raw2) {
       typesSeen.set(typeOf(s2) ?? "?", (typesSeen.get(typeOf(s2) ?? "?") ?? 0) + 1);
@@ -40919,13 +42296,14 @@ function fontCredit(a, b, o, i) {
   const d = metricDistance(ma, mb);
   return d <= 0.04 ? 0.85 : d <= 0.07 ? 0.7 : d <= 0.11 ? 0.5 : d <= 0.16 ? 0.25 : 0;
 }
+var SCORER = "v3.1-corrected";
 var norm3 = (s2) => (s2 ?? "").toLowerCase().replace(/[^a-z0-9]/g, "");
-var words2 = (s2) => new Set(
+var words3 = (s2) => new Set(
   s2.toLowerCase().replace(/[^a-z0-9\s]/g, " ").split(/\s+/).filter((w) => w.length > 2)
 );
 var jaccard = (a, b) => {
-  const A = words2(a);
-  const B = words2(b);
+  const A = words3(a);
+  const B = words3(b);
   if (!A.size || !B.size) return 0;
   let n = 0;
   for (const w of A) if (B.has(w)) n++;
@@ -40966,7 +42344,12 @@ var ROLE_OF = {
   nav: "label",
   wordmark: "label"
 };
-function typeChecks(o, i, tol) {
+function presetOf(p, k, mode) {
+  const v = p.presets[k];
+  if (v || mode === "strict" || k !== "nav") return v;
+  return p.corrections?.nav;
+}
+function typeChecks(o, i, tol, mode = "corrected") {
   const out = [];
   const mobile = o.viewport < 700;
   const sizeKey = mobile ? "sizeMobile" : "size";
@@ -40982,8 +42365,8 @@ function typeChecks(o, i, tol) {
     "nav",
     "wordmark"
   ]) {
-    const a = o.presets[k];
-    const b = i.presets[k];
+    const a = presetOf(o, k, mode);
+    const b = presetOf(i, k, mode);
     if (!a) continue;
     if (k === "nav" && mobile) continue;
     if ((k === "h1" || k === "h2" || k === "h3") && a.case === "uppercase" && a.size < 16) continue;
@@ -41128,12 +42511,12 @@ function matchSections(o, i) {
   });
   o.forEach((s2, k) => {
     if (out[k] !== void 0) return;
-    const A = words2(`${s2.heading?.text ?? ""} ${s2.words ?? s2.text}`);
+    const A = words3(`${s2.heading?.text ?? ""} ${s2.words ?? s2.text}`);
     if (A.size < 4) return;
     let best = -1;
     let score = 0.6;
     i.forEach((t, n) => {
-      const B = words2(`${t.heading?.text ?? ""} ${t.words ?? t.text}`);
+      const B = words3(`${t.heading?.text ?? ""} ${t.words ?? t.text}`);
       let hit = 0;
       for (const w of A) if (B.has(w)) hit++;
       if (hit / A.size > score) {
@@ -41161,7 +42544,10 @@ function matchSections(o, i) {
   });
   return out;
 }
-function sectionChecks(a, b, tol, o, i) {
+var columnsOf2 = (s2, mode) => mode === "corrected" ? s2.columnsOnScreen ?? s2.columns : s2.columns;
+function sectionChecks(a0, b0, tol, o, i, mode = "corrected") {
+  const a = { ...a0, columns: columnsOf2(a0, mode) };
+  const b = { ...b0, columns: columnsOf2(b0, mode) };
   const out = [];
   const add = (c) => out.push({ area: "section", ...c });
   if (a.background && b.background && !a.backgroundImage) {
@@ -41298,56 +42684,159 @@ function withVisual(p, visual) {
   const base = p.exact ?? structure;
   const v = Math.max(0, Math.min(1, visual));
   const exact = (1 - VISUAL_WEIGHT) * base + VISUAL_WEIGHT * 100 * v;
+  const strictExact = p.strict ? (1 - VISUAL_WEIGHT) * p.strict.checks + VISUAL_WEIGHT * 100 * v : void 0;
   return {
     ...p,
     structure,
     visual: Math.round(v * 1e3) / 1e3,
     exact,
-    score: Math.round(exact)
-  };
+    score: Math.round(exact),
+    ...p.strict && strictExact !== void 0 ? { strict: { ...p.strict, exact: strictExact, score: Math.round(strictExact) } } : {}
+  };
+}
+var pictureOnly = (s2) => !s2.heading && (s2.text ?? "").replace(/\s+/g, "").length < 3 && Boolean(s2.image || s2.backgroundImage);
+function pictureHost(k, match, o, i) {
+  let pk = k - 1;
+  while (pk >= 0 && match[pk] === void 0) pk--;
+  let nk = k + 1;
+  while (nk < match.length && match[nk] === void 0) nk++;
+  const lo = pk >= 0 ? match[pk] : 0;
+  const hi = nk < match.length ? match[nk] : i.sections.length - 1;
+  const at = (o.sections[k]?.top ?? 0) / Math.max(1, o.height);
+  let best;
+  let gap = Number.POSITIVE_INFINITY;
+  for (let n = Math.min(lo, hi); n <= Math.max(lo, hi); n++) {
+    const t = i.sections[n];
+    if (!t || !(t.image || t.backgroundImage)) continue;
+    const d = Math.abs(t.top / Math.max(1, i.height) - at);
+    if (d < gap) {
+      gap = d;
+      best = n;
+    }
+  }
+  return best;
 }
-function compareLooks(original, imported, path2, opts = {}) {
-  const tol = opts.sizeTolerance ?? 0.12;
-  const checks = [...typeChecks(original, imported, tol), ...layoutChecks(original, imported)];
+function comparePage(original, imported, tol, mode, notes) {
+  const checks = [
+    ...typeChecks(original, imported, tol, mode),
+    ...layoutChecks(original, imported)
+  ];
+  if (notes && original.viewport >= 700 && !original.presets.nav !== !presetOf(original, "nav", mode))
+    notes.push(`The original's navigation sits in a header themed "brand": read as navigation.`);
+  if (notes && !imported.presets.nav && presetOf(imported, "nav", mode) && original.viewport >= 700)
+    notes.push(
+      `The new site's navigation sits in a header themed "brand" (os-theme-brand): read as navigation, not as a logo.`
+    );
   const match = matchSections(original.sections, imported.sections);
+  const phone = original.viewport < 700;
   const sections = original.sections.map((s2, k) => {
     const j = match[k];
     const other = j === void 0 ? void 0 : imported.sections[j];
-    const c = other ? sectionChecks(s2, other, tol, original, imported) : [
-      {
-        area: "section",
-        what: "Present",
-        original: s2.heading?.text ?? s2.text.slice(0, 40),
-        imported: "no matching section",
-        ok: false,
-        fix: "Bring this section across (or check it was merged into another).",
-        weight: 4
+    let c;
+    let shared;
+    if (other) {
+      c = sectionChecks(s2, other, tol, original, imported, mode);
+      if (notes && mode === "corrected") {
+        const was = [s2.columns, other.columns];
+        const now = [columnsOf2(s2, mode), columnsOf2(other, mode)];
+        if (was[0] !== was[1] !== (now[0] !== now[1]))
+          notes.push(
+            `Section ${k + 1}: columns counted on screen only (${was[0]} \u2192 ${was[1]} counted as ${now[0]} \u2192 ${now[1]}; what's off screen or inside one slideshow or map isn't a column).`
+          );
       }
-    ];
+    } else if (mode === "corrected" && phone && pictureOnly(s2)) {
+      shared = pictureHost(k, match, original, imported);
+      c = [];
+    } else c = [];
+    if (shared !== void 0) {
+      const host = imported.sections[shared];
+      notes?.push(
+        `Section ${k + 1} (a picture alone on a phone) is the picture of section ${shared + 1}, which holds it with its words.`
+      );
+      c = [
+        {
+          area: "section",
+          what: "Present",
+          original: "(a picture)",
+          imported: `with its words in section ${shared + 1}`,
+          ok: true,
+          weight: 4
+        }
+      ];
+      const sa = s2.image?.aspect;
+      const sb = host.image?.aspect;
+      if (sa && sb) {
+        const r = sb / sa;
+        const same = r > 0.85 && r < 1.18;
+        c.push({
+          area: "section",
+          what: "Image crop",
+          original: `${sa}:1`,
+          imported: `${sb}:1`,
+          ok: same,
+          ...same ? {} : { fix: "Use the original's image proportions (the block's aspect ratio)." },
+          weight: 1
+        });
+      }
+    } else if (!other)
+      c = [
+        {
+          area: "section",
+          what: "Present",
+          original: s2.heading?.text ?? s2.text.slice(0, 40),
+          imported: "no matching section",
+          ok: false,
+          fix: "Bring this section across (or check it was merged into another).",
+          weight: 4
+        }
+      ];
+    const at = j ?? shared;
     return {
       index: k,
       ...s2.heading ? { heading: s2.heading.text } : {},
-      ...j !== void 0 ? { importedIndex: j } : {},
+      ...at !== void 0 ? { importedIndex: at } : {},
       checks: c,
       score: scoreOf(c)
     };
   });
   const all = [...checks, ...sections.flatMap((s2) => s2.checks)];
+  return { checks, sections, exact: exactScore(all) };
+}
+function compareLooks(original, imported, path2, opts = {}) {
+  const tol = opts.sizeTolerance ?? 0.12;
+  const notes = [];
+  const page = comparePage(original, imported, tol, "corrected", notes);
+  const strict = comparePage(original, imported, tol, "strict");
   return {
     path: path2,
     original: original.url,
     imported: imported.url,
     viewport: original.viewport,
-    score: scoreOf(all),
-    structure: scoreOf(all),
-    exact: exactScore(all),
-    checks,
-    sections
+    score: Math.round(page.exact),
+    structure: Math.round(page.exact),
+    exact: page.exact,
+    checks: page.checks,
+    sections: page.sections,
+    strict: {
+      score: Math.round(strict.exact),
+      exact: strict.exact,
+      structure: Math.round(strict.exact),
+      checks: strict.exact
+    },
+    ...notes.length ? { corrections: notes } : {}
   };
 }
 function fidelityReport(pages) {
-  const exact = pages.length ? pages.reduce((n, p) => n + (p.exact ?? p.score), 0) / pages.length : 100;
-  return { score: Math.round(exact), exact: Math.round(exact * 100) / 100, pages };
+  const mean = (f) => pages.length ? pages.reduce((n, p) => n + f(p), 0) / pages.length : 100;
+  const exact = mean((p) => p.exact ?? p.score);
+  const strict = mean((p) => p.strict?.exact ?? p.exact ?? p.score);
+  return {
+    score: Math.round(exact),
+    exact: Math.round(exact * 100) / 100,
+    strict: { score: Math.round(strict), exact: Math.round(strict * 100) / 100 },
+    scorer: SCORER,
+    pages
+  };
 }
 var cell = (s2) => s2.replace(/\|/g, "\\|").replace(/\n/g, " ");
 function fidelityMarkdown(report, opts = {}) {
@@ -41355,7 +42844,11 @@ function fidelityMarkdown(report, opts = {}) {
     "# Visual fidelity",
     "",
     `Overall match: **${report.score}/100** \u2014 fonts, type sizes, spacing and each section measured in a browser on both sites (75%), and how alike the pages look as pictures (25%). How it's scored: docs/qa/import-fidelity.md.`,
-    ""
+    "",
+    ...report.strict ? [
+      `Scored two ways, side by side: **${report.score}/100 corrected**, ${report.strict.score}/100 by the strict v3 scorer. The corrected score reads three things the strict one gets wrong (navigation in a header themed "brand", off-screen slides counted as columns, a picture-only band on a phone); the pages below list where it did.`,
+      ""
+    ] : []
   ];
   if (opts.tuning) {
     lines.push(
@@ -41370,7 +42863,12 @@ function fidelityMarkdown(report, opts = {}) {
     );
   }
   for (const p of report.pages) {
-    lines.push(`## ${p.path} at ${p.viewport}px \u2014 ${p.score}/100`, "");
+    lines.push(
+      `## ${p.path} at ${p.viewport}px \u2014 ${p.score}/100${p.strict && p.strict.score !== p.score ? ` (strict v3: ${p.strict.score}/100)` : ""}`,
+      ""
+    );
+    if (p.corrections?.length)
+      lines.push("Corrected scoring on this page:", "", ...p.corrections.map((c) => `- ${c}`), "");
     if (p.visual !== void 0)
       lines.push(
         `Checks ${p.structure ?? p.score}/100 \xB7 looks alike ${Math.round(p.visual * 100)}/100 (screenshots compared).`,
@@ -41657,9 +43155,9 @@ function htmlToRichText(html, rewrite2 = (h) => h) {
       )
     });
   }
-  const counts = /* @__PURE__ */ new Map();
-  for (const a of ctx.aligns) counts.set(a, (counts.get(a) ?? 0) + 1);
-  const top = [...counts.entries()].sort((a, b) => b[1] - a[1])[0]?.[0];
+  const counts2 = /* @__PURE__ */ new Map();
+  for (const a of ctx.aligns) counts2.set(a, (counts2.get(a) ?? 0) + 1);
+  const top = [...counts2.entries()].sort((a, b) => b[1] - a[1])[0]?.[0];
   return {
     doc,
     ...top === "center" ? { align: "center" } : top === "right" ? { align: "end" } : {}
@@ -42058,13 +43556,19 @@ async function mapBlock(ctx, sq, opts = {}) {
       const href = sq.href ?? sq.card?.button?.href;
       const link2 = href ? await linkFor(ctx, href) : void 0;
       return one(
-        makeBlock(ctx, "image", {
-          image: image2,
-          aspect: "original",
-          lightbox: false,
-          ...caption ? { caption: clip2(caption, 200) } : {},
-          ...link2 ? { link: link2 } : {}
-        })
+        makeBlock(
+          ctx,
+          "image",
+          {
+            image: image2,
+            aspect: "original",
+            lightbox: false,
+            ...caption ? { caption: clip2(caption, 200) } : {},
+            ...link2 ? { link: link2 } : {},
+            ...sq.natural ? { size: "original" } : {}
+          },
+          sq.natural ? { style: { align: { d: "start" } } } : {}
+        )
       );
     }
     case "gallery": {
@@ -42091,7 +43595,8 @@ async function mapBlock(ctx, sq, opts = {}) {
           "gallery",
           {
             images,
-            aspect: sq.layout === "grid" ? "1:1" : "original",
+            aspect: sq.layout === "grid" || sq.fit === "contain" ? "1:1" : "original",
+            ...sq.fit === "contain" ? { fit: "contain" } : {},
             columns: images.length >= 4 && sq.layout === "grid" ? "4" : "3",
             lightbox: true,
             showCaptions: images.some((i) => i.caption)
@@ -42121,7 +43626,7 @@ async function mapBlock(ctx, sq, opts = {}) {
       ctx.notices.push({
         kind: "form",
         where: ctx.where,
-        message: ctx.platform && ctx.platform !== "Squarespace" ? `Newsletter signup recreated. Subscribers are not moved: export your list from ${ctx.platform} (or your email service) and import it in the Hub.` : "Newsletter signup recreated. Squarespace Email Campaigns / Mailchimp subscribers are not moved: export your list from Squarespace and import it in the Hub."
+        message: ctx.platform && /^(?:GitHub Pages|Jekyll|Hugo|Eleventy|the original site)/.test(ctx.platform) ? "Newsletter signup recreated. The old site didn't keep a subscriber list itself: if its form sent sign-ups to an email service, export the list there and import it in the Hub." : ctx.platform && ctx.platform !== "Squarespace" ? `Newsletter signup recreated. Subscribers are not moved: export your list from ${ctx.platform} (or your email service) and import it in the Hub.` : "Newsletter signup recreated. Squarespace Email Campaigns / Mailchimp subscribers are not moved: export your list from Squarespace and import it in the Hub."
       });
       return one(
         makeBlock(
@@ -42130,6 +43635,7 @@ async function mapBlock(ctx, sq, opts = {}) {
           {
             ...sq.heading ? { heading: clip2(sq.heading, 80) } : {},
             ...sq.description ? { description: clip2(sq.description, 240) } : {},
+            ...sq.askName ? { askName: true } : {},
             ...sq.buttonLabel ? { buttonLabel: clip2(sq.buttonLabel, 30) } : {},
             ...sq.placeholder ? { placeholder: clip2(sq.placeholder, 60) } : {},
             ...sq.success ? { successMessage: clip2(sq.success, 200) } : {}
@@ -42298,7 +43804,12 @@ async function mapBlock(ctx, sq, opts = {}) {
         makeBlock(
           ctx,
           "product",
-          { product: { collection: item2.collection, items: [item2.slug] } },
+          {
+            product: { collection: item2.collection, items: [item2.slug] },
+            ...sq.show?.excerpt === false ? { showDescription: false } : {},
+            ...sq.show?.price === false ? { showPrice: false } : {},
+            ...sq.show?.buy === false ? { showBuy: false, imageAspect: "1:1" } : {}
+          },
           { variant: "card" }
         )
       );
@@ -42543,7 +44054,8 @@ function stackSection(blocks2, spans, style, width, align) {
     layout: {
       mode: "stack",
       columns: cols > 1 ? { d: spans, m: [12] } : { d: [12] },
-      ...cols > 1 ? { align: "center" } : {},
+      // Words beside a picture sit centred on it; columns of words start at the top together.
+      ...cols > 1 && blocks2.some(({ block: block4 }) => ["image", "gallery", "video", "map", "embed"].includes(block4.type)) ? { align: "center" } : {},
       ...width && width !== "content" ? { width } : {}
     },
     style,
@@ -42553,6 +44065,75 @@ function stackSection(blocks2, spans, style, width, align) {
   if (isStarter) section.preset = starterRef({ columns: spans, ...align ? { align } : {} });
   return section;
 }
+var headingLevelOf = (b) => b.type === "heading" ? Number(String(b.fields.level ?? "h2").slice(1)) || 2 : void 0;
+var textOfNodes = (nodes) => JSON.stringify(nodes ?? "").length;
+function splitAtHeadings(blocks2) {
+  const count2 = (level2) => {
+    let n = 0;
+    for (const { block: block4 } of blocks2) {
+      if (headingLevelOf(block4) === level2) n++;
+      if (block4.type === "text") {
+        const doc = block4.fields.content;
+        for (const node2 of doc?.content ?? [])
+          if (node2.type === "heading" && node2.attrs?.level === level2) n++;
+      }
+    }
+    return n;
+  };
+  const size2 = blocks2.reduce(
+    (n, { block: block4 }) => n + (block4.type === "text" ? textOfNodes(block4.fields.content) : textOfNodes(block4.fields)),
+    0
+  );
+  const media = blocks2.filter(
+    ({ block: block4 }) => block4.type === "image" && block4.fields.size === "original"
+  ).length;
+  const rules = blocks2.filter(({ block: block4 }) => block4.type === "line").length;
+  if (size2 < 2400 && media < 2 && rules < 1) return [blocks2];
+  const level = count2(2) >= 2 ? 2 : count2(3) >= 3 ? 3 : void 0;
+  if (!level) return [blocks2];
+  const out = [[]];
+  const cur = () => out[out.length - 1];
+  const start = () => {
+    if (!cur().length) return;
+    const last2 = cur().at(-1);
+    const carry = last2.block.type === "image" && last2.block.fields.size === "original";
+    if (!carry) out.push([]);
+    else if (cur().length > 1) {
+      cur().pop();
+      out.push([last2]);
+    }
+  };
+  for (const p of blocks2) {
+    if (headingLevelOf(p.block) === level) {
+      start();
+      cur().push(p);
+      continue;
+    }
+    if (p.block.type !== "text") {
+      cur().push(p);
+      continue;
+    }
+    const doc = p.block.fields.content;
+    const parts = [[]];
+    for (const node2 of doc.content ?? []) {
+      if (node2.type === "heading" && node2.attrs?.level === level && parts.at(-1).length)
+        parts.push([]);
+      parts.at(-1).push(node2);
+    }
+    parts.forEach((nodes, i) => {
+      if (i > 0 || nodes[0]?.type === "heading" && nodes[0].attrs?.level === level) start();
+      cur().push({
+        ...p,
+        block: {
+          ...p.block,
+          ...i > 0 ? { id: newId("blk") } : {},
+          fields: { ...p.block.fields, content: { ...doc, content: nodes } }
+        }
+      });
+    });
+  }
+  return out.filter((c) => c.length);
+}
 async function mapBlocks(ctx, blocks2, inGrid = false) {
   const out = [];
   for (const b of blocks2) out.push(...await mapBlock(ctx, b, { inGrid }));
@@ -42651,6 +44232,15 @@ async function mapSectionParts(ctx, sq) {
     }
     return [section];
   }
+  if (sq.together && sq.layout.rows.length > 1) {
+    const filled2 = sq.layout.rows.map((r) => r.columns.filter((c) => c.blocks.length));
+    const multi = filled2.some((cols) => cols.length > 1);
+    const shapes = new Set(filled2.map((cols) => cols.map((c) => c.span).join("-")));
+    if (multi && shapes.size > 1) {
+      const grid = await rowsAsGrid(ctx, sq.layout.rows, style, width);
+      if (grid) return [grid];
+    }
+  }
   const out = [];
   let run2;
   const flush = () => {
@@ -42662,20 +44252,22 @@ async function mapSectionParts(ctx, sq) {
       run2 = void 0;
       return;
     }
-    out.push(
-      stackSection(
-        run2.blocks,
-        run2.spans,
-        out.length ? {
-          ...style,
-          // A photo stays with the first part; a plain color continues behind every part.
-          background: style.background?.type === "color" ? style.background : void 0,
-          minHeight: void 0
-        } : style,
-        width,
-        align
-      )
-    );
+    const parts = run2.spans.length === 1 ? splitAtHeadings(run2.blocks) : [run2.blocks];
+    for (const part of parts)
+      out.push(
+        stackSection(
+          part,
+          run2.spans,
+          out.length ? {
+            ...style,
+            // A photo stays with the first part; a plain color continues behind every part.
+            background: style.background?.type === "color" ? style.background : void 0,
+            minHeight: void 0
+          } : style,
+          width,
+          align
+        )
+      );
     run2 = void 0;
   };
   for (const row of sq.layout.rows) {
@@ -42704,6 +44296,11 @@ async function mapSectionParts(ctx, sq) {
   flush();
   if (!out.length && bg) out.push(stackSection([], [12], style, width, align));
   if (sq.role && out.length === 1) applyNearestPreset(out[0], sq.role, !sq.theme);
+  for (const s2 of out)
+    if (s2.layout.mode === "stack" && s2.blocks.length === 1 && s2.blocks[0]?.type === "gallery" && s2.blocks[0].fields.fit === "contain" && (!s2.layout.width || s2.layout.width === "wide" || s2.layout.width === "full")) {
+      s2.layout.width = "narrow";
+      delete s2.preset;
+    }
   for (const s2 of out)
     for (const k of Object.keys(s2.style))
       if (s2.style[k] === void 0) delete s2.style[k];
@@ -42852,6 +44449,57 @@ function applyNearestPreset(section, role, themeUnknown) {
     if (model.style?.align && !b.style?.align) b.style = { ...b.style, align: model.style.align };
   }
 }
+async function rowsAsGrid(ctx, rows, style, width) {
+  const ROW_PX = 24;
+  const contentPx = width === "wide" || width === "full" ? 1440 : width === "narrow" ? 720 : 1280;
+  const blocks2 = [];
+  const items = {};
+  let y = 1;
+  for (const row of rows) {
+    const cols = row.columns.filter((c) => c.blocks.length);
+    if (!cols.length) continue;
+    const total = row.columns.reduce((n, c) => n + c.span, 0) || 12;
+    let x = 1;
+    let rowH = 1;
+    for (const col of row.columns) {
+      const w = Math.max(
+        1,
+        Math.min(DESKTOP_COLS - x + 1, Math.round(col.span / Math.max(12, total) * DESKTOP_COLS))
+      );
+      let cy = y;
+      for (const b of await mapBlocks(ctx, col.blocks, true)) {
+        const img2 = b.type === "image" ? b.fields.image : void 0;
+        const ratio = img2?.width && img2?.height ? img2.width / img2.height : void 0;
+        const h = b.type === "image" ? Math.max(4, Math.round(w / DESKTOP_COLS * contentPx / (ratio ?? 1.5) / ROW_PX)) : 1;
+        blocks2.push(b);
+        items[b.id] = { d: { x, y: cy, w, h } };
+        cy += h;
+      }
+      rowH = Math.max(rowH, cy - y);
+      x = Math.min(DESKTOP_COLS, x + w);
+    }
+    y += rowH;
+  }
+  if (blocks2.length < 2) return void 0;
+  const section = {
+    id: newId("sec"),
+    layout: {
+      mode: "grid",
+      rows: { d: y - 1 },
+      items,
+      ...width && width !== "content" ? { width } : {}
+    },
+    style,
+    blocks: blocks2
+  };
+  const mobile = autoMobileLayout(section, { reset: true });
+  if (mobile && section.layout.mode === "grid") {
+    section.layout.items = mobile;
+    const mRows = Math.max(1, ...Object.values(mobile).map((i) => i.m ? i.m.y + i.m.h - 1 : 1));
+    section.layout.rows = { d: y - 1, m: mRows };
+  }
+  return section;
+}
 
 // ../import/src/map/site.ts
 var clip3 = (s2, n) => s2.length > n ? `${s2.slice(0, n - 1).trimEnd()}\u2026` : s2;
@@ -43151,6 +44799,12 @@ function headerFor(site2, siteDark, brand) {
   }
   return {
     variant,
+    ...t.logoHeight ? {
+      logoHeight: {
+        d: Math.round(t.logoHeight.d),
+        ...t.logoHeight.m ? { m: Math.round(t.logoHeight.m) } : {}
+      }
+    } : {},
     sticky: t.headerFixed === true,
     transparentOnHero: t.headerTransparent === true,
     mobileMenu: "fullscreen",
@@ -43393,6 +45047,18 @@ async function buildSite(sq, opts) {
       blocks: text7 ? [text7] : []
     };
   }
+  if (footer) splitFooterLine(footer, sq.theme.footerColumns, sq.theme.footerLabels === true);
+  const footBg = sq.theme.footerBackground;
+  if (footer && footBg && /^#[0-9a-f]{6}$/i.test(footBg) && !footer.style.background) {
+    const dark = relativeLuminance(footBg) < 0.18;
+    if (dark || relativeLuminance(footBg) < 0.97) {
+      footer.style = {
+        ...footer.style,
+        colorTheme: dark ? "dark" : footer.style.colorTheme ?? "light",
+        background: { type: "color", color: footBg }
+      };
+    }
+  }
   const logo = sq.logo ? await opts.media.image(sq.logo, "logo") : void 0;
   const favicon = sq.favicon && /^https?:\/\//.test(sq.favicon) && !/\.ico(?:[?#]|$)/i.test(sq.favicon) ? await opts.media.image({ url: sq.favicon, alt: "" }, "favicon") : void 0;
   const homeSeoImage = sq.pages.find((p) => p.path === "/")?.seo.image;
@@ -43485,6 +45151,35 @@ async function buildSite(sq, opts) {
     linkFixes
   };
 }
+function splitFooterLine(footer, columns, labels = false) {
+  if (!columns || columns < 2 || columns > 4) return;
+  if (footer.layout.mode !== "stack" || footer.layout.columns.d.length !== 1) return;
+  const texts = footer.blocks.filter((b) => b.type === "text");
+  if (footer.blocks.length !== 1 || texts.length !== 1) return;
+  const block4 = texts[0];
+  const doc = block4.fields.content;
+  const paras = doc.content ?? [];
+  if (paras.length !== columns || paras.some((p) => p.type !== "paragraph")) return;
+  const span = Math.floor(12 / columns);
+  const spans = paras.map((_, i) => i === paras.length - 1 ? 12 - span * (columns - 1) : span);
+  const aligns = paras.map(
+    (_, i) => i === 0 ? "start" : i === paras.length - 1 ? "end" : "center"
+  );
+  footer.blocks = paras.map((p, i) => ({
+    ...block4,
+    id: i === 0 ? block4.id : newId("blk"),
+    column: i,
+    fields: {
+      ...block4.fields,
+      content: {
+        ...doc,
+        content: [labels ? { ...p, attrs: { ...p.attrs ?? {}, preset: "eyebrow" } } : p]
+      }
+    },
+    style: { ...block4.style ?? {}, align: { d: aligns[i], m: "start" } }
+  }));
+  footer.layout = { ...footer.layout, columns: { d: spans, m: [12] }, align: "center" };
+}
 
 // ../import/src/media.ts
 import { createHash as createHash2 } from "crypto";
@@ -43714,7 +45409,7 @@ The same rules power Studio's built-in Design check. Follow them so pages look d
 6. **Two typefaces maximum.** Change the pairing in Site Styles rather than per block.
 7. **Never invent facts, testimonials, prices or credentials.** Ask the owner.
 8. **Alt text describes the image's purpose,** not just its contents; decorative images are marked decorative.
-9. **Check mobile.** After any grid change, review the mobile placement.
+9. **Great on phones, every time.** Most visitors use a phone. Before any publish run phone_check (it measures every page as a phone at 360 and 390 px where a browser is available), then fix_for_phones (phone-only fixes; desktop stays as designed), until there are zero phone errors and warnings. The bar: the hero's headline and main button on the first screen, no sideways scrolling or overlapping text, reading text 16px or larger, tap targets 44px or larger, text never squeezed into narrow columns, blocks in reading order, readable text over photos, no photo taller than the screen.
 10. **Prefer fewer, stronger sections** over many thin ones.
 11. **Custom components for bespoke moments only.** When no preset can express a distinctive section (an editorial hero, a layered collage, a horizontal story), use a custom component (list_components \u2192 create_component or insert_component from the Designer components library). Expose every word, image and link as a field (owners edit fields, never code), style only with theme tokens (var(--os-color-\u2026), var(--os-font-\u2026), var(--os-space-\u2026)), use the 767/768/1199/1200 breakpoints, honour reduced motion, and look at it with preview_component before showing the owner.
 
@@ -43733,12 +45428,12 @@ var ITERATION_GUIDANCE = `# Design iteration loop
 Repeat until the page is right, keeping each pass small:
 
 1. **Inspect** \u2014 get_page (detail "outline") for ids and copy; get_styles for the current look.
-2. **Check** \u2014 design_check on the page. Fix errors first (apply_fix for autofixable issues), then warnings that matter.
+2. **Check** \u2014 design_check and phone_check on the page. Fix errors first (apply_fix for autofixable issues, fix_for_phones for phone issues), then warnings that matter.
 3. **Edit** \u2014 one intent per pass: replace demo copy (update_block), swap a section for a better preset (insert_section + delete_section), adjust a section's color theme for rhythm (update_section colorTheme), or restyle globally (set_styles / apply_template_look).
 4. **Look** \u2014 screenshot the page (or just the section you changed) at desktop and mobile; use render_page when screenshots are unavailable.
 5. **Judge** \u2014 hierarchy (one H1, clear headline), one primary action per screen, rhythm of themes, copy within preset ranges, images consistent, nothing cramped on mobile. Then go back to 2.
 
-Finish with design_check showing zero errors and get_draft_diff to summarise the work for the owner.
+Finish with design_check showing zero errors, phone_check showing zero phone errors and warnings, and get_draft_diff to summarise the work for the owner.
 `;
 
 // ../mcp-tools/src/images.ts
@@ -44158,7 +45853,7 @@ function renderPreviewHtml(doc, pageId, opts = {}) {
   const html = renderPageHtml({
     doc,
     pageId: target,
-    mode: "preview",
+    mode: opts.production ? "production" : "preview",
     basePath: opts.basePath ?? "",
     behaviorsUrl: opts.behaviorsUrl,
     extraHead: blocksStyleTag()
@@ -45316,10 +47011,10 @@ var listSectionPresets = defineTool({
     let list5 = presetCatalog.slice();
     if (input.category) list5 = list5.filter((p) => p.category === input.category);
     if (input.query) {
-      const words3 = input.query.toLowerCase().split(/\s+/).filter(Boolean);
+      const words4 = input.query.toLowerCase().split(/\s+/).filter(Boolean);
       list5 = list5.filter((p) => {
         const hay = `${p.id} ${p.label} ${p.description} ${p.tags.join(" ")} ${p.ai.whenToUse}`.toLowerCase();
-        return words3.every((w) => hay.includes(w));
+        return words4.every((w) => hay.includes(w));
       });
     }
     const full = input.detail === "full";
@@ -45678,12 +47373,12 @@ var designCheckTool = defineTool({
     const issues = runChecks(doc, pageId, input.checks ?? CHECKS, ctx.now()).filter(
       (i) => RANK[i.severity] <= min
     );
-    const counts = { error: 0, warning: 0, info: 0 };
-    for (const i of issues) counts[i.severity]++;
+    const counts2 = { error: 0, warning: 0, info: 0 };
+    for (const i of issues) counts2[i.severity]++;
     return {
       data: {
         ...pageId ? { page: pageId } : {},
-        counts,
+        counts: counts2,
         issues: issues.map((i) => ({
           id: i.id,
           rule: i.rule,
@@ -45744,9 +47439,9 @@ var applyFix = defineTool({
           });
     }
     const remaining = runChecks(doc, pageId, CHECKS, ctx.now());
-    const counts = { error: 0, warning: 0, info: 0 };
-    for (const i of remaining) counts[i.severity]++;
-    return { data: { applied, skipped, remaining: counts } };
+    const counts2 = { error: 0, warning: 0, info: 0 };
+    for (const i of remaining) counts2[i.severity]++;
+    return { data: { applied, skipped, remaining: counts2 } };
   }
 });
 var preview = defineTool({
@@ -46872,6 +48567,143 @@ var pageTools = [
   listPosts
 ];
 
+// ../mcp-tools/src/tools/phone.ts
+var PHONE_PAGE_LIMIT = 12;
+var stripMeta2 = (op2) => {
+  const { id: _i, actor: _a3, ts: _t, ...body } = op2;
+  return body;
+};
+async function measure(ctx, siteId, doc, pages, wantRendered) {
+  const now = ctx.now();
+  const statics = phoneCheck(doc, pages.length === 1 ? pages[0]?.id : void 0, {
+    actor: "phone-check",
+    now
+  });
+  const store = ctx.store;
+  if (!wantRendered || !store.capabilities.canMeasurePhone || !store.measurePhone)
+    return {
+      issues: statics,
+      rendered: false,
+      measuredPages: [],
+      ...wantRendered ? {
+        note: store.capabilities.publishNote?.includes("git") ? "Only the rules that don't need a browser ran. For the full phone check install Playwright next to the CLI (npm i -D playwright && npx playwright install chromium) and restart the MCP server." : "Only the rules that don't need a browser ran here; screenshot the page on mobile to look it over."
+      } : {}
+    };
+  const measured = pages.slice(0, PHONE_PAGE_LIMIT);
+  const rendered2 = [];
+  let note;
+  for (const page of measured) {
+    const html = renderPreviewHtml(doc, page.id, { production: true });
+    const results = [];
+    try {
+      for (const width of PHONE_WIDTHS)
+        results.push(await store.measurePhone(siteId, { pageId: page.id, width, html }));
+    } catch (e) {
+      note = `The browser check stopped at \u201C${page.title}\u201D: ${e instanceof Error ? e.message : String(e)}`;
+      break;
+    }
+    rendered2.push(...phoneIssuesFromProbe(doc, page.id, results, { actor: "phone-check", now }));
+  }
+  if (!note && pages.length > measured.length)
+    note = `Measured the first ${measured.length} of ${pages.length} pages; run phone_check with page for the others.`;
+  const seen = /* @__PURE__ */ new Set();
+  const deduped = rendered2.filter((i) => {
+    if (i.page !== "footer") return true;
+    const key2 = `${i.rule}|${i.message}`;
+    if (seen.has(key2)) return false;
+    seen.add(key2);
+    return true;
+  });
+  return {
+    issues: sortIssues([...statics, ...deduped]),
+    rendered: true,
+    measuredPages: measured.map((p) => p.id),
+    ...note ? { note } : {}
+  };
+}
+var pagesFor = (doc, page) => page ? [resolvePage(doc, page).page] : Object.values(doc.pages);
+var describe2 = (i) => ({
+  id: i.id,
+  rule: i.rule,
+  severity: i.severity,
+  ...i.page ? { page: i.page } : {},
+  ...i.section ? { section: i.section } : {},
+  ...i.block ? { block: i.block } : {},
+  message: i.message,
+  fix: i.fix,
+  autofix: i.autofix?.label ?? null
+});
+var counts = (issues) => {
+  const c = { error: 0, warning: 0, info: 0 };
+  for (const i of issues) c[i.severity]++;
+  return c;
+};
+var phoneCheckTool = defineTool({
+  name: "phone_check",
+  title: "Phone check",
+  description: "Check how the site works on phones: the rules that need no browser (sections not laid out for phones, columns squeezed side by side, padding that empties the screen, heading words too long for a phone line, tall photo sections, fixed widths in custom CSS) plus, where a browser is available, a real phone layout at 360 and 390 px (sideways scrolling, cut-off or overlapping text, text too small, buttons too small to tap, text over photos, the main button below the first screen). Run it before every publish; fix with fix_for_phones. Aim for zero errors and warnings.",
+  input: external_exports.object({
+    site: siteArg,
+    page: external_exports.string().optional().describe("Page id/slug/title (default: every page)."),
+    rendered: external_exports.boolean().optional().describe("Measure in a real browser when available (default true).")
+  }),
+  annotations: { readOnlyHint: true },
+  async handler(ctx, input) {
+    const siteId = await ctx.siteId(input.site);
+    const doc = await ctx.doc(siteId);
+    const r = await measure(ctx, siteId, doc, pagesFor(doc, input.page), input.rendered !== false);
+    const c = counts(r.issues);
+    return {
+      data: {
+        rendered: r.rendered,
+        ...r.note ? { note: r.note } : {},
+        counts: c,
+        issues: r.issues.map(describe2),
+        next: c.error + c.warning === 0 ? "Looks great on phones." : r.issues.some((i) => i.autofix) ? "Run fix_for_phones to fix everything that can be fixed automatically, then phone_check again; handle the rest by editing." : "Edit the content as each fix says, then run phone_check again."
+      }
+    };
+  }
+});
+var fixForPhonesTool = defineTool({
+  name: "fix_for_phones",
+  title: "Fix everything for phones",
+  description: "Apply every automatic phone fix in one change (phone-only settings: phone layouts in reading order, words first in heroes, stacked columns, lighter phone padding, shorter photo sections, smaller phone heading sizes, stronger photo overlays). Desktop stays as designed. Re-measures and returns what's left.",
+  input: external_exports.object({
+    site: siteArg,
+    page: external_exports.string().optional().describe("Limit to a page (default: every page).")
+  }),
+  annotations: {},
+  async handler(ctx, input) {
+    const siteId = await ctx.siteId(input.site);
+    let doc = await ctx.doc(siteId);
+    const pages = pagesFor(doc, input.page);
+    const before = await measure(ctx, siteId, doc, pages, true);
+    const r = fixForPhones(doc, {
+      ...input.page ? { pageId: pages[0]?.id } : {},
+      actor: "phone-check",
+      now: ctx.now(),
+      rendered: before.issues
+    });
+    if (r.ops.length) {
+      const applied = await ctx.apply(siteId, r.ops.map(stripMeta2));
+      doc = applied.doc;
+    }
+    const after = await measure(ctx, siteId, doc, pagesFor(doc, input.page), true);
+    const labels = /* @__PURE__ */ new Map();
+    for (const f of r.fixed) labels.set(f.label, (labels.get(f.label) ?? 0) + 1);
+    return {
+      data: {
+        fixed: [...labels].map(([label, n]) => n > 1 ? `${label} (${n}\xD7)` : label),
+        rendered: after.rendered,
+        remaining: counts(after.issues),
+        issues: after.issues.filter((i) => i.severity !== "info").map(describe2),
+        next: after.issues.filter((i) => i.severity !== "info").length === 0 ? "Looks great on phones." : "These need an edit (no automatic fix): follow each fix, then run phone_check again."
+      }
+    };
+  }
+});
+var phoneTools = [phoneCheckTool, fixForPhonesTool];
+
 // ../mcp-tools/src/tools/publish.ts
 var getDraftDiff = defineTool({
   name: "get_draft_diff",
@@ -47017,6 +48849,7 @@ var ALL_TOOLS = [
   ...pageTools,
   ...designSystemTools,
   ...designTools,
+  ...phoneTools,
   ...componentTools,
   ...publishTools
 ];
@@ -47808,6 +49641,25 @@ function squarespaceRenditions(u, width, height, canResize = true) {
   ];
 }
 
+// ../import/src/phone.ts
+function phoneReady(result) {
+  let fixed;
+  try {
+    fixed = fixForPhones(result.doc, { actor: "import", now: 0 });
+  } catch {
+    return result;
+  }
+  if (!fixed.ops.length) return result;
+  const labels = [...new Set(fixed.fixed.map((f) => f.label.toLowerCase()))];
+  const line = `
+## Phones
+
+Made ${fixed.fixed.length} phone-only adjustment${fixed.fixed.length === 1 ? "" : "s"} so the site reads well on phones (${labels.join(", ")}). The desktop design is unchanged.
+`;
+  return { ...result, doc: fixed.doc, report: `${result.report.trimEnd()}
+${line}` };
+}
+
 // ../import/src/report.ts
 var NOTICE_TITLES = {
   "unsupported-block": "Blocks that need a look",
@@ -47943,17 +49795,17 @@ function renderReport(r) {
     any = true;
     L2.push(`### ${NOTICE_TITLES[kind]}`);
     L2.push("");
-    const counts = /* @__PURE__ */ new Map();
+    const counts2 = /* @__PURE__ */ new Map();
     for (const n of list5) {
-      const e = counts.get(n.message) ?? { n: 0, where: /* @__PURE__ */ new Set() };
+      const e = counts2.get(n.message) ?? { n: 0, where: /* @__PURE__ */ new Set() };
       e.n++;
       e.where.add(n.where);
-      counts.set(n.message, e);
+      counts2.set(n.message, e);
     }
     let shown = 0;
-    for (const [message, e] of counts) {
+    for (const [message, e] of counts2) {
       if (++shown > 15) {
-        L2.push(`- \u2026 and ${counts.size - 15} more like these.`);
+        L2.push(`- \u2026 and ${counts2.size - 15} more like these.`);
         break;
       }
       const where2 = [...e.where];
@@ -48346,7 +50198,7 @@ async function crawlWordPress(opts) {
         ...it.excerptHtml ? { caption: it.excerptHtml } : {}
       });
   const entries = [];
-  const pathOf = (link2, fallback2) => (link2 ? sitePath(link2, base) : void 0) ?? fallback2;
+  const pathOf2 = (link2, fallback2) => (link2 ? sitePath(link2, base) : void 0) ?? fallback2;
   if (rest) {
     const [pages2, posts] = [
       await listAll("wp/v2/pages", "_embed=1&orderby=menu_order&order=asc"),
@@ -48373,7 +50225,7 @@ async function crawlWordPress(opts) {
         }
         entries.push({
           type,
-          path: pathOf(link2, `/${slug}`),
+          path: pathOf2(link2, `/${slug}`),
           slug,
           title: decodeEntities2(rendered(p.title)) || slug || "Untitled",
           html: rendered(p.content),
@@ -48440,7 +50292,7 @@ async function crawlWordPress(opts) {
     });
   }
   if (!rest && !wxr && home) {
-    const { crawlGeneric: crawlGeneric2 } = await import("./crawl-TAADG5BR.js");
+    const { crawlGeneric: crawlGeneric2 } = await import("./crawl-WQQDFI7W.js");
     const site2 = await crawlGeneric2({
       url: base,
       fetcher: f,
@@ -48496,6 +50348,9 @@ async function crawlWordPress(opts) {
     }
   const pages = [];
   const builders = /* @__PURE__ */ new Set();
+  const showsTitles = /<h1[^>]*class="[^"]*\b(?:entry-title|page-title|wp-block-post-title)\b/.test(
+    homeHtml
+  );
   for (const e of pageEntries.sort((a, b) => (a.menuOrder ?? 0) - (b.menuOrder ?? 0))) {
     if (e === postsPage) continue;
     if (COMMERCE_SLUGS.test(e.slug) && e.path.split("/").filter(Boolean).length === 1) {
@@ -48513,7 +50368,11 @@ async function crawlWordPress(opts) {
       path: e.path,
       title: e.title,
       seo: { ...e.image && !e.seo.image ? { image: e.image } : {}, ...e.seo },
-      sections: bodySections(e.html, base, postsPath, notices, e.path),
+      sections: withPageTitle(
+        bodySections(e.html, base, postsPath, notices, e.path),
+        e.title,
+        showsTitles
+      ),
       ...nav.length && !navPaths.has(e.path) && e.path !== "/" ? { hidden: true } : {}
     });
   }
@@ -48660,6 +50519,32 @@ function wxrNav(wxr, base, entries) {
   }
   return out;
 }
+function withPageTitle(sections, title, shows) {
+  if (!shows || !title.trim()) return sections;
+  const norm7 = (t) => t.toLowerCase().replace(/[^a-z0-9]+/g, "");
+  const first2 = sections[0];
+  const blocks2 = first2?.layout.mode === "classic" ? first2.layout.rows.flatMap((r) => r.columns.flatMap((c) => c.blocks)) : [];
+  const opening = blocks2[0];
+  if (opening && (opening.kind === "heading" && norm7(opening.text) === norm7(title) || opening.kind === "text" && /^\s*<h1/i.test(opening.html)))
+    return sections;
+  const heading2 = { kind: "heading", text: title, level: 1 };
+  if (first2 && first2.layout.mode === "classic" && !first2.background?.image && !first2.role) {
+    const row = first2.layout.rows[0];
+    if (row && row.columns.length === 1) {
+      row.columns[0]?.blocks.unshift(heading2);
+      return sections;
+    }
+    first2.layout.rows.unshift({ columns: [{ span: 12, blocks: [heading2] }] });
+    return sections;
+  }
+  return [
+    {
+      theme: "",
+      layout: { mode: "classic", rows: [{ columns: [{ span: 12, blocks: [heading2] }] }] }
+    },
+    ...sections
+  ];
+}
 
 // ../import/src/fidelity/component-gen.ts
 var norm5 = (s2) => (s2 ?? "").toLowerCase().replace(/[^a-z0-9]/g, "");
@@ -48667,7 +50552,7 @@ var esc3 = (s2) => s2.replace(/[<>&"]/g, "");
 var round5 = (n, d = 2) => Math.round(n * 10 ** d) / 10 ** d;
 function canGenerate(section) {
   const b = section.blueprint;
-  return !!b && b.length >= 2 && b.length <= 30 && section.height <= 2400;
+  return !!b && b.filter((i) => i.kind !== "rule" && i.kind !== "panel").length >= 2 && b.length <= 36 && section.height <= 2400;
 }
 function componentFromBlueprint(input) {
   const items = (input.section.blueprint ?? []).filter(
@@ -48685,10 +50570,13 @@ function componentFromBlueprint(input) {
   const css = [
     ":scope { width: min(100%, " + Math.round(width) + "px); margin-inline: auto; }",
     ".gx { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); grid-auto-rows: minmax(8px, auto); column-gap: 0; }",
-    ".gx__i { margin: 0; min-width: 0; overflow-wrap: break-word; }",
+    ".gx__i { position: relative; z-index: 1; margin: 0; min-width: 0; overflow-wrap: break-word; }",
+    ".gx__i p { margin: 0; }",
+    ".gx__p { z-index: 0; }",
     ".gx__img picture, .gx__img img { display: block; width: 100%; height: 100%; object-fit: cover; }"
   ];
   const phone = [];
+  const named = [];
   let headingSeen = false;
   const role = (family) => {
     if (norm5(family) && norm5(family) === norm5(input.roles.label)) return "label";
@@ -48723,6 +50611,10 @@ function componentFromBlueprint(input) {
       ]
     ].join("; ");
   };
+  const tokenColor = (hex, fallback2) => {
+    const v = colorVar(hex);
+    return v === "inherit" ? fallback2 : v;
+  };
   items.forEach((it, k) => {
     const n = k + 1;
     const cls = `gx__i gx__i${n}`;
@@ -48731,10 +50623,26 @@ function componentFromBlueprint(input) {
     const row = Math.floor((it.box.y - top) / 8) + 1;
     const rows = Math.max(1, Math.round(it.box.h / 8));
     const place = `grid-column: ${col} / span ${span}; grid-row: ${row} / span ${rows}`;
+    if (it.kind === "rule") {
+      parts.push(`<hr class="gx__p gx__r${n}">`);
+      css.push(
+        `.gx__r${n} { ${place.replace(/span \d+$/, "span 1")}; align-self: start; width: 100%; height: 0; margin: 0; border: 0; border-top: ${Math.max(1, Math.min(8, it.box.h))}px solid ${tokenColor(it.color, "var(--os-color-border)")}; }`
+      );
+      return;
+    }
+    if (it.kind === "panel") {
+      parts.push(`<div class="gx__p gx__p${n}" aria-hidden="true"></div>`);
+      css.push(
+        `.gx__p${n} { ${place}; ${it.color ? `background: ${tokenColor(it.color, "var(--os-color-surface)")};` : ""} ${it.border ? `border: ${Math.max(1, Math.min(8, it.border.width))}px solid ${tokenColor(it.border.color, "var(--os-color-border)")};` : ""} border-radius: ${Math.min(48, Math.round(it.radius ?? 0))}px; }`
+      );
+      phone.push(`.gx__p${n} { display: none; }`);
+      return;
+    }
     if (it.kind === "image") {
       const key3 = `image${n}`;
       fields[key3] = { kind: "image", label: `Picture ${n}` };
       values[key3] = { src: it.src, alt: (it.alt ?? "").slice(0, 300) };
+      named.push({ role: "picture", text: it.alt ?? "", keys: [key3] });
       parts.push(
         `<div class="${cls} gx__img">{{image ${key3} sizes="(max-width: 767px) 100vw, ${Math.max(10, Math.round(it.box.w / 1440 * 100))}vw"}}</div>`
       );
@@ -48753,6 +50661,7 @@ function componentFromBlueprint(input) {
       };
       values[label] = (it.text ?? "").slice(0, 60);
       if (!target) {
+        named.push({ role: it.kind, text: it.text ?? "", keys: [label] });
         parts.push(`<p class="${cls}">{{${label}}}</p>`);
       } else {
         const lk = `link${n}`;
@@ -48761,6 +50670,7 @@ function componentFromBlueprint(input) {
           label: `${it.kind === "button" ? "Button" : "Link"} ${n} goes to`
         };
         values[lk] = target;
+        named.push({ role: it.kind, text: it.text ?? "", keys: [label, lk] });
         parts.push(
           it.kind === "button" ? `<div class="${cls}">{{button ${lk} label=${label} variant="primary"}}</div>` : `<p class="${cls}">{{#link ${lk}}}{{${label}}}{{/link}}</p>`
         );
@@ -48772,6 +50682,22 @@ function componentFromBlueprint(input) {
       return;
     }
     const key2 = `text${n}`;
+    const doc = it.kind === "text" ? richDoc(it.runs, input.origin) : void 0;
+    if (doc) {
+      fields[key2] = {
+        kind: "richText",
+        label: `Text ${n}`,
+        marks: ["bold", "italic", "link"],
+        blocks: ["paragraph"],
+        maxLength: 3e3
+      };
+      values[key2] = doc;
+      named.push({ role: textRole(it), text: it.text ?? "", keys: [key2] });
+      parts.push(`<div class="${cls}">{{rich ${key2}}}</div>`);
+      css.push(`.gx__i${n} { ${place}; ${typeCss(it.style, false)}; }`);
+      phone.push(`.gx__i${n} { ${typeCss(it.style, true)}; }`);
+      return;
+    }
     const text7 = (it.text ?? "").slice(0, it.kind === "heading" ? 300 : 1500);
     fields[key2] = {
       kind: "text",
@@ -48780,6 +50706,7 @@ function componentFromBlueprint(input) {
       ...it.kind === "text" ? { multiline: true } : {}
     };
     values[key2] = text7;
+    named.push({ role: it.kind === "heading" ? "heading" : textRole(it), text: text7, keys: [key2] });
     const tag = it.kind === "heading" ? headingSeen ? "h3" : "h2" : "p";
     if (it.kind === "heading") headingSeen = true;
     parts.push(`<${tag} class="${cls}">{{${key2}}}</${tag}>`);
@@ -48787,6 +50714,14 @@ function componentFromBlueprint(input) {
     phone.push(`.gx__i${n} { ${typeCss(it.style, true)}; }`);
   });
   if (!parts.length) return void 0;
+  for (const [i, label] of partLabels(named).entries()) {
+    const part = named[i];
+    const [first2, second] = part.keys;
+    const f = fields[first2];
+    if (f) fields[first2] = { ...f, label };
+    const l = second ? fields[second] : void 0;
+    if (second && l) fields[second] = { ...l, label: `${label} goes to` };
+  }
   css.push(
     `@media (max-width: 767px) {
   .gx { display: flex; flex-direction: column; gap: var(--os-space-sm); }
@@ -48809,15 +50744,109 @@ ${parts.map((p) => `  ${p}`).join("\n")}
   };
   return { def, fields: values };
 }
+function textRole(it) {
+  const words4 = (it.text ?? "").trim().split(/\s+/).filter(Boolean).length;
+  const caps = it.style?.case === "uppercase" || /^[^a-z]*[A-Z][^a-z]*$/.test(it.text ?? "");
+  return words4 <= 5 && (caps || (it.style?.size ?? 16) <= 14) ? "small" : "paragraph";
+}
+var ROLE_LABEL = {
+  heading: "Heading",
+  small: "Small label",
+  paragraph: "Paragraph",
+  picture: "Picture",
+  button: "Button",
+  link: "Link"
+};
+function snippet(text7) {
+  const words4 = text7.replace(/\s+/g, " ").trim().split(" ").filter(Boolean);
+  let out = "";
+  for (const w of words4) {
+    if (`${out} ${w}`.trim().length > 24) break;
+    out = `${out} ${w}`.trim();
+  }
+  if (!out && words4[0]) out = words4[0].slice(0, 22);
+  if (!out) return "";
+  const cased = /[a-z]/.test(out) ? out : out.charAt(0) + out.slice(1).toLowerCase();
+  return `${cased}${out.length < text7.trim().length ? "\u2026" : ""}`;
+}
+function partLabels(parts) {
+  const counts2 = /* @__PURE__ */ new Map();
+  for (const p of parts) counts2.set(p.role, (counts2.get(p.role) ?? 0) + 1);
+  const used = /* @__PURE__ */ new Set();
+  const seen = /* @__PURE__ */ new Map();
+  return parts.map((p) => {
+    const nth = (seen.get(p.role) ?? 0) + 1;
+    seen.set(p.role, nth);
+    const base = ROLE_LABEL[p.role];
+    let label;
+    if ((counts2.get(p.role) ?? 0) === 1) label = base;
+    else if (p.role === "button" && nth === 1) label = "Main button";
+    else {
+      const words4 = p.role === "picture" ? "" : snippet(p.text);
+      label = words4 ? `${base} \u201C${words4}\u201D` : `${base} ${nth}`;
+    }
+    let unique = label;
+    for (let k = 2; used.has(unique); k++) unique = `${label} ${k}`;
+    used.add(unique);
+    return unique.slice(0, 60);
+  });
+}
+function richDoc(runs, origin) {
+  if (!runs?.length) return void 0;
+  const content3 = [];
+  for (const r of runs) {
+    if (r.t === "\n") {
+      content3.push({ type: "hardBreak" });
+      continue;
+    }
+    const text7 = r.t;
+    if (!text7) continue;
+    const marks = [];
+    if (r.b) marks.push({ type: "bold" });
+    if (r.i) marks.push({ type: "italic" });
+    const href = r.href && safeHref(r.href, origin);
+    if (href) marks.push({ type: "link", attrs: { href } });
+    const last2 = content3[content3.length - 1];
+    if (last2?.type === "text" && JSON.stringify(last2.marks ?? []) === JSON.stringify(marks)) {
+      last2.text = `${last2.text}${text7}`;
+      continue;
+    }
+    content3.push({ type: "text", text: text7, ...marks.length ? { marks } : {} });
+  }
+  const first2 = content3[0];
+  if (first2?.type === "text" && first2.text) first2.text = first2.text.replace(/^\s+/, "");
+  const end = content3[content3.length - 1];
+  if (end?.type === "text" && end.text) end.text = end.text.replace(/\s+$/, "");
+  const kept = content3.filter((c) => c.type !== "text" || c.text);
+  if (!kept.length) return void 0;
+  return { type: "doc", content: [{ type: "paragraph", content: kept }] };
+}
+function safeHref(href, origin) {
+  if (/^(?:mailto:|tel:)/i.test(href)) return href;
+  try {
+    const u = new URL(href);
+    if (u.protocol !== "https:" && u.protocol !== "http:") return void 0;
+    if (origin && u.origin === origin) return `${u.pathname}${u.hash}` || "/";
+    return u.toString();
+  } catch {
+    return void 0;
+  }
+}
 
 // ../import/src/fidelity/tune.ts
 var TUNE_GROUPS = [
   "type",
   "fonts",
   "rhythm",
+  "rhythm-phone",
+  "widths",
+  "chapters",
   "colors",
+  "page-color",
   "buttons",
   "layout",
+  "headings",
+  "heights",
   "backgrounds",
   "crops",
   "phone-images",
@@ -48866,21 +50895,29 @@ var pageOf = (doc, path2) => {
   const slug = path2.replace(/^\/+|\/+$/g, "");
   return Object.values(doc.pages).find((p) => p.slug === slug);
 };
-function tuneRound(input, measured, groups = TUNE_GROUPS) {
+function tuneRound(input, measured, groups = TUNE_GROUPS, opts = {}) {
   const doc = structuredClone(input);
   const on = (g) => groups.includes(g);
   const changes = [];
   const choices = doc.styles.choices;
   const typography = { ...choices.typography ?? {} };
   const scale = { ...typography.scale ?? {} };
+  const forPreset = (preset, list5) => {
+    if (preset !== "button") return list5;
+    const content3 = list5.filter((m) => !m.original.buttons?.chrome);
+    return content3.length ? content3 : list5;
+  };
   for (const preset of on("type") ? new Set(Object.values(PRESET_OF)) : []) {
     const label = Object.entries(PRESET_OF).find(([, p]) => p === preset)?.[0];
     const step = { ...scale[preset] ?? {} };
     let touched = false;
     for (const phone2 of [false, true]) {
       if (phone2 && preset === "nav") continue;
-      const list5 = measured.filter(
-        (m) => m.viewport < 700 === phone2 && m.original.presets[preset] && m.imported.presets[preset]
+      const list5 = forPreset(
+        preset,
+        measured.filter(
+          (m) => m.viewport < 700 === phone2 && m.original.presets[preset] && m.imported.presets[preset]
+        )
       );
       if (!list5.length) continue;
       const sizes = list5.map((m) => m.original.presets[preset]?.size);
@@ -48897,14 +50934,21 @@ function tuneRound(input, measured, groups = TUNE_GROUPS) {
       touched = true;
     }
     if (["eyebrow", "button", "nav", "wordmark"].includes(preset)) {
-      const list5 = measured.filter(
-        (m) => m.viewport >= 700 && m.original.presets[preset] && m.imported.presets[preset]
+      const all = forPreset(
+        preset,
+        measured.filter((m) => m.original.presets[preset] && m.imported.presets[preset])
       );
-      const failing = list5.filter(
-        (m) => m.comparison.checks.some((c) => c.what === `${label} letter spacing and case` && !c.ok)
-      );
-      if (list5.length && failing.length * 2 >= list5.length) {
-        const ls = median(list5.map((m) => m.original.presets[preset]?.letterSpacing));
+      const list5 = all.filter((m) => m.viewport >= 700);
+      const fails = (m) => m.comparison.checks.some((c) => c.what === `${label} letter spacing and case` && !c.ok);
+      const failing = list5.filter(fails);
+      const phones = all.filter((m) => m.viewport < 700);
+      const phoneFailing = phones.filter(fails);
+      if (list5.length && (failing.length * 2 >= list5.length || phones.length && phoneFailing.length * 2 >= phones.length)) {
+        const lsDesk = median(list5.map((m) => m.original.presets[preset]?.letterSpacing));
+        const lsPhone = median(
+          phones.map((m) => m.original.presets[preset]?.letterSpacing)
+        );
+        const ls = lsDesk !== void 0 && lsPhone !== void 0 && Math.abs(lsDesk - lsPhone) <= 0.075 ? (lsDesk + lsPhone) / 2 : lsDesk;
         const cases = list5.map((m) => m.original.presets[preset]?.case);
         if (ls !== void 0 && Math.abs((step.letterSpacing ?? -1) - ls) > 0.01) {
           step.letterSpacing = round6(clamp2(ls, -0.2, 1), 3);
@@ -48942,7 +50986,7 @@ function tuneRound(input, measured, groups = TUNE_GROUPS) {
     for (const preset of ["h2", "h3"]) {
       const fams = origs.map((p) => p[preset]?.family).filter((f2) => !!f2);
       const f = fams[0];
-      if (!f || fams.length < 2 || !fams.every((x) => norm6(x) === norm6(f))) continue;
+      if (!f || !fams.every((x) => norm6(x) === norm6(f))) continue;
       const role = norm6(f) === norm6(heading2) ? void 0 : norm6(f) === norm6(label) ? "label" : norm6(f) === norm6(body) ? "body" : void 0;
       if (!role || scale[preset]?.font === role) continue;
       const sample2 = origs.map((p) => p[preset]).find(Boolean);
@@ -48965,6 +51009,29 @@ function tuneRound(input, measured, groups = TUNE_GROUPS) {
       changes.push(`${role} font: ${match.family} for ${c.original}`);
     }
   }
+  if (on("fonts")) {
+    const roleFamily = (r) => norm6(
+      typography[r]?.family ?? (r === "label" ? typography.body?.family ?? void 0 : void 0)
+    );
+    for (const preset of ["eyebrow", "button", "nav", "wordmark"]) {
+      const fams = forPreset(
+        preset,
+        measured.filter((m) => m.viewport >= 700 && m.original.presets[preset])
+      ).map((m) => m.original.presets[preset]?.family).filter((f2) => !!f2);
+      const f = fams[0];
+      if (!f || !fams.every((x) => norm6(x) === norm6(f))) continue;
+      const want = ["label", "heading", "body"].find(
+        (r) => roleFamily(r) && roleFamily(r) === norm6(f)
+      );
+      if (!want) continue;
+      const cur = scale[preset]?.font ?? "label";
+      const curFamily = roleFamily(cur);
+      if (cur === want || curFamily === norm6(f)) continue;
+      scale[preset] = { ...scale[preset] ?? {}, font: want };
+      changes.push(`${preset}: in the ${want} font (${f}), as on the original`);
+    }
+    if (Object.keys(scale).length) typography.scale = scale;
+  }
   choices.typography = typography;
   const layout = { ...choices.layout ?? {} };
   const desk = measured.filter((m) => m.viewport >= 700);
@@ -48978,13 +51045,89 @@ function tuneRound(input, measured, groups = TUNE_GROUPS) {
     layout.contentWidth = Math.round(cw / 8) * 8;
     changes.push(`content width ${layout.contentWidth}px`);
   }
+  if (on("widths")) {
+    const content3 = layout.contentWidth;
+    for (const m of desk) {
+      const check = m.comparison.checks.find((c) => c.what === "Content width" && !c.ok);
+      const want = m.original.layout.contentWidth;
+      const have = m.imported.layout.contentWidth;
+      const page = pageOf(doc, m.path);
+      if (!check || !want || !have || !page || want >= have) continue;
+      let width;
+      if (content3 && Math.abs(content3 - want) / want <= 0.06) width = "content";
+      else if (want >= 360 && want <= 1600) {
+        layout.narrowWidth ??= Math.round(want / 8) * 8;
+        if (Math.abs(layout.narrowWidth - want) / want <= 0.06) width = "narrow";
+      }
+      if (!width) continue;
+      let n = 0;
+      for (const section of page.sections) {
+        if (section.layout.mode !== "stack" || section.layout.width === "full") continue;
+        if (section.style.background?.type === "image" || section.style.background?.type === "video")
+          continue;
+        const cur = section.layout.width ?? "content";
+        if (cur === width) continue;
+        if (width === "content") delete section.layout.width;
+        else section.layout.width = width;
+        delete section.preset;
+        n++;
+      }
+      if (n) changes.push(`${m.path}: ${n} section(s) at the ${width} width, as on the original`);
+    }
+  }
+  if (on("chapters")) {
+    const bag = (t) => new Set(
+      t.toLowerCase().split(/[^a-z0-9]+/).filter((w) => w.length > 3)
+    );
+    for (const m of desk) {
+      const page = pageOf(doc, m.path);
+      if (!page || m.imported.sections.length !== page.sections.length) continue;
+      const keep = new Set(page.sections.map((_, j) => j));
+      for (const o of m.original.sections) {
+        const mine = bag(`${o.heading?.text ?? ""} ${o.words ?? o.text}`);
+        if (mine.size < 20) continue;
+        const inside = m.imported.sections.map((x, j) => {
+          const theirs = bag(`${x.heading?.text ?? ""} ${x.words ?? x.text}`);
+          let n = 0;
+          for (const w of theirs) if (mine.has(w)) n++;
+          return theirs.size >= 3 && n / theirs.size >= 0.85 ? j : -1;
+        }).filter((j) => j >= 0);
+        let run2 = [];
+        const join21 = () => {
+          if (run2.length >= 2) {
+            const [first2, ...rest] = run2.map((j) => page.sections[j]);
+            for (const r of rest) {
+              first2?.blocks.push(...r.blocks);
+              keep.delete(page.sections.indexOf(r));
+            }
+            changes.push(`${m.path}: ${run2.length} sections joined into one, as on the original`);
+          }
+          run2 = [];
+        };
+        for (const j of inside) {
+          const a = page.sections[j];
+          const prev = run2.length ? page.sections[run2[run2.length - 1]] : void 0;
+          const plain3 = a.layout.mode === "stack" && a.layout.columns.d.length === 1 && !a.anchor && a.style.background?.type !== "image" && a.style.background?.type !== "video";
+          const same = prev && j === run2[run2.length - 1] + 1 && (prev.style.colorTheme ?? "light") === (a.style.colorTheme ?? "light") && prev.layout.mode === "stack" && (prev.layout.width ?? "content") === (a.layout.mode === "stack" ? a.layout.width ?? "content" : "");
+          if (plain3 && (!run2.length || same)) run2.push(j);
+          else {
+            join21();
+            if (plain3) run2.push(j);
+          }
+        }
+        join21();
+      }
+      if (keep.size !== page.sections.length)
+        page.sections = page.sections.filter((_, j) => keep.has(j));
+    }
+  }
   const pad3 = (list5) => median(
     list5.filter((m) => m.comparison.checks.some((c) => c.what === "Section padding" && !c.ok)).map(
       (m) => m.original.layout.sectionPadding && m.imported.layout.sectionPadding ? m.original.layout.sectionPadding / m.imported.layout.sectionPadding : 0
     ).filter((n) => n > 0)
   );
   const pd = on("rhythm") ? pad3(desk) : void 0;
-  const pm = on("rhythm") ? pad3(phone) : void 0;
+  const pm = on("rhythm-phone") ? pad3(phone) : void 0;
   if (pd) {
     const base = layout.sectionPadding ?? median(desk.map((m) => m.imported.layout.sectionPadding ?? 0).filter(Boolean));
     if (base) {
@@ -49010,7 +51153,7 @@ function tuneRound(input, measured, groups = TUNE_GROUPS) {
     }
   }
   const inks = /* @__PURE__ */ new Map();
-  for (const m of on("colors") ? desk : []) {
+  for (const m of on("colors") || on("page-color") ? desk : []) {
     const page = pageOf(doc, m.path);
     if (!page || m.imported.sections.length !== page.sections.length) continue;
     for (const s2 of m.comparison.sections) {
@@ -49020,21 +51163,38 @@ function tuneRound(input, measured, groups = TUNE_GROUPS) {
       const section = page.sections[s2.importedIndex];
       if (!o || !i || !section || o.backgroundImage) continue;
       const theme = section.style.colorTheme ?? "light";
-      const e = inks.get(theme) ?? { text: [], heading: [] };
-      if (o.textColor && i.textColor && colorDistance(o.textColor, i.textColor) >= 16)
-        e.text.push(o.textColor);
-      if (o.heading?.color && i.heading?.color && colorDistance(o.heading.color, i.heading.color) >= 16)
-        e.heading.push(o.heading.color);
+      const e = inks.get(theme) ?? { text: [], heading: [], background: [] };
+      if (o.background && i.background && !section.style.background)
+        e.background.push({ o: o.background, i: i.background });
+      if (o.textColor && i.textColor) e.text.push({ o: o.textColor, i: i.textColor });
+      if (o.heading?.color && i.heading?.color)
+        e.heading.push({ o: o.heading.color, i: i.heading.color });
       inks.set(theme, e);
     }
   }
   for (const [theme, e] of inks)
-    for (const role of ["text", "heading"]) {
+    for (const role of [
+      ...on("colors") ? ["text", "heading"] : [],
+      ...on("page-color") ? ["background"] : []
+    ]) {
       const list5 = e[role];
-      const first2 = list5[0];
-      if (!first2 || list5.length < 2 || !list5.every((c) => colorDistance(c, first2) < 12)) continue;
-      setRole(doc, theme, role, first2);
-      changes.push(`${role} on ${theme} sections ${first2}, as on the original`);
+      const tol = role === "background" ? 16 : 28;
+      const passes = (c) => list5.filter((p) => colorDistance(p.o, c(p)) < tol).length;
+      const now = passes((p) => p.i);
+      let best;
+      let bestN = now;
+      for (const cand of new Set(list5.map((p) => p.o))) {
+        const n = passes(() => cand);
+        if (n > bestN) {
+          best = cand;
+          bestN = n;
+        }
+      }
+      if (!best || list5.length < 2) continue;
+      if (!setRole(doc, theme, role, best)) continue;
+      changes.push(
+        `${role} on ${theme} sections ${best}, as on the original (${bestN} of ${list5.length} sections)`
+      );
     }
   const fills = /* @__PURE__ */ new Map();
   for (const m of on("buttons") ? desk : []) {
@@ -49063,6 +51223,135 @@ function tuneRound(input, measured, groups = TUNE_GROUPS) {
   } catch {
     themes = void 0;
   }
+  if (on("heights")) {
+    const scaleOf = SPACE_SCALES[choices.density] ?? SPACE_SCALES.comfortable;
+    const tokens = Object.entries(scaleOf).sort((a, b) => a[1] - b[1]);
+    const fit = (o, i) => {
+      if (i.contentTop === void 0 || i.contentBottom === void 0) return void 0;
+      const content3 = i.contentBottom - i.contentTop;
+      const room = (o.height - content3) / 2;
+      const token = [...tokens].reverse().find(([, px3]) => px3 <= room)?.[0] ?? "none";
+      return { token, height: Math.round(o.height) };
+    };
+    for (const m of desk) {
+      const page = pageOf(doc, m.path);
+      if (!page || m.imported.sections.length !== page.sections.length) continue;
+      const mp = phone.find((x) => x.path === m.path);
+      for (const s2 of m.comparison.sections) {
+        if (s2.importedIndex === void 0) continue;
+        const h = s2.checks.find((c) => c.what === "Height");
+        const o = m.original.sections[s2.index];
+        const i = m.imported.sections[s2.importedIndex];
+        const section = page.sections[s2.importedIndex];
+        if (!h || h.ok || !o?.backgroundImage || !i || !section) continue;
+        if (section.style.background?.type !== "image" && section.style.background?.type !== "video")
+          continue;
+        const d = fit(o, i);
+        if (!d) continue;
+        const ps = mp?.comparison.sections.find((x) => x.importedIndex === s2.importedIndex);
+        const po = ps ? mp?.original.sections[ps.index] : void 0;
+        const pi = mp?.imported.sections[s2.importedIndex];
+        const p = po?.backgroundImage && pi ? fit(po, pi) : void 0;
+        section.style.padding = { d: d.token, ...p ? { m: p.token } : {} };
+        section.style.minHeight = {
+          d: `${clamp2(d.height, 10, 9999)}px`,
+          ...p ? { m: `${clamp2(p.height, 10, 9999)}px` } : {}
+        };
+        changes.push(`${m.path}: section ${s2.index + 1} ${d.height}px tall, as on the original`);
+      }
+    }
+  }
+  if (on("headings")) {
+    const presetSizes = (list5) => {
+      const out = /* @__PURE__ */ new Map();
+      for (const k of ["display", "h1", "h2", "h3", "h4", "lead", "eyebrow"]) {
+        const xs = list5.map((m) => m.imported.presets[k]).filter((t) => !!t);
+        const size2 = median(xs.map((t) => t.size));
+        if (size2 && xs[0]) out.set(k, { size: size2, family: xs[0].family });
+      }
+      return out;
+    };
+    const deskSizes = presetSizes(desk);
+    const phoneSizes = presetSizes(phone);
+    const fits = (a, b) => Math.abs(a - b) <= Math.max(1, a * 0.1);
+    for (const m of desk) {
+      const page = pageOf(doc, m.path);
+      if (!page || m.imported.sections.length !== page.sections.length) continue;
+      const mp = phone.find((x) => x.path === m.path);
+      for (const s2 of m.comparison.sections) {
+        if (s2.importedIndex === void 0) continue;
+        const hc = s2.checks.find((c) => c.what === "Heading");
+        if (!hc || hc.ok) continue;
+        const o = m.original.sections[s2.index]?.heading;
+        const i = m.imported.sections[s2.importedIndex]?.heading;
+        const section = page.sections[s2.importedIndex];
+        if (!o || !i || !section || fits(o.size, i.size)) continue;
+        const po = mp?.original.sections.find((x) => norm6(x.heading?.text) === norm6(o.text))?.heading?.size;
+        const label = o.size < 18 && (o.case === "uppercase" || o.letterSpacing >= 0.05);
+        const pick = [...deskSizes].filter(([k, v]) => {
+          if (!fits(o.size, v.size)) return false;
+          if (k === "eyebrow" !== label) return false;
+          const ph = phoneSizes.get(k);
+          return po === void 0 || !ph || fits(po, ph.size);
+        }).sort(([, a], [, b]) => Math.abs(a.size - o.size) - Math.abs(b.size - o.size))[0]?.[0];
+        if (!pick) continue;
+        const block4 = section.blocks.find(
+          (b) => b.type === "heading" && norm6(String(b.fields.text ?? "")) === norm6(i.text)
+        );
+        const holder = block4 ? void 0 : section.blocks.find(
+          (b) => b.type === "card" && norm6(String(b.fields.heading ?? "")) === norm6(i.text) || b.type === "columns" && Array.isArray(b.fields.items) && b.fields.items.some(
+            (x) => norm6(x.heading) === norm6(i.text)
+          )
+        );
+        if (holder && pick !== "lead") {
+          const style = holder.style ?? {};
+          if (style.typography?.heading === pick) continue;
+          holder.style = {
+            ...style,
+            typography: { ...style.typography ?? {}, heading: pick }
+          };
+          changes.push(
+            `${m.path}: "${o.text.slice(0, 40)}" set at the ${pick} size, as on the original`
+          );
+          continue;
+        }
+        if (!block4) {
+          let done = false;
+          for (const b of section.blocks) {
+            if (b.type !== "text" || done) continue;
+            const doc2 = b.fields.content;
+            for (const node2 of doc2?.content ?? []) {
+              const words4 = (node2.content ?? []).map((x) => x.text ?? "").join("");
+              if (node2.type !== "heading" || norm6(words4) !== norm6(i.text)) continue;
+              if (pick === "lead" || node2.attrs?.preset === pick) break;
+              node2.attrs = { ...node2.attrs ?? {}, preset: pick };
+              done = true;
+              break;
+            }
+          }
+          if (done)
+            changes.push(
+              `${m.path}: "${o.text.slice(0, 40)}" set at the ${pick} size, as on the original`
+            );
+          continue;
+        }
+        if (["display", "h1", "h2", "h3", "h4"].includes(pick)) {
+          if (block4.fields.size === pick) continue;
+          block4.fields.size = pick;
+        } else {
+          const style = block4.style ?? {};
+          if (style.typography?.heading === pick) continue;
+          block4.style = {
+            ...style,
+            typography: { ...style.typography ?? {}, heading: pick }
+          };
+        }
+        changes.push(
+          `${m.path}: "${o.text.slice(0, 40)}" set at the ${pick} size, as on the original`
+        );
+      }
+    }
+  }
   for (const m of on("layout") || on("backgrounds") || on("crops") ? desk : []) {
     const page = pageOf(doc, m.path);
     if (!page) continue;
@@ -49156,23 +51445,42 @@ function tuneRound(input, measured, groups = TUNE_GROUPS) {
       if (u.protocol === "mailto:") return { type: "email", email: u.pathname };
       return u.protocol === "https:" ? { type: "url", url: u.toString() } : void 0;
     };
-    for (const m of desk) {
+    for (const m of desk.filter((x) => !opts.paths || opts.paths.includes(x.path))) {
       const page = pageOf(doc, m.path);
       if (!page || m.imported.sections.length !== page.sections.length) continue;
       const used = /* @__PURE__ */ new Set();
       for (const s2 of m.comparison.sections) {
-        if (s2.importedIndex === void 0 || s2.score >= COMPONENT_THRESHOLD) continue;
+        if (s2.importedIndex === void 0 || s2.score >= (opts.threshold ?? COMPONENT_THRESHOLD))
+          continue;
         if (used.has(s2.importedIndex)) continue;
         const o = m.original.sections[s2.index];
         const old = page.sections[s2.importedIndex];
         if (!o || !old || !canGenerate(o)) continue;
         if (m.comparison.sections.filter((x) => x.importedIndex === s2.importedIndex).length > 1)
           continue;
+        const bag = (t) => new Set(
+          t.toLowerCase().split(/[^a-z0-9]+/).filter((w) => w.length > 3)
+        );
+        const mine = bag(`${o.heading?.text ?? ""} ${o.words ?? o.text}`);
+        const shared = m.imported.sections.some((x, j) => {
+          if (j === s2.importedIndex) return false;
+          const theirs = bag(x.words ?? x.text);
+          if (theirs.size < 4) return false;
+          let n = 0;
+          for (const w of theirs) if (mine.has(w)) n++;
+          return n / theirs.size >= 0.5;
+        });
+        if (shared) continue;
         const name = `imported-${(page.slug || "home").replace(/[^a-z0-9]+/g, "-")}-${s2.index + 1}`.replace(/-+/g, "-").slice(0, 40).replace(/-$/, "");
         const theme = themes?.[old.style.colorTheme ?? "light"];
         const gen = componentFromBlueprint({
           name,
-          label: `${s2.heading ?? "Section"} (as on the original)`.slice(0, 60),
+          label: sectionLabel(
+            s2.heading ?? o.heading?.text,
+            o.blueprint,
+            page.title || (page.slug ? page.slug : "Home"),
+            s2.index + 1
+          ),
           section: o,
           roles,
           ...theme ? {
@@ -49181,10 +51489,14 @@ function tuneRound(input, measured, groups = TUNE_GROUPS) {
               heading: theme.heading,
               "text-muted": theme["text-muted"],
               accent: theme.accent,
-              link: theme.link
+              link: theme.link,
+              surface: theme.surface,
+              border: theme.border,
+              background: theme.background
             }
           } : {},
-          link: linkFor2(m.original.url)
+          link: linkFor2(m.original.url),
+          origin: new URL(m.original.url).origin
         });
         if (!gen) continue;
         const check = checkComponent(gen.def);
@@ -49229,6 +51541,14 @@ function setRole(doc, theme, role, value) {
   doc.styles.overrides = overrides;
   return true;
 }
+function sectionLabel(heading2, blueprint, pageTitle, n) {
+  const first2 = heading2?.trim() || blueprint?.find((i) => i.kind === "heading" && i.text?.trim())?.text || blueprint?.find((i) => i.kind === "text" && i.text?.trim())?.text;
+  const words4 = (first2 ?? "").replace(/\s+/g, " ").trim();
+  if (!words4) return `${pageTitle} section ${n}`.slice(0, 60);
+  const short = words4.length > 40 ? `${words4.slice(0, 40).replace(/\s+\S*$/, "")}\u2026` : words4;
+  const cased = /[a-z]/.test(short) ? short : short.charAt(0) + short.slice(1).toLowerCase();
+  return cased.slice(0, 60);
+}
 
 // ../import/src/index.ts
 var REPORT_FILE = "IMPORT-REPORT.md";
@@ -49438,6 +51758,9 @@ async function detectSite(url, opts = {}) {
   return { ...detectPlatform(r.text, { "content-type": r.contentType }), url: r.url || base };
 }
 async function importSite(opts) {
+  return phoneReady(await importAnySite(opts));
+}
+async function importAnySite(opts) {
   let detection;
   let platform;
   if (opts.repoDir) return importGitHub(opts);
@@ -49500,7 +51823,7 @@ async function renderAgentsMd(root, siteTitle) {
     } catch {
     }
   }
-  const { generateAgentsMd: generateAgentsMd2 } = await import("./agents-md-QBMFXTIQ.js");
+  const { generateAgentsMd: generateAgentsMd2 } = await import("./agents-md-OWDSHBGF.js");
   return generateAgentsMd2(title ? { siteTitle: title } : {});
 }
 async function writeAgentsMd(root, siteTitle) {
@@ -49779,7 +52102,7 @@ function compareFidelityTool(opts) {
           [],
           "Install Playwright next to the CLI (npm i -D playwright && npx playwright install chromium) and restart the MCP server."
         );
-      const widths = input.device === "desktop" ? [DESKTOP] : input.device === "mobile" ? [PHONE] : [DESKTOP, PHONE];
+      const widths = input.device === "desktop" ? [DESKTOP] : input.device === "mobile" ? [PHONE2] : [DESKTOP, PHONE2];
       const run2 = opts.compare ?? runCompare;
       const r = await run2(u.toString(), opts.siteRoot, {
         ...input.pages?.length ? { pages: input.pages } : {},
@@ -49982,8 +52305,8 @@ var DEFAULTS = {
   products: []
 };
 var FILE = {
-  rss: { file: "rss.xml", label: "RSS", mime: "application/rss+xml" },
-  atom: { file: "atom.xml", label: "Atom", mime: "application/atom+xml" },
+  rss: { file: "rss.xml", label: "RSS feed", mime: "application/rss+xml" },
+  atom: { file: "atom.xml", label: "Atom feed", mime: "application/atom+xml" },
   ical: { file: "calendar.ics", label: "Add to calendar (iCal)", mime: "text/calendar" },
   podcast: { file: "podcast.xml", label: "Podcast feed", mime: "application/rss+xml" }
 };
@@ -50798,7 +53121,11 @@ async function startPreviewServer(root, load, opts = {}) {
           page = Object.values(view.pages).find((p) => p.slug === slug);
         }
         if (page) {
-          const html = renderPreviewHtml(view, page.id, { behaviorsUrl: "/_os/behaviors" });
+          const html = renderPreviewHtml(view, page.id, {
+            behaviorsUrl: "/_os/behaviors",
+            // `?os_mode=production`: exactly as published (the Phone check measures this).
+            production: url.searchParams.get("os_mode") === "production"
+          });
           res.writeHead(200, {
             "content-type": "text/html; charset=utf-8",
             "cache-control": "no-store"
@@ -50862,6 +53189,7 @@ var FileSiteStore = class _FileSiteStore {
       canPublish: store.hasGit,
       canRollback: store.hasGit,
       canScreenshot: Boolean(options.screenshotter),
+      canMeasurePhone: Boolean(options.screenshotter),
       publishNote: store.hasGit ? "Local site in git: publishing commits content/ and media/ on the current branch; push it to deploy." : "Local site without git: edits are saved to the files; there is no publish step."
     };
     return store;
@@ -51170,6 +53498,16 @@ Unpublished work saved as ${tag}`,
     const url = await this.previewUrl(siteId, path2);
     return this.options.screenshotter.capture(url, request);
   }
+  async measurePhone(siteId, request) {
+    this.check(siteId);
+    if (!this.options.screenshotter)
+      throw new ToolError("The browser phone check is not available.", "unsupported");
+    const doc = await loadSiteDocument(this.root);
+    const page = doc.pages[request.pageId];
+    const path2 = page?.slug ? `/${page.slug}/` : "/";
+    const url = await this.previewUrl(siteId, `${path2}?os_mode=production`);
+    return this.options.screenshotter.measure(url, request.width);
+  }
   async agentsMd() {
     try {
       return await readFile9(join11(this.root, "AGENTS.md"), "utf8");
@@ -51285,6 +53623,32 @@ function createScreenshotter(chromium) {
         await page.close().catch(() => void 0);
       }
     },
+    async measure(url, width) {
+      browser ??= launch2();
+      let b;
+      try {
+        b = await browser;
+      } catch (e) {
+        browser = void 0;
+        throw e;
+      }
+      const context = await b.newContext({
+        viewport: { width, height: PHONE_HEIGHT },
+        deviceScaleFactor: 2,
+        isMobile: true,
+        hasTouch: true,
+        reducedMotion: "reduce"
+      });
+      const page = await context.newPage();
+      try {
+        await page.goto(url, { waitUntil: "load", timeout: 3e4 });
+        await page.waitForLoadState("networkidle", { timeout: 5e3 }).catch(() => void 0);
+        await page.evaluate(PHONE_PREPARE_SCRIPT).catch(() => void 0);
+        return await page.evaluate(PHONE_PROBE_SCRIPT);
+      } finally {
+        await context.close().catch(() => void 0);
+      }
+    },
     async close() {
       if (!browser) return;
       const b = await browser.catch(() => void 0);
@@ -51504,6 +53868,147 @@ function rebrand(value, from, to) {
   return changed ? out : null;
 }
 
+// src/phone.ts
+var pathOf = (p) => p.slug ? `/${p.slug}/` : "/";
+async function measureSite(root, load, doc, shooter, pages, widths, now) {
+  const server = await startPreviewServer(root, load);
+  const out = /* @__PURE__ */ new Map();
+  try {
+    for (const page of pages) {
+      const results = [];
+      for (const w of widths)
+        results.push(await shooter.measure(`${server.url}${pathOf(page)}?os_mode=production`, w));
+      out.set(page.id, phoneIssuesFromProbe(doc, page.id, results, { now, actor: "phone-check" }));
+    }
+  } finally {
+    await server.close();
+  }
+  return out;
+}
+async function runPhoneCheck(root, opts = {}) {
+  const now = opts.now ?? Date.now();
+  const widths = opts.widths ?? PHONE_WIDTHS;
+  let doc = await loadSiteDocument(root);
+  const pick = (d) => Object.values(d.pages).filter(
+    (p) => !opts.pages?.length || opts.pages.includes(p.id) || opts.pages.includes(p.slug)
+  );
+  let shooter = opts.screenshotter;
+  let note;
+  let owned = false;
+  if (!shooter && opts.rendered !== false) {
+    const pw = await loadPlaywright();
+    if ("error" in pw)
+      note = "The browser check needs Playwright: run `npm i -D playwright && npx playwright install chromium` in the site folder. Only the rules that don't need a browser ran.";
+    else {
+      shooter = createScreenshotter(pw.chromium);
+      owned = true;
+    }
+  }
+  let current2 = doc;
+  const load = async () => current2;
+  const measure2 = async () => shooter && opts.rendered !== false ? measureSite(root, load, current2, shooter, pick(current2), widths, now).catch((e) => {
+    note = `The browser check couldn't run: ${e instanceof Error ? e.message.split("\n")[0] : String(e)}`;
+    return /* @__PURE__ */ new Map();
+  }) : /* @__PURE__ */ new Map();
+  try {
+    let rendered2 = await measure2();
+    const fixed = [];
+    const written = [];
+    if (opts.fix) {
+      const r = fixForPhones(doc, {
+        now,
+        actor: "phone-check",
+        rendered: [...rendered2.values()].flat()
+      });
+      if (r.ops.length) {
+        doc = r.doc;
+        current2 = doc;
+        const w = await writeSiteDocument(root, doc);
+        written.push(...w.written);
+        fixed.push(...r.fixed);
+        rendered2 = await measure2();
+      }
+    }
+    const statics = phoneCheck(doc, void 0, { now, actor: "phone-check" });
+    const pages = pick(doc).map((p) => ({
+      page: p.id,
+      title: p.title,
+      path: pathOf(p),
+      issues: sortIssues([
+        ...statics.filter((i) => i.page === p.id),
+        ...(rendered2.get(p.id) ?? []).filter((i) => i.page === p.id)
+      ])
+    }));
+    const elsewhere = [
+      ...statics.filter((i) => !i.page || !doc.pages[i.page]),
+      // Footer findings repeat on every page: report each once.
+      ...dedupe([...rendered2.values()].flat().filter((i) => i.page === "footer"))
+    ];
+    const issues = sortIssues([...elsewhere, ...pages.flatMap((p) => p.issues)]);
+    const counts2 = { error: 0, warning: 0, info: 0 };
+    for (const i of issues) counts2[i.severity]++;
+    return {
+      rendered: !!shooter && opts.rendered !== false && !note,
+      ...note ? { note } : {},
+      issues,
+      pages,
+      counts: counts2,
+      fixed,
+      written
+    };
+  } finally {
+    if (owned) await shooter?.close();
+  }
+}
+function dedupe(issues) {
+  const seen = /* @__PURE__ */ new Set();
+  return issues.filter((i) => {
+    const key2 = `${i.rule}|${i.message}`;
+    if (seen.has(key2)) return false;
+    seen.add(key2);
+    return true;
+  });
+}
+function formatPhoneReport(r, paint2) {
+  const lines = [];
+  lines.push(paint2(1, r.rendered ? "Phone check (measured at 360 and 390 px)" : "Phone check"));
+  if (r.note) lines.push(paint2(33, r.note));
+  if (r.fixed.length) {
+    lines.push(
+      paint2(32, `Fixed for phones: ${r.fixed.length} change${r.fixed.length === 1 ? "" : "s"}.`)
+    );
+    for (const f of uniqueLabels(r.fixed)) lines.push(`  \u2713 ${f}`);
+  }
+  const groups = /* @__PURE__ */ new Map();
+  for (const i of r.issues) {
+    const page = r.pages.find((p) => p.page === i.page);
+    const key2 = page ? `${page.title} (${page.path})` : i.page === "footer" ? "Footer" : "Whole site";
+    groups.set(key2, [...groups.get(key2) ?? [], i]);
+  }
+  for (const [where2, list5] of groups) {
+    lines.push("", paint2(1, where2));
+    for (const i of list5) {
+      const sev = i.severity === "error" ? paint2(31, "error  ") : i.severity === "warning" ? paint2(33, "warning") : "info   ";
+      lines.push(`  ${sev} ${i.message}`);
+      lines.push(`          ${i.autofix ? `Fix for phones: ${i.autofix.label}.` : i.fix}`);
+    }
+  }
+  const { error: error2, warning, info } = r.counts;
+  lines.push("");
+  lines.push(
+    error2 + warning === 0 ? paint2(
+      32,
+      `Looks great on phones${info ? ` (${info} suggestion${info === 1 ? "" : "s"})` : ""}.`
+    ) : `${error2} error${error2 === 1 ? "" : "s"}, ${warning} warning${warning === 1 ? "" : "s"} on phones.${r.issues.some((i) => i.autofix) && !r.fixed.length ? " Run `openspace check --phone --fix` to fix what can be fixed automatically." : ""}`
+  );
+  return lines.join("\n");
+}
+function uniqueLabels(fixed) {
+  const counts2 = /* @__PURE__ */ new Map();
+  for (const f of fixed) counts2.set(f.label, (counts2.get(f.label) ?? 0) + 1);
+  return [...counts2].map(([l, n]) => n > 1 ? `${l} (${n}\xD7)` : l);
+}
+
 // src/wow-first.ts
 var WOW_FIRST_MESSAGE = "New and imported sites always start on free GitHub Pages, so the first version goes live without any extra accounts. Shops, donations, member areas and password pages show a friendly \u201Copening soon\u201D note until you switch them on in Studio \u2192 Finish setting up (it moves the site to Cloudflare for you, with no downtime).";
 function assertGitHubPagesStart(target) {
@@ -51682,6 +54187,7 @@ async function runImportSite(io, url, dirArg, opts = {}) {
       await writeShell(dir, existing.deploy?.target ?? "github-pages", slug);
     await writeImport(dir, result);
     await writeAgentsMd(dir, result.doc.site.title);
+    await phoneFixRendered(dir, opts, io);
     const check2 = await runCheck(dir);
     const r2 = { dir, result, check: check2 };
     if (opts.summary) await writeSummary(resolve6(io.cwd, opts.summary), r2);
@@ -51699,11 +54205,21 @@ async function runImportSite(io, url, dirArg, opts = {}) {
         await rm6(join15(dir, entry), { recursive: true, force: true });
     throw e;
   }
+  await phoneFixRendered(dir, opts, io);
   const check = await runCheck(dir);
   const r = { dir, result, check };
   if (opts.summary) await writeSummary(resolve6(io.cwd, opts.summary), r);
   return r;
 }
+async function phoneFixRendered(dir, opts, io) {
+  if (!opts.render) return;
+  try {
+    const r = await runPhoneCheck(dir, { fix: true });
+    if (r.fixed.length) io.err(`  Fixed ${r.fixed.length} thing(s) for phones.`);
+  } catch (e) {
+    io.err(`  Couldn't check the pages on a phone: ${e.message.split("\n")[0]}`);
+  }
+}
 function importCounts(r) {
   const { result, check } = r;
   return {
@@ -55970,8 +58486,8 @@ var escapeText3 = (s2) => s2.replace(/&/g, "&amp;").replace(/</g, "&lt;").replac
 var escapeAttr2 = (s2) => s2.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/\{\{/g, "&#123;&#123;");
 var UTILITY = /^(?:display|italic|muted|measure|body|lead|text|small|large|wrap|wrapper|inner|container|row|col|cols|grid|flex|block|inline|content|section|item|items|list|link|links|mt|mb|my|mx|px|py|pt|pb|pl|pr|ml|mr|m|p|d|g|is|has|js|u|sr|visually|astro|w|h|max|min|font|bg|color|center|left|right|hidden|show|active|reveal|fade|animate|anim|in|out|copy|art|wf|w|elementor|wp|x|y|z|lg|md|sm|xl|xs|xxl|space|gap|align|justify|order|relative|absolute|fixed|sticky|overflow|shadow|rounded|border|ring|opacity|transition|duration|ease|delay|transform|scale|rotate|translate|uppercase|lowercase|capitalize|tracking|leading|truncate|break|whitespace|select|cursor|pointer|z)$/;
 function camel(s2) {
-  const words3 = s2.replace(/([a-z0-9])([A-Z])/g, "$1 $2").split(/[^A-Za-z0-9]+/).filter(Boolean).map((w) => w.toLowerCase());
-  const out = words3.map((w, i) => i === 0 ? w : w.charAt(0).toUpperCase() + w.slice(1)).join("").replace(/^[^a-z]+/, "");
+  const words4 = s2.replace(/([a-z0-9])([A-Z])/g, "$1 $2").split(/[^A-Za-z0-9]+/).filter(Boolean).map((w) => w.toLowerCase());
+  const out = words4.map((w, i) => i === 0 ? w : w.charAt(0).toUpperCase() + w.slice(1)).join("").replace(/^[^a-z]+/, "");
   return out.slice(0, 32);
 }
 function semanticName(el) {
@@ -56014,9 +58530,34 @@ function nameFor(el, fallback2 = "text") {
   if (!el) return fallback2;
   return semanticName(el) ?? TAG_NAME[tagOf(el)] ?? fallback2;
 }
-function humanize2(key2) {
-  const words3 = key2.replace(/([a-z])([A-Z0-9])/g, "$1 $2").toLowerCase();
-  return (words3.charAt(0).toUpperCase() + words3.slice(1)).slice(0, 60);
+var PLAIN_WORDS = {
+  cta: "button",
+  btn: "button",
+  img: "picture",
+  image: "picture",
+  pic: "picture",
+  photo: "picture",
+  desc: "description",
+  txt: "text",
+  href: "link",
+  url: "link",
+  kicker: "small label",
+  eyebrow: "small label",
+  overline: "small label",
+  lede: "intro",
+  lead: "intro",
+  subhead: "subheading",
+  bg: "background",
+  nav: "menu"
+};
+function humanize2(key2, kind) {
+  const words4 = key2.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/([A-Za-z])(\d)/g, "$1 $2").replace(/(\d)([A-Za-z])/g, "$1 $2").toLowerCase().split(/[\s_-]+/).filter(Boolean).map((w) => PLAIN_WORDS[w] ?? w);
+  const linky = words4.some((w) => w === "button" || w === "link");
+  if (linky && words4.length > 1 && words4[words4.length - 1] === "label")
+    words4[words4.length - 1] = "text";
+  if (kind === "link" && words4[words4.length - 1] !== "link") words4.push("goes to");
+  const out = words4.join(" ") || "text";
+  return (out.charAt(0).toUpperCase() + out.slice(1)).slice(0, 60);
 }
 var RESERVED2 = /* @__PURE__ */ new Set([
   "rich",
@@ -56058,7 +58599,7 @@ var FieldScope = class {
   }
   add(base, spec, value) {
     const key2 = this.key(base);
-    const label = humanize2(key2);
+    const label = humanize2(key2, spec.kind);
     this.fields[key2] = { ...spec, label };
     this.values[key2] = value;
     return key2;
@@ -56333,10 +58874,10 @@ var SectionConverter = class {
   async shapes(els, w) {
     const map2 = /* @__PURE__ */ new Map();
     const sig = (e) => `${tagOf(e)}.${classes(e).sort().join(".")}`;
-    const counts = /* @__PURE__ */ new Map();
-    for (const e of els) counts.set(sig(e), (counts.get(sig(e)) ?? 0) + 1);
+    const counts2 = /* @__PURE__ */ new Map();
+    for (const e of els) counts2.set(sig(e), (counts2.get(sig(e)) ?? 0) + 1);
     for (const e of els) {
-      if ((counts.get(sig(e)) ?? 0) < 2) continue;
+      if ((counts2.get(sig(e)) ?? 0) < 2) continue;
       const scope = new FieldScope();
       const tpl = await this.gen(e, scope, { ...w, listDepth: w.listDepth + 1 });
       const kinds = Object.entries(scope.fields).map(([k, f]) => `${k}:${f.kind}`).join(",");
@@ -57300,7 +59841,11 @@ function tokensFromPage(css, fontLinks) {
   const btn = step(/class:(?:btn|button)\b/i);
   if (btn) type.button = btn;
   if (Object.keys(type).length) tokens.type = type;
-  return { tokens, notes: read?.notes ?? [], families };
+  const nColors = Object.keys(tokens.colors ?? {}).length;
+  const nType = Object.keys(tokens.type ?? {}).length;
+  const pl = (k, w) => `${k} ${w}${k === 1 ? "" : "s"}`;
+  const note = `Read your page\u2019s styles: ${pl(nColors, "colour")}${families.length ? `, its fonts (${families.slice(0, 4).join(", ")})` : ""}${nType ? ` and ${pl(nType, "text style")}` : ""}.`;
+  return { tokens, notes: [note], families };
 }
 function linkFamilies(hrefs) {
   const out = [];
@@ -57346,6 +59891,9 @@ function siteHref(bundle, fromPath, href, pagePaths) {
   return resolved;
 }
 async function importHtmlBundle(bundle, opts) {
+  return phoneReady(await importBundle(bundle, opts));
+}
+async function importBundle(bundle, opts) {
   const progress = opts.onProgress ?? (() => void 0);
   const now = opts.now ?? /* @__PURE__ */ new Date();
   const notices = [];
@@ -57506,7 +60054,7 @@ ${await r.text()}`;
   }
   const docTitle = text(find(home.root, (e) => e.tagName === "title"));
   const wordmark = brand ? text(brand).replace(/\s+/g, " ").trim() : "";
-  const siteTitle = (opts.title ?? homePage.siteName ?? (wordmark && wordmark.length <= 60 ? titleCase(wordmark) : void 0) ?? (docTitle.split(/\s+[|·—–-]\s+/)[0] || "My site")).slice(0, 120);
+  const siteTitle = ((wordmark && wordmark.length <= 60 ? titleCase(wordmark) : void 0) ?? opts.title ?? homePage.siteName ?? (docTitle.split(/\s+[|·—–-]\s+/)[0] || "My site")).slice(0, 120);
   const logoImg = brand ? find(brand, (e) => e.tagName === "img") : void 0;
   const logoRef = logoImg ? resolveRef(bundle, attr(logoImg, "src") ?? "", home.path) : void 0;
   const segsByPage = /* @__PURE__ */ new Map();
@@ -57570,6 +60118,7 @@ ${await r.text()}`;
           const placeholder = email ? attr(email, "placeholder") : void 0;
           blocks2.push({
             kind: "newsletter",
+            ...signupAsksName(f) ? { askName: true } : {},
             ...label3 ? { buttonLabel: label3.slice(0, 40) } : {},
             ...placeholder ? { placeholder } : {}
           });
@@ -57933,8 +60482,8 @@ function componentNameFor(el, pagePath2) {
     )
   );
   const heading2 = find(el, (e) => /^h[1-3]$/.test(e.tagName));
-  const words3 = text(heading2).split(/\s+/).slice(0, 3).join(" ");
-  const raw2 = (id && id.length > 2 && !/^(?:top|main|content|section\d*)$/i.test(id) ? id : void 0) ?? cls ?? (words3 || el.tagName);
+  const words4 = text(heading2).split(/\s+/).slice(0, 3).join(" ");
+  const raw2 = (id && id.length > 2 && !/^(?:top|main|content|section\d*)$/i.test(id) ? id : void 0) ?? cls ?? (words4 || el.tagName);
   const slug = raw2.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").replace(/^(\d)/, "s-$1").slice(0, 30).replace(/-+$/, "");
   const prefix = pagePath2 === "/" ? "" : `${pagePath2.split("/").filter(Boolean).pop()}-`;
   return `${prefix}${slug || "section"}`.replace(/^[^a-z]+/, "s-").slice(0, 36).replace(/-+$/, "");
@@ -58573,7 +61122,8 @@ async function runMcp(io, dir, opts = {}) {
 
 // src/fidelity.ts
 var DESKTOP = 1440;
-var PHONE = 390;
+var COMPONENT_RETRY_BELOW = 75;
+var PHONE2 = 390;
 async function launch() {
   const pw = await loadPlaywright();
   if ("error" in pw) throw new CliError(pw.error);
@@ -58616,7 +61166,7 @@ async function lookProber() {
       const out = {};
       for (const [key2, width] of [
         ["desktop", DESKTOP],
-        ["mobile", PHONE]
+        ["mobile", PHONE2]
       ]) {
         const page = await open(browser, url, width);
         try {
@@ -58765,7 +61315,7 @@ async function runCompare(original, dir, opts = {}, log = () => void 0) {
   await mkdir8(out, { recursive: true });
   if (!opts.out) await writeFile10(join18(out, ".gitignore"), "*\n");
   const pages = (opts.pages?.length ? opts.pages : defaultPages(doc)).map((p) => `/${slugOf2(p)}`);
-  const widths = opts.widths ?? [DESKTOP, PHONE];
+  const widths = opts.widths ?? [DESKTOP, PHONE2];
   const server = await startPreviewServer(root, () => loadSiteDocument(root));
   const browser = await launch();
   const oldPath = /* @__PURE__ */ new Map();
@@ -58785,7 +61335,7 @@ async function runCompare(original, dir, opts = {}, log = () => void 0) {
       await page.close().catch(() => void 0);
     }
   };
-  const measure = async () => {
+  const measure2 = async () => {
     const comparisons = [];
     const measured = [];
     const shots = /* @__PURE__ */ new Map();
@@ -58830,7 +61380,7 @@ async function runCompare(original, dir, opts = {}, log = () => void 0) {
   let best;
   let tuning;
   try {
-    best = await measure();
+    best = await measure2();
     const first2 = fidelityReport(best.comparisons);
     const rounds = Math.max(0, Math.min(5, opts.tune ?? 0));
     if (rounds && best.measured.length) {
@@ -58840,14 +61390,33 @@ async function runCompare(original, dir, opts = {}, log = () => void 0) {
       let ran = 0;
       let withoutComponents;
       let withComponents2;
-      let budget = 2 + rounds * 3;
+      let budget = 2 + rounds * 5;
+      let componentBudget = 2 + rounds * 2;
       for (let pass = 0; pass < rounds && budget > 0; pass++) {
         let improved = false;
+        const attempts = [];
         for (const group of TUNE_GROUPS) {
-          if (budget <= 0) break;
-          const t = tuneRound(bestDoc, best.measured, [group]);
+          if (group !== "components") {
+            attempts.push({ group });
+            continue;
+          }
+          const paths = [
+            ...new Set(
+              best.measured.filter(
+                (m) => m.viewport >= 700 && m.comparison.sections.some((x) => x.score < COMPONENT_RETRY_BELOW)
+              ).map((m) => m.path)
+            )
+          ];
+          for (const path2 of paths) attempts.push({ group, paths: [path2] });
+        }
+        for (const { group, paths } of attempts) {
+          if (group === "components" ? componentBudget <= 0 : budget <= 0) continue;
+          const t = tuneRound(bestDoc, best.measured, [group], {
+            ...paths ? { paths, threshold: COMPONENT_RETRY_BELOW } : {}
+          });
           if (!t.changes.length) continue;
-          budget--;
+          if (group === "components") componentBudget--;
+          else budget--;
           log(
             `Tuning ${group}: ${t.changes.slice(0, 4).join("; ")}${t.changes.length > 4 ? "\u2026" : ""}`
           );
@@ -58862,7 +61431,7 @@ async function runCompare(original, dir, opts = {}, log = () => void 0) {
             await writeSiteDocument(root, bestDoc);
             continue;
           }
-          const next = await measure();
+          const next = await measure2();
           const score = fidelityReport(next.comparisons).exact ?? 0;
           const better = score > bestScore + 0.1;
           log(
@@ -58980,10 +61549,17 @@ function fidelitySummary(report, tuning, thumbs) {
   const before = new Map(
     (tuning?.before.pages ?? []).map((p) => [`${p.path}@${p.viewport}`, p.score])
   );
+  const strictBefore = new Map(
+    (tuning?.before.pages ?? []).map((p) => [`${p.path}@${p.viewport}`, p.strict?.score])
+  );
   return {
     version: 1,
     score: report.score,
+    // The same pages by the strict v3 scorer, side by side (additive: older readers ignore it).
+    ...report.strict ? { strict: report.strict.score } : {},
+    ...report.scorer ? { scorer: report.scorer } : {},
     ...tuning ? { before: tuning.before.score, changes: tuning.changes.slice(0, 40) } : {},
+    ...tuning?.before.strict ? { strictBefore: tuning.before.strict.score } : {},
     ...tuning?.withoutComponents !== void 0 ? {
       withoutComponents: tuning.withoutComponents,
       ...tuning.withComponents !== void 0 ? { withComponents: tuning.withComponents } : {}
@@ -58992,11 +61568,15 @@ function fidelitySummary(report, tuning, thumbs) {
       const key2 = `${p.path}@${p.viewport}`;
       const b = before.get(key2);
       const worst = [...p.checks, ...p.sections.flatMap((s2) => s2.checks)].filter((c) => !c.ok && !c.credit).sort((x, y) => y.weight - x.weight).slice(0, 3).map((c) => c.what);
+      const sb = strictBefore.get(key2);
       return {
         path: p.path,
         device: p.viewport < 700 ? "phone" : "desktop",
         score: p.score,
+        ...p.strict ? { strict: p.strict.score } : {},
+        ...p.corrections?.length ? { corrections: p.corrections.slice(0, 6) } : {},
         ...b !== void 0 ? { before: b } : {},
+        ...sb !== void 0 ? { strictBefore: sb } : {},
         ...thumbs[key2] ? { image: thumbs[key2] } : {},
         ...worst.length ? { differs: worst } : {}
       };
@@ -59040,6 +61620,7 @@ async function addFidelityToSummary(file, r) {
     const summary = JSON.parse(await readFile14(file, "utf8"));
     summary.fidelity = {
       score: r.report.score,
+      ...r.report.strict ? { strict: r.report.strict.score } : {},
       ...r.tuning ? { before: r.tuning.before.score } : {}
     };
     await writeFile10(file, `${JSON.stringify(summary, null, 2)}
@@ -59048,8 +61629,9 @@ async function addFidelityToSummary(file, r) {
   }
 }
 function compareSummary(r) {
+  const strict = r.report.strict ? r.tuning?.before.strict ? ` Strict v3 scorer: ${r.tuning.before.strict.score}/100 \u2192 ${r.report.strict.score}/100 (the corrected score reads three things v3 gets wrong; see FIDELITY-REPORT.md).` : ` Strict v3 scorer: ${r.report.strict.score}/100 (the corrected score reads three things v3 gets wrong; see FIDELITY-REPORT.md).` : "";
   const lines = [
-    r.tuning ? `Visual match with the original: ${r.tuning.before.score}/100 \u2192 ${r.report.score}/100 after ${r.tuning.rounds} tuning round(s)${r.tuning.withoutComponents !== void 0 ? ` (${r.tuning.withoutComponents}/100 before recreating sections as custom components${r.tuning.withComponents !== void 0 ? "" : "; none kept"})` : ""}.` : `Visual match with the original: ${r.report.score}/100.`
+    r.tuning ? `Visual match with the original: ${r.tuning.before.score}/100 \u2192 ${r.report.score}/100 after ${r.tuning.rounds} tuning round(s)${r.tuning.withoutComponents !== void 0 ? ` (${r.tuning.withoutComponents}/100 before recreating sections as custom components${r.tuning.withComponents !== void 0 ? "" : "; none kept"})` : ""}.${strict}` : `Visual match with the original: ${r.report.score}/100.${strict}`
   ];
   for (const p of r.report.pages) {
     const off = [
@@ -59057,7 +61639,7 @@ function compareSummary(r) {
       ...p.sections.filter((s2) => s2.score < 80).map((s2) => `section ${s2.index + 1}${s2.heading ? ` "${s2.heading.slice(0, 30)}"` : ""}`)
     ];
     lines.push(
-      `  ${p.path} ${p.viewport}px: ${p.score}/100${off.length ? ` \u2014 differs: ${off.slice(0, 6).join(", ")}${off.length > 6 ? "\u2026" : ""}` : ""}`
+      `  ${p.path} ${p.viewport}px: ${p.score}/100${p.strict && p.strict.score !== p.score ? ` (strict v3 ${p.strict.score})` : ""}${off.length ? ` \u2014 differs: ${off.slice(0, 6).join(", ")}${off.length > 6 ? "\u2026" : ""}` : ""}`
     );
   }
   lines.push(`  Report and side-by-side images: ${join18(r.out, "FIDELITY-REPORT.md")}`);
@@ -59277,14 +61859,23 @@ async function runMigrate(root, opts = {}) {
 var VERSION = "0.1.0";
 function createProgram(io, setExit, deps = {}) {
   const program = new Command("openspace").description("Check, preview, migrate, scaffold and serve OpenSpace sites to Claude (MCP).").version(VERSION).configureOutput({ writeOut: (s2) => io.out(s2.trimEnd()), writeErr: (s2) => io.err(s2.trimEnd()) }).exitOverride();
-  program.command("check").argument("[dir]", "site folder (default: the current folder)").description("Validate content: schemas, links, images, size budgets and secrets.").option("--ci", "CI mode: also print GitHub Actions annotations").option("--json", "print the report as JSON").option("--media-warn-mb <n>", "media folder warning threshold in MB", Number).option("--media-fail-mb <n>", "media folder failure threshold in MB", Number).action(
+  program.command("check").argument("[dir]", "site folder (default: the current folder)").description("Validate content: schemas, links, images, size budgets and secrets.").option("--ci", "CI mode: also print GitHub Actions annotations").option("--json", "print the report as JSON").option("--media-warn-mb <n>", "media folder warning threshold in MB", Number).option("--media-fail-mb <n>", "media folder failure threshold in MB", Number).option("--phone", "also run the Phone check in a real browser (Playwright) at 360 and 390 px").option("--fix", "with --phone: fix everything for phones (writes the content files)").action(
     async (dir, opts) => {
+      let phone;
+      if (opts.phone || opts.fix) {
+        phone = await runPhoneCheck(resolve10(io.cwd, dir ?? "."), { fix: opts.fix });
+        if (!opts.json) {
+          io.out(formatPhoneReport(phone, (code3, s2) => paint(colorEnabled(io), code3, s2)));
+          io.out("");
+        }
+        if (phone.counts.error) setExit(1);
+      }
       const budgets = {};
       if (opts.mediaWarnMb !== void 0) budgets.mediaWarnBytes = opts.mediaWarnMb * 1024 * 1024;
       if (opts.mediaFailMb !== void 0) budgets.mediaFailBytes = opts.mediaFailMb * 1024 * 1024;
       const report = await runCheck(resolve10(io.cwd, dir ?? "."), { budgets });
       if (opts.json) {
-        io.out(JSON.stringify(report, null, 2));
+        io.out(JSON.stringify(phone ? { ...report, phone } : report, null, 2));
       } else {
         if (opts.ci) for (const line of githubAnnotations(report)) io.out(line);
         const color = colorEnabled(io);
@@ -59640,4 +62231,4 @@ export {
   createProgram,
   run
 };
-//# sourceMappingURL=chunk-B5C7S4S5.js.map
+//# sourceMappingURL=chunk-PBN36VUE.js.map