/*
  Claude review refresh, 2026-10-07.
  Styles for the new sections (#plan, #compare, founding promises, "Who is Mike?")
  and small accessibility fixes. Everything added by that pass lives in this file,
  so removing this <link> removes the new styling in one step.
*/

/* ---------- Hero calls to action ---------- */

.mwmastra .hero-actions {
  align-items: center;
}

.mwmastra .hero-actions .button {
  min-height: 48px;
  padding: 14px 22px;
  font-size: 14px;
}

.mwmastra .hero-actions .hero-watch-cue {
  flex-basis: 100%;
  min-height: 40px;
  padding-block: 4px;
  font-size: 14px;
}

/* ---------- 02 What you leave with ---------- */

.plan-proof {
  position: relative;
  padding-block: clamp(72px, 8vw, 120px);
  border-top: 1px solid var(--line-soft);
  background:
    radial-gradient(circle at 18% 0%, rgba(47, 116, 255, 0.08), transparent 38%),
    radial-gradient(circle at 88% 100%, rgba(240, 185, 44, 0.05), transparent 40%),
    var(--bg-deep);
}

.plan-heading {
  max-width: 820px;
  margin: 0 auto clamp(32px, 4vw, 48px);
  text-align: center;
}

.plan-heading .eyebrow {
  justify-content: center;
}

.plan-heading h2,
.compare-heading h2 {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-size: clamp(36px, 4.6vw, 64px);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.plan-heading h2 span {
  display: block;
  color: var(--muted);
  font-style: italic;
}

.plan-lede {
  max-width: 62ch;
  margin: 0 auto;
  color: var(--muted);
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.6;
}

.plan-lede q {
  color: var(--ink);
  font-style: italic;
}













































/* ---------- 04 Can't I just ask ChatGPT? ---------- */

.compare-section {
  padding-block: clamp(72px, 8vw, 116px);
  border-top: 1px solid var(--line-soft);
  background: var(--bg);
}

.compare-heading {
  max-width: 780px;
  margin: 0 auto clamp(30px, 4vw, 46px);
  text-align: center;
}

.compare-heading .eyebrow {
  justify-content: center;
}

.compare-heading > p {
  max-width: 60ch;
  margin: 0 auto;
  color: var(--muted);
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.6;
}

.compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 980px;
  margin: 0 auto;
}

.compare-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(22px, 2.6vw, 34px);
  background: var(--panel);
}

.compare-card-mike {
  border-color: rgba(47, 116, 255, 0.42);
  background:
    linear-gradient(180deg, rgba(47, 116, 255, 0.1), transparent 52%),
    var(--panel);
}

.compare-card h3 {
  margin: 0 0 18px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.compare-card-chat h3 {
  color: var(--muted);
}

.compare-card ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.compare-card li {
  position: relative;
  padding-left: 28px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

.compare-card li::before {
  position: absolute;
  left: 0;
  top: 0;
  content: "•";
  color: var(--quiet);
}

.compare-card-mike li {
  color: var(--ink);
}

.compare-card-mike li::before {
  content: "✓";
  color: var(--teal);
  font-weight: 700;
}

.compare-note {
  max-width: 70ch;
  margin: clamp(22px, 3vw, 32px) auto 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
}

.compare-note strong {
  color: var(--ink);
}

/* ---------- Pricing ---------- */

.pricing-credit-explainer {
  max-width: 62ch;
  margin: 14px 0 0;
  color: var(--quiet);
  font-size: 14px;
  line-height: 1.6;
}

.pricing-credit-explainer strong {
  color: var(--ink);
}

/* ---------- Join section ---------- */

.founding-copy h2 {
  max-width: 15ch;
  font-size: clamp(40px, 4.4vw, 64px);
}

.founding-promises {
  display: grid;
  gap: 10px;
  max-width: 58ch;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.founding-promises li {
  position: relative;
  padding-left: 26px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.5;
}

.founding-promises li::before {
  position: absolute;
  left: 0;
  top: 0;
  content: "✓";
  color: var(--gold);
  font-weight: 700;
}

.founding-promises strong {
  color: var(--ink);
}

.meet-mike {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  max-width: 58ch;
  margin: 28px 0 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.025);
}

.meet-mike-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
}

.meet-mike-mark img {
  width: 30px;
  height: auto;
}

.meet-mike h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 600;
}

.meet-mike p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

/* The signup form is shown straight away instead of behind an extra click. */
.signup-expander.is-always-open > summary {
  display: none;
}

.signup-expander.is-always-open {
  margin-top: 0;
}

.form-note a {
  color: var(--ink);
  text-underline-offset: 3px;
}

.site-footer .footer-credit {
  margin: 0;
  color: var(--quiet);
  font-size: 13px;
}

/* ---------- Accessibility fixes ---------- */

/* A visible focus ring on the signup fields (the old ring was about 1.1 to 1 contrast). */
.founding-form input:focus-visible,
.founding-form textarea:focus-visible,
.post-signup-form textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-color: rgba(255, 255, 255, 0.6);
}

/* Smallest labels raised to a readable size. */
.mwmastra .detail-compact-label small {
  font-size: 10px;
}

.mwmastra .quiet-conversation-you small,
.mwmastra .quiet-conversation-mike small {
  font-size: 11px;
}

#thoughts #example-count {
  font-size: 11px;
}

/* Bigger tap targets in the kit explorer and the thoughts scene. */
@media (pointer: coarse) {
  #thoughts #example-files button,
  #thoughts .quiet-button,
  #thoughts #example-raw,
  #thoughts #copy-kit {
    min-height: 44px;
  }
}

/* ---------- Small screens ---------- */



@media (max-width: 760px) {
  

  .compare-grid {
    grid-template-columns: 1fr;
  }

  .mwmastra .hero-actions .button {
    flex: 1 1 100%;
  }
}

@media (max-width: 420px) {
  

  

  .meet-mike {
    padding: 16px;
  }
}

/* ---------- Kit explorer: three examples ---------- */

#thoughts .example-kits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 30px;
  border-bottom: 1px solid var(--example-border);
  background: #0e1520;
}

#thoughts .example-kits button {
  display: grid;
  gap: 2px;
  min-height: 52px;
  border: 1px solid #ffffff1f;
  border-radius: 8px;
  padding: 8px 12px;
  background: #ffffff06;
  color: #c8d4e4;
  text-align: left;
}

#thoughts .example-kits button strong {
  font-size: 13px;
  font-weight: 600;
}

#thoughts .example-kits button small {
  color: #93a4bb;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#thoughts .example-kits button[aria-pressed="true"] {
  border-color: #8aa9cc;
  background: #25364d;
  color: #f0f3f8;
}



#thoughts #example-demo {
  margin-left: auto;
  border-radius: 999px;
  padding: 8px 14px;
  background: #e6ebef;
  color: #142031;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

#thoughts #example-demo:hover,
#thoughts #example-demo:focus-visible {
  background: #ffffff;
}

@media (max-width: 700px) {
  #thoughts .example-kits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 10px 12px;
    gap: 6px;
  }

  #thoughts .example-kits button {
    padding: 6px 8px;
  }

  #thoughts .example-kits button strong {
    font-size: 12px;
  }
}

/* ---------- Plan section: two more examples ---------- */





























/* ---------- Kit explorer: finished site view and richer documents ---------- */



#thoughts .example-layout[hidden] {
  display: none;
}

#thoughts #example-site {
  flex: 1;
  width: 100%;
  min-height: 0;
  border: 1px solid #ffffff1f;
  border-radius: 10px;
  background: #ffffff;
}

#thoughts #example-demo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.studio .example-document .example-table {
  overflow-x: auto;
  margin: 0 0 20px;
  border: 1px solid #ffffff1a;
  border-radius: 8px;
}

.studio .example-document table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.45;
}

.studio .example-document th,
.studio .example-document td {
  padding: 9px 12px;
  border-bottom: 1px solid #ffffff14;
  text-align: left;
  vertical-align: top;
}

.studio .example-document th {
  background: #ffffff0a;
  color: #e7eef8;
  font-weight: 600;
  white-space: nowrap;
}

.studio .example-document tr:last-child td {
  border-bottom: 0;
}

.studio .example-document code {
  padding: 1px 5px;
  border-radius: 4px;
  background: #ffffff12;
  font-size: 0.92em;
}

.studio .example-document pre code {
  padding: 0;
  background: none;
}

.studio .example-document blockquote {
  margin: 0 0 12px;
  border-left: 3px solid #8aa9cc66;
  padding-left: 14px;
  color: #c9d5e4;
}

@media (max-width: 700px) {
  

  .studio .example-document table {
    font-size: 13px;
  }
}



#thoughts .example-builds {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

#thoughts .example-builds[hidden] {
  display: none;
}









/* ---------- 02 The example studio (inline, replaces the popup, 2026-10-08) ----------
   Selected things are shown with an underline; actions are bordered buttons; the builder is a rocker. */

.studio {
  --studio-line: rgba(255, 255, 255, 0.1);
  --studio-accent: #2f74ff;
  --studio-ink: #f2f5fa;
  --studio-muted: #a3afc0;
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  background: #0c121b;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);
  color: var(--studio-ink);
  font: 400 14px/1.6 var(--sans);
}

.studio [hidden] { display: none !important; }

.studio button { font-family: var(--sans); cursor: pointer; }

.studio :focus-visible {
  outline: 2px solid #f0b92c;
  outline-offset: 2px;
}

/* Project tabs */
.studio-projects {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--studio-line);
}

.studio-projects [role="tab"] {
  display: grid;
  gap: 3px;
  min-height: 72px;
  padding: 16px 22px 13px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--studio-muted);
  text-align: left;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.studio-projects [role="tab"] + [role="tab"] { border-left: 1px solid var(--studio-line); }

.studio-projects [role="tab"] strong {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.studio-projects [role="tab"] small {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.8;
}

.studio-projects [role="tab"]:hover {
  background: rgba(255, 255, 255, 0.03);
  color: var(--studio-ink);
}

.studio-projects [role="tab"][aria-selected="true"] {
  border-bottom-color: var(--studio-accent);
  background: linear-gradient(180deg, transparent, rgba(47, 116, 255, 0.1));
  color: var(--studio-ink);
}

.studio-projects [role="tab"][aria-selected="true"] small { color: #8fb2ff; opacity: 1; }

/* The bar: what to look at, who built it, and the actions */
.studio-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  padding: 10px 20px;
  border-bottom: 1px solid var(--studio-line);
  background: #0f1622;
}

.studio-views { display: flex; gap: 26px; }

.studio-views [role="tab"] {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 2px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--studio-muted);
  font-size: 14px;
  font-weight: 600;
}

.studio-views [role="tab"]:hover { color: var(--studio-ink); }

.studio-views [role="tab"][aria-selected="true"] {
  border-bottom-color: var(--studio-accent);
  color: var(--studio-ink);
}

.studio-count {
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 11px;
  font-weight: 600;
}

.studio-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}

/* Rocker switch: both sides named, the knob shows which one is on */
.rocker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
}

.rocker-label {
  color: var(--studio-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rocker-side {
  position: relative;
  color: var(--studio-muted);
  cursor: pointer;
  transition: color 0.15s ease;
}

.rocker-side input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.rocker-side:has(input:checked) { color: var(--studio-ink); }

.rocker-side:has(input:focus-visible) span {
  outline: 2px solid #f0b92c;
  outline-offset: 3px;
  border-radius: 4px;
}

.rocker-track {
  position: relative;
  width: 48px;
  height: 26px;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(47, 116, 255, 0.35);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.rocker-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
  transition: transform 0.22s cubic-bezier(0.3, 1.3, 0.5, 1);
}

.rocker[data-side="claude"] .rocker-knob { transform: translateX(22px); }

/* Buttons look like buttons: a border, a lift and a press */
.studio-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 8px rgba(0, 0, 0, 0.35);
  color: var(--studio-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.studio-button:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-1px); }
.studio-button:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4); }

.studio-button-primary {
  border-color: #5b92ff;
  background: var(--studio-accent);
  color: #fff;
}

.studio-button-primary:hover { background: #4583ff; }

/* The panel */
.studio-panel { position: relative; }

.studio-site {
  position: relative;
  background: #fff;
}

.studio #example-site {
  display: block;
  width: 100%;
  height: clamp(520px, 76vh, 820px);
  border: 0;
  background: #fff;
}

.studio-shield {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 0 22px;
  border: 0;
  background: transparent;
}

.studio-shield-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(8, 12, 18, 0.86);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.studio-shield-chip > span[aria-hidden] { color: #4cd98a; font-size: 10px; }

.studio-panel:hover .studio-shield-chip,
.studio-shield:focus-visible .studio-shield-chip {
  opacity: 1;
  transform: none;
}

/* The build kit and the prompt, read right here */
.studio .example-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  height: clamp(520px, 76vh, 820px);
}

.studio .example-sidebar {
  overflow: auto;
  padding: 20px 14px;
  border-right: 1px solid var(--studio-line);
  background: #0e1520;
  overscroll-behavior: contain;
}

.studio .example-sidebar label { display: block; margin: 0 4px 7px; color: var(--studio-muted); font-size: 11px; }

.studio #example-search {
  box-sizing: border-box;
  width: 100%;
  min-height: 40px;
  margin-bottom: 18px;
  padding: 10px;
  border: 1px solid #53647c;
  border-radius: 8px;
  background: #0a1019;
  color: var(--studio-ink);
  font: 13px var(--sans);
}

.studio #example-files details { margin-bottom: 16px; }

.studio #example-files summary {
  display: list-item;
  margin-left: 13px;
  padding: 8px 4px;
  color: #9cacc2;
  font: 600 10px/1.6 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.studio #example-files button {
  display: block;
  width: 100%;
  min-height: 38px;
  padding: 9px 12px;
  border: 0;
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  background: transparent;
  color: #bdc8d8;
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
}

.studio #example-files button:hover { background: rgba(255, 255, 255, 0.04); color: #fff; }

.studio #example-files button[aria-current] {
  border-left-color: var(--studio-accent);
  background: rgba(47, 116, 255, 0.1);
  color: #fff;
}

.studio #example-empty { color: var(--studio-muted); font-size: 12px; }

.studio .example-reader {
  min-width: 0;
  overflow: auto;
  padding: 26px 34px 22px;
  overscroll-behavior: contain;
}

.studio[data-view="prompt"] .example-sidebar { display: none; }
.studio[data-view="prompt"] .example-layout { grid-template-columns: minmax(0, 1fr); }
.studio[data-view="prompt"] .example-reader { padding-inline: max(34px, calc((100% - 820px) / 2)); }

.studio .example-filebar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }

.studio #example-file-path {
  margin: 0 0 7px;
  color: #94acc9;
  font: 11px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
  overflow-wrap: anywhere;
}

.studio #example-doc-title { margin: 0; color: #edf3fc; font: 600 22px/1.25 var(--sans); letter-spacing: -0.01em; }

.studio #example-raw,
.studio #copy-kit {
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  color: #dbe6f5;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.studio #example-raw:hover,
.studio #copy-kit:hover { background: rgba(255, 255, 255, 0.1); }

.studio #example-doc-summary {
  margin: 12px 0 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--studio-line);
  color: #aabbd1;
  font-size: 13px;
}

.studio .example-document { max-width: 780px; color: #c7d2e1; font: 400 14px/1.8 var(--sans); overflow-wrap: anywhere; }
.studio .example-document h2 { margin: 0 0 24px; color: #eff3f9; font: 600 26px/1.2 var(--sans); letter-spacing: -0.02em; }
.studio .example-document h3 { margin: 30px 0 10px; color: #e7eef8; font: 600 17px/1.4 var(--sans); }
.studio .example-document h4 { margin: 24px 0 8px; color: #e7eef8; font: 600 15px/1.4 var(--sans); }
.studio .example-document p { margin: 0 0 13px; }
.studio .example-document ul,
.studio .example-document ol { margin: 10px 0 20px; padding-left: 23px; }
.studio .example-document li { margin: 0 0 9px; padding-left: 3px; }

.studio .example-document pre,
.studio .example-markdown {
  margin: 18px 0;
  padding: 19px;
  border: 1px solid var(--studio-line);
  border-radius: 9px;
  background: #080e17;
  color: #bdd0e9;
  font: 12px/1.8 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 2;
}

.studio .example-reader-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--studio-line);
  color: #99acc4;
  font-size: 12px;
}

.studio #copy-status { flex-basis: 100%; }

.studio-note {
  margin: 0;
  padding: 12px 20px;
  border-top: 1px solid var(--studio-line);
  background: #0f1622;
  color: #92a1b6;
  font-size: 12px;
  text-align: center;
}

@media (max-width: 860px) {
  .studio-projects [role="tab"] { padding: 14px 14px 11px; }
  .studio-projects [role="tab"] strong { font-size: 15px; }
}

@media (max-width: 760px) {
  .studio { border-radius: 14px; margin-inline: -4px; }
  .studio-projects [role="tab"] { min-height: 60px; padding: 11px 6px 9px; text-align: center; }
  .studio-projects [role="tab"] strong { font-size: 13px; }
  .studio-projects [role="tab"] small { font-size: 8px; letter-spacing: 0.1em; }
  .studio-bar { padding: 4px 14px 12px; gap: 6px 12px; }
  .studio-views { width: 100%; justify-content: space-between; gap: 8px; }
  .studio-views [role="tab"] { font-size: 13px; }
  .studio-actions { width: 100%; justify-content: space-between; margin-left: 0; }
  .studio-actions .rocker-label { display: none; }
  .studio-button { min-height: 40px; padding: 0 14px; font-size: 13px; }
  .studio #example-site { height: 72svh; }
  .studio-shield-chip { opacity: 1; transform: none; }
  .studio[data-live="false"] .studio-shield { background: linear-gradient(180deg, transparent 55%, rgba(5, 8, 12, 0.45)); }
  .studio .example-layout { grid-template-columns: 1fr; grid-template-rows: 128px minmax(0, 1fr); height: 78svh; }
  .studio[data-view="prompt"] .example-layout { grid-template-rows: minmax(0, 1fr); }
  .studio .example-sidebar { padding: 10px 14px; border-right: 0; border-bottom: 1px solid var(--studio-line); }
  .studio .example-sidebar label { display: none; }
  .studio #example-search { min-height: 34px; margin-bottom: 6px; padding: 7px; }
  .studio #example-files { display: flex; align-items: flex-start; gap: 14px; }
  .studio #example-files details { flex: 0 0 170px; margin: 0; }
  .studio .example-reader,
  .studio[data-view="prompt"] .example-reader { padding: 20px 16px; }
  .studio .example-filebar { flex-wrap: wrap; gap: 10px; }
  .studio #example-doc-title { font-size: 20px; }
  .studio .example-document { font-size: 13px; }
  .studio .example-document h2 { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .rocker-knob,
  .studio-button,
  .studio-shield-chip,
  .studio-projects [role="tab"] { transition: none; }
}

/* Phones start the live site on a tap, so the page stays light; until then show a clear start panel. */
.studio[data-started="false"] .studio-site {
  background: radial-gradient(circle at 50% 40%, rgba(47, 116, 255, 0.22), transparent 60%), #0e1520;
}

.studio[data-started="false"] .studio-shield { align-items: center; padding: 0; }

.studio[data-started="false"] .studio-shield-chip {
  padding: 14px 22px;
  border-color: #5b92ff;
  background: var(--studio-accent);
  font-size: 15px;
  opacity: 1;
  transform: none;
}

/* ---------- Signposts: what Make with Mike makes, in order (2026-10-08) ---------- */

.studio-chain {
  display: flex;
  justify-content: center;
  gap: 0;
  max-width: 980px;
  margin: 0 auto 22px;
  padding: 0;
  list-style: none;
  counter-reset: chain;
}

.studio-chain li {
  position: relative;
  display: grid;
  gap: 2px;
  flex: 1 1 0;
  padding: 12px 34px 12px 18px;
  color: var(--ink, #f7f4ee);
  text-align: center;
}

.studio-chain li + li::before {
  content: "→";
  position: absolute;
  top: 50%;
  left: -10px;
  color: #6f86ad;
  font-size: 20px;
  transform: translateY(-50%);
}

.studio-chain b { font-size: 15px; font-weight: 600; }
.studio-chain small { color: var(--muted, #aab1bd); font-size: 12px; }
.studio-chain li:nth-child(2) b { color: #9cc0ff; }

.studio-label {
  margin: 0;
  padding: 12px 22px 0;
  color: #a3afc0;
  font-size: 13px;
}

.studio-label b { color: #f2f5fa; font-weight: 600; }

.studio-views [role="tab"] i {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  opacity: 0.85;
}

.studio-views [role="tab"][aria-selected="true"] i {
  border-color: var(--studio-accent);
  background: var(--studio-accent);
  color: #fff;
  opacity: 1;
}

.studio-site { background: #0f1622; }











.studio-frame { position: relative; background: #fff; }

@media (max-width: 760px) {
  .studio-chain { margin-bottom: 12px; }
  .studio-chain li { padding: 4px 8px 4px 14px; }
  .studio-chain li + li::before { left: -6px; font-size: 14px; }
  .studio-chain b { font-size: 12px; line-height: 1.3; }
  .studio-chain small { font-size: 10px; line-height: 1.3; }
  .studio-label { padding: 10px 14px 0; font-size: 12px; }
  .studio-views [role="tab"] i { width: 18px; height: 18px; font-size: 10px; }
  
  
  
  
}

/* ---------- Hero: a small thumbnail of the 1-minute film above its link (2026-10-09) ----------
   Kept small (at most 11% of the screen height) so the hero copy still fits the pinned first screen
   and the film can rise in from below as before. It only presses the original link. */

.mwmastra .hero-actions .hero-film-row {
  display: flex;
  flex-basis: 100%;
  justify-content: center;
}

.mwmastra .hero-actions .hero-film-thumb {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: clamp(56px, 11svh, 92px);
  aspect-ratio: 16 / 9;
  margin: 6px auto 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 10px;
  background: #000;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.mwmastra .hero-actions .hero-film-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.mwmastra .hero-film-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: rgba(8, 10, 14, 0.6);
  color: #fff;
  transform: translate(-50%, -50%);
  transition: background-color 0.2s ease;
}

.mwmastra .hero-film-play svg { margin-left: 2px; }

.mwmastra .hero-actions .hero-film-thumb:hover img,
.mwmastra .hero-actions .hero-film-thumb:focus-visible img { transform: scale(1.05); }

.mwmastra .hero-actions .hero-film-thumb:hover .hero-film-play,
.mwmastra .hero-actions .hero-film-thumb:focus-visible .hero-film-play { background: #2f74ff; }

.mwmastra .hero-actions .hero-film-thumb:focus-visible {
  outline: 2px solid #f0b92c;
  outline-offset: 3px;
}

.mwmastra .hero-actions .hero-film-row + .hero-watch-cue { margin-top: -6px; }

/* On short desktop screens the pinned first screen has no room for it: keep just the link, as before. */
@media (min-width: 821px) and (max-height: 740px) {
  .mwmastra .hero-actions .hero-film-row { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mwmastra .hero-actions .hero-film-thumb img,
  .mwmastra .hero-film-play { transition: none; }
}

/* ---------- Hero headline: "what you do" at 75% so "before you A.I." leads (2026-10-09) ---------- */

.mwmastra .hero-tagline > span {
  font-size: 0.585em; /* 75% of the previous 0.78em */
  line-height: 1;
}

.mwmastra .hero-tagline .hero-annotation {
  top: -1em;
  left: -0.5em;
  font-size: clamp(17px, 2.4vw, 29px);
}

.mwmastra .hero-tagline > strong {
  margin-top: 0;
}

/* ---------- Project picker in its own box, one toolbar row in the player (2026-10-09) ---------- */

.studio-picker {
  max-width: 1240px;
  margin: 0 auto 18px;
  padding: 14px 16px 16px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

.studio-picker .studio-label { padding: 0 4px 12px; }

.studio-picker .studio-projects {
  gap: 10px;
  border-bottom: 0;
}

.studio-picker .studio-projects [role="tab"] {
  min-height: 64px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 3px 10px rgba(0, 0, 0, 0.35);
  color: #c9d2df;
  font-family: var(--sans);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.studio-picker .studio-projects [role="tab"] + [role="tab"] { border-left: 1px solid rgba(255, 255, 255, 0.22); }

.studio-picker .studio-projects [role="tab"]:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transform: translateY(-1px);
}

.studio-picker .studio-projects [role="tab"]:active { transform: translateY(1px); }

.studio-picker .studio-projects [role="tab"][aria-selected="true"] {
  border-color: #2f74ff;
  background: rgba(47, 116, 255, 0.18);
  box-shadow: inset 0 0 0 1px #2f74ff, 0 3px 12px rgba(47, 116, 255, 0.25);
  color: #fff;
  transform: none;
}

.studio-picker .studio-projects [role="tab"]:focus-visible {
  outline: 2px solid #f0b92c;
  outline-offset: 2px;
}

.studio-picker .studio-projects [role="tab"][aria-selected="true"] small { color: #9cc0ff; }

/* The player's only toolbar: 1 2 3 on the left, the rocker and Full screen on the right. */
.studio > .studio-bar { border-top: 0; }

@media (max-width: 760px) {
  .studio-picker { padding: 12px; border-radius: 14px; margin-inline: -4px; }
  .studio-picker .studio-projects { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .studio-picker .studio-projects [role="tab"] { min-height: 54px; padding: 9px 10px; text-align: left; }
  .studio-picker .studio-projects [role="tab"] strong { font-size: 14px; }
  .studio-picker .studio-projects [role="tab"] small { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .studio-picker .studio-projects [role="tab"] { transition: none; }
}

/* ---------- "From ideas to direction" is chapter 01 (2026-10-09); the problem section is an unnumbered lead-in ---------- */
#thoughts .thoughts-chapter {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
}

#thoughts .thoughts-chapter > span {
  display: block;
  width: 38px;
  height: 1px;
  background: #2f74ff;
}

/* ---------- The problem section is hidden (2026-10-09); its idea is one line under the 01 heading ---------- */
#problem[hidden] { display: none !important; }

#thoughts .mind-gap-line {
  max-width: 34ch;
  margin: 16px 0 0;
  color: #aeb9c8;
  font: 400 clamp(16px, 1.4vw, 19px)/1.45 var(--sans);
}

/* ---------- "How it works" heading and steps hidden; "The quiet advantage" is chapter 03 (2026-10-09) ---------- */
#how .section-heading[hidden] { display: none !important; }

#how .quiet-chapter {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
}

#how .quiet-chapter > span {
  display: block;
  width: 38px;
  height: 1px;
  background: #2f74ff;
}

/* ---------- Thoughts section: no rotating hint or status lines on screen (Mike, 2026-10-09) ----------
   The code that writes them stays. The hint is hidden; the status line stays readable by screen readers only. */
#thoughts .mind-hint { display: none !important; }

#thoughts #mind-status {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

/* ---------- "Think it through. Spend less fixing it later." block hidden (Mike, 2026-10-09) ---------- */
#thoughts .kit-question[hidden] { display: none !important; }

/* ---------- Quiet advantage: no "Illustrative conversation" bar or pause button (Mike, 2026-10-09) ---------- */
.mwmastra .quiet-controls[hidden] { display: none !important; }

/* ---------- Quiet advantage: transcript toggle hidden, a plain divider kept (Mike, 2026-10-09) ---------- */
.mwmastra .quiet-transcript[hidden] {
  display: block !important;
  height: 0;
  padding: 0;
  overflow: hidden;
  border-top: 1px solid var(--line-soft);
}

.mwmastra .quiet-transcript[hidden] > * { display: none !important; }

/* ---------- Quiet advantage: the big last point, "visually, not a wall of text" (Mike, 2026-10-09) ---------- */
.quiet-advantage-footer li.quiet-visual {
  grid-column: 1 / -1;
  min-height: 54px;
  padding: 12px 18px;
  border-color: rgba(240, 185, 44, 0.55);
  background: linear-gradient(90deg, rgba(240, 185, 44, 0.16), rgba(240, 185, 44, 0.04));
  box-shadow: 0 0 24px rgba(240, 185, 44, 0.12);
  color: #ffe2a0;
  font-size: 15px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

@media (max-width: 420px) {
  .quiet-advantage-footer li.quiet-visual { white-space: normal; }
}

.quiet-advantage-footer li.quiet-visual::before {
  width: 9px;
  height: 9px;
  background: #f0b92c;
  box-shadow: 0 0 14px rgba(240, 185, 44, 0.7);
}

/* ---------- The 3 steps as real tabs (Mike, 2026-10-09): full-height cells with dividers, like the old tabs ---------- */
.studio > .studio-bar {
  align-items: stretch;
  padding: 0 20px 0 0;
}

.studio > .studio-bar .studio-views {
  gap: 0;
  align-self: stretch;
  border-right: 1px solid var(--studio-line);
}

.studio > .studio-bar .studio-views [role="tab"] {
  gap: 10px;
  min-height: 66px;
  padding: 0 26px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-right: 1px solid var(--studio-line);
  font-size: 15px;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.studio > .studio-bar .studio-views [role="tab"]:last-child { border-right: 0; }

.studio > .studio-bar .studio-views [role="tab"]:hover { background: rgba(255, 255, 255, 0.04); }

.studio > .studio-bar .studio-views [role="tab"][aria-selected="true"] {
  border-bottom-color: var(--studio-accent);
  background: linear-gradient(180deg, rgba(47, 116, 255, 0.04), rgba(47, 116, 255, 0.18));
  color: #fff;
}

.studio > .studio-bar .studio-views [role="tab"] i {
  width: 24px;
  height: 24px;
  font-size: 12px;
}

.studio > .studio-bar .studio-actions { align-self: center; }

@media (max-width: 760px) {
  .studio > .studio-bar { padding: 0 0 12px; }
  .studio > .studio-bar .studio-views { width: 100%; border-right: 0; border-bottom: 1px solid var(--studio-line); }
  .studio > .studio-bar .studio-views [role="tab"] { flex: 1 1 auto; justify-content: center; min-height: 54px; padding: 0 6px; font-size: 12.5px; gap: 5px; white-space: nowrap; }
  .studio > .studio-bar .studio-views .studio-count { display: none; }
  .studio > .studio-bar .studio-views [role="tab"] i { width: 20px; height: 20px; font-size: 11px; }
  .studio > .studio-bar .studio-actions { padding: 0 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .studio > .studio-bar .studio-views [role="tab"] { transition: none; }
}

/* ---------- Builder prompt view: its own subtle background, distinct from the build kit (Mike, 2026-10-09) ---------- */
.studio[data-view="prompt"] .example-layout {
  background:
    radial-gradient(circle at 50% 0%, rgba(47, 116, 255, 0.10), transparent 60%),
    linear-gradient(180deg, #111a30, #0d1424);
}

.studio[data-view="prompt"] .example-reader { background: transparent; }

.studio[data-view="prompt"] #example-doc-summary { border-bottom-color: rgba(120, 160, 255, 0.18); }

/* ---------- 01 heading reworded; the word "Click" in the line below starts the example (Mike, 2026-10-09) ----------
   Overrides the 34ch width above, which was sized for the old one-line version. */
#thoughts .mind-gap-line {
  max-width: 50ch;
  text-wrap: pretty;
}

#thoughts .mind-click-line { white-space: nowrap; }

#thoughts .mind-click {
  appearance: none;
  margin: 0;
  padding: 0 1px;
  border: 0;
  background: none;
  color: #f1d28a;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: #f1d28a88;
  cursor: pointer;
  animation: mind-click-glow 2.6s ease-in-out infinite;
}

#thoughts .mind-click:hover { color: #ffe5a8; text-decoration-color: #ffe5a8; }
#thoughts .mind-click:focus-visible { outline: 2px solid #ffe5a8; outline-offset: 3px; border-radius: 3px; }

/* While the show is playing the word rests; once it is done, clicking replays it. */
#thoughts:has(.mind-map[data-phase=arranging]) .mind-click { opacity: .55; cursor: default; animation: none; }
#thoughts:has(.mind-map[data-idle=paused]) .mind-click { animation-play-state: paused; }

@keyframes mind-click-glow {
  0%, 100% { text-shadow: 0 0 0 #e7bb5200; }
  50% { text-shadow: 0 0 14px #e7bb5277; }
}

@media (prefers-reduced-motion: reduce) {
  #thoughts .mind-click { animation: none; }
}

/* ---------- The "visually" point now sits in the right frame, under "One clear next step" (Mike, 2026-10-09) ----------
   Smaller than the footer version above (kept for reference; that list item is now an HTML comment). */
.quiet-scene-heading .quiet-visual-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  padding: 6px 13px 6px 11px;
  border: 1px solid rgba(240, 185, 44, 0.55);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(240, 185, 44, 0.16), rgba(240, 185, 44, 0.04));
  box-shadow: 0 0 20px rgba(240, 185, 44, 0.12);
  color: #ffe2a0;
  font-size: 11.5px;
  font-weight: 760;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
}

.quiet-scene-heading .quiet-visual-badge::before {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #f0b92c;
  box-shadow: 0 0 12px rgba(240, 185, 44, 0.7);
  content: "";
}

@media (max-width: 420px) {
  .quiet-scene-heading .quiet-visual-badge { white-space: normal; font-size: 10.5px; }
}

/* ---------- "Your decisions, ready to build from" hidden (Mike, 2026-10-09); markup kept with `hidden` ---------- */


/* ---------- The most important point on each side of the comparison, set apart (Mike, 2026-10-09) ---------- */
.compare-card {
  display: flex;
  flex-direction: column;
}

.compare-card .compare-key {
  margin: auto 0 0;
  padding: 16px 18px;
  border: 1px solid;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

/* Space above the box, so it reads as its own point and not the last bullet; both boxes sit at the bottom. */
.compare-card ul { margin-bottom: 26px; }

.compare-card .compare-key b {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 760;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.compare-card-chat .compare-key {
  border-color: rgba(240, 130, 96, 0.4);
  background: rgba(240, 130, 96, 0.08);
  color: #f1d9cf;
}

.compare-card-chat .compare-key b { color: #f0906e; }

.compare-card-mike .compare-key {
  border-color: rgba(240, 185, 44, 0.55);
  background: linear-gradient(90deg, rgba(240, 185, 44, 0.16), rgba(240, 185, 44, 0.05));
  box-shadow: 0 0 22px rgba(240, 185, 44, 0.12);
  color: #fff3d6;
}

.compare-card-mike .compare-key b { color: #f0b92c; }

/* ---------- 01: the organized map flows down into the full build kit (Mike, 2026-10-09) ----------
   Under the hub on wider screens; just below the map on phones (thoughts.js moves it). Hidden until organized. */
#thoughts .mind-output {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}

#thoughts .mind-map > .mind-output {
  position: absolute;
  z-index: 12;
  left: 50%;
  top: var(--output-top, 62%);
  width: min(330px, 38cqw);
  transform: translateX(-50%);
}

#thoughts .mind-map + .mind-output { margin: 22px auto 0; width: min(330px, 100%); }

#thoughts .mind-output[data-state=shown] { visibility: visible; opacity: 1; }

/* The flow: the six topic colours stream down from the hub into the kit. */
#thoughts .output-flow {
  --flow-h: clamp(44px, 6cqw, 70px);
  position: relative;
  width: 24px;
  height: var(--flow-h);
}

#thoughts .mind-map + .mind-output .output-flow { --flow-h: 52px; }

#thoughts .flow-line {
  position: absolute;
  left: 11px;
  top: 0;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(165, 198, 203, 0), rgba(165, 198, 203, 0.55) 30%, rgba(240, 185, 44, 0.85));
  transform-origin: top;
}

#thoughts .output-flow i {
  position: absolute;
  left: 9px;
  top: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 8px var(--c);
  opacity: 0;
}

#thoughts .flow-head {
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 24px;
  height: 14px;
  fill: none;
  stroke: #f0b92c;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(240, 185, 44, 0.6));
}

/* The kit: paper sheets behind a dark card, like the paper on the desk becoming one tidy package. */
#thoughts .output-pack {
  position: relative;
  width: clamp(150px, 15cqw, 186px);
  aspect-ratio: 1.42;
  margin-top: 12px;
}

#thoughts .mind-map + .mind-output .output-pack { width: 168px; }

#thoughts .pack-sheet {
  position: absolute;
  inset: 4% 6%;
  border-radius: 8px;
  background: repeating-linear-gradient(180deg, transparent 0 13px, rgba(80, 90, 100, 0.18) 13px 14px), linear-gradient(160deg, #efe9dc, #d9d1c0);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

#thoughts .pack-front {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 11px 13px;
  border: 1px solid rgba(240, 185, 44, 0.6);
  border-radius: 11px;
  background: linear-gradient(160deg, #1b2a3c, #0f1824);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5), 0 0 26px rgba(240, 185, 44, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  text-align: left;
}

#thoughts .pack-top {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 3px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#thoughts .pack-top img { width: 18px; height: 18px; border-radius: 5px; }
#thoughts .pack-top b { color: #f0b92c; font-size: 11px; font-weight: 760; letter-spacing: 0.14em; text-transform: uppercase; }
#thoughts .pack-top em { margin-left: auto; color: #8e9aab; font-size: 10px; font-style: normal; }

#thoughts .pack-row {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #d7dde6;
  font-size: 11px;
  line-height: 1.25;
  white-space: nowrap;
}

#thoughts .pack-row::before {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 2px;
  background: var(--c);
  content: "";
}

#thoughts .output-title {
  margin: 14px 0 0;
  color: #f7f4ee;
  font-size: clamp(15px, 1.35cqw, 18px);
  font-weight: 600;
  letter-spacing: -0.01em;
}

#thoughts .output-note {
  max-width: 30ch;
  margin: 4px 0 0;
  color: #9aa6b6;
  font-size: 12.5px;
  line-height: 1.45;
}

#thoughts .mind-map + .mind-output .output-title { font-size: 17px; }

/* Reveal, once the map is organized: the stream draws down, the kit drops in, the sheets fan, the words follow. */
#thoughts .mind-output[data-state=shown] .flow-line { animation: output-line 0.5s cubic-bezier(0.3, 0, 0.2, 1) both; }
#thoughts .mind-output[data-state=shown] .output-flow i { animation: output-stream 2.1s linear calc(0.35s + var(--d) * 0.35s) infinite; }
#thoughts .mind-output[data-state=shown] .flow-head { animation: output-head 0.4s ease-out 0.35s both, output-bob 2.1s ease-in-out 1s infinite; }
#thoughts .mind-output[data-state=shown] .output-pack { animation: output-drop 0.75s cubic-bezier(0.2, 0.9, 0.3, 1.25) 0.45s both; }
#thoughts .mind-output[data-state=shown] .pack-sheet-back { animation: output-fan-back 0.6s ease-out 0.95s both; }
#thoughts .mind-output[data-state=shown] .pack-sheet-mid { animation: output-fan-mid 0.6s ease-out 0.95s both; }
#thoughts .mind-output[data-state=shown] .pack-front { animation: output-glow 3s ease-in-out 1.6s infinite; }
#thoughts .mind-output[data-state=shown] .output-title { animation: output-rise 0.5s ease-out 1.05s both; }
#thoughts .mind-output[data-state=shown] .output-note { animation: output-rise 0.5s ease-out 1.25s both; }
#thoughts .mind-output[data-idle=paused] * { animation-play-state: paused !important; }

@keyframes output-line { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes output-stream {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  15% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(calc(var(--flow-h, 56px) - 10px)) scale(1); opacity: 0; }
}
@keyframes output-head { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes output-bob { 0%, 100% { transform: none; } 50% { transform: translateY(3px); } }
@keyframes output-drop {
  0% { opacity: 0; transform: translateY(-22px) scale(0.55); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes output-fan-back { from { transform: none; } to { transform: translate(-14%, -6%) rotate(-9deg); } }
@keyframes output-fan-mid { from { transform: none; } to { transform: translate(12%, -9%) rotate(7deg); } }
@keyframes output-glow {
  0%, 100% { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5), 0 0 26px rgba(240, 185, 44, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
  50% { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5), 0 0 40px rgba(240, 185, 44, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
}
@keyframes output-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Less motion (device setting or the site's own switch): the finished state, still. */
@media (prefers-reduced-motion: reduce) {
  #thoughts .mind-output * { animation: none !important; }
  #thoughts .mind-output .output-flow i { display: none; }
  #thoughts .mind-output .pack-sheet-back { transform: translate(-14%, -6%) rotate(-9deg); }
  #thoughts .mind-output .pack-sheet-mid { transform: translate(12%, -9%) rotate(7deg); }
}
html[data-motion=off] #thoughts .mind-output * { animation: none !important; }
html[data-motion=off] #thoughts .mind-output .output-flow i { display: none; }
html[data-motion=off] #thoughts .mind-output .pack-sheet-back { transform: translate(-14%, -6%) rotate(-9deg); }
html[data-motion=off] #thoughts .mind-output .pack-sheet-mid { transform: translate(12%, -9%) rotate(7deg); }

/* ---------- Big fix (Mike, 2026-10-09): F2/F3, the 06 intro and the second price mention are hidden ---------- */
#build [data-mode-copy="build-copy"][hidden],
#build .build-plan-note[hidden] { display: none !important; }

/* ---------- Big fix F6 (Mike, 2026-10-09): the founding prices at body size; credits below the Managed description ---------- */
.pricing-title-support .pricing-launch-note {
  max-width: 52ch;
  margin-top: 18px;
  border-top: 1px solid rgba(240, 185, 44, 0.32);
  padding-top: 16px;
  color: var(--ink, #f7f4ee);
  font-size: 17px;
  line-height: 1.6;
}

.pricing-choice-managed .pricing-welcome-credit-after {
  margin: 18px 0 0;
}

.pricing-choice-managed .pricing-welcome-credit-after strong { font-size: 14px; }
.pricing-choice-managed .pricing-welcome-credit-after span,
.pricing-choice-managed .pricing-welcome-credit-after small { font-size: 12px; }

/* ---------- Big fix F8 (Mike, 2026-10-09): accessibility floor ----------
   No visible text under 12 px. !important because these labels are styled in several older stylesheets. */
.detail-compact-label small,
#studio-projects button small,
.studio-count,
.quiet-scene-heading span,
.quiet-scene-heading .quiet-visual-badge,
.preview-label b,
.build-speech-bubble small,
.pricing-choice-topline span,
.pricing-choice-topline small,
.pricing-hold-amount span,
.pricing-package-saving span,
.pricing-package-saving small,
.pricing-package-price span,
.pricing-founder-offer strong,
.pricing-clarity span,
.pricing-visibility-grid article > span,
.pricing-voice-summary span { font-size: 12px !important; }

@media (max-width: 600px) {
  .studio-chain small,
  .site-header .header-cta { font-size: 12px !important; }
}

/* The clickable word in the 01 line: a 24 px tall target without changing the sentence. */
#thoughts .mind-click { min-height: 24px; line-height: 24px; vertical-align: baseline; }

/* The privacy link under the email form: a 24 px tall target. */
.privacy-details-link { display: inline-block; padding-block: 3px; line-height: 18px; }

/* ---------- Thumbnail and player never on screen together (Mike, 2026-10-09; assets/film-reveal.js) ---------- */
/* One at a time: whatever is leaving fades out first (0.22 s), then the other fades in. */
.mwmastra .hero-actions .hero-film-row { transition: opacity .3s ease .24s, visibility 0s linear .24s; }
.mwmastra .hero-actions .hero-film-row.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s ease, visibility 0s linear .22s; }
@media (max-width: 820px) {
  /* !important: the hero stylesheets set a more specific transition on the player; the filter fade is kept. */
  [data-player] { transition: opacity .4s ease .24s, visibility 0s linear .24s, filter .18s linear !important; }
  [data-player].film-waiting { opacity: 0 !important; visibility: hidden; pointer-events: none; transition: opacity .22s ease, visibility 0s linear .22s, filter .18s linear !important; }
}
@media (prefers-reduced-motion: reduce) {
  .mwmastra .hero-actions .hero-film-row, .mwmastra .hero-actions .hero-film-row.is-hidden, [data-player] { transition: none; }
}

/* ---------- 01: the row under the scene keeps its height (Mike, 2026-10-09) ----------
   The "Making sense of it… / Idea organized ✓" button used to be display:none before the show and appear when it
   started, so everything below jumped 30 to 44 px at the start and again when the scene reset. Its space is now
   always kept; before the show it is simply invisible. */
#thoughts .workspace-version[data-phase=chaos] ~ .mind-actions #organize-idea { display: block; visibility: hidden; }
@media (min-width: 601px) { #thoughts .mind-actions { min-height: 50px; } }

/* ---------- Second film effects (Mike, 2026-10-09; assets/kitchen-fx.js) ---------- */
.kfx-layer { position: absolute; pointer-events: none; perspective: 900px; perspective-origin: 50% 40%; transform-style: preserve-3d; visibility: hidden; }
.kfx-layer.is-live { visibility: visible; }
.kfx-in { inset: 0; z-index: 2; overflow: hidden; }
.kfx-back { z-index: 0; }
.kfx-front { z-index: 3; }
.kfx-word {
  position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; will-change: transform, opacity;
  font: 900 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .01em; color: #fff;
  text-shadow: .03em .03em 0 #d9dde3, .06em .06em 0 #c4c9d1, .09em .09em 0 #aeb4be, .12em .12em 0 #989fab, .15em .15em 0 #848b98, .2em .32em .5em rgba(0, 0, 0, .42);
}
.kfx-ripple { position: absolute; border: 2px solid rgba(255, 255, 255, .85); border-radius: 50%; transform: translate(-50%, -50%) scaleY(.85); opacity: 0; box-shadow: 0 0 10px rgba(255, 255, 255, .35); }
.kfx-glow { position: absolute; inset: -16% -12%; border-radius: 48px; opacity: 0; background: radial-gradient(closest-side, rgba(255, 214, 160, .55), rgba(255, 214, 160, .26) 62%, transparent 100%); filter: blur(22px); }
.kfx-cta {
  position: absolute; right: 3%; bottom: 13%; pointer-events: none; opacity: 0; transform: translateY(8px);
  padding: 10px 16px; border-radius: 999px; background: rgba(9, 12, 18, .78); border: 1px solid rgba(240, 185, 44, .7);
  color: #fff3d6; font: 600 15px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35), 0 0 18px rgba(240, 185, 44, .18); transition: opacity .5s ease, transform .5s ease;
}
.kfx-cta.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.kfx-cta:hover { background: rgba(9, 12, 18, .9); }
.kfx-cta:focus-visible { outline: 2px solid #ffe5a8; outline-offset: 3px; }
@media (max-width: 600px) { .kfx-cta { font-size: 13px; padding: 8px 12px; bottom: 16%; } }
@media (prefers-reduced-motion: reduce) { .kfx-cta { transition: none; } }

/* ---------- F17 (2026-10-09): the film end card, below the player once a film ends ----------
   Replaces the old "Watch another · See what Mike made" line (kept as a comment in index.html). The film choices
   are still inside the frame. Absolute, like the old line, so nothing in the pinned hero moves. */
.mwmastra .film-followup.film-endcard {
  flex-wrap: wrap;
  gap: 10px 22px;
  color: var(--ink);
  animation: endcard-in 0.6s ease both;
}
.endcard-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.endcard-line img { flex: none; width: 30px; height: 30px; }
.endcard-line strong { color: #ffd77a; font-weight: 600; }
.mwmastra .film-followup a.endcard-button {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(240, 185, 44, 0.7);
  border-radius: 999px;
  background: rgba(9, 12, 18, 0.78);
  color: #fff3d6;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 18px rgba(240, 185, 44, 0.18);
}
.mwmastra .film-followup a.endcard-button:hover { background: rgba(9, 12, 18, 0.92); color: #fff; }
@keyframes endcard-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
  .mwmastra .film-followup.film-endcard { gap: 8px; padding-inline: 4px; }
  .endcard-line { justify-content: center; font-size: 15px; text-align: left; }
  .endcard-line img { width: 26px; height: 26px; }
  .mwmastra .film-followup a.endcard-button { min-height: 38px; font-size: 14px; }
}
/* Phones and tablets: the end card sits where "Get clear. Then get building." is, so that line steps aside while the
   film choices show and comes back when a film plays again. */
@media (max-width: 820px) {
  .mwmastra .hero-sequence-pin:has(.film-stage.showing-choices) .hero-copy-outro { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) { .mwmastra .film-followup.film-endcard { animation: none; } }
html[data-motion="off"] .mwmastra .film-followup.film-endcard { animation: none; }

/* ---------- F14 (2026-10-09): "What would Mike ask you first?" at the end of 02 ---------- */
.ask-teaser {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 28px 44px;
  max-width: 1240px;
  margin: clamp(28px, 3.5vw, 44px) auto 0;
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  background: radial-gradient(circle at 0% 0%, rgba(240, 185, 44, 0.07), transparent 45%), #0c121b;
  color: #f2f5fa;
  font: 400 15px/1.55 var(--sans);
}
.ask-teaser-kicker {
  margin: 0 0 8px;
  color: #f0b92c;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ask-teaser h3 {
  margin: 0 0 8px;
  font-family: var(--serif, var(--display));
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.ask-teaser-lede { margin: 0 0 18px; color: #a3afc0; }
.ask-teaser-types { display: flex; flex-wrap: wrap; gap: 8px; }
.ask-teaser-types button {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: #dbe3ee;
  font: 600 14px/1 var(--sans);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.ask-teaser-types button:hover { border-color: rgba(255, 255, 255, 0.34); color: #fff; }
.ask-teaser-types button[aria-pressed="true"] { border-color: rgba(240, 185, 44, 0.8); background: rgba(240, 185, 44, 0.12); color: #fff3d6; }
.ask-teaser :focus-visible { outline: 2px solid #f0b92c; outline-offset: 2px; }
.ask-teaser-chat {
  display: flex;
  flex-direction: column;
  min-height: 284px;               /* room for the longest set of questions, so the page doesn't jump */
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: #0f1622;
}
.ask-teaser-empty { margin: auto; color: #6f7d91; font-size: 14px; text-align: center; }
.ask-teaser-empty[hidden] { display: none; }
.ask-teaser-questions { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ask-teaser-questions:empty { display: none; }
.ask-q { display: flex; align-items: flex-start; gap: 10px; animation: ask-in 0.35s ease both; }
.ask-face { flex: none; width: 30px; height: 30px; margin-top: 2px; }
.ask-bubble {
  max-width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px 14px 14px 14px;
  background: #162132;
  color: #f2f5fa;
  font-size: 15px;
  line-height: 1.45;
}
.ask-dots { display: inline-flex; gap: 4px; padding: 4px 0; }
.ask-dots i { width: 6px; height: 6px; border-radius: 50%; background: #8d9bb0; animation: ask-dot 1s ease-in-out infinite; }
.ask-dots i:nth-child(2) { animation-delay: 0.15s; }
.ask-dots i:nth-child(3) { animation-delay: 0.3s; }
.ask-after { margin: 4px 0 0 40px; color: #a3afc0; font-size: 14px; animation: ask-in 0.35s ease both; }
.ask-teaser-note { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.07); color: #7d8aa0; font-size: 12px; }
.ask-teaser-questions:not(:empty) + .ask-teaser-note,
.ask-teaser-empty[hidden] ~ .ask-teaser-note { margin-top: auto; }
@keyframes ask-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ask-dot { 0%, 100% { opacity: 0.35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
@media (max-width: 820px) {
  .ask-teaser { grid-template-columns: 1fr; gap: 20px; }
  .ask-teaser-chat { min-height: 410px; padding: 14px; }
  .ask-teaser-types button { min-height: 40px; padding: 0 14px; font-size: 13px; }
}
@media (min-width: 821px) and (max-width: 1180px) { .ask-teaser-chat { min-height: 350px; } }
@media (max-width: 380px) { .ask-teaser-chat { min-height: 450px; } }
@media (prefers-reduced-motion: reduce) { .ask-q, .ask-after, .ask-dots i { animation: none; } }
html[data-motion="off"] :is(.ask-q, .ask-after, .ask-dots i) { animation: none; }

/* ---------- F13 (2026-10-11, Mike: "go with A"): 03 Inside the app ----------
   One section in place of the old 03 (The quiet advantage) and 05 (Product preview). The real app leads; the
   jargon becomes one strip of what stays off your plate. The header reuses the old 05 header styles. */
.inside-app-section {
  --tour-line: rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.6vw, 30px);
  padding-block: clamp(72px, 9vw, 128px) clamp(64px, 8vw, 108px);
}
.mwmastra .inside-app-section .preview-header { margin-bottom: clamp(6px, 1.4vw, 18px); }
.inside-app-section h2 span { color: var(--muted); }
.app-tour {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(47, 116, 255, 0.06), transparent 42%), #0c121b;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.5);
}
.app-tour-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--tour-line);
}
.app-tour-label, .app-tour-visual {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.app-tour-label span, .app-tour-visual span { width: 7px; height: 7px; border-radius: 50%; background: #f0b92c; }
.app-tour-label b { padding: 4px 10px; border: 1px solid rgba(240, 185, 44, 0.6); border-radius: 999px; color: #f0b92c; font-weight: 700; letter-spacing: 0.1em; }
.app-tour-visual { padding: 7px 13px; border: 1px solid rgba(240, 185, 44, 0.75); border-radius: 999px; background: rgba(240, 185, 44, 0.1); color: #ffe3a3; }
.app-tour-body { display: flex; flex-wrap: wrap; gap: 22px; padding: 22px; }
.app-tour-steps { display: flex; flex: 1 1 280px; flex-direction: column; gap: 8px; max-width: 360px; min-width: 0; }
.app-tour-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.app-tour-step:hover { border-color: rgba(255, 255, 255, 0.22); }
.app-tour-step[aria-pressed="true"] { border-color: rgba(240, 185, 44, 0.75); background: rgba(240, 185, 44, 0.1); }
.app-tour-step i {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #dbe3ee;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}
.app-tour-step[aria-pressed="true"] i { background: #f0b92c; color: #0b0d12; }
.app-tour-step span { display: flex; flex-direction: column; gap: 2px; }
.app-tour-step strong { font-size: 15px; font-weight: 600; line-height: 1.3; }
.app-tour-step small { color: var(--muted); font-size: 13px; line-height: 1.4; }
.app-tour :focus-visible { outline: 2px solid #f0b92c; outline-offset: 2px; }
.app-tour-screen { display: flex; flex: 999 1 520px; flex-direction: column; gap: 10px; min-width: 0; margin: 0; }
.app-tour-window { overflow: hidden; border: 1px solid var(--tour-line); border-radius: 14px; background: #05070a; }
.app-tour-dots { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.app-tour-dots i { width: 9px; height: 9px; border-radius: 50%; background: #3a4352; }
.app-tour-full { display: block; width: 100%; padding: 0; border: 0; background: #05070a; cursor: zoom-in; }
.app-tour-full img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 1440 / 956; object-fit: contain; }
.app-tour-screen figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; color: var(--muted); font-size: 13px; }
.app-tour-screen figcaption b { color: var(--ink); font-size: 14px; font-weight: 600; }
.app-tour-screen figcaption a { margin-left: auto; color: #f0b92c; }
.app-tour-plate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  padding: 20px 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: #0a0f17;
}
.app-tour-plate p { margin: 0; }
.app-tour-plate-label { flex: none; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.app-tour-jargon { display: flex; flex: 1 1 480px; flex-wrap: wrap; gap: 6px 16px; min-width: 0; color: #6b778b; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.app-tour-plate-end { flex: none; color: var(--ink); font-size: 15px; font-weight: 600; }
.app-tour-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.app-tour-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.app-tour-chips li { padding: 10px 14px; border: 1px solid var(--tour-line); border-radius: 999px; color: #dbe3ee; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
/* Phones and tablets: the steps become one row you can swipe, right above the screen they change. */
@media (max-width: 820px) {
  /* nowrap: a wrapping column would size itself to the long row of steps and push the screen off the edge */
  .app-tour-body { flex-direction: column; flex-wrap: nowrap; gap: 14px; padding: 14px; }
  .app-tour-steps { flex: none; flex-direction: row; max-width: none; margin-inline: -14px; padding: 2px 14px 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .app-tour-steps::-webkit-scrollbar { display: none; }
  .app-tour-step { flex: none; width: auto; min-height: 48px; padding: 10px 14px 10px 10px; align-items: center; scroll-snap-align: start; }
  .app-tour-step small { display: none; }
  .app-tour-step strong { white-space: nowrap; font-size: 14px; }
  .app-tour-screen { flex: none; width: 100%; }
  .app-tour-bar { padding: 12px 14px; }
  .app-tour-visual { font-size: 11px; }
  .app-tour-plate { padding: 16px; }
  .app-tour-screen figcaption a { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .app-tour-step { transition: none; } }
/* F13b (2026-10-11, Mike): the app tour now sits inside the old 03, under the guy, the jargon and the conversation. */
.difference-section .app-tour { margin-top: clamp(28px, 4vw, 48px); }
/* F13c (2026-10-11, Mike): step 6, the build kits. Set apart by a line, bigger, gold; its screen shows the kits. */
.app-tour-divider { display: flex; align-items: center; gap: 10px; margin: 8px 2px 2px; color: #f0b92c; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.app-tour-divider::before, .app-tour-divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(240, 185, 44, 0.7), transparent); }
.app-tour-step.app-tour-step-kit { min-height: 88px; padding: 16px; border-color: rgba(240, 185, 44, 0.45); background: linear-gradient(135deg, rgba(240, 185, 44, 0.14), rgba(240, 185, 44, 0.03)); }
.app-tour-step.app-tour-step-kit i { width: 34px; height: 34px; font-size: 14px; background: #f0b92c; color: #0b0d12; }
.app-tour-step.app-tour-step-kit strong { font-size: 18px; }
.app-tour-step.app-tour-step-kit[aria-pressed="true"] { border-color: #f0b92c; box-shadow: 0 0 0 1px #f0b92c, 0 12px 32px rgba(240, 185, 44, 0.16); }
.app-tour-kits { display: flex; flex-direction: column; gap: 16px; aspect-ratio: 1440 / 956; padding: clamp(16px, 3vw, 34px); background: radial-gradient(circle at 50% 0%, rgba(240, 185, 44, 0.12), transparent 60%), #070a0f; }
.app-tour-kits[hidden], .app-tour-full[hidden], .app-tour-screen figcaption a[hidden] { display: none; }
.kits-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0; }
.kits-head b { font-size: clamp(18px, 2vw, 24px); font-weight: 600; letter-spacing: -0.01em; }
.kits-head span { color: var(--muted); font-size: 13px; }
.kits-grid { display: grid; flex: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 16px); margin: 0; padding: 0; list-style: none; }
.kits-grid li { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; background: linear-gradient(180deg, #121a27, #0d131d); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35); animation: kit-out 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i) * 90ms); }
.kit-top { display: flex; align-items: center; gap: 7px; }
.kit-top b { font-size: 15px; font-weight: 700; }
.kit-top em { margin-left: auto; color: #f0b92c; font-size: 12px; font-style: normal; font-weight: 700; }
.kit-for { color: var(--muted); font-size: 12px; line-height: 1.35; }
.kit-row { display: flex; align-items: center; gap: 7px; color: #c9d2de; font-size: 12px; }
.kit-row::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #f0b92c; opacity: 0.8; }
@keyframes kit-out { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } }
@media (max-width: 820px) {
  .app-tour-divider { flex-direction: column; justify-content: center; margin: 0 2px; }
  .app-tour-divider span { display: none; }
  .app-tour-divider::before, .app-tour-divider::after { width: 1px; height: 18px; flex: none; background: rgba(240, 185, 44, 0.7); }
  .app-tour-step.app-tour-step-kit { min-height: 48px; padding: 10px 14px 10px 10px; }
  .app-tour-step.app-tour-step-kit strong { font-size: 15px; }
  .app-tour-kits { aspect-ratio: auto; }
  .kits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kits-grid li { padding: 10px; }
  .kit-row { display: none; }
}
@media (prefers-reduced-motion: reduce) { .kits-grid li { animation: none; } }
html[data-motion="off"] .kits-grid li { animation: none; }

/* ---------- Kit test, public version (2026-10-11): a big button in 04 that opens the test ---------- */
.kt-launch { display: flex; justify-content: center; margin-top: clamp(28px, 4vw, 44px); }
.kt-button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 720px;
  width: 100%;
  padding: 20px 26px;
  border: 2px solid transparent;
  border-radius: 20px;
  background: linear-gradient(#0e141d, #0e141d) padding-box, linear-gradient(90deg, #2F74FF, #14A3C4 40%, #F0B92C 75%, #C02A84) border-box;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 0 0 6px rgba(47, 116, 255, 0.08), 0 18px 60px rgba(47, 116, 255, 0.22), 0 0 50px rgba(240, 185, 44, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: kt-glow 3.2s ease-in-out infinite;
}
.kt-button:hover { transform: translateY(-2px); box-shadow: 0 0 0 6px rgba(47, 116, 255, 0.14), 0 24px 70px rgba(47, 116, 255, 0.3), 0 0 60px rgba(240, 185, 44, 0.18); }
.kt-button:focus-visible { outline: 3px solid #f0b92c; outline-offset: 4px; }
.kt-button-icon { display: grid; flex: none; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, #2F74FF, #14A3C4); color: #fff; }
.kt-button-text { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.kt-button-text small { color: #f0b92c; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.kt-button-text strong { font-size: clamp(18px, 2.1vw, 23px); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.kt-button-arrow { flex: none; font-size: 24px; color: #f0b92c; transition: transform 0.25s ease; }
.kt-button.is-open .kt-button-arrow { transform: rotate(180deg); }
.kt-button.is-open { animation: none; }
@keyframes kt-glow { 0%, 100% { box-shadow: 0 0 0 6px rgba(47, 116, 255, 0.08), 0 18px 60px rgba(47, 116, 255, 0.22), 0 0 50px rgba(240, 185, 44, 0.12); } 50% { box-shadow: 0 0 0 8px rgba(47, 116, 255, 0.14), 0 18px 70px rgba(47, 116, 255, 0.32), 0 0 70px rgba(240, 185, 44, 0.2); } }

.kit-test { display: flex; flex-direction: column; gap: clamp(26px, 3.4vw, 40px); margin-top: 26px; padding: clamp(20px, 3.4vw, 44px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 24px; background: radial-gradient(circle at 15% 0%, rgba(47, 116, 255, 0.1), transparent 45%), #0b1017; scroll-margin-top: 90px; }
.kit-test[hidden] { display: none; }
.kt-head { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.kt-kicker { margin: 0; color: #f0b92c; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.kt-head h3 { margin: 0; font-family: var(--serif, var(--display)); font-size: clamp(30px, 4vw, 48px); font-weight: 400; letter-spacing: -0.04em; line-height: 1.05; }
.kt-head h3 span { display: block; color: var(--muted); }
.kt-head p:last-child { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.6; }
.kt-chart { display: flex; flex-direction: column; gap: 18px; padding: clamp(18px, 2.6vw, 28px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 18px; background: #0e141d; }
.kt-chart-title { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: 0.02em; }
.kt-grid { display: grid; grid-template-columns: minmax(150px, 0.8fr) minmax(0, 3fr); gap: 14px 18px; align-items: center; }
.kt-label { font-size: 15px; font-weight: 600; line-height: 1.3; }
.kt-label-kit { color: #fff; font-size: 16px; font-weight: 700; }
.kt-track { position: relative; height: 46px; overflow: hidden; }
.kt-track .gl { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.08); }
.kt-bar { position: absolute; top: 6px; bottom: 6px; left: 0; width: var(--w); overflow: hidden; border-radius: 0 6px 6px 0; background: #5d6a80; }
.kt-bar-kit { background: linear-gradient(90deg, #2F74FF 0%, #14A3C4 40%, #F0B92C 75%, #C02A84 100%); box-shadow: 0 6px 22px rgba(47, 116, 255, 0.3); }
.kt-bar span { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); color: #fff; font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kt-axis { grid-column: 2; position: relative; height: 16px; margin-top: -6px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.kt-axis span { position: absolute; top: 0; transform: translateX(-50%); }
.kt-axis span:last-child { transform: translateX(-100%); }
.kt-zoom-note { grid-column: 2; margin: -8px 0 0; color: var(--muted); font-size: 12px; }
.kt-subhead { margin: 0; font-size: clamp(20px, 2.4vw, 26px); font-weight: 600; letter-spacing: -0.02em; }
.kt-compare { display: flex; flex-direction: column; gap: 18px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.kt-compare-head { display: flex; flex-direction: column; gap: 4px; }
.kt-compare-head h4 { margin: 0; font-size: 22px; font-weight: 700; }
.kt-compare-head p { margin: 0; color: var(--muted); font-size: 14px; }
.kt-compare-head blockquote { margin: 8px 0 0; padding: 0; color: #dbe3ee; font-size: 16px; font-style: italic; }
.kt-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.kt-side { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; background: #0e141d; }
.kt-side-kit { border-color: transparent; background: linear-gradient(#0e141d, #0e141d) padding-box, linear-gradient(90deg, #2F74FF, #14A3C4 40%, #F0B92C 75%, #C02A84) border-box; border-width: 2px; }
.kt-side-label { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.kt-side-kit .kt-side-label { color: #f0b92c; }
.kt-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kt-pair figure { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.kt-pair img { display: block; width: 100%; height: auto; aspect-ratio: 760 / 475; object-fit: cover; object-position: top; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; }
.kt-pair figcaption { color: var(--muted); font-size: 13px; }
.kt-verdict { margin: 0; font-size: 15px; line-height: 1.45; }
.kt-table-box { overflow-x: auto; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; }
.kt-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14px; }
.kt-table th, .kt-table td { padding: 11px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); text-align: left; vertical-align: top; }
.kt-table thead th { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.kt-table thead th:last-child { color: #f0b92c; }
.kt-table tbody th { font-weight: 600; }
.kt-table tr:last-child th, .kt-table tr:last-child td { border-bottom: 0; }
.kt-table td small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.kt-mark { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.kt-yes { background: rgba(101, 168, 117, 0.18); color: #8fd3a0; }
.kt-part { background: rgba(240, 185, 44, 0.16); color: #f3c95c; }
.kt-no { background: rgba(224, 108, 108, 0.16); color: #f19a9a; }
.kt-close { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.kt-close p { margin: 0; max-width: 68ch; color: var(--muted); font-size: 16px; line-height: 1.6; }
.kt-close .kt-big { color: var(--ink); font-family: var(--serif, var(--display)); font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.03em; line-height: 1.15; }
.kt-close .kt-fine { font-size: 13px; }
.kt-close-button { align-self: flex-start; min-height: 44px; margin-top: 6px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
.kt-close-button:focus-visible { outline: 2px solid #f0b92c; outline-offset: 3px; }
@media (max-width: 760px) {
  .kt-button { gap: 12px; padding: 16px; }
  .kt-button-icon { width: 44px; height: 44px; }
  .kt-sides { grid-template-columns: 1fr; }
  .kt-grid { grid-template-columns: 1fr; gap: 6px; }
  .kt-track { margin-bottom: 10px; }
  .kt-axis, .kt-zoom-note { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) { .kt-button { animation: none; transition: none; } }
html[data-motion="off"] .kt-button { animation: none; }
/* F13d (2026-10-11, Mike): gold means "showing" only. Step 6 gets its own brand-blue background, the "Then" line
   turns blue to match, and a gold line fills along the step that is showing while the tour plays itself. */
.app-tour-divider { color: #6fa0ff; }
.app-tour-divider::before, .app-tour-divider::after { background: linear-gradient(90deg, transparent, rgba(47, 116, 255, 0.8), rgba(20, 163, 196, 0.8), transparent); }
.app-tour-step.app-tour-step-kit { border-color: rgba(47, 116, 255, 0.55); background: linear-gradient(135deg, rgba(47, 116, 255, 0.34), rgba(20, 163, 196, 0.2)); }
.app-tour-step.app-tour-step-kit i { background: linear-gradient(135deg, #2F74FF, #14A3C4); color: #fff; }
.app-tour-step.app-tour-step-kit small { color: #c6d6ee; }
.app-tour-step.app-tour-step-kit:hover { border-color: rgba(111, 160, 255, 0.85); }
.app-tour-step.app-tour-step-kit[aria-pressed="true"] { border-color: #f0b92c; box-shadow: 0 0 0 1px #f0b92c, 0 12px 32px rgba(47, 116, 255, 0.25); }
.app-tour-step.app-tour-step-kit[aria-pressed="true"] i { background: #f0b92c; color: #0b0d12; }
.app-tour-step { position: relative; overflow: hidden; }
.app-tour-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #f0b92c; transform: scaleX(0); transform-origin: left; pointer-events: none; }
.app-tour-step.is-timing .app-tour-progress { animation: tour-fill var(--dwell, 6000ms) linear forwards; }
.app-tour.is-held .app-tour-step.is-timing .app-tour-progress { animation-play-state: paused; }
@keyframes tour-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.app-tour-auto { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; margin-left: auto; padding: 4px 6px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.app-tour-auto:hover { color: var(--ink); }
.app-tour-auto-track { position: relative; width: 28px; height: 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); transition: background-color 0.2s ease; }
.app-tour-auto-track span { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #dbe3ee; transition: transform 0.2s ease; }
.app-tour-auto[aria-checked="true"] .app-tour-auto-track { background: rgba(240, 185, 44, 0.75); }
.app-tour-auto[aria-checked="true"] .app-tour-auto-track span { transform: translateX(12px); background: #fff; }
@media (prefers-reduced-motion: reduce) { .app-tour-auto-track, .app-tour-auto-track span { transition: none; } }
/* Kit test hero (2026-10-11, Mike): before (two one-sentence builds blended) and after (Codex from the kit). */
.kt-hero { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.kt-hero h3 { margin: 0; font-family: var(--serif, var(--display)); font-size: clamp(34px, 5vw, 60px); font-weight: 400; letter-spacing: -0.045em; line-height: 1; }
.kt-hero-pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(10px, 2vw, 22px); width: 100%; }
.kt-hero-pair figure { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.kt-hero-pair figcaption { display: flex; justify-content: center; align-items: baseline; gap: 8px; color: var(--muted); font-size: 15px; }
.kt-hero-pair figcaption b { color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.kt-hero-pair img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 750; object-fit: cover; object-position: top; border-radius: 14px; transition: opacity 0.35s ease; }
.kt-before img { border: 1px solid rgba(255, 255, 255, 0.14); filter: saturate(0.85); }
.kt-after img { border: 2px solid transparent; background: linear-gradient(#0b1017, #0b1017) padding-box, linear-gradient(90deg, #2F74FF, #14A3C4 40%, #F0B92C 75%, #C02A84) border-box; box-shadow: 0 18px 60px rgba(47, 116, 255, 0.28); }
.kt-after figcaption b { color: #f0b92c; }
.kt-hero-arrow { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, #2F74FF, #14A3C4); color: #fff; font-size: 22px; font-weight: 700; box-shadow: 0 8px 24px rgba(47, 116, 255, 0.35); }
.kt-hero-pick { display: inline-flex; gap: 6px; padding: 4px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; }
.kt-hero-pick button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.kt-hero-pick button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.12); color: var(--ink); }
.kt-hero-pick button:focus-visible { outline: 2px solid #f0b92c; outline-offset: 2px; }
.kt-hero.is-swapping img { opacity: 0; }
.kt-intro { margin: 0; max-width: 760px; color: var(--muted); font-size: 16px; line-height: 1.6; }
@media (max-width: 760px) {
  .kt-hero-pair { grid-template-columns: 1fr; }
  .kt-hero-arrow { justify-self: center; transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) { .kt-hero-pair img { transition: none; } }
.kt-hero-picks { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
/* F13e (Mike): the tour's progress line, dimmer so it isn't so obvious. */
.app-tour-progress { height: 2px; background: rgba(240, 185, 44, 0.42); }
/* Kit test before and after: auto-play line and switch (Mike, 2026-10-11). Dim, like the tour's. */
.kt-ba-progress { width: min(420px, 80%); height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.kt-ba-progress span { display: block; height: 100%; background: rgba(240, 185, 44, 0.42); transform: scaleX(0); transform-origin: left; }
.kt-ba-progress span.is-timing { animation: tour-fill 5000ms linear forwards; }
.kt-hero.is-held .kt-ba-progress span.is-timing { animation-play-state: paused; }
.kt-hero-picks .kt-ba-auto { margin-left: 0; }
/* Kit test, open on the page (Mike, 2026-10-11): café before and after, then the big button, then the rest. */
.kt-ba { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.kt-ba-row { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.kt-ba-title { margin: 0; text-align: center; font-size: clamp(18px, 2vw, 22px); font-weight: 600; letter-spacing: -0.01em; }
.kt-ba-row.is-swapping img { opacity: 0; }
.kit-test .kt-launch { margin-top: 0; }
.kt-button-text em { color: var(--muted); font-size: 14px; font-style: normal; }
.kt-more { display: flex; flex-direction: column; gap: clamp(26px, 3.4vw, 40px); }
.kt-more[hidden] { display: none; }
.kt-more > .kt-ba-row { padding-top: 6px; }
.kt-ba-head { margin: 8px 0 0; font-family: var(--serif, var(--display)); font-size: clamp(36px, 5.4vw, 64px); font-weight: 400; letter-spacing: -0.045em; line-height: 1; text-align: center; }
.kt-hero-pair figcaption b { font-size: clamp(15px, 1.6vw, 18px); }