/* Validated.Directory 2.0.0 · covering the towns you serve (BEA-432). Loads after /learn/_guide/guide.css. The main act:
   one made-up plumber based in Columbia Falls and the four towns around it. In Bigfork an AI names only plumbers based
   there; the plumber writes the towns down in the three places search and AI assistants read (a sentence on its own
   site, its service areas, its structured data), each lighting the valley its own way; then each town's page lists it
   and the answer in Bigfork can name it. Built on the same valley as the chamber challenge, so the two read as one
   library. The still composition is the default (scripts off, reduced motion); motion only under html.m (page.js). */

.cvs { position: relative; background: var(--canvas); }
.cv { position: relative; --cv-len: 7; }
.cv-stage { position: relative; padding: 48px 16px 56px; }
.cv-sky, .cv-fx { display: none; }
.cv-head, .cv-zone, .cv-cards, .cv-out { position: relative; z-index: 2; max-width: 1176px; margin-inline: auto; }
.cv-head h2 { margin-top: 10px; max-width: 16ch; font-size: clamp(30px, 8.4vw, 54px); line-height: 1.06; color: var(--white); }

/* ---- The valley, sketched: the lake, six towns, a chamber in each ------------------------------------------------- */
.cv-zone { margin-top: 26px; }
.vm { position: relative; aspect-ratio: 4 / 5; max-width: 560px; margin-inline: auto; }
.vm-lake { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.vm-lake path { fill: rgba(43, 69, 99, 0.42); stroke: rgba(244, 196, 90, 0.3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.vm-lk { position: absolute; left: 70%; top: 72%; transform: translate(-50%, -50%); font: 500 10.5px/1.2 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(201, 192, 173, 0.72); white-space: nowrap; }
.vt { position: absolute; z-index: 2; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); display: flex; align-items: center; gap: 6px; margin: 0; transform: translate(-6px, -50%); }
.vt.l { flex-direction: row-reverse; transform: translate(calc(-100% + 6px), -50%); }
.vt > i { flex: 0 0 auto; width: 12px; height: 12px; border: 1.5px solid var(--gold-bright); background: var(--gold-bright); box-shadow: 0 0 12px 2px rgba(244, 196, 90, 0.55); transition: background-color 0.35s, border-color 0.35s, box-shadow 0.35s; }
.vt > span { padding: 2px 6px 3px; background: rgba(10, 16, 36, 0.86); font: 600 13.5px/1.2 var(--sans); color: var(--white); white-space: nowrap; }
.vt.home > span::after { content: " · home"; font: 500 10.5px/1 var(--mono); letter-spacing: 0.06em; color: var(--cream-2); }
.ch { position: absolute; top: calc(100% + 3px); left: 18px; padding: 2px 6px 3px; border: 1px solid var(--gold-bright); background: rgba(10, 16, 36, 0.9); font: 500 10.5px/1.25 var(--mono); letter-spacing: 0.04em; color: var(--gold-bright); white-space: nowrap; transition: opacity 0.4s, color 0.4s, border-color 0.4s; }
.vt.l .ch { left: auto; right: 18px; }
.vt.up .ch { top: auto; bottom: calc(100% + 3px); }
.vt.cl .ch { left: auto; right: calc(100% - 12px); }
.vt.asks > span { outline: 1px solid rgba(240, 230, 207, 0.6); outline-offset: 2px; }

/* ---- The cards: what each step shows beside the map ---------------------------------------------------------------- */
.cv-cards { display: grid; gap: 22px; margin-top: 30px; max-width: 560px; }
.cc { position: relative; padding: 12px 14px 13px; border: 1px solid var(--rule); background: rgba(22, 33, 52, 0.72); }
.cc-k { font: 500 11px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-2); }
.cc-meter { display: flex; gap: 5px; margin-top: 10px; }
.cc-meter i { width: 18px; height: 18px; border: 1px solid rgba(240, 230, 207, 0.5); transition: background-color 0.35s, border-color 0.35s; }
.cc-say { display: grid; margin-top: 8px; font: 500 12.5px/1.4 var(--mono); color: var(--cream); }
.cc-say > * { grid-area: 1 / 1; transition: opacity 0.35s; }
.cc-q { margin-top: 7px; font: 400 clamp(19px, 5.4vw, 24px)/1.22 var(--display); color: var(--white); }
.cc-a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rule); font: 500 12.5px/1.4 var(--mono); color: var(--cream-2); transition: opacity 0.35s; }
.cc-a b { font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #f0a48f; }
.cc-web, .cc-rec { background: var(--paper-hi); border-color: rgba(35, 31, 26, 0.4); --cm: rgba(240, 230, 207, 0.62); color: var(--ink); }
.cc-web .cc-k, .cc-rec .cc-k { color: var(--ink-2); }
.cc-s { margin-top: 7px; font: 400 clamp(19px, 5.3vw, 25px)/1.3 var(--display); color: var(--ink); }
.cc-s .w { transition: opacity 0.2s; }
.cc-s .tn { background: rgba(244, 196, 90, 0.42); box-shadow: 0 0 0 1px rgba(125, 90, 26, 0.5); transition: background-color 0.35s, box-shadow 0.35s, opacity 0.2s; }

/* ---- The steps ------------------------------------------------------------------------------------------------------ */
.cv-out { margin-top: 34px; max-width: 760px; }
.cv-steps { display: grid; gap: 16px; }
.cv-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; align-items: baseline; padding-top: 12px; border-top: 1px solid var(--rule); }
.cv-n { font: 500 11.5px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-2); }
.cv-k { font: 600 17px/1.3 var(--sans); color: var(--white); }
.cv-t { grid-column: 1 / -1; font-size: 16.5px; line-height: 1.5; color: var(--cream); }
.cv-t strong { color: var(--white); font-weight: 650; }
.cv-tk { display: none; }

/* ---- In motion: the stage pins; the map takes the room left; one card and one step at a time ----------------------- */
.m .cv { height: calc(var(--cv-len) * 100vh); height: calc(var(--cv-len) * 100svh); }
.m .cv-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; padding: calc(70px + env(safe-area-inset-top, 0px)) 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
.m .cv-head, .m .cv-zone, .m .cv-cards, .m .cv-out { width: 100%; }
.m .cv-head h2 { font-size: clamp(26px, 7.6vw, 46px); }
.js .cv-sky, .js .cv-fx { display: block; position: absolute; pointer-events: none; }   /* drawn with motion off too: the finished land and trails */
.js .cv-sky { z-index: 0; inset: 0; width: 100%; height: 100%; }
.js .cv-fx { z-index: 1; inset: 0; width: 100%; height: 100%; }
.m .cv-zone { margin-top: 10px; min-height: 0; }
.m .vm { position: absolute; inset: 14px 8px 18px; aspect-ratio: auto; max-width: none; margin: 0; }
.m .vt:not(.on) > i { background: transparent; border-color: rgba(240, 230, 207, 0.55); box-shadow: none; }
.m .vt:not(.on) > span { color: var(--cream-2); }
.m .ch { opacity: 0; }
.m .ch.show { opacity: 1; }
.m .cv-cards { display: grid; margin-top: 8px; max-width: none; }
.m .cc { grid-area: 1 / 1; align-self: end; opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0s linear 0.4s; }
.m .cc.cur { opacity: 1; visibility: visible; transition: opacity 0.4s; }
.m .cc-meter i { background: transparent; border-color: rgba(240, 230, 207, 0.4); }
.m .cc-meter i.on { background: var(--cream); border-color: var(--cream); }
.m .cc-s .w:not(.on) { opacity: 0; }
.m .cc-s .tn:not(.lit) { background: transparent; box-shadow: none; }
.m .cv-out { margin-top: 12px; padding-top: 0; max-width: none; }
.m .cv-steps { display: grid; gap: 0; }
.m .cv-steps li { grid-area: 1 / 1; padding-top: 10px; opacity: 0; visibility: hidden; }
.m .cv-steps li.cur { opacity: 1; visibility: visible; animation: cv-in 0.35s ease-out backwards; }
.m .cv-t { min-height: calc(3 * 1.45em); font-size: 16px; line-height: 1.45; }
.m .cv-tk { display: flex; gap: 4px; margin-top: 8px; }
.cv-tk i { flex: 0 1 22px; height: 4px; background: rgba(240, 230, 207, 0.24); transition: background-color 0.3s; }
.cv-tk i.on { background: var(--gold-bright); }
@keyframes cv-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Small phones (Mark's at 125%, about 314 wide): tighter type so the map keeps its room */
@media (max-width: 360px) {
  .vt > span { font-size: 12.5px; padding-inline: 4px; }
  .vt.home > span::after { content: ""; }
  .ch { font-size: 10px; padding-inline: 4px; }
  .cc { padding: 10px 11px 11px; }
  .m .cv-t { font-size: 15px; }
}
@media (max-width: 899px) and (max-height: 720px) {
  .m .cv-stage { padding-top: calc(62px + env(safe-area-inset-top, 0px)); }
  .m .cv-head h2 { font-size: 24px; margin-top: 6px; }
  .m .cv-head .eyebrow { font-size: 11px; }
  .m .cc-q, .m .cc-s { font-size: 18px; }
  .m .cv-t { min-height: calc(3 * 1.4em); line-height: 1.4; }
}

/* Laptop and up: the words on the left, the valley on the right */
@media (min-width: 900px) {
  .cv-stage { padding: 96px var(--read-x) 96px; }
  html:not(.m) .cv-stage { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: 64px; align-items: start; }
  html:not(.m) :is(.cv-head, .cv-zone, .cv-cards, .cv-out) { width: 100%; margin-inline: 0; }
  html:not(.m) .cv-head { grid-column: 1 / -1; }
  html:not(.m) .cv-zone { grid-column: 2; grid-row: 2 / span 2; position: sticky; top: 96px; }
  html:not(.m) .cv-cards { grid-column: 1; grid-row: 2; margin-top: 26px; }
  html:not(.m) .cv-out { grid-column: 1; grid-row: 3; }
  .vt > span { font-size: 15px; padding: 3px 7px 4px; }
  .ch { font-size: 11.5px; }
  .vm-lk { font-size: 11.5px; }
  .cc { padding: 16px 18px 17px; }
  .cc-say, .cc-a { font-size: 14px; }
  .cc-q, .cc-s { font-size: 30px; }
  .cc-meter i { width: 24px; height: 24px; }
  .m .cv-stage { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: clamp(28px, 4vw, 56px); padding-top: 104px; padding-bottom: 44px; padding-left: var(--read-x); padding-right: var(--read-x); }
  .m .cv-head { grid-column: 1; grid-row: 1; }
  .m .cv-head h2 { font-size: clamp(40px, 3.8vw, 58px); }
  .m .cv-zone { grid-column: 2; grid-row: 1 / 4; margin-top: 0; }
  .m .vm { inset: 0 12px 8px; }
  .m .cv-cards { grid-column: 1; grid-row: 2; align-self: center; margin-top: 24px; max-width: 520px; }
  .m .cc { align-self: center; }
  .m .cv-out { grid-column: 1; grid-row: 3; align-self: end; padding-top: 12px; border-top: 1px solid var(--rule); }
  .m .cv-steps li { border-top: 0; padding-top: 0; }
  .cv-k { font-size: 20px; }
  .cv-n { font-size: 12.5px; }
  .m .cv-t { font-size: 21px; line-height: 1.4; min-height: calc(3 * 1.4em); }
}

/* ---- This guide's own cards and states ------------------------------------------------------------------------------ */
.vm-lake { overflow: hidden; }
.cc-a2 { display: none; }
.cc-a b { text-transform: none; letter-spacing: 0.02em; }
.cc-a1 b { color: #f0a48f; }
.cc-a2 b { color: var(--gold-bright); }
html:not(.m) .cc-a1 { display: none; }
html:not(.m) .cc-a2 { display: flex; }
.cc-m20 { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; max-width: 380px; }
.cc-m20 i { width: auto; height: auto; aspect-ratio: 1; }
.cc-m20 i:not(.on) { background: transparent; border-color: rgba(240, 230, 207, 0.35); }
.cc-m20 i.on { background: var(--gold-bright); border-color: var(--gold-bright); }
.cc-pre { display: grid; margin-top: 8px; font: 500 13px/1.5 var(--mono); color: var(--cream); white-space: pre-wrap; }
.cc-pre .jl { transition: opacity 0.25s; }
.cc-pre .i1 { padding-left: 2ch; color: var(--gold-bright); }
.m .cc-ai.answered .cc-a1 { display: none; }
.m .cc-ai.answered .cc-a2 { display: flex; }
.m .cc-m20 i.on:not(.lit) { background: transparent; border-color: rgba(240, 230, 207, 0.35); }
.m .cc-pre .jl:not(.on) { opacity: 0; }
@media (min-width: 900px) {
  .cc-m20 { gap: 4px; max-width: 440px; }
  .cc-pre { font-size: 15px; }
}
.m .cc-m20 i.on.lit { background: var(--gold-bright); border-color: var(--gold-bright); }
@media (max-width: 599px) { .vt.home > span::after { content: ""; } }