/* Progressive enhancements only. Scroll reveal lives entirely in datum.css
   under .reveal; this file adds no second motion system. Existing design
   tokens, typography, and global rules remain in datum.css. */
.aurora-line-icon {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  margin-bottom: 0.6rem;
}

.aurora-line-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.aurora-fact-icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-bottom: 0.5rem;
}

.aurora-path-icon {
  margin-bottom: 0.7rem;
}

.aurora-services-guide-link {
  margin-top: 1rem;
  font-size: 0.95rem;
  text-align: center;
}

/* The interaction class is added only by the enhancement script. It makes
   existing controls feel consistent without editing their global rules. */
.aurora-smooth-interaction {
  transition-duration: 260ms !important;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.aurora-smooth-interaction.aurora-faq-panel {
  transition: height 320ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* The relevance guide is the right-hand column of a heading rail, so the
   grid's own row gap carries the spacing above it. */
.aurora-triage-tool {
  margin-top: 0;
}

.aurora-triage-groups {
  display: grid;
  grid-template-columns: minmax(0, 48rem);
  gap: 2.25rem;
}

.aurora-triage-fieldset {
  min-width: 0;
  border: 0;
}

.aurora-triage-legend {
  margin-bottom: 0.75rem;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
}

.aurora-triage-step {
  display: inline-block;
  min-width: 1.4rem;
  margin-right: 0.45rem;
  color: var(--sage);
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 400;
}

.aurora-triage-options {
  border-top: 1px solid var(--hairline);
}

.aurora-triage-option {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  border-bottom: 1px solid var(--hairline);
  padding: 0.75rem 0;
  color: var(--graphite);
  font-size: 0.95rem;
  line-height: 1.45;
  cursor: pointer;
}

.aurora-triage-option input {
  width: 1rem;
  height: 1rem;
  margin-top: 0.18rem;
  accent-color: var(--sage);
}

.aurora-triage-result {
  max-width: var(--content);
  margin-top: 2rem;
  border-top: 1px solid var(--hairline);
  padding-top: 1.1rem;
}

.aurora-triage-result-title {
  margin-bottom: 0.45rem;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 600;
}

.aurora-triage-guidance + .aurora-triage-guidance {
  margin-top: 0.85rem;
}

.aurora-triage-action {
  margin-top: 1.1rem;
}

.aurora-triage-privacy {
  margin-top: 1.2rem;
  color: var(--slate);
  font-size: 0.9rem;
}

/* Services links to #one-statement-many-uses, so this section is a live anchor
   target and keeps its scroll offset. */
.aurora-use-section {
  scroll-margin-top: 1.25rem;
}

/* ---- Home: the information ecosystem figure ----------------------------------
   The figure went through four passes on 2026-08-28 before arriving here. It
   had been a three-column flowchart — records, arrow, box, arrow, outcomes —
   which is the shape every professional-services site uses, and no amount of
   retouching made it interesting. It also left the contour motif nothing to do
   but sit behind the diagram as wallpaper.

   What the flowchart never said is the thing a lender or an attorney actually
   wants to know: which of the client's records becomes which line of the
   statement. Loan documents become liabilities. Appraisals become estimated
   current values. Net worth is not an input at all — it is what remains. That
   mapping is specific, it is useful, and it is what this version is built
   around.

   So the deliverable is no longer a labelled box. It is a document: a paper
   page, larger than anything else in the figure, its four captions set as real
   rows over rules. Selecting a row recedes the records that do not prepare it.

   Three things carry the composition:

     The join.     A fixed-width column between the records and the page,
                   holding nine nested hairline curves that fan out at the
                   spine and converge on the page's mid-height. This is the
                   contour motif doing structural work rather than sitting
                   behind the content — the owner's note that the lines were
                   welcome but not as a background. Because the column is a
                   fixed grid track, the curves' geometry is deterministic:
                   preserveAspectRatio="none" lets them stretch to whatever
                   height the row resolves to, and non-scaling-stroke keeps
                   every line a true hairline while they do.
     The page.     Paper-lift on the band's paper, defined by one hairline, the
                   way .principal-photo mounts a photograph. It is the figure's
                   brightest and largest element, so it needs no fill to be the
                   focal point. Deliberately not navy: a navy block reads as a
                   card, and this has to read as a document.
     The L-turn.   Records and page sit side by side; the three uses sit beneath
                   them, full width. The eye goes left to right, then down. A
                   fourth column would have crushed all three, and the uses are
                   consequences of the statement rather than peers of it.

   Interaction is opacity and rule colour only — nothing moves, resizes, or
   reflows. See setUpFlowMapping in site-interactions.js. Every mapping is also
   written into each row as visually hidden text, so the figure is complete
   without the interaction and without the script. */
.aurora-flow {
  /* The join column's width, and therefore the reach of the connector that
     completes itself from a selected row back to the spine. One value, so the
     connector cannot drift out of alignment with the column it crosses. */
  --flow-join: clamp(3rem, 6vw, 6.5rem);
  /* The page's inner padding, needed a second time by that same connector. */
  --flow-page-pad: clamp(1.5rem, 2.6vw, 2.4rem);
  /* Every stub and leader joining a record to the spine. */
  --flow-stub: clamp(0.9rem, 1.6vw, 1.5rem);

  max-width: var(--shell);
  margin: var(--gap-group) 0 0;
}

.aurora-flow-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr);
  align-items: stretch;
}

/* ---- Stage labels ------------------------------------------------------------
   A serif numeral over a small sans label, used identically at all three
   stages. The numeral echoes .aurora-triage-step, the site's existing
   step-number pattern, and is aria-hidden: the heading text carries the meaning
   for a screen reader. */
.aurora-flow-stage-title {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin-bottom: 1.15rem;
  color: var(--slate);
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
}

.aurora-flow-stage-num {
  flex: 0 0 auto;
  color: var(--sage);
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Top-aligned, and inset by exactly the page's own padding, so stage 01's label
   and stage 02's label start on one line. Centring both columns was tried and
   put them at different heights, which is the fault that made an earlier
   version read as two unrelated modules either side of a box.

   The join is nested here, in the same grid row as the collector, rather than
   being a third column of the outer grid. As an outer column it stretched to
   the whole row height while the spine only reached the bottom of the records,
   so curves emanated from empty space above and below it and several leader
   lines appeared to run into nothing. Sharing a row with the collector makes
   the sheaf exactly as tall as the spine it gathers, at any width. */
.aurora-flow-inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--flow-join);
  align-items: stretch;
  min-width: 0;
  align-self: start;
  padding-top: var(--flow-page-pad);
}

.aurora-flow-inputs > .aurora-flow-stage-title {
  grid-column: 1 / -1;
}

/* ---- The records, gathered onto one spine ------------------------------------
   Six named record types in two labelled groups, because who holds what is the
   point of the Advisors section further down the page. A leader line runs from
   the end of each name to a single vertical hairline down the group's edge.

   The bracket is a border on the wrapper and a flexible rule inside each row,
   so nothing depends on how the text happens to wrap. A fixed-length stub was
   tried first and read as a row of unconnected tick marks, because a list item
   is full width and its right edge is nowhere near where its text ends. */
.aurora-flow-collect {
  position: relative;
  border-right: 1px solid var(--hairline);  /* permitted: ecosystem connectors */
  padding-right: var(--flow-stub);
}

.aurora-flow-holder + .aurora-flow-holder {
  margin-top: 1.5rem;
}

.aurora-flow-holder-title {
  margin: 0 0 0.55rem;
  color: var(--slate);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  line-height: 1.4;
  text-transform: uppercase;
}

.aurora-flow-records {
  list-style: none;
  margin: 0;
}

/* The record names carry the left half of the figure, so they are set in the
   display serif rather than the running sans. Each group cascades: the first
   name starts at the column edge and each one after it steps in, so the left
   edge is a short diagonal and the leaders shorten as they descend. Read
   together the two groups funnel toward the spine. A random scatter was the
   alternative and reads as a mistake; a repeated diagonal reads as a decision. */
.aurora-flow-records li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 400;
  line-height: 1.4;
  padding: 0.32rem 0;
  transition: opacity .22s ease;
}

.aurora-flow-records li:nth-child(2) { padding-left: 0.9rem; }
.aurora-flow-records li:nth-child(3) { padding-left: 1.8rem; }
.aurora-flow-records li:nth-child(4) { padding-left: 2.7rem; }

.aurora-flow-records li::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  margin-right: calc(-1 * var(--flow-stub));
  background: var(--hairline);            /* permitted: ecosystem connectors */
}

/* A record that does not prepare the selected line. It recedes rather than
   disappearing: the figure must never look as though records were removed. */
.aurora-flow-records li[data-dim] {
  opacity: 0.3;
}

/* ---- The join ---------------------------------------------------------------
   Nine nested curves, fanned at the spine and converged on the page. */
.aurora-flow-join {
  align-self: stretch;
  display: block;
  color: var(--hairline);
  pointer-events: none;
}

/* The stacked layout needs the same fan turned a quarter turn. Rotating the
   wide one with a transform was tried and overflows badly: its layout box stays
   wide and short while the paint rotates about the centre, so the curves spill
   up into the records above. A second, genuinely vertical set of paths is nine
   more elements in the markup and behaves correctly at every width. Only one of
   the two is ever displayed. */
.aurora-flow-join-stack {
  display: none;
  color: var(--hairline);
  pointer-events: none;
}

.aurora-flow-join-stack svg {
  display: block;
  width: 100%;
  height: 100%;
}

.aurora-flow-join-stack path {
  fill: none;
  stroke: currentColor;                   /* permitted: ecosystem connectors */
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.aurora-flow-join svg {
  display: block;
  width: 100%;
  height: 100%;
}

.aurora-flow-join path {
  fill: none;
  stroke: currentColor;                   /* permitted: ecosystem connectors */
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* ---- The page ---------------------------------------------------------------
   The deliverable, rendered as a document rather than described as a box. */
.aurora-flow-doc {
  position: relative;
  min-width: 0;
  align-self: start;
  border: 1px solid var(--hairline);      /* permitted: ecosystem card rules */
  background: var(--paper-lift);
  padding: var(--flow-page-pad);
}

.aurora-flow-stage-title-on-card {
  margin-bottom: 0.9rem;
}

.aurora-flow-doc-title {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.55rem, 2.2vw, 2.05rem);
  font-weight: 400;
  line-height: 1.15;
}

.aurora-flow-doc-date {
  margin: 0.3rem 0 0;
  color: var(--slate);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* The one piece of instruction in the figure, and the only thing here that
   depends on the script. It is hidden by default and shown under html.js,
   which datum.css's inline head script sets — so with JavaScript off the
   figure never invites an interaction it cannot perform. The mapping itself is
   still in each row's hidden text either way. */
.aurora-flow-doc-hint {
  display: none;
  margin: 1.4rem 0 0.35rem;
  color: var(--slate);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  line-height: 1.4;
  text-transform: uppercase;
}

.aurora-flow-rows {
  list-style: none;
  margin: 0;
}

.aurora-flow-row {
  border-top: 1px solid var(--hairline);   /* permitted: ecosystem card rules */
}

.aurora-flow-row-result + .aurora-flow-row {
  border-top: 0;
}

/* Each row is an arithmetic operator in a fixed gutter beside a body, so the
   equation reads down the page's left margin the way it would on a real
   statement: nothing, minus, minus, equals. The operators are aria-hidden and
   the arithmetic is given to a screen reader as one sentence instead.

   Net worth is the one row that is not a control, because nothing prepares it.
   Making it visibly inert is the whole point being made: the reader can select
   the three inputs and the notes, and cannot select the result. */
.aurora-flow-row-result,
.aurora-flow-row-notes,
.aurora-flow-row-trigger {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  gap: 0.65rem;
  width: 100%;
  padding: 0.75rem 0;
  text-align: left;
  transition: opacity .22s ease;
}

.aurora-flow-row-trigger {
  position: relative;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.aurora-flow-row-op {
  color: var(--sage);
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.5;
}

.aurora-flow-row-body {
  min-width: 0;
}

.aurora-flow-row-trigger:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 2px;
}

.aurora-flow-row-label {
  display: block;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.4;
}

.aurora-flow-row-hint {
  display: block;
  margin-top: 0.15rem;
  color: var(--slate);
  font-size: 0.82rem;
  line-height: 1.45;
}

/* What the line contains, absorbed from the "Financial Position as of a Date"
   section this figure replaced. It is visible by default, so with the script
   absent the page still states everything that section stated. Under html.js
   it collapses into the selected row, which is what keeps a page of five rows
   from becoming a wall: selecting a line then reveals both what it contains
   and which records prepare it.

   The result and notes rows are exempt. Neither is a control, so nothing could
   ever reveal them, and their text stays visible. */
.aurora-flow-row-detail {
  display: block;
  margin-top: 0.4rem;
  color: var(--graphite);
  font-size: 0.86rem;
  line-height: 1.55;
}

.js .aurora-flow-row-trigger .aurora-flow-row-detail {
  display: none;
}

.js .aurora-flow-row-trigger[data-shown] .aurora-flow-row-detail {
  display: block;
}

/* ---- Net worth, the result ---------------------------------------------------
   The one filled element in the figure, and the only place ink appears as a
   field rather than as type. It earns that because it is the single figure the
   statement exists to present, and because the thing it needs to say is
   counter-intuitive: under ASC 274 net worth is the residual after estimated
   income taxes, so it is normally lower than the number a client reaches from
   assets and debts alone. It was previously greyed out as a "derived" row,
   which buried the most useful sentence on the page.

   It is not a control. Nothing prepares it, so there is nothing to reveal, and
   its detail is always visible. */
.aurora-flow-row-result {
  /* width:auto, not the 100% the button rows need. With an explicit 100% the
     negative margins shift the band left instead of widening it, so it bled
     past the page's left edge and stopped short of its right by the same
     amount. Auto lets both margins do their job and the band spans the page
     exactly. */
  width: auto;
  margin: 0.5rem calc(-1 * var(--flow-page-pad)) 0;
  border-top: 0;
  padding: 1.1rem var(--flow-page-pad);
  background: var(--ink);
}

.aurora-flow-row-result .aurora-flow-row-op,
.aurora-flow-row-result .aurora-flow-row-hint {
  color: var(--sage-on-ink);
}

.aurora-flow-row-result .aurora-flow-row-label {
  color: var(--paper-lift);
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1.9vw, 1.75rem);
  font-weight: 400;
  line-height: 1.15;
}

.aurora-flow-row-result .aurora-flow-row-detail {
  color: var(--paper-on-ink);
}

.aurora-flow-row-result .aurora-flow-row-detail em {
  color: var(--paper-lift);
  font-style: normal;
  font-weight: 600;
}

/* The notes row closes the page under the result. */
.aurora-flow-row-notes {
  border-top: 0;
  padding-top: 1rem;
}

/* The notes row is the last thing on the page and reads as a footing to the
   three captions above it, so it gets a little air rather than sitting flush
   against Net worth. */
.aurora-flow-row-notes {
  border-top-width: 1.5px;
}

.js .aurora-flow-doc-hint {
  display: block;
}

/* While a line is selected, the lines that are not recede — the same treatment
   the records get, so both halves of the figure answer in one language. */
/* Only the three selectable lines recede. The result keeps full strength
   throughout: it is the figure's conclusion, not one option among several. */
.aurora-flow[data-mapping] .aurora-flow-row-trigger:not([data-shown]) {
  opacity: 0.45;
}

.aurora-flow-row-trigger[data-shown] .aurora-flow-row-label {
  color: var(--sage);
}

/* The connector completes itself: a sage rule running left from the selected
   row, across the page's padding and border and the whole join column, to meet
   the spine the records hang from. The reach is computed from the same two
   custom properties that set that padding and that column, so it cannot fall
   short or overshoot at any width. */
.aurora-flow-row-trigger[data-shown]::before {
  content: "";
  position: absolute;
  top: 1.4rem;
  right: 100%;
  /* Page padding, the page's border, and the join column: the spine still sits
     that far to the left even though the join is now nested inside the inputs
     column rather than being an outer grid track. Shortening this to the
     padding alone left the connector ending in open paper. */
  width: calc(var(--flow-page-pad) + 1px + var(--flow-join));
  height: 1px;
  background: var(--sage);               /* permitted: ecosystem connectors */
}

/* ---- Stage three: the uses --------------------------------------------------
   Beneath the pair, full width, three across. Consequences of the statement,
   not peers of it. */
.aurora-flow-uses {
  margin-top: clamp(2.6rem, 4.5vw, 3.8rem);
  border-top: 1px solid var(--hairline);   /* permitted: ecosystem card rules */
  padding-top: 1.3rem;
}

.aurora-flow-use-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  list-style: none;
  margin: 0;
}

.aurora-flow-use-title {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.4;
}

.aurora-flow-use-note {
  display: block;
  color: var(--slate);
  font-size: 0.86rem;
  line-height: 1.5;
}

/* ---- The quarterly strip ----------------------------------------------------
   A branch off the statement, not a fourth stage. Its rule is dashed against
   solid rules everywhere else in the figure, and that is the whole optionality
   signal; the Optional tag states it in words for anyone who does not read the
   convention, and the strip's own sentence states it again for a screen reader,
   which gets no dashes at all. */
.aurora-flow-cycle {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 3vw, 3rem);
  row-gap: 0.35rem;
  margin-top: clamp(2.2rem, 3.5vw, 3rem);
  border-top: 1px dashed var(--hairline);  /* permitted: ecosystem card rules */
  padding-top: 1rem;
}

.aurora-flow-cycle-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.5;
}

/* A keyline tag, not a filled badge — the figure carries no fill at all now. */
.aurora-flow-cycle-optional {
  border: 1px solid var(--hairline);       /* permitted: ecosystem card rules */
  padding: 0.15rem 0.45rem;
  color: var(--slate);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.aurora-flow-cycle-text {
  margin: 0;
  max-width: var(--content);
  color: var(--slate);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* The Statement of Changes in Net Worth, absorbed from the same replaced
   section. It belongs to the quarterly strip because it is the statement that
   only a period engagement produces, so it sits inside the one block on the
   page already labelled Optional. */
.aurora-flow-cycle-second {
  grid-column: 2;
  margin: 0.9rem 0 0;
  max-width: var(--content);
  color: var(--slate);
  font-size: 0.88rem;
  line-height: 1.55;
}

.aurora-flow-cycle-second-title {
  display: block;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .aurora-flow-records li,
  .aurora-flow-row-trigger {
    transition: none;
  }
}
/* ---- Scope and limitations ---------------------------------------------------
   Two paragraphs of fine print sat directly beneath the diagram and pulled the
   eye down before the figure had been read. They are now behind one quiet
   summary, closed by default. Every word stays on the page, in the DOM, and in
   the print stylesheet's reach; the same limitations are also stated in the
   FAQ and on Services, so nothing here is the only statement of anything.

   Deliberately not styled like the FAQ categories: this is a footnote a reader
   may open, not a category heading, so it stays small, slate, and sans. */
.aurora-flow-limits {
  max-width: var(--content);
  margin-top: clamp(2rem, 3vw, 2.6rem);
  border-top: 1px solid var(--hairline);   /* permitted: ecosystem card rules */
  padding-top: 0.9rem;
}

.aurora-flow-limits-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--slate);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
  transition: color .2s ease;
}

.aurora-flow-limits-summary::-webkit-details-marker {
  display: none;
}

.aurora-flow-limits-summary:hover {
  color: var(--sage);
}

.aurora-flow-limits-summary:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 3px;
}

.aurora-flow-limits-indicator {
  position: relative;
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
}

.aurora-flow-limits-indicator::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .2s ease;
}

.aurora-flow-limits[open] .aurora-flow-limits-indicator::before {
  transform: rotate(45deg);
}

.aurora-flow-limits-body {
  padding-top: 0.9rem;
}

.aurora-flow-limits-body p {
  margin: 0;
  color: var(--slate);
  font-size: 0.85rem;
  line-height: 1.55;
}

.aurora-flow-limits-body p + p {
  margin-top: 0.75rem;
}

/* On paper the fine print should not depend on whether the reader happened to
   open it. Browsers hide a closed <details>' children by different mechanisms,
   so both are overridden; datum.css already carries the site's other print
   rules. Screen behaviour is unaffected either way. */
@media print {
  .aurora-flow-limits > :not(summary) {
    display: block !important;
    content-visibility: visible !important;
  }

  .aurora-flow-limits-indicator {
    display: none;
  }
}

.aurora-faq {
  background: var(--paper-lift);
}

/* ---- FAQ hierarchy ------------------------------------------------------------
   Three distinct levels, so nothing here competes with anything else:
     "Frequently asked questions"  serif h2, the section heading (datum.css)
     category                      serif h3 above a full-width ink rule, with
                                   generous space before it
     question                      sans, medium weight, a row in a divided
                                   list — plainly a control, not a heading
   The family change (serif category, sans question) does most of the work;
   the rule and the space do the rest. */
.aurora-faq-groups {
  display: grid;
  gap: 3.75rem;
}

.aurora-faq-group {
  border-top: 1.5px solid var(--ink);   /* permitted: FAQ category rule */
  padding-top: 1.15rem;
}

/* Each category is a <details> that ships open, so no answer starts life
   hidden and the section still scans top to bottom on arrival. Collapsing is
   an escape hatch for the reader who knows a whole category is not theirs —
   a referring attorney folding away nine client questions — not a gate in
   front of the content. The questions inside keep their own accordions and
   their own script; nothing here touches them. */
.aurora-faq-group-summary {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.35rem;
  cursor: pointer;
  list-style: none;
}

.aurora-faq-group-summary::-webkit-details-marker {
  display: none;
}

.aurora-faq-group-summary:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 4px;
}

.aurora-faq-group > h3,
.aurora-faq-group-summary > h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.25;
}

.aurora-faq-group-summary > h3 {
  flex: 1 1 auto;
  transition: color .2s ease;
}

.aurora-faq-group-summary:hover > h3 {
  color: var(--sage);
}

.aurora-faq-group-count {
  flex: 0 0 auto;
  color: var(--slate);
  font-size: 0.8rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

/* A chevron built from one rotated square, so it needs no icon file and
   inherits the text colour. Points down when open, right when closed. */
.aurora-faq-group-indicator {
  position: relative;
  flex: 0 0 auto;
  width: 0.6rem;
  height: 0.6rem;
}

.aurora-faq-group-indicator::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid var(--sage);
  border-bottom: 1.5px solid var(--sage);
  transform: rotate(-45deg);
  transition: transform .2s ease;
}

.aurora-faq-group-panel[open] .aurora-faq-group-indicator::before {
  transform: rotate(45deg);
}

.aurora-faq-item {
  border-bottom: 1px solid var(--hairline);   /* permitted: FAQ question rules */
}

.aurora-faq-item:first-child {
  border-top: 1px solid var(--hairline);
}

.aurora-faq-item > h4 {
  margin: 0;
}

.aurora-faq-trigger {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  gap: 1.5rem;
  border: 0;
  padding: 1.05rem 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  transition: color .2s ease;
}

.aurora-faq-trigger:hover {
  color: var(--sage);
}

.aurora-faq-trigger:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 3px;
}

.aurora-faq-indicator {
  flex: 0 0 auto;
  color: var(--sage);
  font-family: var(--sans);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1;
}

.aurora-faq-panel {
  overflow: hidden;
  transition: height 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.aurora-faq-answer {
  max-width: var(--content);
  padding: 0 2.5rem 1.3rem 0;
  color: var(--graphite);
  font-size: 0.97rem;
}

.aurora-faq-answer p + p {
  margin-top: 0.85rem;
}

/* At the breakpoint where the heading rail collapses, the figure becomes one
   vertical sequence: the records, the join, the page, the three uses, the
   quarterly strip, the scope toggle.

   Two things change shape rather than just stacking.

   The collector bracket flips to the left edge. Stacked, the page is below the
   records rather than beside them, so a spine on their right would point at
   nothing; on the left it reads as what it is, a grouped list. The cascade is
   dropped with it, because the stub sits at a fixed left position while an
   indented name starts further right, which left every cascaded row showing a
   gap between its stub and its own text.

   The join rotates. The nine curves converge left to right, which is wrong once
   the page is underneath; the same SVG is turned a quarter turn so they
   converge downward instead, and the column becomes a short horizontal band.

   The selected row's connector is hidden. Stacked, there is no join column to
   its left to cross, and a rule running off the page's left edge would point at
   nothing. The receding records still carry the mapping. */
@media (max-width: 900px) {
  .aurora-flow-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .aurora-flow-collect {
    border-right: 0;
    border-left: 1px solid var(--hairline);  /* permitted: ecosystem connectors */
    padding-right: 0;
    padding-left: var(--flow-stub);
  }

  .aurora-flow-records li {
    position: relative;
    display: block;
    padding-left: 0;
  }

  .aurora-flow-records li:nth-child(2),
  .aurora-flow-records li:nth-child(3),
  .aurora-flow-records li:nth-child(4) {
    padding-left: 0;
  }

  .aurora-flow-records li::after {
    position: absolute;
    top: 50%;
    left: calc(-1 * var(--flow-stub));
    width: var(--flow-stub);
    flex: none;
    margin-right: 0;
  }

  .aurora-flow-inputs {
    grid-template-columns: minmax(0, 1fr);
  }

  .aurora-flow-join {
    display: none;
  }

  .aurora-flow-join-stack {
    display: block;
    height: clamp(2.8rem, 10vw, 4rem);
    margin: 1.4rem 0;
  }

  .aurora-flow-row-trigger[data-shown]::before {
    display: none;
  }

  .aurora-flow-use-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.4rem;
  }

  /* Stacked, the strip's two halves become two rows rather than a label
     column beside a sentence column. */
  .aurora-flow-cycle {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.55rem;
  }

  .aurora-flow-cycle-second {
    grid-column: 1;
  }
}

@media (max-width: 620px) {
  .aurora-faq-group > h3,
  .aurora-faq-group-summary > h3 {
    font-size: 1.35rem;
  }

  /* The count is the first thing to go when the category title needs the
     width; the chevron still says the summary is a control. */
  .aurora-faq-group-count {
    display: none;
  }

  .aurora-faq-trigger {
    font-size: 0.95rem;
  }

  .aurora-faq-answer {
    padding-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aurora-faq-panel {
    transition: none;
  }

  .aurora-faq-group-indicator::before {
    transition: none;
  }
}