/* ==========================================================================
   Plan a Pilot — business client page
   Every rule is scoped to .pilot-page (the class on this page's <body>), so
   this stylesheet cannot affect the homepage. It is only linked from
   /plan-a-pilot/.
   Typography reuses the site's existing DM Sans declarations — the same
   computed font family as the homepage's Experience Companion sections.
   ========================================================================== */

/* --- Page shell ---------------------------------------------------------- */
.pilot-page {
  background: #fff;
  color: var(--ink, #15130f);
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.pilot-page [hidden] { display: none !important; }

.pilot-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Keeps the entry transition from ever producing a horizontal scrollbar. */
.pilot-clip { overflow: clip; }

/* --- Entry transition ---------------------------------------------------- */
/* Entered from the homepage: the white shell slides in from the right (the
   Experience Companion side) and expands across the window. */
html.pilot-entering .pilot-page .pilot-shell {
  animation: pilot-shell-in 540ms cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes pilot-shell-in {
  from { transform: translateX(50%); opacity: 0; }
  55%  { opacity: 1; }
  to   { transform: translateX(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html.pilot-entering .pilot-page .pilot-shell {
    animation: none;
    transform: none;
    opacity: 1;
  }
}

/* --- Skip link ----------------------------------------------------------- */
.pilot-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--ink, #15130f);
  color: #fff;
  font-size: .9rem;
  text-decoration: none;
}
.pilot-skip:focus { left: 12px; top: 12px; }

/* --- Typography ---------------------------------------------------------- */
/* The homepage's display serif is deliberately not used here: the page runs
   on the same clean sans-serif as the Experience Companion content. */
.pilot-page h1,
.pilot-page h2,
.pilot-page h3 {
  font-family: "DM Sans", sans-serif;
  margin: 0;
  color: inherit;
  letter-spacing: -.015em;
}
.pilot-page h1 {
  font-size: clamp(1.95rem, 3.3vw, 2.75rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.022em;
}
.pilot-page h2 {
  font-size: clamp(1.4rem, 2.1vw, 1.9rem);
  font-weight: 600;
  line-height: 1.25;
  max-width: 36ch;
}
.pilot-page h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
}

.pilot-page p { margin: 0 0 18px; }
.pilot-page p:last-child { margin-bottom: 0; }
.pilot-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #55504a;
}
.pilot-eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 2px;
  background: var(--gold, #e6a83d);
}

.pilot-lede {
  max-width: 58ch;
  font-size: 1.0625rem;
  line-height: 1.72;
  color: #26221d;
}

.pilot-prose p {
  max-width: 68ch;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #26221d;
}

.pilot-note,
.pilot-fineprint {
  max-width: 60ch;
  font-size: .95rem;
  line-height: 1.6;
  color: #5c574f;
}

/* --- Buttons ------------------------------------------------------------- */
.pilot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border: 1px solid var(--ink, #15130f);
  border-radius: 2px;
  background: var(--ink, #15130f);
  color: #fff;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.pilot-btn:hover,
.pilot-btn:focus-visible {
  background: #fff;
  color: var(--ink, #15130f);
}
.pilot-btn--wide { width: 100%; }

/* --- Focus --------------------------------------------------------------- */
.pilot-page a:focus-visible,
.pilot-page button:focus-visible,
.pilot-page summary:focus-visible,
.pilot-page input:focus-visible,
.pilot-page select:focus-visible,
.pilot-page textarea:focus-visible {
  outline: 3px solid #15130f;
  outline-offset: 2px;
}

/* The embedded product demo is keyboard reachable and shows a ring when focus
   is inside the phone. The demonstration is served from this site's own
   /companion-demo/ route, so the frame is same-origin and :focus-within reaches
   inside it: the ring appears for keyboard users, and the browser's own focus
   behaviour covers the rest. */
.pilot-page .pilot-phone-stage:focus-within .silver-phone {
  outline: 3px solid #15130f;
  outline-offset: 4px;
}

/* --- Header -------------------------------------------------------------- */
.pilot-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #fff;
  border-bottom: 1px solid #e8e6e2;
}
.pilot-header-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.pilot-brand {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
}
.pilot-back {
  padding-bottom: 2px;
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid transparent;
}
.pilot-back:hover,
.pilot-back:focus-visible { border-bottom-color: currentColor; }

/* --- Hero ---------------------------------------------------------------- */
.pilot-hero {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 84px) 24px clamp(36px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}
.pilot-hero-copy h1 { margin-bottom: 20px; }
/* The hero cue that replaced the CTA button: one centred line set in the
   headline's own typeface (the declarations below track .pilot-page h1), with
   one arrow centred beneath it. The arrow is a real <button>, so it is keyboard
   reachable and Enter/Space behave like a tap; clicking or tapping it scrolls
   on to the next section (#pilot-matters) and never moves the cue itself. */
.pilot-page .pilot-cue {
  --pilot-cue-size: clamp(1.95rem, 3.3vw, 2.75rem); /* = .pilot-page h1 */
  --pilot-cue-arrow-size: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;      /* text, then the arrow, on one centre line */
  row-gap: 14px;
  margin: 28px 0 18px;
  text-align: center;
  /* The cue is centred on the visible headline text, not on the column it sits
     in: the headline is left-aligned, so its visible text box is narrower than
     the column wherever a line does not reach the edge. assets/pilot.js
     measures that text box from the rendered headline and publishes the
     difference here; nothing else about the cue moves — it keeps its own
     vertical position, and the arrow stays centred beneath it because both sit
     on this centre line. The 0px default is the whole fallback: without the
     script (or before it has measured) the cue is exactly where it used to be. */
  transform: translateX(var(--pilot-cue-shift, 0px));
}
.pilot-page .pilot-cue-text {
  margin: 0;
  font-family: "DM Sans", sans-serif;
  font-size: var(--pilot-cue-size);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.022em;
  color: inherit;
}
.pilot-page .pilot-cue-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pilot-cue-arrow-size);
  height: var(--pilot-cue-arrow-size);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
/* Fixed square box: the arrow always keeps exactly this displayed size. */
.pilot-page .pilot-cue-arrow-img {
  display: block;
  width: var(--pilot-cue-arrow-size);
  height: var(--pilot-cue-arrow-size);
  object-fit: contain;
  opacity: .85;
  transition: opacity .18s ease;
}
.pilot-page .pilot-cue-arrow:hover .pilot-cue-arrow-img,
.pilot-page .pilot-cue-arrow:focus-visible .pilot-cue-arrow-img { opacity: 1; }

/* Phone + caption form one centred figure in the right hero column. */
.pilot-phone-figure {
  margin: 0;                 /* reset the browser's default figure margin */
  display: flex;
  flex-direction: column;
  align-items: center;       /* one centre line for the phone and its caption */
  justify-content: center;
  row-gap: 24px;             /* comfortable space under the phone */
}
.pilot-demo-caption {
  margin: 0;
  max-width: 280px;
  font-size: .88rem;
  line-height: 1.5;
  color: #5c574f;
  text-align: center;
}

/* The iPhone demo reuses the homepage markup and styles exactly — the same
   .silver-phone / .silver-phone-frame rules and the same
   --phone-demo-scale: 0.64 in styles.css. Only the size of the phone within
   this white hero is set here. */
/* Adds the grid centring the pilot stage needs (the shared .phone-stage class
   carries no layout rules), so the device sits on the figure's centre line. */
.pilot-page .pilot-phone-stage {
  display: grid;
  place-items: center;
  width: 100%;
}
.pilot-page .silver-phone {
  height: min(500px, 56svh);
  max-width: 300px;
}

/* --- Sections ------------------------------------------------------------ */
.pilot-section {
  padding: clamp(40px, 5.5vw, 76px) 0;
  border-top: 1px solid #e8e6e2;
}
.pilot-section--tint { background: #fafaf9; }
.pilot-section > .pilot-wrap > h2 { margin-bottom: 22px; }
.pilot-section > .pilot-wrap > .pilot-eyebrow + h2 { margin-top: 0; }
/* The hero cue's arrow scrolls to this section, so it clears the sticky header
   when it arrives (the same 96px the stationary CTA's #pilot-form target
   uses), leaving the eyebrow and heading fully below the header. */
.pilot-page #pilot-matters { scroll-margin-top: 96px; }
.pilot-prose { margin-bottom: 28px; }

/* --- Business benefits --------------------------------------------------- */
.pilot-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #e8e6e2;
}
.pilot-benefits > li {
  padding: 26px 30px;
  border-right: 1px solid #e8e6e2;
}
/* Outer edges stay flush with the section text; every divider keeps a
   comfortable gap on both sides. */
.pilot-benefits > li:first-child { padding-left: 0; }
.pilot-benefits > li:last-child {
  padding-right: 0;
  border-right: 0;
}
.pilot-benefits h3 {
  margin-bottom: 10px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pilot-benefits p {
  max-width: 42ch;
  font-size: .98rem;
  line-height: 1.65;
  color: #4a453e;
}

/* Four columns only while there is comfortable room for them; below this the
   items would be cramped, so they reflow to two columns. */
@media (max-width: 1180px) {
  .pilot-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pilot-benefits > li {
    padding: 26px 28px;
    border-bottom: 1px solid #e8e6e2;
  }
  .pilot-benefits > li:nth-child(odd) { padding-left: 0; }
  .pilot-benefits > li:nth-child(even) {
    padding-right: 0;
    border-right: 0;
  }
  /* Only the first row needs a horizontal divider. */
  .pilot-benefits > li:nth-last-child(-n + 2) { border-bottom: 0; }
}

/* --- Traveler moments ---------------------------------------------------- */
.pilot-moments {
  margin: 30px 0 24px;
  padding: 0;
  list-style: none;
  border-top: 1px solid #e8e6e2;
}
.pilot-moments > li {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 6px 32px;
  padding: 20px 0;
  border-bottom: 1px solid #e8e6e2;
}
.pilot-moments h3 { margin: 0; }
.pilot-moments p {
  margin: 0;
  max-width: 62ch;
  font-size: .98rem;
  line-height: 1.65;
  color: #4a453e;
}

/* --- Simple lists (audience, customization) ------------------------------ */
.pilot-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #e8e6e2;
}
.pilot-list > li {
  position: relative;
  padding: 14px 0 14px 26px;
  border-bottom: 1px solid #e8e6e2;
  font-size: 1rem;
  color: #2b2721;
}
.pilot-list > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border: 1px solid var(--gold, #e6a83d);
}

/* An odd number of items leaves the last one alone in the left column, so the
   cell beside it is empty and the closing hairline would stop halfway. Draw
   the matching line in that cell — same 40px column gap, same row edge — so
   the last row still closes the list evenly. */
.pilot-list > li:last-child:nth-child(odd)::after {
  content: "";
  position: absolute;
  top: 100%;
  left: calc(100% + 40px);
  width: 100%;
  height: 0;
  border-top: 1px solid #e8e6e2;
}

/* --- Process ------------------------------------------------------------- */
.pilot-steps {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #e8e6e2;
}
.pilot-steps > li {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 6px 24px;
  padding: 22px 0;
  border-bottom: 1px solid #e8e6e2;
}
.pilot-step-num {
  margin: 0;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: #7a5c1f;
}
.pilot-steps h3 { margin: 0 0 6px; }
.pilot-steps p {
  margin: 0;
  max-width: 64ch;
  font-size: .98rem;
  line-height: 1.65;
  color: #4a453e;
}

/* --- Pilot offer --------------------------------------------------------- */
.pilot-offer {
  padding: clamp(28px, 4vw, 48px);
  border: 2px solid var(--ink, #15130f);
  background: #fff;
}
.pilot-offer-label {
  margin: 26px 0 14px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #55504a;
}
.pilot-offer-list {
  max-width: 72ch;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  border-top: 1px solid #e8e6e2;
}
.pilot-offer-list > li {
  position: relative;
  padding: 12px 0 12px 26px;
  border-bottom: 1px solid #e8e6e2;
  font-size: 1rem;
}
.pilot-offer-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 1px;
  background: var(--gold, #e6a83d);
}
.pilot-offer-price {
  max-width: 68ch;
  margin-bottom: 26px;
  font-size: 1rem;
  color: #2b2721;
}
.pilot-offer-cta { margin: 0; }

/* --- FAQ ----------------------------------------------------------------- */
.pilot-faq {
  margin-top: 28px;
  border-top: 1px solid #e8e6e2;
}
.pilot-faq details { border-bottom: 1px solid #e8e6e2; }
.pilot-faq summary {
  position: relative;
  padding: 18px 44px 18px 0;
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.pilot-faq summary::-webkit-details-marker { display: none; }
.pilot-faq summary::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  font-weight: 400;
  color: #7a5c1f;
}
.pilot-faq details[open] summary::after { content: "\2013"; }
.pilot-faq details p {
  margin: 0 0 20px;
  max-width: 68ch;
  font-size: 1rem;
  line-height: 1.7;
  color: #4a453e;
}

/* --- Inquiry form -------------------------------------------------------- */
.pilot-page #pilot-form { scroll-margin-top: 96px; }

.pilot-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 32px;
  max-width: 820px;
  margin-top: 30px;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid #e8e6e2;
  background: #fff;
}
.pilot-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.pilot-form-legend {
  grid-column: 1 / -1;
  margin: 0;
  font-size: .88rem;
  color: #5c574f;
}
.pilot-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.pilot-field--wide { grid-column: 1 / -1; }
.pilot-field label {
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.4;
  color: #2b2721;
}
.pilot-optional {
  font-weight: 400;
  color: #6b655c;
}
.pilot-field input,
.pilot-field select,
.pilot-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid #cfcbc4;
  border-radius: 2px;
  background: #fff;
  color: inherit;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
}
.pilot-field textarea {
  min-height: 118px;
  resize: vertical;
}
.pilot-field input:hover,
.pilot-field select:hover,
.pilot-field textarea:hover { border-color: #a9a49b; }
.pilot-consent {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
}
.pilot-consent input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 2px 0 0;
}
.pilot-consent label {
  font-size: .98rem;
  font-weight: 400;
  line-height: 1.5;
}
.pilot-submit {
  grid-column: 1 / -1;
  margin: 4px 0 0;
}

.pilot-form-note {
  margin-top: 22px;
  font-size: .95rem;
  color: #5c574f;
}
.pilot-form-note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Stationary CTA ------------------------------------------------------ */
.pilot-sticky {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 22px;
  border: 1px solid var(--ink, #15130f);
  border-radius: 2px;
  background: var(--ink, #15130f);
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(21, 19, 15, .18);
  transition: background-color .18s ease, color .18s ease;
}
.pilot-sticky:hover,
.pilot-sticky:focus-visible {
  background: #fff;
  color: var(--ink, #15130f);
}

/* --- Footer -------------------------------------------------------------- */
.pilot-footer {
  border-top: 1px solid #e8e6e2;
  background: #fff;
}
.pilot-footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 16px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 24px 40px;
  font-size: .9rem;
  color: #5c574f;
}
.pilot-footer-inner p { margin: 0; }
.pilot-footer-inner a { color: inherit; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
  .pilot-hero {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 36px;
  }
  .pilot-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pilot-list { grid-template-columns: minmax(0, 1fr); }
  /* One column: every item owns its own row, so no cell needs filling in. */
  .pilot-list > li:last-child:nth-child(odd)::after { content: none; }

  /* The stationary CTA joins the normal page flow instead of floating. */
  .pilot-sticky {
    position: static;
    right: auto;
    bottom: auto;
    width: 100%;
    min-height: 56px;
    border-radius: 0;
    box-shadow: none;
  }
}

@media (max-width: 640px) {
  .pilot-page h1 { font-size: 1.85rem; }
  .pilot-page h2 { font-size: 1.35rem; }
  /* The cue keeps tracking the headline's mobile size. */
  .pilot-page .pilot-cue { --pilot-cue-size: 1.85rem; --pilot-cue-arrow-size: 46px; }
  /* One column with horizontal dividers only. */
  .pilot-benefits { grid-template-columns: minmax(0, 1fr); }
  .pilot-benefits > li {
    padding: 22px 0;
    border-right: 0;
    border-bottom: 1px solid #e8e6e2;
  }
  .pilot-benefits > li:nth-last-child(-n + 2) { border-bottom: 1px solid #e8e6e2; }
  .pilot-benefits > li:last-child { border-bottom: 0; }
  .pilot-form {
    grid-template-columns: minmax(0, 1fr);
    padding: 20px;
  }
  .pilot-moments > li {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .pilot-steps > li {
    grid-template-columns: 3.25rem minmax(0, 1fr);
    gap: 4px 14px;
  }
  .pilot-footer-inner { flex-direction: column; }
}

/* --- Thank-you page ------------------------------------------------------ */
.pilot-page .pilot-section--thanks {
  border-top: 0;
  padding: clamp(56px, 9vw, 116px) 0 clamp(64px, 9vw, 120px);
}
.pilot-page .pilot-section--thanks h1 {
  max-width: 30ch;
  margin-bottom: 20px;
}
.pilot-page .pilot-thanks-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 30px;
  margin: 30px 0 0;
}
.pilot-page .pilot-textlink {
  font-size: .95rem;
  font-weight: 500;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.pilot-page .pilot-textlink:hover {
  text-decoration-thickness: 2px;
}