/* /services/ only: the section-index opening, the index beside its sticky preview, the three starting points,
   the scope slab. Owner: ux-designer builder (d). Shared components come from layout.css. */

/* ---- opening: H1 at 3x, composed at its comma; the sub-line held to its end ---------------------------- */
main > .sv-open { padding-block: var(--space-8) 0; }
.sv-open__grid { display: grid; gap: var(--space-4) var(--gutter); }
.sv-open__title { font-size: var(--t-h1); line-height: 1.08; max-inline-size: 11em; }
.sv-open__sub { font-size: var(--t-lead); line-height: 1.6; color: var(--text-2); max-inline-size: 30rem; }
@media (min-width: 1024px) {
  main > .sv-open { padding-block-start: var(--space-9); }
  .sv-open__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .sv-open__title { grid-column: 1 / span 7; }
  .sv-open__sub { grid-column: 8 / span 5; padding-block-end: 0.35em; }
}

/* ---- 1. the index ------------------------------------------------------------------------------------ */
main > .sv-index { padding-block-start: var(--space-7); }
@media (min-width: 900px) { main > .sv-index { padding-block-start: var(--space-8); } }

.idx { display: grid; gap: var(--space-7); }
.idx__list { border-block-start: 3px solid var(--text); }

/* a row is an index entry that responds: under the pointer or focus it fills with ink and takes the navy roles,
   so its button, rule and marks switch with it. The rule is drawn by ::after so the fill's radius never bends it. */
.idx__row {
  position: relative;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  border-radius: var(--r-card);
  background-color: var(--ground);
  color: var(--text);
  transition: background-color var(--dur-state, 160ms) var(--ease-standard, ease),
              color var(--dur-state, 160ms) var(--ease-standard, ease);
}
.idx__row::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 1px;
  background-color: var(--rule);
}
.idx__row.is-previewed,
.idx:not(.mo-preview-live) .idx__row:focus-within {
  --ground: var(--navy-900);
  --text: var(--white);
  --text-2: var(--steel-300);
  --rule: transparent;
  --mark: var(--teal-400);
  --focus: var(--teal-300);
}
@media (hover: hover) {
  .idx:not(.mo-preview-live) .idx__row:hover {
    --ground: var(--navy-900);
    --text: var(--white);
    --text-2: var(--steel-300);
    --rule: transparent;
    --mark: var(--teal-400);
    --focus: var(--teal-300);
  }
}
.idx__name { font-size: clamp(1.625rem, 1.2rem + 1vw, 2.125rem); line-height: 1.15; }
/* the inline drawing: below 1024, and at any width with no script. Its wrapper sets the size (the svg fills it). */
.idx__art { max-inline-size: 300px; color: var(--mark); }
.idx__art:empty, .idx__art:not(:has(svg)) { display: none; }
.idx__method { max-inline-size: 42rem; color: var(--text); }
.idx__out { display: grid; gap: var(--space-2); }
.idx__label { font-weight: 700; color: var(--text-2); font-size: var(--t-small); }
.idx__outputs { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-weight: 700; line-height: 1.4; }
/* a plain square in the text colour: a list marker that cannot pass for a control (a pointing triangle read as clickable
   in the three-second test); placed, so the text stays one run */
.idx__outputs li { position: relative; padding-inline-start: 16px; }
.idx__outputs li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.55em;
  inline-size: 6px;
  block-size: 6px;
  background-color: var(--text);
}
.idx__btn { justify-self: start; margin-block-start: var(--space-2); }

@media (min-width: 700px) {
  .idx__row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-6); padding: var(--space-6); }
  .idx__name, .idx__art { grid-column: 1; }
  .idx__name { grid-row: 1; }
  .idx__art { grid-row: 2 / span 2; }
  .idx__method { grid-column: 2; grid-row: 1; padding-block-start: 0.2em; }
  .idx__out { grid-column: 2; grid-row: 2; }
  .idx__btn { grid-column: 2; grid-row: 3; }
}

/* from 1024 the figure is sticky beside the rows */
.idx__figure { display: none; }
@media (min-width: 1024px) {
  .idx { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .idx__list { grid-column: 1 / span 7; }
  .idx__figure { display: block; grid-column: 8 / span 5; align-self: stretch; }
  .idx__sticky {
    position: sticky;
    inset-block-start: calc(var(--head-h) + var(--space-6));
    display: grid;
    place-items: center;
    min-block-size: 360px;
    padding: var(--space-6);
    border-radius: var(--r-panel);
    background-color: var(--paper-50);
    color: var(--teal-700);
    box-shadow: var(--shadow-raised);
  }
  .idx__sticky [data-preview-target] { inline-size: 100%; margin: 0; }
  /* while the figure is live it carries the drawing, so the rows' own copies step aside */
  .mo-preview-live .idx__art { display: none; }
  /* no script, or no figure yet: the rows take the width instead of standing beside an empty panel */
  html:not(.js) .idx__figure, .idx:not(:has([data-preview-target])) .idx__figure { display: none; }
  html:not(.js) .idx__list, .idx:not(:has([data-preview-target])) .idx__list { grid-column: 1 / -1; }
  .idx__row { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
}

/* ---- 2. where to start: three columns, each routing to two services ---------------------------------- */
.start { display: grid; margin-block-start: var(--space-7); border-block-start: 3px solid var(--text); }
.start__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-block: var(--space-6);
  border-block-end: 1px solid var(--rule);
}
.start__name { font-size: 1.75rem; }
.start__sym { font-weight: 700; font-size: 1.25rem; line-height: 1.45; color: var(--mark); }
.start__line { color: var(--text-2); }
.start__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: auto; padding-block-start: var(--space-3); }
@media (min-width: 1000px) {
  .start { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .start__item { padding-inline: var(--space-6); border-block-end: 0; }
  .start__item:first-child { padding-inline-start: 0; }
  .start__item:last-child { padding-inline-end: 0; }
  .start__item + .start__item { border-inline-start: 1px solid var(--rule); }
  .start__actions { flex-direction: column; align-items: flex-start; }
}

/* ---- 3. scope: the display moment across the width, then the lead held beside the drivers ------------- */
.sv-scope__grid { display: grid; gap: var(--space-6) var(--gutter); }
.sv-scope__title { font-size: var(--t-display); line-height: 1.04; max-inline-size: 13em; }
.sv-scope__lead { max-inline-size: 44rem; }
.sv-scope__list dt { color: var(--text); }
@media (min-width: 1100px) {
  .sv-scope__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: var(--space-7); align-items: start; }
  .sv-scope__title { grid-column: 1 / -1; }
  .sv-scope__lead { grid-column: 1 / span 4; grid-row: 2; }
  .sv-scope__list { grid-row: 2; }
}

/* ---- 4. FAQ lead under the held heading -------------------------------------------------------------- */
.sv-faq__lead { margin-block-start: var(--space-4); font-size: var(--t-body); line-height: var(--lh-text); }