/* Harris Taylor — workflows page

   Tokens are this site's own (style.css). The quote engine brings its own
   stylesheet and a scoped token bridge (css/quote.css, css/quote-tokens.css);
   nothing here reaches inside it. */

/* ---------- 02 built around you ----------
   The services page method section (.sv-grid, .sv-col, .sv-method__title
   and __body in services-page.css, which this page does not load): heading
   on top, three cells split by hairlines, stacked on phones. No numbers.
   A closing line runs the full width beneath them. */
.wf-fit {
  padding: clamp(64px, calc(27px + 9.86vw), 128px) var(--gutter);
  border-top: 1px solid var(--hairline);
}

/* Eyebrow and heading centred over the three cells */
.wf-fit__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: var(--s-8);
}

/* The homepage section heading (.services__heading), shared by 02 and 03 */
.wf-fit__heading {
  font-size: clamp(36px, 5vw, 72px);
  font-weight: var(--wt-light);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--paper-0);
  margin: 16px 0 0;
}

.wf-fit__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hairline);
}

.wf-fit__cell {
  display: flex;
  flex-direction: column;
  padding: 40px 48px 56px;
  border-right: 1px solid var(--hairline);
}
.wf-fit__cell:last-child { padding-right: 0; border-right: none; }

.wf-fit__title {
  font-size: 20px;
  font-weight: var(--wt-regular);
  color: var(--paper-0);
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}

.wf-fit__body,
.wf-fit__note {
  font-size: 15px;
  font-weight: var(--wt-light);
  color: var(--fg-quiet);
  line-height: 1.65;
  margin: 0;
}

.wf-fit__note {
  padding-top: 56px;
  border-top: 1px solid var(--hairline);
  text-align: center;
  /* The hairline runs the full width; the text keeps the 65ch measure
     through equal side padding instead of a max-width */
  max-width: none;
  padding-inline: max(0px, calc((100% - 65ch) / 2));
}

/* The pricing button, centred under the line */
.wf-fit__foot {
  display: flex;
  justify-content: center;
  margin-top: var(--s-6);
}

/* ---------- 03 the workflows ----------
   The homepage services strip as is (.services__grid, __item, __num,
   __title and __list from style.css). The section frame, the heading block
   and each card's "try demo" button are this page's own. */
.wf-tools {
  padding: clamp(64px, calc(27px + 9.86vw), 128px) var(--gutter);
  border-top: 1px solid var(--hairline);
}

.wf-tools__head {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--s-8);
}

/* margin-top:auto sits the three buttons on one line along the bottom,
   however long the bullets above them run. */
.wf-tools__try {
  align-self: flex-start;
  margin-top: auto;
}
.wf-tools .services__list { margin-bottom: var(--s-6); }

/* ---------- jump to a demo ----------
   Each "try demo" and footer link is a plain link to its block's id, so it
   works with no script, and it lands straight on the block: a smooth scroll
   started from the top of the page while it was still arriving. scroll-margin
   lands the top of the block's copy a --s-6 gap under the fixed header (93px
   tall once scrolled) rather than the section's own edge, so it allows for
   the section's top padding. */
.flow { scroll-margin-top: calc(93px + var(--s-6) - var(--flow-pad)); }

/* Old links to /workflows/#live-booking (the name before Booking System)
   land on the Booking System copy, which carries that id. The copy starts
   inside the section's padding, so it only needs the header gap. */
.flow__copy { scroll-margin-top: calc(93px + var(--s-6)); }

/* =====================================================
   FLOW: one workflow block
   <section class="flow" data-flow="…">
     <div class="flow__copy">…</div>
     <div class="flow__demo" data-…></div>
   </section>
   Copy left, demo right, 50/50 from 1024px. Both columns share a height and
   the demo sets it. Below 1024px they stack, copy first.
   ===================================================== */
.flow {
  --flow-pad: clamp(64px, calc(27px + 9.86vw), 128px);   /* --s-8 on a small phone to --s-10 from 1024 */
  padding: var(--flow-pad) var(--gutter);
  border-top: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(48px, 6vw, 96px);
  align-items: stretch;
}

.flow__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-5);
}

.flow__tag {
  display: inline-flex;
  align-items: center;
  padding: var(--s-2) 14px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-pill);
  font-size: var(--t-eyebrow);
  font-weight: var(--wt-regular);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  line-height: 1;
  color: var(--paper-1);
}

.flow__heading {
  font-size: var(--t-h1);
  font-weight: var(--wt-light);
  letter-spacing: var(--tr-tight);
  line-height: var(--lh-snug);
  color: var(--fg);
  max-width: 14em;
}

.flow__para {
  font-size: var(--t-body);
  font-weight: var(--wt-light);
  line-height: var(--lh-loose);
  color: var(--fg-quiet);
  max-width: 34em;
}

/* The demo sits on the page itself, not in a box */
.flow__demo {
  background: var(--bg);
  min-width: 0;
}

.flow__nojs {
  font-size: var(--t-small);
  font-weight: var(--wt-light);
  color: var(--fg-meta);
}

/* FAQ: the heading stays put. style.css pins it (sticky) so it rides
   alongside a long list, as on the homepage; this list is short, so it just
   slid a little way and stopped. */
.faq__left { position: static; }

/* ---------- responsive ---------- */
@media (max-width: 1023px) {
  .flow {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-7);
  }
}

@media (max-width: 1023px) {
  .wf-fit__grid { grid-template-columns: 1fr; }
  .wf-fit__cell {
    padding: clamp(28px, calc(23.4px + 1.23vw), 36px) 0 clamp(36px, calc(29.1px + 1.85vw), 48px);
    border-right: none;
    border-bottom: 1px solid var(--hairline);
  }
  .wf-fit__cell:last-child { border-bottom: none; }

}


/* Booking: the whole section gets more room above and below than the
   other two blocks, one spacing step up (--s-9 on a small phone to --s-11
   from 1024). The padding and scroll-margin both read --flow-pad, so
   "try demo" still lands the copy a --s-6 gap under the header. */
.flow[data-flow="book"] {
  --flow-pad: clamp(96px, calc(40.5px + 14.79vw), 192px);
}

/* Assistant: the same width and edges as the booking panel below it,
   which fills its column. The stage fills the column too, and the panel
   and button are pinned to right:0, so the panel's right edge and the
   button's right edge sit on the booking panel's. --a-edge still sets the
   bottom inset, so the button keeps its gap below.

   Selectors carry .flow__demo: assistant.css loads after this file, so an
   equal-specificity rule would lose to it. */
.flow__demo.assistant--inline {
  width: 100%;
}

.flow__demo.assistant--inline .assistant__bubble,
.flow__demo.assistant--inline .assistant__panel {
  right: 0;
}

/* Assistant: more room between what it says and the buttons under it. The
   kit spaces a screen's parts --space-4 apart; this adds --space-2 above
   the options only, making it 24px, so the greeting and each answer sit
   clear of the choices without spreading the rest of the thread. */
.flow__demo.assistant--inline .assistant__options {
  margin-top: var(--space-2);
}

/* Assistant: the panel's top on the pill's line, as the other two demos
   start level with theirs.

   The kit anchors the inline panel to the bottom of its stage, just above
   the button, and lets it grow upwards with its content, so on the opening
   screen it began well below the top of the stage and so below the pill.
   Pinning its top as well stretches it between the two; the thread row is
   minmax(0,1fr), so it takes the extra height and the ask field stays on
   the bottom. The kit's max-height allowed an --a-edge gap above the panel
   too, which would now stop it 16px short of the button, so it goes: the
   two insets set the height between them.

   Selector carries .flow__demo: assistant.css loads after this file, so an
   equal-specificity rule would lose to it. */
.flow__demo.assistant--inline .assistant__panel {
  top: 0;
  max-height: none;
}

/* Assistant: the panel spans the full column, edge to edge with the
   booking panel below it, and as tall as the Guided Quote's opening card
   (598px). The stage is sized so that, pinned between its top and the
   button as above, the panel comes out at exactly that height. The white
   button sits under the panel's right-hand corner.

   From 768px; on phones the panel already takes the kit's full width. The selectors carry .flow__demo, and the
   stage one .assistant as well, to win over quote-tokens.css and
   assistant.css, which load after this file. */
@media (min-width: 768px) {
  .flow__demo.assistant.assistant--inline {
    --a-inline-h: calc(37.375rem + var(--a-bubble) + var(--space-3) + var(--a-edge));
  }

  .flow__demo.assistant--inline .assistant__panel {
    left: 0;
    right: 0;
    width: auto;
  }
}

/* Guided Quote: the card's top on the pill's line, as the assistant panel
   and the booking panel start level with theirs.

   The kit puts its progress bar above the cards, under --space-6 of top
   padding and with --space-6 below it, so the first card began 67px under
   the pill. Here the cards lead with no padding above, and the progress bar
   drops into the row with the arrows, filling the width they leave. It
   still reads as how far through you are, beside the controls that move
   you on.

   Peek mode only, which is what this page runs. Selectors carry
   .flow__demo: quote.css loads after this file, so an equal-specificity
   rule would lose to it. */
.flow__demo.quote.is-peek {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-5);
  align-items: center;
  padding-top: 0;
}

.flow__demo.quote.is-peek .quote__frame {
  grid-column: 1 / -1;
  grid-row: 1;
}

.flow__demo.quote.is-peek .quote__progress {
  grid-column: 1;
  grid-row: 2;
  position: static;
  margin: var(--space-5) 0 0;
}

.flow__demo.quote.is-peek .quote__nav {
  grid-column: 2;
  grid-row: 2;
}

/* ---------- tablet ----------
   Three tools stays a fixed row (style.css). Each flow is a split, pill and
   heading left and paragraphs right, with its demo full width below. */
@media (max-width: 1023px) {
  main .wf-tools { padding: 96px var(--gutter); }
  main .wf-tools__head { margin-bottom: 24px; }

  main .flow,
  main .flow[data-flow="book"] {
    --flow-pad: 96px;
    gap: 40px;
  }
  main .flow__copy { gap: 20px; }
  main .flow__copy.split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    column-gap: 40px;
  }
  main .flow__copy .split__body { gap: 16px; }
  main .flow__heading { font-size: 36px; line-height: 1.1; }
  main .flow__para {
    font-size: 15px;
    line-height: var(--lh-body);
    max-width: none;
  }

  /* Built for your business: three columns under a hairline */
  main .wf-fit { padding: 96px var(--gutter); }
  main .wf-fit__head { margin-bottom: 40px; }
  main .wf-fit__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    border-top: 1px solid var(--hairline);
  }
  main .wf-fit__cell,
  main .wf-fit__cell:last-child {
    padding: 24px 0 0;
    border: 0;
  }
  main .wf-fit__title { margin-bottom: 6px; font-size: 20px; font-weight: var(--wt-light); }
  main .wf-fit__note { margin-top: 56px; padding-top: 0; border-top: 0; }
}

/* ---------- phone ----------
   The same order, stacked. Three tools is a carousel (style.css). */
@media (max-width: 767px) {
  main .wf-tools { padding: 72px var(--gutter); }
  main .wf-tools__head { margin-bottom: 20px; }

  main .flow,
  main .flow[data-flow="book"] {
    --flow-pad: 72px;
    gap: 32px;
  }
  main .flow__heading { font-size: 32px; }

  main .wf-fit { padding: 72px var(--gutter); }
  main .wf-fit__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  main .wf-fit__cell,
  main .wf-fit__cell:last-child {
    padding: 24px 0;
    border-bottom: 1px solid var(--hairline);
  }
  main .wf-fit__note { margin-top: 32px; }
}