/* Fortalan, direction C: Colour fields. The three direction pages (chatbots, automations, voice).
   Builds on style.css and uses its tokens and components (.display, .lede, .btn, .go, .wrap, .grid, .field,
   .stairs, .steps, .stair, .step, .step-n, .frame, .vid, .playpause, .note, .sr).
   No colour is written here: every colour is a token from style.css, so a new field colour reaches these
   pages by itself. The page's own direction colour is --c, set on <body> by its class.
   Sizes from 1200 px up are in --u (style.css): 1px up to 1440x900, more on large screens. */

.dir-chat { --c: var(--chat); }
.dir-auto { --c: var(--auto); }
.dir-voice { --c: var(--voice); }

/* ------------------------------------------------------------------ opening: one full-screen field that explains the direction
   The title and its line, how it works (the diagram, drawn for the field) and the links to the rest of the page.
   From 1200 px the title and its line sit on the left with the links beside them, and the diagram runs across
   the field below, centred in the height that is left. Below 1200 px everything stacks and the links come last. */
.opening {
  display: flex;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
}
.opening-in {
  flex: 1; min-width: 0;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
  grid-template-rows: auto minmax(0, 1fr);
  row-gap: calc(36 * var(--u));
  padding-top: calc(52 * var(--u)); padding-bottom: calc(40 * var(--u));
}
.opening-head { grid-column: 1 / span 9; grid-row: 1; min-width: 0; }
.opening-line {
  margin-top: calc(20 * var(--u)); max-width: 40em;
  font-size: calc(24 * var(--u)); line-height: calc(34 * var(--u)); letter-spacing: -0.005em;
  text-wrap: pretty;
}
/* the links to the rest of the page: a quiet list beside the title */
.onpage { grid-column: 10 / span 3; grid-row: 1; padding-top: calc(10 * var(--u)); }
.onpage ul { list-style: none; display: grid; justify-items: start; gap: calc(2 * var(--u)); }
.onpage a {
  display: inline-block; padding: calc(9 * var(--u)) 0;
  font-weight: 600; font-size: calc(17 * var(--u)); line-height: calc(22 * var(--u)); color: var(--ink);
  text-decoration: underline; text-decoration-thickness: calc(2 * var(--u)); text-underline-offset: calc(6 * var(--u));
}
.onpage a:hover { text-decoration-thickness: calc(4 * var(--u)); }

/* how it works, on the field: ink lines, and an ink block for the AI with white and field-coloured text.
   The field keeps its colour in both themes, so the figure does too. */
.dia { grid-column: 1 / -1; grid-row: 2; align-self: center; min-width: 0; color: var(--on-field); }
.dia svg { display: block; width: 100%; height: auto; overflow: visible; }
.dia .dia-narrow { display: none; }
.dia text { fill: currentColor; font-kerning: normal; }
.dia .dia-band { fill: var(--ink); }
.dia .dia-on { fill: var(--on-ink); }
.dia .dia-on2 { fill: var(--c); }
.dia .dia-ln {
  fill: none; stroke: currentColor; stroke-width: calc(2 * var(--u));
  stroke-linecap: square; stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}
.dia .dia-ah { fill: currentColor; }
.dia figcaption {
  margin-top: calc(20 * var(--u)); max-width: 50em;
  font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); color: var(--on-field-2); text-wrap: pretty;
}

/* short desktop screens (1280x800, 1366x768): a little less air, so the first screen still holds all of it */
@media (min-width: 1200px) and (max-height: 820px) {
  .opening-in { padding-top: calc(40 * var(--u)); padding-bottom: calc(28 * var(--u)); row-gap: calc(28 * var(--u)); }
}

/* ------------------------------------------------------------------ section heads on the canvas */
.sec-head { align-items: end; }
.sec-head h2 { grid-column: 1 / span 6; }
.sec-head .lede { grid-column: 7 / span 6; padding-bottom: calc(6 * var(--u)); }

/* ------------------------------------------------------------------ a case: head on the canvas, story on the field, specs on the canvas */
.case-head { padding-top: var(--after-field); padding-bottom: calc(56 * var(--u)); align-items: start; }
.case-head h2 { grid-column: 1 / span 6; }
.case-intro { grid-column: 7 / span 6; padding-top: calc(8 * var(--u)); }
.case-line { font-size: calc(22 * var(--u)); line-height: calc(32 * var(--u)); letter-spacing: -0.005em; text-wrap: pretty; }
.case-fict { color: var(--text-2); }
.case-problem { margin-top: calc(16 * var(--u)); font-size: calc(17 * var(--u)); line-height: calc(26 * var(--u)); color: var(--text-2); text-wrap: pretty; }
.case-problem strong { color: var(--text); }

.case-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
  padding-top: var(--field-pad); padding-bottom: var(--field-pad);
}
.case-grid > .stairs { grid-column: 1 / -1; margin-top: 0; }
.case-field .steps > li { padding-right: calc(32 * var(--u)); }
.cstep-body { display: block; }
.cstep-cap { display: block; font-weight: 600; font-size: calc(17 * var(--u)); line-height: calc(24 * var(--u)); }
.cstep-t { display: block; margin-top: calc(4 * var(--u)); font-size: calc(17 * var(--u)); line-height: calc(25 * var(--u)); text-wrap: pretty; }
.js .case-field .step .cstep-cap { color: inherit; }
.js .case-field .step:hover .cstep-cap { text-decoration: underline; text-decoration-thickness: calc(2 * var(--u)); text-underline-offset: calc(4 * var(--u)); }
.no-js .case-field .steps > li { color: var(--on-field); }
.case-field .frame { margin-top: calc(48 * var(--u)); }

/* the specs under each case: Tested with and Built from, each column between rules, like the Details below */
.case-specs { padding-top: calc(48 * var(--u)); }
.case-specs dl { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gutter); }
.case-specs dl > div {
  padding: calc(16 * var(--u)) calc(48 * var(--u)) calc(20 * var(--u)) 0;
  border-top: var(--rule-w) solid var(--rule); border-bottom: var(--rule-w) solid var(--rule);
}
.case-specs dt { font-weight: 600; font-size: calc(17 * var(--u)); line-height: calc(24 * var(--u)); }
.case-specs dd { margin: calc(6 * var(--u)) 0 0; font-size: calc(17 * var(--u)); line-height: calc(26 * var(--u)); color: var(--text-2); max-width: 36em; text-wrap: pretty; }

/* ------------------------------------------------------------------ details: what it does, handoff, tested with, built from */
/* a ruled list: each row (the heading and its text) between rules across the content width; What it does sits on a
   ruled grid in the row's last eight columns, two items to a line, a rule between its lines. Horizontal rules only. */
.details { padding-top: var(--after-field); }
.spec { margin-top: calc(64 * var(--u)); border-bottom: var(--rule-w) solid var(--rule); }
.spec > div {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
  padding: calc(22 * var(--u)) 0 calc(26 * var(--u));
  border-top: var(--rule-w) solid var(--rule);
}
.spec dt { grid-column: 1 / span 4; font-weight: 600; font-size: calc(22 * var(--u)); line-height: calc(30 * var(--u)); }
.spec dd { grid-column: 5 / span 8; margin: 0; font-size: calc(18 * var(--u)); line-height: calc(28 * var(--u)); text-wrap: pretty; }
.spec dd > p { max-width: 40em; padding-top: calc(1 * var(--u)); }
.spec dd p + p { margin-top: calc(14 * var(--u)); }
.spec-list { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gutter); }
.spec-list > li { padding: calc(1 * var(--u)) calc(24 * var(--u)) calc(14 * var(--u)) 0; }
.spec-list > li:nth-child(n+3) { border-top: var(--rule-w) solid var(--rule); padding-top: calc(13 * var(--u)); }
.spec-list > li:nth-last-child(-n+2) { padding-bottom: 0; }
/* the line under the grid (chatbots: where prices and policies come from) starts on its own rule */
.spec dd .spec-list + p { margin-top: calc(14 * var(--u)); padding-top: calc(13 * var(--u)); border-top: var(--rule-w) solid var(--rule); max-width: none; }

/* ------------------------------------------------------------------ the closing call to action */
.next { padding-top: var(--after-field); padding-bottom: calc(128 * var(--u)); }
.next h2 { grid-column: 1 / span 7; }
.next-body { grid-column: 1 / span 7; }
.next-body .lede { margin-top: calc(24 * var(--u)); max-width: 32em; }
.next-actions { margin-top: calc(36 * var(--u)); display: flex; flex-wrap: wrap; align-items: center; gap: calc(16 * var(--u)) calc(28 * var(--u)); }
.next-note { font-size: calc(15 * var(--u)); line-height: calc(22 * var(--u)); color: var(--text-2); }

/* ------------------------------------------------------------------ a plain page with a title, a line and a way back
   In the mockup: the preview stubs. On the site: the 404 page (below). */
.stub { padding-top: var(--after-field); padding-bottom: calc(128 * var(--u)); min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h)); }
.stub .lede { margin-top: calc(24 * var(--u)); max-width: 32em; }
.stub-back { margin-top: calc(36 * var(--u)); }
.stub .go { color: var(--text); }

/* ================================================================== below 1200: the narrow diagram; below 900 everything stacks */
@media (max-width: 1199px) {
  .opening-in { display: flex; flex-direction: column; row-gap: 0; padding-top: var(--field-pad); padding-bottom: 44px; }
  .opening-line { font-size: 22px; line-height: 32px; max-width: 34em; }
  .dia { align-self: stretch; margin-top: 48px; }
  .dia .dia-wide { display: none; }
  .dia .dia-narrow { display: block; max-width: 440px; }
  .onpage { margin-top: 40px; padding-top: 0; }
  .onpage ul { display: flex; flex-wrap: wrap; gap: 4px 36px; }
  .sec-head h2, .sec-head .lede { grid-column: 1 / -1; }
  .sec-head .lede { margin-top: 20px; max-width: 34em; padding-bottom: 0; }
  .case-head h2, .case-intro { grid-column: 1 / -1; }
  .case-intro { margin-top: 20px; max-width: 40em; padding-top: 0; }
  .spec dt { grid-column: 1 / span 4; }
  .spec dd { grid-column: 5 / span 8; }
}

/* landscape tablets: the narrow diagram beside the title, so the field does not open with an empty half.
   On a tall screen (a portrait tablet, 1024x1366) the pair sits in the middle of the field instead of at its top,
   so the field does not end in an empty half either; when the pair is taller than the screen, the field grows as before. */
@media (min-width: 900px) and (max-width: 1199px) {
  .opening { align-items: center; }
  .opening-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; align-content: start; }
  .opening-head { grid-column: 1 / span 6; grid-row: 1; }
  .onpage { grid-column: 1 / span 6; grid-row: 2; align-self: start; }
  .onpage ul { display: grid; justify-items: start; gap: 2px; }
  .dia { grid-column: 7 / span 6; grid-row: 1 / span 2; align-self: start; margin-top: 10px; }
}

/* the case stair turns on its side below 1024 px, as on the home */
@media (max-width: 1023px) {
  .case-field .steps > li { padding-right: 0; }
  .case-field .frame { margin-top: 32px; }
  .case-specs dl > div { padding-right: 24px; }
  .spec > div { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .spec dt, .spec dd { grid-column: 1; }
  .next h2, .next-body { grid-column: 1 / -1; }
}

/* ================================================================== phone: below 720 px */
@media (max-width: 719px) {
  .opening-in { padding-top: 28px; padding-bottom: 28px; }
  .opening-line { margin-top: 16px; font-size: 19px; line-height: 28px; }
  .dia { margin-top: 32px; }
  .dia .dia-narrow { max-width: none; }
  .dia figcaption { margin-top: 18px; font-size: 15px; line-height: 22px; }
  .onpage { margin-top: 28px; }
  .onpage ul { flex-direction: column; gap: 0; }
  .case-head { padding-bottom: 32px; }
  .case-line { font-size: 19px; line-height: 28px; }
  .case-specs { padding-top: 36px; }
  .case-specs dl { grid-template-columns: minmax(0, 1fr); }
  .case-specs dl > div { padding-right: 0; }
  .case-specs dl > div + div { border-top: 0; }
  .case-grid { grid-template-columns: minmax(0, 1fr); }
  .frame .vid.vid-wide { aspect-ratio: 16 / 10; }
  .spec { margin-top: 40px; }
  .spec > div { padding: 18px 0; }
  .spec dt { font-size: 20px; line-height: 28px; }
  .spec dd { font-size: 17px; line-height: 26px; }
  .spec-list { grid-template-columns: minmax(0, 1fr); }
  .spec-list > li, .spec-list > li:nth-child(n+3), .spec-list > li:nth-last-child(-n+2) { padding: 11px 0; }
  .spec-list > li + li { border-top: var(--rule-w) solid var(--rule); }
  .spec-list > li:first-child { padding-top: 1px; }
  .spec-list > li:last-child { padding-bottom: 0; }
  .next { padding-bottom: 96px; }
}

/* ------------------------------------------------------------------ production (build_site.py): the 404 page
   It reuses the preview stub's layout (.stub); the three directions sit under the way back, as quiet links. */
.stub-dirs { list-style: none; margin-top: calc(20 * var(--u)); display: flex; flex-wrap: wrap; gap: calc(4 * var(--u)) calc(32 * var(--u)); }
.stub-dirs .go { color: var(--text); padding: calc(8 * var(--u)) 0; }