/* page-pilot.css: Plant Toolbox Getting started (wrapper #p-start, /start).
   First generated by .plans/site-overhaul/tools/port.py from ptb-site-overhaul-src/css/p-start.css; rebuilt around
   the owner brief of 2026-10-26. Production state: P1 light ("Light steel") only. Loaded after site.css. */

/* ==========================================================================
   Getting started (#p-start). Every selector starts with #p-start. In order, following the hero's flow (owner ask
   2026-10-26: getting funded, pricing, deployment):
     1. Hero (01-hero.php, header.page-header.st-hero, --bg; R2·21, R2·22, 2026-10-31): a short text hero, the h1 and
        lead, then the page in three steps as a static flow (ol.st-flow), not links.
     2. Getting funded (02-roi.php, .s-start#pg-roi, --bg): the H2 "Getting funded.", start on one line + the ROI
        estimate, a form that start.js recalculates; the CTA is the discovery call. Step one of the flow.
     3. Pricing (03-pricing.php, #pg-pricing, --surface): two-column ledger + included list, no numbers. Step two.
     4. Deployment (04-deployment.php, .pg-deploy#pg-roadmap, --bg): one vertical timeline, eight nodes in two
        phases; side-by-side steps share one unheaded panel; go-live is the tinted row. Step three.
     5. Closing band (05-next.php, #pg-next): the site's closing band (Main::closingBand(), site.css §24a;
        2026-10-28), so no page rules.
   "Start with one line" (#pg-first-line) is parked, not deleted: content/views/pilot/.parking-lot/ (owner ask
   2026-10-26), with its CSS. No CSS state machines. Phone: everything stacks, nothing wider than the column.
   ========================================================================== */

/* 1 · Hero ----------------------------------------------------------------------------------------------------
   A short hero, a little less tall than the standard (R2·21): 32/32 on a phone, 64/48 from 768 (the standard
   .page-header is 48/48 and 96/64), and no .page-header::before hairline under it (R2·C12, as on /contact and /ai).
   Its last row, ol.st-flow (R2·22, R2·C13), is the page in three steps, a static diagram: no links, no hover, no
   numerals. Each node is a 48px outlined circle (40px below 720), 1px --line-strong on --surface, holding a 22px
   stroke icon in --teal-ink (line-schematic style, R1·C15: site.css svg[data-ptb-icon]). A 1px --line-strong
   connector runs from each node's right edge, at its centre, and stops --s-2 short of the next node in a 6px chevron
   (as the plan's mockup draws it). Phone
   (below 720): still three across (gap --s-3, 88px columns at 320), 14px titles that may wrap, one-liners hidden, so
   the short hero stays short. */
#p-start .st-hero { padding-top: var(--s-6); padding-bottom: var(--s-6); }
@media (min-width: 768px) { #p-start .st-hero { padding-top: var(--s-8); padding-bottom: var(--s-7); } }
#p-start .st-hero::before { display: none; }
#p-start .st-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); max-width: 56rem; margin-top: var(--s-6); }
#p-start .st-flow-step { position: relative; display: grid; justify-items: start; align-content: start; min-width: 0; }
#p-start .st-flow-node {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--teal-ink);
}
#p-start .st-flow-ico { width: 22px; height: 22px; }
#p-start .st-flow-t { margin-top: var(--s-3); font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--ink); }
#p-start .st-flow-d { margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
#p-start .st-flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 24px;
  left: calc(48px + var(--s-2));
  right: calc(var(--s-2) - var(--s-5));
  border-top: 1px solid var(--line-strong);
}
#p-start .st-flow-step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 24px;
  right: calc(var(--s-2) - var(--s-5));
  width: 6px;
  height: 6px;
  border: solid var(--line-strong);
  border-width: 1.5px 1.5px 0 0;
  transform: translate(-1px, -50%) rotate(45deg);
}
@media (max-width: 719px) {
  #p-start .st-flow { gap: var(--s-3); }
  #p-start .st-flow-node { width: 40px; height: 40px; }
  #p-start .st-flow-ico { width: 18px; height: 18px; }
  #p-start .st-flow-t { margin-top: var(--s-2); font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
  #p-start .st-flow-d { display: none; }
  #p-start .st-flow-step:not(:last-child)::after { top: 20px; left: calc(40px + var(--s-2)); right: calc(var(--s-2) - var(--s-3)); }
  #p-start .st-flow-step:not(:last-child)::before { top: 20px; right: calc(var(--s-2) - var(--s-3)); }
}

/* 2 · Getting funded: start on one line + ROI (#pg-roi, owner brief 2026-10-26; moved here from home row 13 the same
   day). Scoped to .s-start. On the --bg ground of the hero above it (no hairline between them), above Pricing
   (--surface), so the estimate card is a white --surface panel and its working panel takes --bg as an inset tone.
   Two halves, 50/50 from 1024 and stacked below it. Left: the head (the H2 "Getting funded." and its lead, R2·21),
   the path in four steps on a static 2px accent rail (D24: drawn full, no scroll fill), and the CTA. Right: the ROI
   estimate, a real <form> built
   from site.css .field / .field-label / .field-hint / .input, with the unit in the label and a "$" inside the money
   fields. Its results are <output>s the PHP fills with the defaults; start.js recalculates them. The working is the
   D05 mono formula line, collapsed under a "Show the working" toggle. Whenever the halves sit side by side (from
   1024, at any screen height) the left half holds under the header while the taller estimate scrolls past.
   start.js sets --st-intro-h to the left half's height, so
   on a screen too short for all of it the hold point rises until its CTA sits just above the bottom edge (the head
   slides under the header instead); without script it holds under the header.
   ========================================================================== */

/* The first section under the short hero: 48px on top, 64px from 768 (R2·21; was 32 while it was the hero), and no
   top hairline, since the hero draws none either. */
#p-start .s-start { padding-top: var(--s-7); }
@media (min-width: 768px) { #p-start .s-start { padding-top: var(--s-8); } }
#p-start .s-start::before { display: none; }

/* Split ------------------------------------------------------------------------------------------- */
#p-start .s-start .st-split { display: grid; gap: var(--s-7); }
@media (min-width: 1024px) {
  #p-start .s-start .st-split { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; column-gap: var(--s-8); }
  #p-start .s-start .st-intro {
    position: sticky;
    top: min(calc(var(--header-h) + var(--s-6)), calc(100vh - var(--st-intro-h, 0px) - var(--s-6)));
  }
}

/* Left: head, path, pricing, CTA ----------------------------------------------------------------- */
#p-start .s-start .st-head { margin-bottom: var(--s-6); }
/* The small sans key used in the estimate ("Estimated value a year"). */
#p-start .s-start .st-k { font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--ink-3); }

/* The four steps: numeral and title share a line (numbered-tab grammar, base .stage-num), the sentence sits under
   the title. The rail is the old track's left rail, static and full. */
#p-start .s-start .st-steps { position: relative; display: grid; gap: var(--s-4); padding-left: var(--s-5); }
#p-start .s-start .st-steps::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 2px;
  background: var(--teal);
}
#p-start .s-start .st-step { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: var(--s-2); }
#p-start .s-start .st-step h3 { font-size: 17px; font-weight: 600; line-height: 1.4; letter-spacing: 0; }
#p-start .s-start .st-step p { grid-column: 2; font-size: 15px; line-height: 1.55; color: var(--ink-2); }

/* The CTAs under the steps. The line that sat between them (p.st-try) is the head's lead since R2·21. Pricing itself
   is the second CTA, down to #pg-pricing, the next section. */
#p-start .s-start .st-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); margin-top: var(--s-6); }
@media (max-width: 719px) { #p-start .s-start .st-cta .btn { width: 100%; } }

/* Right: the estimate card ----------------------------------------------------------------------- */
#p-start .s-start .st-roi {
  min-width: 0;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}
@media (max-width: 719px) { #p-start .s-start .st-roi { padding: var(--s-4); } }
/* The estimate's title is an h3 under "Getting funded.", at the h3 size. */
#p-start .s-start .st-roi > h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--track-h3); }
#p-start .s-start .st-roi-intro { margin-top: var(--s-3); font-size: 15px; line-height: 1.55; color: var(--ink-2); }

/* Each driver is a fieldset under a hairline. The legend floats so it lays out as an ordinary block inside the
   fieldset (no notch in the border, normal wrapping); the line after it clears it. */
#p-start .s-start .st-group { margin-top: var(--s-5); padding: var(--s-5) 0 0; border-top: 1px solid var(--hairline); }
#p-start .s-start .st-group legend {
  float: left;
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  width: 100%;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
#p-start .s-start .st-group legend + * { clear: both; }
#p-start .s-start .st-group-d { padding-top: 2px; font-size: 14px; line-height: 1.5; color: var(--ink-3); }

/* Fields: two columns from 360 (one on the narrowest phones), so the estimate stays short. Labels can run to two
   lines; each field packs to the bottom of its row so the inputs in a row still line up. */
#p-start .s-start .st-fields { display: grid; gap: var(--s-4); margin-top: var(--s-4); }
@media (min-width: 360px) { #p-start .s-start .st-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#p-start .s-start .st-f { align-content: end; gap: 6px; }
/* The unit rides in the label, "(h a week)", lighter than the name; the input spans its column. */
#p-start .s-start .st-unit { font-weight: 400; color: var(--ink-3); white-space: nowrap; }
#p-start .s-start .st-in { position: relative; display: block; }
#p-start .s-start .st-in .input { font-variant-numeric: tabular-nums; }
#p-start .s-start .st-in--usd .input { padding-left: 26px; }
#p-start .s-start .st-pre {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  font-size: 16px;
  line-height: 1;
  color: var(--ink-3);
  pointer-events: none;
}
#p-start .s-start .st-hints { display: grid; gap: var(--s-2); margin-top: var(--s-3); }

/* The working, collapsed by default (owner ask 2026-10-26): a native details whose summary is a small link-coloured
   toggle, "Show the working" / "Hide the working" with a chevron that turns over when open. Open, it shows the formula
   in words, then each step in numbers on the mono formula line (D05), on a surface panel. */
#p-start .s-start .st-work { margin-top: var(--s-3); }
#p-start .s-start .st-work-sum {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  list-style: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--link-ink, var(--teal-ink));
  transition: color var(--t-fast) ease-out;
}
#p-start .s-start .st-work-sum::-webkit-details-marker { display: none; }
#p-start .s-start .st-work-sum:hover { color: var(--link-hover); }
#p-start .s-start .st-work-sum .icon { width: 14px; height: 14px; transition: transform var(--t-fast) ease-out; }
#p-start .s-start .st-work[open] .st-work-sum .icon { transform: rotate(180deg); }
#p-start .s-start .st-work-shut,
#p-start .s-start .st-work[open] .st-work-open { display: none; }
#p-start .s-start .st-work[open] .st-work-shut { display: inline; }
#p-start .s-start .st-work-body {
  display: grid;
  gap: var(--s-1);
  margin-top: var(--s-1);
  padding: var(--s-3) var(--s-4);
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--r-control);
}
#p-start .s-start .st-work-words { margin-bottom: var(--s-1); font-size: 14px; line-height: 1.5; color: var(--ink-2); }
#p-start .s-start .st-work .mono { color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* Results: the driver's figures under its working, then the total under a 2px ink rule. */
#p-start .s-start .st-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-5);
  margin-top: var(--s-3);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}
#p-start .s-start .st-roi output { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
#p-start .s-start .st-sub output { font-size: 20px; }
#p-start .s-start .st-total { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 2px solid var(--ink); }
#p-start .s-start .st-total-v { display: grid; gap: 2px; }
#p-start .s-start .st-total-v output { font-size: clamp(1.875rem, 1.5rem + 1vw, 2.5rem); font-weight: 700; line-height: 1.1; letter-spacing: var(--track-h2); overflow-wrap: anywhere; }
#p-start .s-start .st-total-by { margin-top: var(--s-1); font-size: 14px; line-height: 1.5; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* The optional quote and its payback (hidden until a quote is typed; there are no list prices to fill it with). */
#p-start .s-start .st-quote { display: grid; gap: var(--s-2); max-width: 32em; margin-top: var(--s-5); }
#p-start .s-start .st-quote .st-f { max-width: 18rem; }
#p-start .s-start .st-payback { margin-top: var(--s-3); font-size: 15px; line-height: 1.5; color: var(--ink-2); }
#p-start .s-start .st-payback output { font-size: 20px; }
#p-start .s-start .st-payback[hidden] { display: none; }
#p-start .s-start .st-roi-note { margin-top: var(--s-5); font-size: 13px; line-height: 1.5; color: var(--ink-3); }

/* Deployment (#pg-roadmap): one vertical timeline. Replaces the two-lane roadmap block (.pg-road, .pg-steps,
   .pg-step*, .pg-lane-head*, .pg-phase, .pg-along, .pg-step-wave) and its motion rule.
   A rail with eight numbered nodes in two phases: Before go-live (1-5) and Go-live and after (6-8), two <ol>s, the
   second starts at 6 so the list numbers match the nodes. A single step is plain text on the ground. Steps that
   run side by side (2a/2b, 3a/3b, 4a/4b) share one node and one --surface panel split in two halves (stacked below 640);
   no visible header, the shared node and the a/b ids carry it (owner ask 2026-10-26). Go-live is the one tinted row,
   with the one filled, larger node. Ongoing support has no end: the rail turns dashed and fades out. 1100+: the
   heading sits in a sticky 4-column rail beside the 8-column timeline.
   Ground: --bg since the reorder (owner ask 2026-10-26: pricing, then deployment), between Pricing on --surface and
   the navy closing band. --dp-ground carries it to everything drawn in the ground colour (node fill, go-live halo gap, the gaps
   in the dashed rail), so a later ground swap is one value. */
#p-start .pg-deploy { --dp-ground: var(--bg); --dp-col: 32px; --dp-gap: var(--s-3); --dp-node: 28px; --dp-row1: 24px; --dp-lane1: 22.75px; }
@media (min-width: 600px) {
  #p-start .pg-deploy { --dp-col: 40px; --dp-gap: var(--s-4); --dp-node: 32px; --dp-row1: 28px; --dp-lane1: 26.75px; }
}

#p-start .pg-dp-head h2 { max-width: none; }
@media (min-width: 1100px) {
  #p-start .pg-dp-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--s-8); align-items: start; }
  #p-start .pg-dp-head { position: sticky; top: calc(var(--header-h) + var(--s-6)); margin-bottom: 0; }
}

/* The rail: one 2px hairline down the node column, from the first phase mark to the last row. */
#p-start .pg-dp { position: relative; display: grid; gap: var(--s-6); min-width: 0; }
#p-start .pg-dp::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 0;
  left: calc(var(--dp-col) / 2 - 1px);
  width: 2px;
  background: var(--hairline);
}
#p-start .pg-dp-phase { display: grid; gap: var(--s-3); }
#p-start .pg-dp-phase-label {
  position: relative;
  max-width: none;
  padding-left: calc(var(--dp-col) + var(--dp-gap) + var(--s-5) + 1px);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-3);
}
/* A small square on the rail opens each phase; it is not a step, so it is not round. */
#p-start .pg-dp-phase-label::before {
  content: "";
  position: absolute;
  top: 6px;
  left: calc(var(--dp-col) / 2 - 4px);
  width: 8px;
  height: 8px;
  background: var(--line-strong);
  border-radius: 1px;
}
#p-start .pg-dp-steps { display: grid; gap: var(--s-3); }

/* A row: node | body. The node centres on the body's first line (--dp-row1: padding + border + half a line). */
#p-start .pg-dp-row {
  position: relative;
  display: grid;
  grid-template-columns: var(--dp-col) minmax(0, 1fr);
  column-gap: var(--dp-gap);
  align-items: start;
}
#p-start .pg-dp-node {
  position: relative;
  z-index: 1;
  justify-self: center;
  display: grid;
  place-items: center;
  width: var(--dp-node);
  height: var(--dp-node);
  margin-top: calc(var(--dp-row1) - var(--dp-node) / 2);
  background: var(--dp-ground);
  border: 2px solid var(--teal);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: var(--teal-ink);
  font-variant-numeric: tabular-nums;
}
#p-start .pg-dp-body,
#p-start .pg-dp-half {
  display: grid;
  gap: var(--s-1);
  align-content: start;
  min-width: 0;
  padding: var(--s-4) var(--s-5);
}
#p-start .pg-dp-body { border: 1px solid transparent; border-radius: var(--r-card); }
#p-start .pg-dp-row h3 { font-size: 17px; line-height: 1.35; letter-spacing: 0; }
#p-start .pg-dp-row p { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
#p-start .pg-dp-body > p { max-width: 58ch; }

/* Side by side: one node, one panel, two halves. Phone: the halves stack. */
#p-start .pg-dp-pair {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}
#p-start .pg-dp-halves { display: grid; grid-template-columns: minmax(0, 1fr); }
#p-start .pg-dp-half + .pg-dp-half { border-top: 1px solid var(--hairline); }
@media (min-width: 640px) {
  #p-start .pg-dp-halves { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #p-start .pg-dp-half + .pg-dp-half { border-top: 0; border-left: 1px solid var(--hairline); }
}
/* A pair's node sits level with the "2a" lane line (border 1 + padding + half a 19.5px line). */
#p-start .pg-dp-row--pair .pg-dp-node { margin-top: calc(var(--dp-lane1) - var(--dp-node) / 2); }
#p-start .pg-dp-row .pg-dp-lane {
  margin-bottom: 2px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-3);
}
#p-start .pg-dp-id { margin-right: 6px; color: var(--teal-ink); font-variant-numeric: tabular-nums; }

/* Go-live: the one tinted row, and the one filled, larger node with a soft tint halo. */
#p-start .pg-dp-row--golive .pg-dp-body { background: var(--tint); border-color: var(--tint-border); }
#p-start .pg-dp-row--golive .pg-dp-node {
  --dp-node: 40px;
  background: var(--teal);
  border-color: var(--teal);
  box-shadow: 0 0 0 4px var(--dp-ground), 0 0 0 8px var(--tint);
  font-size: 16px;
  color: var(--white);
}
#p-start .pg-dp-row--golive h3 { font-size: 20px; }
/* Its 20px title has a taller first line (27px), so its node centres on that: border 1 + padding + half the line. */
#p-start .pg-dp-row--golive { --dp-row1: 30.5px; }
@media (max-width: 599px) {
  #p-start .pg-dp-row--golive { --dp-row1: 26.5px; }
}
@media (max-width: 599px) {
  #p-start .pg-dp-row--golive .pg-dp-node { --dp-node: 32px; box-shadow: 0 0 0 3px var(--dp-ground), 0 0 0 6px var(--tint); }
}

/* Ongoing support has no end: below its node the rail turns dashed and fades out. */
#p-start .pg-dp-row--last::after {
  content: "";
  position: absolute;
  top: calc(var(--dp-row1) + var(--dp-node) / 2);
  bottom: calc(-1 * var(--s-7));
  left: calc(var(--dp-col) / 2 - 1px);
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--line-strong) 0 3px, var(--dp-ground) 3px 8px);
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent);
  mask-image: linear-gradient(to bottom, #000 30%, transparent);
}

@media (max-width: 599px) {
  #p-start .pg-dp-body,
  #p-start .pg-dp-half { padding: var(--s-3) var(--s-4); }
  #p-start .pg-dp-phase-label { padding-left: calc(var(--dp-col) + var(--dp-gap) + var(--s-4) + 1px); }
}

/* Motion: rows rise in as they enter. The un-animated state is the finished one. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    #p-start .pg-dp-row {
      animation: rv-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 12%;
    }
  }
}

/* Pricing (#pg-pricing, step two): the parts ledger (8) beside what is included (4) from 1100 ------------------- */
#p-start .pg-price-grid { display: grid; gap: var(--s-5); }
@media (min-width: 1100px) {
  #p-start .pg-price-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--s-6); align-items: start; }
}
/* Two columns: Part · How it is counted. The Status column went (owner ask 2026-10-26: AI usage ships before the
   site is public, so nothing is "Coming"); the sentence takes its share. */
#p-start .pg-price-ledger { --cols: minmax(112px, 0.7fr) minmax(0, 3.2fr); }
#p-start .pg-price-ledger .ledger-row { align-items: start; }
#p-start .pg-price-ledger .ledger-cell { color: var(--ink-2); }
#p-start .pg-price-ledger .pg-part { font-weight: 600; color: var(--ink); }
#p-start .pg-price-ledger .pg-part::before { content: none; }
#p-start .pg-included {
  display: grid;
  align-content: start;
  gap: var(--s-4);
  min-width: 0;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}
#p-start .pg-included h3 { font-size: 18px; line-height: 1.35; }
#p-start .pg-incl-list { border-bottom: 1px solid var(--hairline); }
#p-start .pg-incl-list li {
  position: relative;
  padding: var(--s-2) 0 var(--s-2) 28px;
  border-top: 1px solid var(--hairline);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}
#p-start .pg-incl-list li::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 6px;
  width: 5px;
  height: 10px;
  border: solid var(--teal-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
#p-start .pg-incl-note { font-size: 14px; line-height: 1.5; color: var(--ink-3); }