/* Monitoring-first refinement. Native demo choreography and mascot orbit stay unchanged. */
.landing #in-action .scene-explanation,
html[data-preview-tuning] .landing #in-action .scene-explanation {
  padding:0 16px var(--preview-demo-caption-gap,24px);
  text-align:center;
}
.landing #in-action .scene-explanation h2 { color:var(--color-accent); }
.landing #in-action .scene-explanation [data-scene-copy] {
  color:var(--color-ink,#F2F4F6);
  max-width:65ch;
  margin-top:16px;
  min-height:3.2em;
  font:400 18px/1.6 var(--font-body);
}
.landing #in-action .scenario-nav { gap:12px; padding-block:3px 7px; }
.landing #in-action .scenario-nav button { height:48px; min-height:48px; padding:12px 10px; }
.landing #in-action .scenario-nav button::before {
  border-color:var(--color-border,#48484D);
  background:linear-gradient(180deg,#2a2b2e,#222326);
  box-shadow:inset 0 1px 0 #ffffff09;
}
.landing #in-action .scenario-nav button.is-active::before { border-color:var(--chapter-color); }
.landing #in-action .scenario-nav button:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; }
.landing #in-action .scenario-nav button:active::before { background:#1c1e20; }
.landing .beginner-story .bs-next-actions { margin-top:32px; }
.landing .beginner-story .bs-story-steps>li>h3 { min-height:57px; align-items:flex-start; }
.landing .beginner-story .bs-step-number { margin-top:2px; }
.landing .beginner-story .bs-story-attention .bs-attention-heading {
  color:#E9BF73;
  font-size:9px;
  margin:0 0 6px;
  display:flex;
  align-items:center;
  gap:5px;
}
.landing .beginner-story .bs-story-attention .bs-attention-heading svg { width:12px; height:12px; }
.landing .beginner-story .bs-story-attention .bs-attention-card {
  display:grid;
  grid-template-columns:32px minmax(0,1fr) 10px;
  gap:8px;
  padding:10px 8px;
  align-items:center;
  border:1px solid #685136;
  border-radius:9px;
  background:#25231f;
}
.landing .beginner-story .bs-story-attention img { width:32px;height:32px;image-rendering:pixelated; }
.landing .beginner-story .bs-story-request { display:flex;flex-direction:column;gap:3px;min-width:0; }
.landing .beginner-story .bs-story-request strong { font-size:12px;line-height:1.35;font-weight:500; }
.landing .beginner-story .bs-story-request span { font-size:9px;color:#b7bbc3; }
.landing .beginner-story .bs-story-request p { font-size:10px;line-height:1.4;margin:2px 0 0;color:#efdfc4; }
.landing .beginner-story .bs-story-return { color:#E9BF73;font-size:20px; }
.landing .beginner-story .bs-overview-scene .bs-notes-window { top:166px; }

.landing .multi-tools-section { text-align:left; }
.landing .mt-layout { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center; }
.landing .mt-copy { min-width:0; }
.landing .mt-copy h2 {
  margin:0 0 24px;
  font:600 clamp(32px,3vw,40px)/1.2 var(--font-display);
  letter-spacing:-.015em;
  text-wrap:balance;
}
.landing .mt-copy>p { margin:0 0 20px;color:var(--color-support);font:400 18px/1.65 var(--font-body);text-wrap:pretty;max-width:48ch; }
.landing .mt-tools { display:flex;flex-wrap:wrap;column-gap:24px;row-gap:16px;margin-top:28px; }
.landing .mt-tool { display:inline-flex;align-items:center;gap:8px;font:500 14px/1.5 var(--font-body);white-space:nowrap; }
.landing .mt-tool img { width:24px;height:24px;object-fit:contain; }
.landing .mt-more { display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:12px;font:400 14px/1.5 var(--font-body);color:var(--color-support);text-underline-offset:5px; }
.landing .mt-more:hover { color:var(--color-accent); }
.landing .mt-more:focus-visible { outline:2px solid var(--color-accent);outline-offset:4px; }
.landing .mt-more { margin-top:24px;padding:9px 12px;border:1px solid #48484D;border-radius:6px;background:linear-gradient(180deg,#25272a,#191b1e);color:var(--color-ink);font:600 13px/1.5 var(--font-display);text-decoration:none;transition:border-color 180ms,color 180ms; }
.landing .mt-more > span { display:grid;place-items:center;width:22px;height:22px;border-radius:4px;background:#ffffff07;color:var(--color-accent); }
.landing .mt-more:hover { border-color:#759651; }
.landing .mt-more:active { background:#191e16; }
.landing .brand-mention { color:var(--color-accent);font-weight:500; }
.landing .mt-example { min-width:0;width:100%;max-width:500px;margin:0;justify-self:center; }
.landing .mt-desktop { padding:0 18px 28px;border:1px solid #48484d;border-radius:16px;overflow:hidden;background:#1b4475 url(/assets/product-demo/macos-wallpaper.webp) center 50%/cover;box-shadow:inset 0 0 0 5px #151619; }
.landing .mt-island { max-width:420px;margin:0 auto;padding:16px 14px 18px;border:1px solid #26282b;border-top:0;border-radius:0 0 20px 20px;background:#08090a;color:#e5e7ec;box-shadow:0 12px 20px #0005;font-family:var(--font-body); }
.landing .mt-island-top { display:flex;justify-content:space-between;align-items:center;color:#c2c6ce;font-size:12px;line-height:1.5; }
.landing .mt-island-top svg { width:13px;height:13px;fill:none;stroke:#a6adb8;stroke-width:1.5; }
.landing .mt-status-strip { display:flex;gap:12px;margin-top:13px;font-size:9px;line-height:1.4;color:#adb4bf;text-transform:uppercase;letter-spacing:.015em;white-space:nowrap; }
.landing .mt-state { font-size:9px;font-weight:500;line-height:1.4;white-space:nowrap;text-transform:uppercase; }
.landing .mt-working { color:#51d99a; }
.landing .mt-pending { color:#a8afbd; }
.landing .mt-waiting { color:#e9bf73; }
.landing .mt-attention-heading { display:flex;align-items:center;gap:6px;margin:18px 0 7px;font-size:10px;line-height:1.5;text-transform:uppercase;letter-spacing:.04em;color:#e9bf73; }
.landing .mt-attention-heading i { width:5px;height:5px;border-radius:50%;background:#e9bf73; }
.landing .mt-attention { display:grid;grid-template-columns:40px minmax(0,1fr) 12px;align-items:center;gap:10px;padding:12px 10px;border:1px solid #665138;background:#24221f;border-radius:10px; }
.landing .mt-attention strong { display:block;font-size:14px;line-height:1.4;font-weight:500; }
.landing .mt-attention p { font-size:11px;line-height:1.5;color:#e2d5bc;margin:7px 0 0; }
.landing .mt-return { font-size:24px;color:#e9bf73; }
.landing .mt-mascot { image-rendering:pixelated;object-fit:contain; }
.landing .mt-group { display:flex;align-items:center;gap:7px;margin:15px 0 7px;font-size:9px;line-height:1.5;text-transform:uppercase;letter-spacing:.05em;color:#a7b0be; }
.landing .mt-group>span { width:6px;height:6px;border-radius:2px;background:#8fc7cc; }
.landing .mt-group>i { height:1px;background:#26282c;flex:1; }
.landing .mt-group>b { font-weight:400; }
.landing .mt-session { display:grid;grid-template-columns:40px minmax(0,1fr) 18px;column-gap:10px;row-gap:4px;align-items:center;padding:12px 10px;border:1px solid #383c43;border-radius:10px;background:#24272c; }
.landing .mt-session>.mt-mascot { grid-column:1;grid-row:1/4; }
.landing .mt-session-heading { grid-column:2;grid-row:1;display:flex;align-items:baseline;flex-wrap:wrap;gap:3px 8px; }
.landing .mt-session-heading strong { font-size:14px;line-height:1.35;font-weight:500; }
.landing .mt-source { display:flex;align-items:center;gap:4px;font-size:10px;line-height:1.4;color:#bac0ca; }
.landing .mt-source img { width:14px;height:14px;object-fit:contain; }
.landing .mt-attention .mt-source { margin-top:4px; }
.landing .mt-session>.mt-source { grid-column:2;grid-row:2; }
.landing .mt-done-ring { grid-column:3;grid-row:1;width:15px;height:15px;border:1.5px solid #929ba8;border-radius:50%; }
.landing .mt-session>p { grid-column:2;grid-row:3;margin:0;font-size:10px;line-height:1.5;color:#a7afba; }
.landing .mt-folder { grid-column:3;grid-row:3;width:17px;height:17px; }
.landing .mt-folder svg { width:17px;height:17px;fill:none;stroke:#a7afba;stroke-width:1.5; }
.landing .multi-tools-section .final-display-fit { margin-top:var(--preview-workspace-heading-gap,36px); }
/* An inner fragment opens the native details, including without JavaScript. */
.landing #supported-tools { scroll-margin-top:128px; }
.landing .faq-answer em,.landing .plan-choice em { font-style:italic; }
html[data-preview-tuning] .landing .mt-copy h2 { font-size:calc(clamp(32px,3vw,40px) * var(--preview-heading-scale,1)); }
html[data-preview-tuning] .landing .mt-copy>p { font-size:calc(18px * var(--preview-body-scale,1)); }
html[data-preview-tuning] .landing #in-action .scene-explanation [data-scene-copy] { font-size:calc(18px * var(--preview-body-scale,1)); }
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  .landing #in-action .scenario-nav button:hover::before { transform:translateY(-1px);border-color:var(--chapter-color); }
  .landing #in-action .scenario-nav button::before { transition:transform 160ms ease-out,border-color 160ms ease-out; }
}
@media(max-width:1100px) {
  .landing .mt-layout { gap:32px; }
  .landing .mt-desktop { padding-inline:12px; }
  .landing .mt-island { padding-inline:10px; }
}
@media(max-width:959px) {
  .landing .mt-layout { grid-template-columns:1fr;gap:32px;max-width:620px;margin-inline:auto; }
  .landing .mt-copy>p { max-width:60ch; }
  .landing .beginner-story .bs-story-steps>li>h3 { min-height:0; }
}
@media(max-width:767px) {
  .landing .mt-copy>p { font-size:16px; }
  html[data-preview-tuning] .landing .mt-copy>p { font-size:calc(16px * var(--preview-body-scale,1)); }
}
@media(max-width:600px) {
  .landing #in-action .scene-explanation,
  html[data-preview-tuning] .landing #in-action .scene-explanation { padding-inline:8px; }
  .landing #in-action .scene-explanation [data-scene-copy] { font-size:16px;min-height:4.8em; }
  html[data-preview-tuning] .landing #in-action .scene-explanation [data-scene-copy] { font-size:calc(16px * var(--preview-body-scale,1)); }
  .landing #in-action .scenario-nav { gap:10px; }
}
@media(max-width:359px) {
  /* Reserve the longest Spanish chapter heading before playback starts. */
  .landing #in-action .scene-explanation h2 { min-height:3.6em; }
  .landing .mt-desktop { padding-inline:7px;padding-bottom:18px; }
  .landing .mt-island { padding-inline:8px; }
  .landing .mt-status-strip { gap:8px;font-size:8px; }
  .landing .mt-session,.landing .mt-attention { grid-template-columns:32px minmax(0,1fr) 14px;column-gap:8px;padding:10px 8px; }
  .landing .mt-mascot { width:32px;height:32px; }
  .landing .mt-session-heading strong,.landing .mt-attention strong { font-size:13px; }
}