/* /plan/ (staging, LAB=1 builds only). Loads after site.css, home-hero.css and hero-plotter.css on this page only.
   Four parts: the page hero, the labelled bar (one bordered bar split into labelled parts), the dark stage
   (the home stage while idle, the run while we read a site), and the plan as one printed page.
   No new colours: ink, paper, the card surface, play colours only on dots, orange only as a small mark.
   One easing curve everywhere: var(--ease), cubic-bezier(0.2, 0.7, 0.2, 1). */

/* ---------- Two fixes that site.css should carry site wide (reported to the orchestrator) ---------- */
/* the skip link stays clipped until it has focus, so a full-page capture or a scrolled page never shows it mid-page */
.skip:not(:focus) { clip-path: inset(50%); width: 1px; height: 1px; padding: 0; overflow: hidden; white-space: nowrap; }
/* the company name gets focus from the script (for screen readers), never a visible ring */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }

.pl .nw { white-space: nowrap; }

/* ---------- Page hero ---------- */
.pl-hero { padding-bottom: 0; overflow: visible; }
.pl-top { display: grid; gap: 22px; }
.pl-hero h1 { font-size: clamp(42px, 5.8vw, 84px); max-width: 17em; }
.pl-hero .lede { max-width: 58ch; }
@media (min-width: 1100px) { .pl-hero .lede { max-width: 68ch; } }

/* ---------- The labelled bar ---------- */
/* five parts on one row from 1240px, where the content is always 1160px wide: each part fits its longest value
   (yourcompany.com, a first name like Anne-Sophie, "Europe and North America", "Your buyers' language") */
.bar {
  --pad: 5px;
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1.52fr) minmax(0, 1.32fr) auto;
  margin-top: clamp(26px, 3vw, 36px); padding: var(--pad);
  background: #fbf9f4; border: 1.5px solid var(--text); border-radius: 16px;
}
.bar__seg { position: relative; min-width: 0; height: 66px; border-radius: 11px; transition: background-color .2s var(--ease), box-shadow .2s var(--ease); }
/* a hairline between parts, hidden next to the part you are in or pointing at */
.bar__seg + .bar__seg::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--line);
  transition: opacity .2s var(--ease);
}
.bar__seg:hover::before, .bar__seg:hover + .bar__seg::before,
.bar__seg:focus-within::before, .bar__seg:focus-within + .bar__seg::before,
.bar__seg.is-bad::before, .bar__seg.is-bad + .bar__seg::before { opacity: 0; }

/* the label on top, the value below; the field fills the whole part, so any click lands in it */
.bar__lab {
  position: absolute; left: 18px; right: 14px; top: 12px; z-index: 1; pointer-events: none;
  font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: -0.003em; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bar__in {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  padding: 30px 18px 10px; border: 0; border-radius: inherit; background: transparent;
  font: 500 18.5px/26px var(--sans); letter-spacing: -0.008em; color: var(--text);
  outline: none; text-overflow: ellipsis;
}
.bar__in::placeholder { color: var(--muted); font-weight: 400; opacity: 1; }
.bar__in[readonly] { color: var(--muted); }
select.bar__in {
  -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; padding-right: 40px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'><path d='M1 1.2l4.5 4.5L10 1.2' fill='none' stroke='%2316120f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 18px top 40px / 11px 7px;
}
select.bar__in::-ms-expand { display: none; }
select.bar__in option { font-weight: 400; color: var(--text); background: #fff; }
select.bar__in:disabled { cursor: default; color: var(--muted); opacity: 1; }
select.bar__in:-moz-focusring { color: transparent; text-shadow: 0 0 0 var(--text); }

/* hover and the part you are in: a white part with an ink ring */
.bar__seg:hover { background: rgba(22, 18, 15, .04); }
.bar__seg:focus-within { background: #fff; box-shadow: inset 0 0 0 2px var(--text); }
/* the part in error: the only orange-family ring, the message under the bar says what to do */
.bar__seg.is-bad, .bar__seg.is-bad:focus-within { background: #fff; box-shadow: inset 0 0 0 2px var(--accent-ink); }
.bar[aria-busy="true"] .bar__seg:hover { background: transparent; }
.bar[aria-busy="true"] .bar__seg:focus-within { background: transparent; box-shadow: none; }

/* the button, attached at the end */
.bar__end { display: flex; padding-left: var(--pad); }
.bar__go { height: 66px; padding: 0 26px; border-radius: 11px; font-size: 16px; gap: 12px; }
.bar__go:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.bar__go:disabled { opacity: .4; cursor: default; transform: none; }
.bar__go:disabled .arr { transform: none; }

/* under the bar: the inline message (ink text, one orange dot as the mark), the quiet preview line, the fine print and the example link */
.bar__msg { display: flex; align-items: baseline; gap: 10px; margin: 12px 0 0 4px; font-size: 14.5px; line-height: 1.45; color: var(--text); font-weight: 500; }
.bar__msg::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); transform: translateY(-1px); }
.bar__msg:empty { display: none; }
.bar__msg a { color: var(--text); }
.bar__note { margin: 12px 0 0 4px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.bar__note[hidden] { display: none; }
.bar__under { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; margin: 14px 4px 0; }
.bar__fine { font-size: 14px; line-height: 1.5; color: var(--muted); }
.bar__ex { font-size: 15px; }

/* busy: one calm note under the bar with an optional email field */
.busy { margin-top: 18px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 16px; background: #fbf9f4; display: grid; gap: 8px; max-width: 760px; }
.busy[hidden] { display: none; }
.busy__h { font-family: var(--serif); font-weight: 650; font-size: 23px; line-height: 1.15; letter-spacing: -0.02em; }
.busy__p { font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.busy__p b { color: var(--text); font-weight: 600; }
.busy__form { display: flex; gap: 8px; margin-top: 6px; max-width: 520px; }
.busy__form input, .note__form input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; font: 16px var(--sans); color: var(--text); }
.busy__form input:focus, .note__form input:focus { outline: none; border-color: var(--text); }
.busy__form .btn, .note__form .btn { height: 44px; }
.busy__done { font-size: 14px; line-height: 1.5; color: var(--text); }
.busy__done[hidden] { display: none; }
.busy__done a { color: var(--text); }

/* ---------- The stage: idle is the home stage, the run lies on top of it in the same grid cell ---------- */
.pl-hero .hero__stage { margin-top: clamp(28px, 3.2vw, 40px); }
.stage__in { position: relative; z-index: 2; display: grid; }
.stage__in > .hero__cols, .stage__in > .run { grid-area: 1 / 1; }
.pl-hero .hero__stage canvas { transition: opacity .6s var(--ease); }
.pl-hero .hero__stage.is-run canvas { opacity: 0; }
.pl-hero .hero__stage.is-run .hero__cols { visibility: hidden; opacity: 0; pointer-events: none; position: absolute; left: 0; right: 0; top: 0; }
.pl-hero .hero__stage.is-run .hero__pause { display: none; }

.run {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 290px) minmax(0, 372px); gap: 0 40px;
  grid-template-areas: "steps plays card";
  min-height: 340px;
  animation: pl-fade .5s var(--ease) both;
}
.run[hidden] { display: none; }
.run.is-in { animation: none; }
.run__col { display: flex; flex-direction: column; min-width: 0; }
.run__col--steps { grid-area: steps; }
.run__col--plays { grid-area: plays; }
.run__col--card { grid-area: card; }
.run .hero__lab [data-domain] { color: var(--on-ink); text-transform: none; letter-spacing: .01em; }
@keyframes pl-fade { from { opacity: 0; } to { opacity: 1; } }

/* steps as a crumb trail: dots that grow down a dotted line, the last one orange when the plan is ready.
   Steps that wait keep their text at on-ink-muted (7.5:1 on the stage); only the mark is dimmed. */
.run__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; position: relative; }
.run__steps::before {
  content: ""; position: absolute; left: 6px; top: 11px; bottom: 12px; width: 1px;
  background-image: linear-gradient(rgba(244, 240, 232, .3) 50%, transparent 50%); background-size: 1px 5px;
}
.run__step { display: grid; grid-template-columns: 13px minmax(0, 1fr); gap: 0 14px; position: relative; }
.run__mark {
  position: relative; z-index: 1; justify-self: center;
  width: var(--s); height: var(--s); margin-top: calc(11px - var(--s) / 2); border-radius: 50%;
  background: #0d0b0a; box-shadow: inset 0 0 0 1.5px rgba(244, 240, 232, .32);
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.run__step.is-run .run__mark, .run__step.is-stop .run__mark { box-shadow: inset 0 0 0 1.5px var(--on-ink); }
.run__step.is-skip .run__mark { box-shadow: inset 0 0 0 1.5px var(--on-ink-muted); }
.run__step.is-done .run__mark { background: var(--on-ink); box-shadow: none; }
.run__step--ready.is-done .run__mark { background: var(--accent); box-shadow: 0 0 0 5px rgba(255, 95, 46, .16); }
.run__t { font-size: 15px; line-height: 22px; color: var(--on-ink-muted); transition: color .4s var(--ease); }
.run__step.is-run .run__t, .run__step.is-done .run__t, .run__step.is-stop .run__t { color: var(--on-ink); }
.run__s { margin-left: 10px; font-size: 13px; color: var(--on-ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.run__s:empty { display: none; }
.run__r { font-size: 13.5px; line-height: 1.45; color: var(--on-ink-muted); overflow-wrap: anywhere; }
.run__r:empty { display: none; }

/* the plays, checked one by one; the three we start with stay lit. A play we skip dims its dot and its name,
   never its verdict (the name stays above 4.5:1, the verdict at on-ink-muted) */
.run__plays { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.run__plays li {
  display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 0 11px;
  padding: 6px 12px; margin-left: -12px; border-radius: 9px; color: var(--on-ink-muted);
  transition: background-color .45s var(--ease), color .45s var(--ease);
}
.run__plays .dot { width: 8px; height: 8px; margin-top: 7px; opacity: .8; transition: box-shadow .45s var(--ease), opacity .45s var(--ease); }
.run__pn { font-size: 15px; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .45s var(--ease); }
.run__pv { grid-column: 2; font-size: 12.5px; line-height: 1.35; color: var(--on-ink-muted); opacity: 0; transition: opacity .35s var(--ease); }
.run__pv:empty { display: none; }
.run__plays li.is-checked .run__pv { opacity: 1; }
.run__plays li.is-pick { background: rgba(244, 240, 232, .07); color: var(--on-ink); }
.run__plays li.is-pick .dot { opacity: 1; box-shadow: 0 0 0 4px rgba(244, 240, 232, .1); }
.run__plays li.is-skip .dot { opacity: .35; }
.run__plays li.is-skip .run__pn { opacity: .78; }
.run__then { margin: 12px 0 0; font-size: 13px; line-height: 1.45; color: var(--on-ink-muted); opacity: 0; transition: opacity .4s var(--ease); }
.run__then.is-in { opacity: 1; }
.run__then b { color: var(--on-ink); font-weight: 600; }

/* a run that stops (not a fit, thin site, no plan): the lists stay quiet, the card is an empty dashed slot with one line */
.run.is-stopped .run__plays .dot { opacity: .35; }
.pl-hero .hero__stage .run.is-stopped .run__card { display: none; }
.run__empty { display: none; }
.run.is-stopped .run__empty {
  display: grid; place-items: center; min-height: 220px; padding: 24px; text-align: center;
  border: 1px dashed var(--ink-line-strong); border-radius: 16px;
  font-size: 14px; line-height: 1.5; color: var(--on-ink-muted);
}

/* the first reason to talk, in the stage's own card: it waits dimmed, then it is rewritten in place */
.pl-hero .hero__stage .run__card { opacity: .22; transition: opacity .6s var(--ease); }
.pl-hero .hero__stage .run__card.is-in { opacity: 1; }
.pl-hero .hero__stage .run__card .sigcard__title,
.pl-hero .hero__stage .run__card .sigcard__rows { transition: opacity .35s var(--ease), transform .35s var(--ease); }
.pl-hero .hero__stage .run__card .sigcard__type,
.pl-hero .hero__stage .run__card .sigcard__time,
.pl-hero .hero__stage .run__card .sigcard__foot { transition: opacity .35s var(--ease); }
/* the old example waits dimmed to a texture, then theirs is written in: type and time, the title wiped in, then each field */
.pl-hero .hero__stage .run__card.is-stale .sigcard__title,
.pl-hero .hero__stage .run__card.is-stale .sigcard__rows,
.pl-hero .hero__stage .run__card.is-stale .sigcard__foot { opacity: .14; transition: opacity .16s var(--ease); }
.pl-hero .hero__stage .run__card.is-stale:not(.has-top) .sigcard__top { opacity: .14; transition: opacity .16s var(--ease); }
.pl-hero .hero__stage .run__card.rw .sigcard__top { animation: pl-in .32s var(--ease) both; }
.pl-hero .hero__stage .run__card.rw .sigcard__title { animation: pl-wipe .52s var(--ease) .1s both; }
.pl-hero .hero__stage .run__card.rw .sigcard__row { animation: pl-in .32s var(--ease) both; animation-delay: calc(.64s + var(--i, 0) * 60ms); }
.pl-hero .hero__stage .run__card.rw .sigcard__foot { animation: pl-in .32s var(--ease) .88s both; }
@keyframes pl-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pl-in { from { opacity: .14; } to { opacity: 1; } }

/* ---------- The plan: one printed page with a letterhead rule ---------- */
.pl-out { padding: clamp(44px, 6vw, 80px) 0 clamp(28px, 4vw, 44px); scroll-margin-top: 96px; }
html:not(.no-js) .pl-out:not(.is-shown):not(.is-pending) { display: none; }
.pl-out.is-pending { min-height: 70vh; }
.pl-out.is-pending .pl-out__sheet { visibility: hidden; }
.no-js .pl-out__again { display: none; }
.pl-out__again { max-width: 1100px; margin: 26px auto 0; }
.pl-out.is-note .pl-out__again { max-width: 860px; }
.pl-out__again[hidden] { display: none; }
.pl-lab { margin: 8px auto 56px; max-width: 1100px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.pl-lab a { color: var(--text); }
.pl-out.is-note ~ .wrap .pl-lab { max-width: 860px; }
html:not(.no-js) .pl-out:not(.is-shown):not(.is-pending) ~ .wrap .pl-lab { max-width: none; margin-top: 36px; }
.pl-share-wait { max-width: 1100px; margin: 0 auto; font-size: 15px; color: var(--muted); }

/* the share view: the plan directly under the nav, no hero and no stage */
/* collapsed, not display:none, so the hero stage keeps its size and its canvas never measures zero */
.pl.is-share .pl-hero { height: 0; min-height: 0; padding: 0; margin: 0; overflow: hidden; visibility: hidden; }
.pl.is-share .pl-out { padding-top: clamp(120px, 12vw, 150px); }

/* overflow-wrap: one long unbroken token (a URL, a pasted string) breaks inside its column instead of widening the page */
.sheet { max-width: 1100px; margin: 0 auto; background: #fbf9f4; border: 1px solid var(--line); border-radius: 6px; overflow-wrap: anywhere; }
.sheet .pv.rv { transform: translateY(12px); }
.sheet .pv.rv.in, .no-js .sheet .pv.rv { transform: none; }

.sheet__head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px 22px; align-items: start;
  padding: clamp(24px, 3.4vw, 44px) clamp(20px, 3.6vw, 48px) 26px;
  border-bottom: 1px solid var(--text);
}
.sheet__mono { position: relative; width: 48px; height: 48px; margin-top: 26px; border-radius: 11px; display: grid; place-items: center; overflow: hidden; background: var(--ink); color: var(--on-ink); font: 700 23px/1 var(--sans); letter-spacing: -0.02em; }
.sheet__mono.has-fav { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.sheet__mono.has-fav .sheet__letter { display: none; }
.sheet__fav { width: 28px; height: 28px; object-fit: contain; }
.sheet__head--plain { grid-template-columns: minmax(0, 1fr); }
.sheet__for { font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.sheet__id { min-width: 0; }
.sheet__id h2 { font-size: clamp(34px, 3.6vw, 50px); line-height: 1; letter-spacing: -0.035em; overflow-wrap: anywhere; }
.sheet__one { margin-top: 10px; font-size: 16.5px; color: var(--muted); max-width: 52ch; }
.sheet__meta { display: grid; justify-items: end; gap: 8px; max-width: 36ch; margin-top: 4px; text-align: right; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.sheet__ex { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; line-height: 1; padding: 5px 8px 4px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.sheet__meta b { color: var(--text); font-weight: 500; overflow-wrap: anywhere; }
.linkbtn { padding: 0; border: 0; background: none; cursor: pointer; font: 600 13.5px/1.3 var(--sans); color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-align: inherit; }
.linkbtn:hover { text-decoration-thickness: 2px; }

/* the plan in one line, under the name */
.sheet__gist { grid-column: 2 / -1; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.6; }
.sheet__gist > span { display: block; max-width: 74ch; }
.sheet__gist b { font-weight: 600; white-space: nowrap; }
.sheet__gist .dot { display: inline-block; width: 8px; height: 8px; margin: 0 6px 1px 1px; vertical-align: middle; }

.fixbox { grid-column: 2 / -1; display: grid; gap: 8px; }
.fixbox[hidden], .mailbox[hidden], .sent[hidden] { display: none; }
.fixbox label, .mailbox label { font-size: 14px; font-weight: 600; }
.fixrow { display: flex; gap: 8px; max-width: 580px; }
.fixrow input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: 9px; border: 1.5px solid var(--line); background: #fff; font: 15.5px var(--sans); color: var(--text); }
.fixrow input:focus { outline: none; border-color: var(--text); }
.fixrow .btn { height: 40px; }

.row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 14px 40px; padding: 30px clamp(20px, 3.6vw, 48px); border-bottom: 1px solid var(--line); }
.row--wide { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.row__h { font-family: var(--sans); font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: -0.005em; }
.row__note { margin-top: 12px; font-size: 14.5px; line-height: 1.5; color: var(--muted); max-width: 72ch; }
.src { font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.src b, .src a { font-weight: 600; color: var(--text); margin-right: 5px; }
.src a, .reads__pages a, .named__pg a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--line); }
.src a:hover, .reads__pages a:hover, .named__pg a:hover { text-decoration-color: currentColor; }

/* what we read: three statements, each with its page and a short quote, then the pages we read */
.reads { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.reads li { display: grid; gap: 3px; }
.reads p:first-child { font-size: 16.5px; line-height: 1.5; max-width: 66ch; }
.reads__pages { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.reads__pages a { color: var(--muted); }
.reads__pages a:hover { color: var(--text); }

/* customers you name: grouped by the page they were found on, the page words link to that page */
.named { margin: 0; display: grid; gap: 10px; }
.named > div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 4px 20px; align-items: baseline; }
.named dt { font-size: 13.5px; color: var(--muted); }
.named__pg a { color: var(--text); font-weight: 600; }
.named dd { margin: 0; font-size: 16.5px; line-height: 1.5; font-weight: 500; }
/* names up to 30 characters never split over two lines (24 on phones); longer legal names wrap like text */
.named dd .nm { white-space: nowrap; }

/* the market: short labelled lines on the left, how we would map it on the right */
.mkt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 56px; }
.mkt__col { display: grid; gap: 14px; align-content: start; }
.mkt__col--map { padding-left: 32px; border-left: 1px solid var(--line); }
.facts { margin: 0; display: grid; gap: 9px; }
.facts > div { display: grid; grid-template-columns: 133px minmax(0, 1fr); gap: 2px 16px; align-items: baseline; }
.facts dt { font-size: 13.5px; color: var(--muted); }
.facts dd { margin: 0; font-size: 16.5px; line-height: 1.45; }
.mkt .row__note { margin-top: 2px; }
.map__shape { font-size: 15px; line-height: 1.5; color: var(--muted); }
.map__shape b { color: var(--text); font-weight: 600; }
.map__route { font-size: 16.5px; line-height: 1.5; }
.map__src { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.map__src li { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font-size: 14px; line-height: 1.3; }

/* three triggers side by side, split by hairlines, not boxed */
.trigs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); }
.trig { display: flex; flex-direction: column; gap: 12px; padding: 2px 28px 0; border-left: 1px solid var(--line); min-width: 0; }
@supports (grid-template-rows: subgrid) {
  .trig { display: grid; grid-row: span 4; grid-template-rows: subgrid; gap: 12px; align-content: start; }
}
.trig:first-child { padding-left: 0; border-left: 0; }
.trig:last-child { padding-right: 0; }
.trig__when { font-size: 13px; color: var(--muted); }
.trig__name { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 650; font-size: 25px; line-height: 1.1; letter-spacing: -0.02em; }
.trig__name .dot { flex: none; width: 10px; height: 10px; }
.trig__facts { margin: 0; display: grid; gap: 3px; align-content: start; }
.trig__facts dt { margin-top: 9px; font-size: 13px; font-weight: 600; }
.trig__facts dt:first-child { margin-top: 0; }
.trig__facts dd { margin: 0; font-size: 15px; line-height: 1.5; }
.trig__facts dd.trig__spot { font-size: 14px; color: var(--muted); }
.trig__facts .src { display: block; margin-top: 6px; }
.trig__msg { margin: 6px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.trig__msg figcaption { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.trig__msg blockquote { margin: 0; padding-left: 14px; border-left: 2px solid var(--text); font-size: 15.5px; line-height: 1.55; }
.gloss { margin-top: 8px; padding-left: 16px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.gloss summary { display: inline-flex; align-items: center; min-height: 24px; cursor: pointer; list-style: none; color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.gloss summary::-webkit-details-marker { display: none; }
.gloss summary::marker { content: ""; }
.gloss summary:hover { text-decoration-thickness: 2px; }
.gloss[open] summary { margin-bottom: 4px; }
.gloss p { margin: 0; }
.trigs__skip { display: flex; gap: 10px; align-items: baseline; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.trigs__skip b { color: var(--text); font-weight: 600; }
.ring { flex: none; display: inline-block; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--muted); transform: translateY(-1px); }
.row__mid { margin-top: 4px; font-size: 15px; }

/* then, once those run */
.funnel { display: grid; gap: 8px; max-width: 66ch; }
.funnel .trig__name { font-size: 23px; }
.funnel p { font-size: 15.5px; line-height: 1.5; color: var(--muted); }

/* the first 90 days: the same crumb trail, ending in the orange dot */
.days { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px 48px; }
.trail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
.trail li { position: relative; display: grid; gap: 6px; align-content: start; padding-top: 34px; }
.trail__dot { position: absolute; left: 0; top: calc(9px - var(--s) / 2); width: var(--s); height: var(--s); border-radius: 50%; background: var(--text); }
.trail__last .trail__dot { background: var(--accent); }
.trail li::before {
  content: ""; position: absolute; top: 8.5px; left: calc(var(--s) + 8px); right: -20px; height: 1px;
  background-image: linear-gradient(90deg, rgba(22, 18, 15, .42) 50%, transparent 50%); background-size: 5px 1px;
}
.trail li:last-child::before { display: none; }
.trail h4 { font-size: 15px; font-weight: 600; }
.trail p { font-size: 14.5px; line-height: 1.5; color: var(--muted); max-width: 32ch; }
.needs { display: grid; gap: 8px; align-content: start; padding-left: 28px; border-left: 1px solid var(--line); }
.needs h4 { font-size: 15px; font-weight: 600; }
.needs h4 + p { margin-bottom: 8px; }
.needs p { font-size: 14.5px; line-height: 1.5; }
.needs .needs__terms { color: var(--muted); font-size: 13.5px; }

/* proof: one matched use case, then the logos and the Clay line */
.proofx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 56px; }
.proofx--solo { grid-template-columns: minmax(0, 1fr); }
.proofx--solo .cred { padding-left: 0; border-left: 0; max-width: 560px; }
/* a case without logos: the Clay line sits under the case, after a hairline */
.proofx--solo.proofx--case .cred { padding-top: 18px; border-top: 1px solid var(--line); }
.case { display: grid; gap: 10px; align-content: start; justify-items: start; color: inherit; text-decoration: none; }
.case__logo { height: 28px; width: auto; margin-bottom: 4px; filter: brightness(0); opacity: .88; }
.case__head { font-family: var(--serif); font-weight: 650; font-size: 24px; line-height: 1.16; letter-spacing: -0.02em; text-wrap: balance; max-width: 32ch; }
.case__fig { font-size: 15px; }
.case__fig b { font-family: var(--serif); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; margin-right: 4px; }
.case__on { font-size: 13.5px; line-height: 1.45; color: var(--muted); max-width: 46ch; }
.case__more { display: inline-flex; gap: 6px; margin-top: 4px; padding-bottom: 2px; border-bottom: 1.5px solid currentColor; font-size: 14.5px; font-weight: 600; }
.case__more span { transition: transform .25s var(--ease); }
.case:hover .case__more span { transform: translateX(3px); }
.cred { display: grid; gap: 16px; align-content: start; padding-left: 32px; border-left: 1px solid var(--line); min-width: 0; }
.cred__lab { font-size: 13px; font-weight: 600; }
/* a fixed grid that never leaves one logo alone on a row: 4 by 2 wide, 3 columns at 1001 to 1180px, 4 when stacked, 2 by 4 on phones */
.cred__logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: 22px 18px; }
.cred__logos li { min-width: 0; display: flex; align-items: center; }
.cred__logos img { display: block; max-width: 100%; height: auto; filter: brightness(0); opacity: .72; }
.cred__clay { display: flex; align-items: flex-start; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.cred__clay img { flex: none; margin-top: -1px; }
.cred__clay:first-child { padding-top: 0; border-top: 0; }
.cred__clay b { color: var(--text); font-weight: 600; }
@media (min-width: 1001px) and (max-width: 1180px) { .cred__logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 24px; } }
@media (max-width: 1000px) {
  .proofx { grid-template-columns: minmax(0, 1fr); }
  .cred { padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .proofx--solo .cred { padding-top: 0; border-top: 0; }
  .cred__logos { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 600px; }
}

.row__lead { font-size: 17px; max-width: 52ch; }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 16px; }
.copybtn { align-self: center; padding: 0 0 2px; margin-top: 3px; background: none; border-top: 0; border-left: 0; border-right: 0; border-radius: 0; cursor: pointer; font: 600 15.5px/1 var(--sans); letter-spacing: -0.005em; color: var(--text); }
.mailbox { margin-top: 18px; display: grid; gap: 8px; max-width: 580px; }
.mailbox__promise { font-size: 13.5px; color: var(--muted); }
.mailbox__promise a { color: var(--text); }
.sent { font-size: 14px; color: var(--text); }
.sheet__foot { display: grid; gap: 8px; padding: 22px clamp(20px, 3.6vw, 48px) 28px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.sheet__foot p { max-width: 96ch; }
.sheet__foot b { color: var(--text); font-weight: 600; }

/* not a fit, thin site, no plan, a gone share link: the same sheet, one short note and one line to answer */
.sheet--note { max-width: 860px; }
.note { display: grid; gap: 12px; padding: 30px clamp(20px, 3.6vw, 48px) 34px; }
.note__h { font-size: clamp(24px, 2.4vw, 32px); }
.note p { font-size: 16.5px; line-height: 1.55; max-width: 62ch; }
.note__form { display: grid; gap: 8px; margin-top: 8px; max-width: 640px; }
.note__form label { font-size: 14px; font-weight: 600; }
.note__row { display: flex; gap: 8px; }
.note .ctas { margin-top: 6px; }

/* ---------- Up to 1239px: the bar on two rows, who you are on top (the website, the first name over the button
   column), the two choices and the button below ---------- */
@media (max-width: 1239px) {
  .bar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; row-gap: 0; }
  .bar__seg--site { grid-column: 1 / 3; }
  .bar__seg--name + .bar__seg::before { display: none; }
  .bar__seg--site::after, .bar__seg--name::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 1px; background: var(--line); transition: opacity .2s var(--ease); }
  .bar__seg--site:hover::after, .bar__seg--site:focus-within::after, .bar__seg--site.is-bad::after,
  .bar__seg--name:hover::after, .bar__seg--name:focus-within::after, .bar__seg--name.is-bad::after { opacity: 0; }
  .bar__end { padding-top: var(--pad); }
}
/* 640 to 899px: two columns, so each choice gets the room for its longest option ("Europe and North America",
   "Your buyers' language"), and the button on its own row below. The columns are weighted to those two options,
   which leaves about 24px to spare on both at 640px. Here the line under row one belongs to the part below it,
   so it goes when that part, or the part above it, is pointed at, in use or in error. Tab order stays the reading order. */
@media (min-width: 640px) and (max-width: 899px) {
  .bar { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .bar__seg--site { grid-column: auto; }
  .bar__seg--site::after, .bar__seg--name::after { display: none; }
  .bar__seg--sel::after { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 1px; background: var(--line); transition: opacity .2s var(--ease); }
  .bar__seg--sel:hover::after, .bar__seg--sel:focus-within::after,
  .bar__seg:hover + .bar__seg + .bar__seg::after, .bar__seg:focus-within + .bar__seg + .bar__seg::after,
  .bar__seg.is-bad + .bar__seg + .bar__seg::after { opacity: 0; }
  .bar__end { grid-column: 1 / -1; padding: var(--pad) 0 0; }
  .bar__go { width: 100%; height: 58px; justify-content: center; }
}
@media (max-width: 1119px) {
  /* the run on two columns: the steps left, the trigger list with the card under it on the right */
  .run { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); grid-template-areas: "steps plays" "steps card"; gap: 0 36px; min-height: 0; }
  .run__col--card { margin-top: 24px; }
}
@media (max-width: 959px) {
  .run { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); grid-template-areas: "steps plays"; gap: 0 32px; }
  .run__col--card { display: none; }
}
/* narrow tablets: a slimmer trigger list, so the steps and their receipts keep room to read */
@media (min-width: 640px) and (max-width: 759px) {
  .run { grid-template-columns: minmax(0, 1fr) minmax(0, 240px); gap: 0 24px; }
  /* the trigger list label takes two lines here: tighter lines, first line level with the steps label */
  .run__col--plays .hero__lab { padding-top: 5px; line-height: 18px; }
}
@media (max-width: 900px) {
  .sheet__head { grid-template-columns: auto minmax(0, 1fr); }
  .sheet__mono { margin-top: 24px; }
  .sheet__meta { grid-column: 1 / -1; justify-items: start; text-align: left; max-width: none; margin-top: 0; }
  .sheet__gist, .fixbox { grid-column: 1 / -1; }
  .row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .mkt { grid-template-columns: minmax(0, 1fr); }
  .mkt__col--map { padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .trigs { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .trig, .trig:first-child { display: flex; grid-row: auto; }
  .trig { padding: 22px 0 0; margin-top: 22px; border-left: 0; border-top: 1px solid var(--line); }
  .trig:first-child { padding-top: 0; margin-top: 2px; border-top: 0; }
  .days { grid-template-columns: minmax(0, 1fr); }
  .needs { padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------- Phone: the bar stacks, one part per row, the button full width at the bottom ---------- */
@media (max-width: 639px) {
  .pl-hero { padding-top: 112px; }
  .pl-top { gap: 18px; }
  .pl-hero h1 { font-size: clamp(38px, 10.6vw, 46px); line-height: .98; }
  .pl-hero .lede { font-size: 17px; }
  .bar { grid-template-columns: minmax(0, 1fr); margin-top: 22px; border-radius: 14px; }
  .bar__seg--site { grid-column: auto; }
  .bar__seg { height: 62px; }
  .bar__seg + .bar__seg::before { display: none; }
  .bar__seg + .bar__seg::after,
  .bar__seg--site::after { content: ""; position: absolute; left: 14px; right: 14px; height: 1px; background: var(--line); }
  .bar__seg + .bar__seg::after { top: 0; bottom: auto; }
  .bar__seg--site::after { display: none; }
  .bar__seg:focus-within::after, .bar__seg:focus-within + .bar__seg::after,
  .bar__seg:hover::after, .bar__seg:hover + .bar__seg::after,
  .bar__seg.is-bad::after, .bar__seg.is-bad + .bar__seg::after { opacity: 0; }
  .bar__lab { left: 14px; top: 11px; }
  .bar__in { padding: 28px 14px 8px; font-size: 18px; }
  select.bar__in { background-position: right 16px top 37px; }
  .bar__end { padding: var(--pad) 0 0; }
  .bar__go { width: 100%; height: 54px; justify-content: center; }
  .bar__under { flex-direction: column; align-items: flex-start; gap: 12px; }
  .bar__fine { font-size: 13.5px; }
  .busy__form, .note__row, .fixrow { flex-direction: column; }
  .busy__form input, .note__row input, .fixrow input { flex: none; width: 100%; }
  .busy__form .btn, .note__row .btn, .fixrow .btn { align-self: flex-start; }
  .run.is-stopped .run__col--plays { display: none; }
  .run { grid-template-columns: minmax(0, 1fr); grid-template-areas: "steps" "plays"; gap: 20px; }
  /* the plays as chips, like the home stage on a phone: the three picks stay lit, the reasons wait for the plan */
  .run__plays { display: flex; flex-wrap: wrap; gap: 6px; }
  .run__plays li { display: inline-flex; align-items: center; gap: 8px; height: 32px; margin: 0; padding: 0 11px; border: 1px solid var(--ink-line); border-radius: 999px; }
  .run__plays .dot { width: 7px; height: 7px; margin-top: 0; }
  .run__pn { font-size: 13.5px; line-height: 1; }
  .run__pv { display: none; }
  .run__plays li.is-pick { border-color: rgba(244, 240, 232, .28); }
  .run__plays li.is-pick .dot { box-shadow: none; }
  .sheet__id h2 { font-size: 34px; }
  .sheet__mono { width: 40px; height: 40px; margin-top: 22px; font-size: 19px; border-radius: 9px; }
  .sheet__fav { width: 24px; height: 24px; }
  .named > div, .facts > div { grid-template-columns: minmax(0, 1fr); }
  .named dd .nm--m { white-space: normal; }
  .trail { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .trail li { padding: 0 0 0 30px; }
  .trail__dot { left: calc(7px - var(--s) / 2); top: calc(11px - var(--s) / 2); }
  .trail li::before {
    top: calc(11px + var(--s) / 2 + 6px); bottom: -24px; left: 7px; right: auto; width: 1px; height: auto;
    background-image: linear-gradient(rgba(22, 18, 15, .42) 50%, transparent 50%); background-size: 1px 5px;
  }
  .cred__logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
  .pl.is-share .pl-out { padding-top: 128px; }
}
@media (pointer: coarse) { .gloss summary { min-height: 40px; } .linkbtn { min-height: 32px; } }

/* ---------- Reduced motion: same order, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  .run { animation: none; }
  .run__t, .run__pn, .run__plays li, .run__plays .dot, .run__pv, .run__then, .run__mark,
  .pl-hero .hero__stage .run__card, .pl-hero .hero__stage .run__card *, .pl-hero .hero__stage canvas,
  .bar__seg, .bar__seg + .bar__seg::before, .bar__seg::after { transition: none; }
  .pl-hero .hero__stage .run__card.rw .sigcard__top, .pl-hero .hero__stage .run__card.rw .sigcard__title,
  .pl-hero .hero__stage .run__card.rw .sigcard__row, .pl-hero .hero__stage .run__card.rw .sigcard__foot { animation: none; }
  /* the old example keeps waiting dimmed (.14): only the transitions go, so theirs swaps in at once */
  .pl-hero .hero__stage .run__card.is-stale:not(.has-top) .sigcard__top, .pl-hero .hero__stage .run__card.is-stale .sigcard__title,
  .pl-hero .hero__stage .run__card.is-stale .sigcard__rows, .pl-hero .hero__stage .run__card.is-stale .sigcard__foot { transition: none; }
  .sheet .pv.rv { transform: none; }
  .bar__go:hover, .btn:hover .arr, .textlink:hover .arr, .case:hover .case__more span { transform: none; }
}