/* Validated.Directory 2.0.0 · is my Google Business Profile enough (DIR 2.0.0 part D, BEA-432). Loads after
   /learn/_guide/guide.css. The page's main act, at night: four copies of a business, each read by its own AI assistants.
   The scroll lights them one lane at a time: Google's profile and what it feeds, Bing Places and Copilot, Apple Business
   Connect and Siri, then the owner's own website and the assistants that search the web. Last, every listing lines up
   with the website. page.js drives it from the scroll. Still first, for scripts off and reduced motion: every lane lit,
   every listing lined up, every step written out. Motion only under html.m. */

.ms { position: relative; z-index: 1; background: var(--canvas); color: var(--cream); }
.ms-stage { position: relative; display: grid; gap: 24px; width: 100%; max-width: var(--max); margin: 0 auto; padding: 40px var(--gut-r) 56px var(--gut); }
.ms-head, .ms-art, .ms-out { position: relative; z-index: 2; min-width: 0; }
.ms-head h2 { margin-top: 10px; max-width: 15ch; font-size: clamp(30px, 8.6vw, 54px); line-height: 1.06; color: var(--white); }
.ms-fit { position: relative; display: grid; gap: 14px; width: 100%; max-width: 540px; margin: 0 auto; }
.ms-fx { display: none; }

/* The customer's question and the AI assistant's answer, in one box at the head of every trail. */
.pl-k, .ms-ai-k { font: 500 11px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-2); }
.ms-ask-q { margin-top: 3px; font: 400 18px/1.24 var(--display); color: var(--cream-2); }
.ms-ai-k2 { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--rule); color: var(--gold-bright); }

/* The four places: a card each, the same four facts in the same order (name, address, phone, hours). */
.ms-places { display: grid; gap: 10px; }
/* A lane: a listing beside the AI assistants that read it, the trail between them. */
.lanes-k, .lane { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 26px; }
.lanes-k { font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-2); }
.lane { align-items: center; }
.rd { position: relative; z-index: 2; padding: 8px 9px 9px; border: 1px dashed rgba(240, 230, 207, 0.35); transition: opacity 0.45s, border-color 0.4s; }
.rd-k { font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-2); }
.tl { display: flex; flex-wrap: wrap; gap: 4px; }
.tl > .rd-k, .tl > .rd-more { align-self: center; padding: 0 2px 0 0; background: none; color: var(--cream-2); }
.tl > span { padding: 3px 5px 4px; font: 500 11.5px/1.1 var(--mono); color: var(--canvas); background: var(--gold-bright); white-space: nowrap; }
.pl-c { margin-top: 4px; font: 400 16px/1.2 var(--display); color: var(--white); }
.ok { display: block; margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--rule); font: 500 11px/1.3 var(--mono); color: var(--gold-bright); transition: opacity 0.4s; }
.pl-own { border-color: rgba(244, 196, 90, 0.7); }
.tl > .rd-more { font: 500 11px/1.3 var(--mono); letter-spacing: 0; text-transform: none; }

.pl { position: relative; z-index: 2; padding: 10px 9px 8px; background: rgba(29, 42, 58, 0.94); border: 1px solid rgba(240, 230, 207, 0.3); transition: border-color 0.4s, opacity 0.45s; }
.pl-k { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1px 6px; padding-bottom: 4px; border-bottom: 1px solid var(--rule); }
.pl-tag { position: absolute; top: -8px; right: 9px; padding: 1px 5px 2px; background: var(--canvas); border: 1px solid rgba(244, 196, 90, 0.75); font-size: 10.5px; line-height: 1.2; color: var(--gold-bright); transition: opacity 0.4s; }
.pl ul { display: grid; gap: 2px; margin-top: 5px; }
.v { display: grid; justify-items: start; font: 500 12.5px/1.3 var(--mono); color: var(--cream); }
.v > span { padding: 0 3px; transition: opacity 0.4s, background-color 0.4s, color 0.4s, box-shadow 0.4s; }
/* agreeing: lit gold. Disagreeing: the old value hatched in barn, struck in the still, with the true value under it. */
.v > span, .v .t { color: var(--gold-bright); box-shadow: inset 0 -1px 0 rgba(244, 196, 90, 0.55); }
.v .o { color: #f5c9bc; background: repeating-linear-gradient(135deg, rgba(166, 75, 59, 0.55) 0 2px, transparent 2px 5px); box-shadow: inset 0 -2px 0 var(--barn); text-decoration: line-through; text-decoration-color: rgba(245, 201, 188, 0.8); }

.ms-ai { position: relative; z-index: 2; padding: 10px 13px 12px; background: linear-gradient(180deg, var(--night), var(--canvas)); border: 1px solid rgba(244, 196, 90, 0.5); box-shadow: 0 20px 40px -26px rgba(0, 0, 0, 0.9); }
.ms-ai-a { display: grid; margin-top: 3px; font: 400 18px/1.3 var(--display); color: var(--white); }
.ms-ai-a > span { grid-area: 1 / 1; transition: opacity 0.45s; }
.ms-ai-a .g { padding: 0 3px; font: 500 0.78em/1 var(--mono); color: var(--canvas); background: var(--gold-bright); }
.ms-ai-a .g { white-space: nowrap; }
.ms-ai-a .a0, .ms-ai-a .a1 { display: none; }

/* The steps. */
.ms-steps { display: grid; gap: 14px; }
.ms-steps > li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 3px 10px; padding-top: 12px; border-top: 1px solid var(--rule); }
.ms-sn { font: 500 11.5px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-2); white-space: nowrap; }
.ms-sk { font: 600 16.5px/1.3 var(--sans); color: var(--white); }
.ms-st { grid-column: 1 / -1; font-size: 16px; line-height: 1.45; color: var(--cream); }
.ms-tk { display: none; }

/* ==== In motion: the stage pins; the drawing in the middle is scaled to its room; the step in hand at the foot ======= */
.m .ms-track { height: calc(5.4 * 100vh); height: calc(5.4 * 100svh); }
.m .ms-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; gap: 12px; grid-template-rows: auto minmax(0, 1fr) auto; padding-top: calc(76px + env(safe-area-inset-top, 0px)); padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
.m .ms-head h2 { margin-top: 6px; font-size: clamp(24px, 7vw, 44px); }
.m .ms-art { display: grid; place-items: center; min-height: 0; }
.js .ms-fx { display: block; position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.m .ms-steps { gap: 0; padding-top: 10px; border-top: 1px solid var(--rule); }
.m .ms-steps > li { grid-area: 1 / 1; align-content: start; padding-top: 0; border-top: 0; opacity: 0; transition: opacity 0.35s; }
.m .ms-steps > li.cur { opacity: 1; }
.m .ms-st { min-height: calc(3 * 1.45em); }
.m .ms-tk { display: flex; gap: 4px; margin-top: 8px; }
.m .ms-tk i { flex: 0 1 22px; height: 4px; background: rgba(240, 230, 207, 0.2); transition: background-color 0.3s; }
.m .ms-tk i.on { background: var(--gold-bright); }

/* the states page.js sets: a place .on once its trail reaches it; a value .on once it is compared, .fixed once corrected */
.m .pl:not(.on) { opacity: 0.32; }
.m .pl:not(.agree) { border-color: rgba(240, 230, 207, 0.3); }
.m .pl.agree { border-color: rgba(244, 196, 90, 0.7); }
.m .pl.off { border-color: rgba(214, 112, 92, 0.85); }
.m .pl-tag:not(.on) { opacity: 0; }
.m .v { justify-items: stretch; }
.m .v > span { grid-area: 1 / 1; justify-self: start; }
.m .rd:not(.on) { opacity: 0.3; }
.m .rd:not(.on) .tl > span:not(.rd-k):not(.rd-more) { color: var(--cream-2); background: transparent; box-shadow: inset 0 0 0 1px rgba(240, 230, 207, 0.35); }
.m .rd.on { border-color: rgba(244, 196, 90, 0.55); }
.m .ok:not(.on) { opacity: 0; }
.m .v.bad:not(.fixed) .t, .m .v.bad.fixed .o, .m .v.flip:not(.on) .o { opacity: 0; }
.m .v.flip:not(.on) .t { opacity: 1; }
.m .ms-ai-a .a0, .m .ms-ai-a .a1 { display: block; }
.m .a0.on, .m .a1:not(.on), .m .a1.fixed, .m .a2:not(.on) { opacity: 0; }

@media (max-width: 360px) {
  .ms-places { gap: 0 10px; }
  .lanes-k, .lane { column-gap: 18px; }
  .ms-places { gap: 8px; }
  .pl-k, .lanes-k { letter-spacing: 0.04em; }
  .ok { font-size: 10.5px; }
  .rd { padding: 7px 7px 8px; }
  .tl { gap: 3px; }
  .tl > span { font-size: 11px; padding-inline: 4px; }
  .pl-c { font-size: 15px; }
    .pl { padding: 10px 6px 7px; }
  .v { font-size: 11px; }
  .pl-k { font-size: 10px; }
    .ms-ask-q, .ms-ai-a { font-size: 16.5px; }
        .m .ms-head h2 { font-size: 23px; }
  .m .ms-st { font-size: 15px; }
  .m .ms-fit { gap: 11px; }
}
/* short phones (667 to 720 tall): a little less round the drawing, so it keeps nearly its full size */
@media (max-width: 899px) and (max-height: 720px) {
  .m .ms-stage { gap: 10px; padding-top: calc(70px + env(safe-area-inset-top, 0px)); }
  .m .ms-head h2 { margin-top: 4px; font-size: 22px; }
  .m .ms-fit { gap: 10px; }
  .m .ms-st { font-size: 15px; }
  .ms-ask-q, .ms-ai-a { font-size: 16.5px; }
  .pl-k, .ms-ai-k { font-size: 10.5px; }
}
@media (min-width: 600px) {
  .v { font-size: 14px; }
  .pl { padding: 10px 12px 11px; }
  .ms-ask-q, .ms-ai-a { font-size: 21px; }
}
/* Laptops: the words at the left, the drawing at the right, as the waterfall does. */
@media (min-width: 900px) {
  .ms-stage { max-width: none; width: 100%; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 40px; padding-top: 72px; padding-left: var(--read-x); padding-right: var(--read-x); }
  .ms-head { grid-column: 1; grid-row: 1; }
  .ms-art { grid-column: 2; grid-row: 1 / span 2; }
  .ms-out { grid-column: 1; grid-row: 2; }
  .ms-fit { max-width: 680px; gap: 20px; }
  .ms-places { gap: 0 34px; }
  .lanes-k, .lane { column-gap: 56px; }
  .lanes-k { font-size: 12px; }
  .ms-places { gap: 14px; }
  .rd { padding: 12px 14px 14px; }
  .rd-k, .ok, .tl > .rd-more { font-size: 12px; }
  .tl > span { font-size: 13px; padding: 4px 7px 5px; }
  .pl-c { font-size: 21px; }
        .pl { padding: 14px 16px 14px; }
  .pl-k, .ms-ask-k, .ms-ai-k { font-size: 12px; }
  .v { font-size: 15.5px; }
  .pl ul { gap: 5px; margin-top: 9px; }
  .ms-ai { padding: 14px 18px 16px; }
  .ms-ask-q, .ms-ai-a { font-size: 24px; }
      .m .ms-stage { grid-template-rows: auto minmax(0, 1fr); padding-top: calc(96px + env(safe-area-inset-top, 0px)); padding-bottom: 48px; }
  .m .ms-head h2 { font-size: clamp(36px, 3.6vw, 52px); }
  .m .ms-out { align-self: end; }
  .ms-sk { font-size: 19px; }
  .ms-st { font-size: 17.5px; }
}