/* The two ways into /plan/ outside the page itself (PLAN=1 and LAB=1 builds only, linked from their partials):
   the home band under the use cases (src/partials/home-plan.html) and the strip at the top of the footer card on every
   other page (src/partials/foot-plan.html). Both are plain GET forms to /plan/?domain=<site> with two fields, the
   website and the first name (assets/js/plan-entry.js keeps the name out of the link); /plan/ starts the run.
   No new colours: paper-2 for the band, the paper footer card, the field surface of the /plan/ bar, orange only as
   the message dot. The band's field copies the /plan/ labelled bar (plan.css .bar), renamed, so no page but /plan/
   loads plan.css. */

.planband .nw, .planstrip .nw { white-space: nowrap; }

/* ---------- The line under a field that says what is wrong (the same line as under the /plan/ bar) ---------- */
.planmsg { display: flex; align-items: baseline; gap: 10px; margin: 10px 0 0 4px; font-size: 14.5px; line-height: 1.45; color: var(--text); font-weight: 500; }
.planmsg::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); transform: translateY(-1px); }
.planmsg:empty { display: none; }

/* ---------- The home band, under the use cases ---------- */
.planband { background: var(--paper-2); padding: clamp(56px, 6.4vw, 84px) 0; }
.planband__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 28px clamp(40px, 6vw, 72px); align-items: center; }
.planband__copy { display: grid; gap: 16px; align-content: end; }
.planband__h { font-size: clamp(32px, 3.3vw, 46px); line-height: 1.02; letter-spacing: -0.032em; max-width: 15em; }
.planband__p { font-size: 17px; line-height: 1.5; color: var(--muted); max-width: 52ch; text-wrap: pretty; }
.planband__fine { margin: 12px 4px 0; font-size: 14px; line-height: 1.5; color: var(--muted); }

/* what comes out, quietly: the three plays of an example plan, as the play chips the site uses elsewhere */
.planband__eg { display: grid; gap: 10px; margin-top: 6px; }
.planband__eglab { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.3; font-weight: 500; color: var(--muted); }
.planband__ex { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; line-height: 1; padding: 4px 7px 3px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.planband__plays { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.planband__plays li { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font-size: 14px; line-height: 1.2; color: var(--text); white-space: nowrap; }

/* the labelled bar with two parts (the website, the first name): the label on top, the value below, the button
   attached at the end */
.planbar {
  --pad: 5px;
  display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr) auto;
  padding: var(--pad); background: #fbf9f4; border: 1.5px solid var(--text); border-radius: 16px;
}
.planbar__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 the two parts, hidden next to the part you are in or pointing at (as on the /plan/ bar) */
.planbar__seg + .planbar__seg::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--line);
  transition: opacity .2s var(--ease);
}
.planbar__seg:hover::before, .planbar__seg:hover + .planbar__seg::before,
.planbar__seg:focus-within::before, .planbar__seg:focus-within + .planbar__seg::before,
.planbar__seg.is-bad::before, .planbar__seg.is-bad + .planbar__seg::before { opacity: 0; }
.planbar__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;
}
.planbar__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;
}
.planbar__in::placeholder { color: var(--muted); font-weight: 400; opacity: 1; }
.planbar__seg:hover { background: rgba(22, 18, 15, .04); }
.planbar__seg:focus-within { background: #fff; box-shadow: inset 0 0 0 2px var(--text); }
.planbar__seg.is-bad, .planbar__seg.is-bad:focus-within { background: #fff; box-shadow: inset 0 0 0 2px var(--accent-ink); }
.planbar__end { display: flex; padding-left: var(--pad); }
.planbar__go { height: 66px; padding: 0 26px; border-radius: 11px; font-size: 16px; gap: 12px; }
.planbar__go:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

/* ---------- The footer strip: the first row of the paper footer card, above the link columns ---------- */
.planstrip {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 22px 56px; align-items: start;
  margin: 0 0 clamp(28px, 3.4vw, 44px); padding: 0 0 clamp(28px, 3.4vw, 44px); border-bottom: 1px solid var(--line);
}
.planstrip__k { margin: 0 0 12px; font: 500 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.planstrip__p { margin: 0; }
.planstrip__what { display: block; max-width: 30em; font: 650 clamp(20px, 1.75vw, 24px)/1.22 var(--serif); letter-spacing: -0.018em; color: var(--text); text-wrap: pretty; }
.planstrip__how { display: block; margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.planstrip__form { display: grid; margin: 0; min-width: 0; }
/* the two fields, each with its label on top, and the button level with the fields */
.planstrip__row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 8px; align-items: end; min-width: 0; }
.planstrip__f { display: grid; min-width: 0; }
.planstrip__lab { margin: 0 0 8px 2px; font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: -0.003em; color: var(--text); }
/* the field: a plain box with a visible edge (3.4:1 on paper), ink when you point at it or type in it */
.planstrip__in {
  width: 100%; min-width: 0; height: 48px; margin: 0; padding: 0 14px;
  border: 1.5px solid rgba(22, 18, 15, .5); border-radius: 10px; background: #fbf9f4;
  font: 500 16px/1 var(--sans); letter-spacing: -0.005em; color: var(--text); outline: none; text-overflow: ellipsis;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.planstrip__in::placeholder { color: var(--muted); font-weight: 400; opacity: 1; }
.planstrip__in:hover { border-color: var(--text); }
.planstrip__in:focus { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); background: #fff; }
.planstrip__in.is-bad { border-color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-ink); background: #fff; }
.planstrip__go { height: 48px; padding: 0 20px; justify-content: center; }
.planstrip__go:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.planstrip .planmsg { margin: 10px 0 0 2px; font-size: 14px; }
.planstrip__fine { margin: 10px 0 0 2px; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* ---------- Tablet: from 1199px the band stacks, so the two parts of its bar keep room for yourcompany.com ---------- */
@media (max-width: 1199px) {
  .planband__in { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 26px; }
  .planband__ask { max-width: 640px; }
}
/* the strip stacks from 1099px: its form needs about 560px for the two fields and the button */
@media (max-width: 1099px) {
  .planstrip { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .planstrip__form { max-width: 560px; }
}

/* ---------- Phone ---------- */
@media (max-width: 639px) {
  .planband__h { font-size: clamp(30px, 8.6vw, 36px); }
  .planband__p { font-size: 16.5px; }
  .planbar { grid-template-columns: minmax(0, 1fr); border-radius: 14px; }
  .planbar__seg { height: 62px; }
  /* stacked: the hairline runs between the rows */
  .planbar__seg + .planbar__seg::before { left: 14px; right: 14px; top: 0; bottom: auto; width: auto; height: 1px; }
  .planbar__lab { left: 14px; top: 11px; }
  .planbar__in { padding: 28px 14px 8px; font-size: 18px; }
  .planbar__end { padding: var(--pad) 0 0; }
  .planbar__go { width: 100%; height: 54px; justify-content: center; }
  .planband__fine { font-size: 13.5px; }
}
@media (max-width: 520px) {
  .planstrip__row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .planstrip__go { width: 100%; height: 50px; }
  .planband__plays li { font-size: 13.5px; padding: 0 11px; }
}

/* ---------- Reduced motion: nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  .planbar__seg, .planbar__seg::before, .planstrip__in { transition: none; }
}