/* ==========================================================================
   NetrAI — Centre alignment
   --------------------------------------------------------------------------
   Loads LAST, after mobile.css, and turns the whole site from a left-aligned
   layout into a centred one.

   It is a separate file for the same reason mobile.css is: alignment is one
   decision applied in a hundred places, and having it in one file means it
   can be reviewed, tuned or reverted by touching a single <link> rather than
   by hunting `text-align` through eleven stylesheets.

   WHAT IS NOT CENTRED, AND WHY
   Three kinds of thing stay left-aligned. None of them is a stylistic
   exception — each would actively break if centred:

     1. The hero product demo (.nd). It is a simulation of a real analytics
        dashboard. Centring a data table, a sidebar nav and a chat thread does
        not make it a centred design, it makes it a broken screenshot.
     2. Text the user types (inputs, textareas, the search box). A centred
        input moves the caret and the text under the cursor on every
        keystroke; the label above it is centred instead.
     3. The site-search results and the tour widget. Both are floating UI
        panels rather than page content, and both are scannable lists.

   Everything else — headings, standfirsts, card copy, bullet lists, the
   timeline, the process rails, pricing rows, the comparison table, both
   footers — is centred.

   TWO STRUCTURAL CHANGES
   Centring is not only `text-align`. Two components are built around a
   left-hand rail with content hanging off it: the homepage solution timeline
   and the services/about process track. The process track is rebuilt as a
   centred timeline. The solution timeline is the one deliberate exception on
   the page — it keeps its left rail and left-aligned copy, because a numbered
   sequence read against a consistent left edge is faster than the same
   sequence centred, and because a centred rail cannot run without cutting
   through the headings. See section 10.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The default
   -------------------------------------------------------------------------- */
body { text-align: center; }

/* Anything with a measure needs to be centred as a box as well as inside
   itself, or capped text sits in a left-hand column of centred lines. */
p, .lead, blockquote, figcaption { margin-left: auto; margin-right: auto; }
p.lead { max-width: 60ch; }

/* --------------------------------------------------------------------------
   2. Section heads
   --------------------------------------------------------------------------
   style.css has two variants: `.section-head` (left, with the eyebrow drawn
   as a rule running to the edge of the column) and `.section-head.center`
   (centred, eyebrow with a blinking terminal cursor). Everything becomes the
   centred variant. The `:not(.center)` selectors are repeated verbatim so
   they match on specificity and win on source order.
   -------------------------------------------------------------------------- */
.section-head {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-head:not(.center) > .eyebrow {
  display: inline-flex;
  width: auto;
}
.section-head:not(.center) > .eyebrow::after {
  /* The blinking terminal cursor was the old system's signature. It has no
     place in a typographic label set in Ash caps. */
  content: none;
}
@media (prefers-reduced-motion: reduce) {
  .section-head:not(.center) > .eyebrow::after { animation: none; opacity: 1; }
}

/* Standalone eyebrows outside a section head. */
.eyebrow { justify-content: center; }

/* --------------------------------------------------------------------------
   3. Heroes
   -------------------------------------------------------------------------- */
.page-hero { text-align: center; }

/* .hero-inner is a 780px block. Centring the text inside it is not enough —
   the block itself was still pinned to the section's left padding edge, so on
   a 1440px page the "centred" headline sat 300px left of centre. */
.hero-inner { margin-left: auto; margin-right: auto; }
.page-hero h1 { margin-left: auto; margin-right: auto; }
.page-hero p.lead { margin-left: auto; margin-right: auto; }
.hero-trust { justify-content: center; }

/* --------------------------------------------------------------------------
   4. Cards and grids
   -------------------------------------------------------------------------- */
.card,
.problem-card,
.service-card,
.combo-card,
.work-body,
.core-values-grid .card,
.cta-banner,
.service-featured { text-align: center; }

/* Icon tiles are block-level with a fixed size, so they need centring as
   boxes rather than as text. */
.card-icon,
.cat-icon,
.avatar-ring { margin-left: auto; margin-right: auto; }

.card p,
.service-featured > p { max-width: 52ch; margin-left: auto; margin-right: auto; }

/* ---- Exception: Mission / Vision ---------------------------------------
   These carry .card for the surface, so every .card rule above lands on them
   — but they hold long-form statements, not the short centred label-and-line
   the rest of the cards do, and centred prose at that length is hard to read.
   Stated as an exception here rather than by dropping .card from the markup,
   which would cost them the surface, the border and the hover step.
   Overriding from another file is not an option: center.css loads after
   refine.css by design. */
.mvv-card { text-align: left; }
.mvv-card p { max-width: 46ch; margin-left: 0; margin-right: 0; }
.mvv-card .mvv-icon { margin-left: 0; margin-right: 0; }

/* The three principles go with them. Each one is marked by an accent rule
   down its left edge, and a left rule against centred text reads as a
   mistake — the rule points at an edge the words do not start from. The
   section heading above stays centred like every other section heading;
   it is the block of content underneath that aligns left. */
.mvv-principles,
.mvv-principle { text-align: left; }
.mvv-principle p { max-width: none; margin-left: 0; margin-right: 0; }

.card-link,
.service-secondary-link,
.service-pricing-link { justify-content: center; }

/* --------------------------------------------------------------------------
   5. Lists
   --------------------------------------------------------------------------
   Both bullet lists position their dot absolutely at left:0 with the text
   indented past it. Centred, that leaves the dot stranded at the far left of
   the column. The dot becomes an inline marker sitting immediately before the
   text instead, so the bullet travels with the line.
   -------------------------------------------------------------------------- */
.service-list,
.service-list-compact { align-items: center; }

.service-list li,
.service-list-compact li { padding-left: 0; }

.service-list li::before,
.service-list-compact li::before {
  position: static;
  display: inline-block;
  margin-right: 9px;
  vertical-align: middle;
}

/* The checklist rows are flex containers, and their contents are a <strong>
   plus a bare text node. As flex items those two became separate columns that
   each shrank to fit, so "Clarity first." wrapped mid-phrase next to its own
   sentence. Reverting the row to a block and making the tick an inline marker
   lets the whole line wrap as one piece of prose. */
.checklist li {
  display: block;
  text-align: center;
}
.checklist li::before {
  display: inline-block;
  vertical-align: -4px;
  margin-right: 9px;
  margin-top: 0;
}

.footer-grid ul { display: flex; flex-direction: column; align-items: center; }

/* --------------------------------------------------------------------------
   6. Footers
   -------------------------------------------------------------------------- */
.footer-grid,
.footer-col,
.footer-col-brand,
.footer-bottom,
.finale-baseline,
.finale-flank { text-align: center; }

.footer-col-brand { justify-items: center; }
.footer-logo-mark,
.social-row { justify-content: center; }

/* The little accent bar under each footer heading is anchored left:0. */
.footer-grid h4, .footer-grid h2 { display: block; }


.footer-cta { justify-content: center; text-align: center; }
.footer-bottom { justify-content: center; }

.finale-flank,
.finale-flank-left,
.finale-flank-right { align-items: center; }
.finale-links,
.finale-links-right { align-items: center; }
.finale-flank-right .finale-flank-label { text-align: center; }
.finale-legal { justify-content: center; }

/* --------------------------------------------------------------------------
   7. Pricing
   -------------------------------------------------------------------------- */
/* The price row is a two-column grid: text on the left spanning two rows, the
   tickbox top-right, the price across the bottom. Centred it becomes a single
   column of three stacked rows — box, text, price. Every cell has to be
   re-placed explicitly, or the box and the name both land in row 1 and the
   checkbox sits on top of the service name. */
.price-item {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  text-align: center;
}
.price-item .box {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  align-self: center;
  margin-bottom: 8px;
}
.price-item .item-text {
  grid-column: 1;
  grid-row: 2;
  align-items: center;
}
.price-item .item-name,
.price-item .item-desc { text-align: center; }
.price-item .item-price { grid-column: 1; grid-row: 3; text-align: center; }

.price-category-head { justify-content: center; }
.cat-icon-title { justify-content: center; }
.price-category-note,
.price-estimate-note,
.cat-filter { justify-content: center; }

.tier-advisor,
.advisor-q-text,
.advisor-result-inner { text-align: center; }
.advisor-option { text-align: center; justify-content: center; }
.advisor-controls { justify-content: center; }
.tier-btn { text-align: center; }
.tier-note { margin-left: auto; margin-right: auto; text-align: center; }

.compare-table tbody th { text-align: center; }

/* The FAQ row is a flex container with the question and the +/- pushed to
   opposite ends, so `text-align` alone moves nothing. The pair is centred as
   a group and the icon travels with the question rather than sitting out on
   the right rail — otherwise a centred question with a far-right icon reads
   as two unrelated things. */
.faq-question {
  justify-content: center;
  text-align: center;
  gap: 14px;
}
.faq-icon { flex-shrink: 0; }
.faq-answer-inner { text-align: center; }

/* The cart is a receipt: item on one side, price on the other. That pairing
   is the whole point of the layout, so the rows keep their justification and
   only the panel's headings centre. */
.cart-header { justify-content: center; }
.cart-actions { align-items: center; }

/* --------------------------------------------------------------------------
   8. Forms — labels centre, typed text does not
   -------------------------------------------------------------------------- */
/* NOT `align-items: center` on .form-field. It is a column flex container, so
   centring the cross axis makes every input shrink to its content width —
   which for an empty field is nothing, and the form collapses into a row of
   stubs. The label is a block and centres on its own. */
.form-field { align-items: stretch; }
/* A label centred over a left-aligned field points at nothing. Apple's form
   labels sit on the field's leading edge. */
.form-field label { text-align: left; }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  text-align: left;
}
.form-field select { background-position: right 14px center; }

/* --------------------------------------------------------------------------
   9. Reviews and editorial
   -------------------------------------------------------------------------- */
.review-card { text-align: center; align-items: center; }
.review-author { justify-content: center; }
.review-stars { justify-content: center; }
.review-sign { display: flex; justify-content: center; }

.pull-quote {
  border-left: 0;
  border-top: 2px solid var(--iris-violet);
  padding-left: 0;
  padding-top: 20px;
  text-align: center;
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
}

.industries-layout { justify-items: center; text-align: center; }
.industries-chip-row { justify-content: center; }
.industries-stage { margin-left: auto; margin-right: auto; justify-self: center; }

.filter-row,
.hero-actions,
.cta-actions,
.service-cta-row,
.stat-grid { justify-content: center; }

/* --------------------------------------------------------------------------
   10. Solution timeline — editorial left rail
   --------------------------------------------------------------------------
   Was: a centred column with a node above each block of copy, a connector
   dropping into the gap below it, and a filled blue node that tracked
   whatever crossed the middle of the viewport.

   Three things were wrong with that. The blue node signalled "you are here"
   for a position the visitor never chose — it followed the scrollbar, not
   their reading, so three of four steps were always dimmed. The rail could
   not run continuously because a centred track cuts straight through every
   heading. And 76px of empty rail between steps made four short paragraphs
   cost 1,200px of scroll.

   Now: the number itself is the marker, set as large quiet display type that
   resolves from Pebble to Carbon once its row arrives. Hairline rules divide
   the steps. Nothing is a control, so nothing needs to look like one, and the
   consistent left edge is read faster than centred text.

   This section is the one place on the page that deliberately opts out of the
   centred treatment — which is why the override lives here rather than being
   fought for in story.css.
   -------------------------------------------------------------------------- */
.timeline-showcase { grid-template-columns: 1fr; }

.solution-timeline {
  gap: 0;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.timeline-step { text-align: left; }
.timeline-step-body p { max-width: 54ch; margin-left: 0; margin-right: 0; }
.timeline-step-body .fixes { justify-content: flex-start; }

/* No rail, no connectors. The rules between rows do the dividing. */
.timeline-progress-track { display: none; }
.timeline-step::after { content: none; }

/* --------------------------------------------------------------------------
   11. Process track — same treatment
   --------------------------------------------------------------------------
   The steps hung off a 2px rail at x = 15px with a node at left: -45px.
   Everything moves to the centre line.
   -------------------------------------------------------------------------- */
[data-anim="process"] .process-layout { grid-template-columns: 1fr; }
[data-anim="process"] .process-sticky { position: static; }

[data-anim="process"] .process-track {
  padding-left: 0;
  padding-top: 0;
  align-items: center;
  text-align: center;
}

/* Same reasoning as the timeline rail above: one continuous line down the
   centre crosses every heading. Replaced with a connector per gap. */
[data-anim="process"] .process-line { display: none; }

[data-anim="process"] .process-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 30px;
}
/* THE connector — this is the line that is actually on screen. Note that
   .process-line is display:none a few rules up, so the scroll-linked fill
   that used to be computed for it in js/pages/animate.js was driving an invisible
   element while these connectors ran off a separate trigger. That split is
   what made the section feel broken. One mechanism now: each connector
   DRAWS from its step down to the next as that step arrives, and stays
   drawn.

   Was also a violet->blue gradient, against the one-blue rule. */
[data-anim="process"] .process-step::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 2px;
  height: 56px;                 /* == .process-track gap */
  background: var(--accent);
  transform: translateX(-50%) scaleY(0);
  transform-origin: top center;
  transition: transform 640ms cubic-bezier(0.22, 1, 0.36, 1) 120ms;
}
[data-anim="process"] .process-step:last-child::after { display: none; }
[data-anim="process"] .process-step.is-in::after,
[data-anim="process"] .process-step.is-past::after,
[data-anim="process"] .process-step.is-active::after {
  transform: translateX(-50%) scaleY(1);
}
@media (prefers-reduced-motion: reduce) {
  [data-anim="process"] .process-step::after {
    transform: translateX(-50%) scaleY(1);
    transition: none;
  }
}

/* The node moves from beside the step to directly above it. */
[data-anim="process"] .process-step::before {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

/* The step number was a 3.4rem translucent numeral tucked into the left
   margin at z-index -1 — a watermark, which only works when there is a margin
   to tuck it into. Centred it landed on top of its own heading. It becomes a
   small mono label instead, which is what it actually is. */
[data-anim="process"] .process-step .step-num {
  position: static;
  display: block;
  z-index: auto;
  margin: 16px 0 2px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  opacity: 1;
  -webkit-text-fill-color: transparent;
}
[data-anim="process"] .process-step p {
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   12. Opt-outs — see the note at the top of this file
   -------------------------------------------------------------------------- */
.nd, .nd * { text-align: initial; }
.site-search, .site-search * { text-align: initial; }
.aitg-bubble, .aitg-bubble *,
.aitg-dock, .aitg-dock * { text-align: initial; }
.cart-item-row, .receipt-row, .cart-total-row { text-align: initial; }

/* --------------------------------------------------------------------------
   13. Small screens
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* mobile.css left-aligns a few blocks to save vertical space; centring is
     the site-wide decision now, so those are brought back into line. */
  .philosophy-block { text-align: center; }
  .philosophy-block::before { left: 50%; transform: translateX(-50%); }
  .hero-trust { justify-content: center; }
  /* mobile.css lays the Contact column out as one wrapped row to keep the
     footer inside a single screen. Turning every footer list into a centred
     column above undid that and made it three stacked lines again, so the row
     is restored here — centred rather than left-aligned. */
  .footer-grid > .footer-col:nth-child(4) ul {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 20px;
  }
  .footer-col-brand { justify-items: center; }
  .price-category-head { justify-content: center; }
  .cat-selectall-btn { margin-left: auto; margin-right: auto; }
  .timeline-step { gap: 18px; }
  [data-anim="process"] .process-track { padding-left: 0; }
}