/* Inner-page craft — C0141 to C0146.

   The homepage answers "explanations rotate" with a rail. The inner pages must
   NOT repeat it, so they answer a different question: instead of containing
   content in cards, the page draws its own grid as visible structure. Cards are
   the templated signal; hairlines and column rules are the designed one.

   Motion contract, per Mohamed's amended law: entrances 600-800ms expo-out,
   interface responses at or under 350ms, reduced motion mutes everything. */

:root{
  --ic-ease:cubic-bezier(.19,1,.22,1);
  --ic-enter:700ms;
  --ic-rule:var(--line-2);
}

/* ---------- C0141 Chassis: the page rules itself in ---------------------- */

[data-chassis]{position:relative}
[data-chassis]::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--ic-rule);transform:scaleX(0);transform-origin:left center;
  transition:transform var(--ic-enter) var(--ic-ease);pointer-events:none;
}
[data-chassis][data-chassis-in="true"]::before{transform:scaleX(1)}

/* ---------- C0142 Drafting-grid rows (spec rows) ------------------------- */
/* AMENDED (counter placement), Mohamed on pricing #inc: "Move these from left
   make them above the titles or remove it and replace them with something
   else." The ordinal used to step 64px out into the page margin. The counter is
   KEPT, not dropped: these rows are a genuine sequence and `NN / NN` states both
   position and total, which a bare numeral would not. It now sits above its own
   row title, inside the copy column, at every width.

   Two things this is NOT. It is not a two-column row: giving the ordinal its own
   track would rebuild the same mostly-empty gutter 64px narrower and take that
   width off the copy. And the drafting character does not leave with the margin
   (it was never carried by the empty space). It is carried by the register's
   hairlines (the group's top rule, each row's bottom rule) and by the ordinals
   themselves, which now stack in one tabular column down the left edge of the
   copy instead of floating outside it.

   This is also exactly what has shipped at or below 1280px since the component
   was built, where the page gutter was too narrow for the margin position. The
   divergence is gone: one rendering at every width. Measured at 1440 before and
   after, the copy column is unchanged: 1128px on Platform and Pricing, 1080px
   on Solutions, where `.spec-row-link` reserves 48px for its arrow. */

.dgrid{border-top:1px solid var(--line);margin-top:8px}
.dgrid-row{
  display:grid;grid-template-columns:minmax(0,1fr);
  padding:26px 0;border-bottom:1px solid var(--line);
  transition:border-color var(--t-base) var(--ease);
}
/* Metadata, not a heading. The site's small-label setting (13px / 500 / .04em,
   as `.eyebrow-b`) so it belongs to the same family as the section eyebrow above
   it, but in `--quiet` rather than the eyebrow's blue, and at a third of the
   title's size, so it labels the title beneath it without competing with it.
   Tabular figures hold the ordinals in a column from row to row. */
.dgrid-n{
  display:block;margin-bottom:10px;
  font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.04em;
  color:var(--quiet);font-variant-numeric:tabular-nums;
  transition:color var(--t-base) var(--ease);
}
.dgrid-row h3{font-size:19px;font-weight:600;letter-spacing:-.012em;color:var(--ink);line-height:1.32}
.dgrid-row p{margin-top:8px;font-size:16px;line-height:1.6;color:var(--muted);max-width:62ch;text-wrap:pretty}
.dgrid-row p .lead{color:var(--body)}
.dgrid-row:hover .dgrid-n{color:var(--blue)}
.dgrid-row:hover{border-bottom-color:var(--line-2)}

/* ---------- C0143 Cell field (bare cells) -------------------------------- */

.cfield{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:8px}
.cfield>*{
  padding:26px 28px;border-left:1px solid var(--line);
  transition:border-left-color var(--t-base) var(--ease);
}
.cfield>*:nth-child(3n+1){padding-left:0;border-left:0}
.cfield h3{font-size:18px;font-weight:600;letter-spacing:-.012em;color:var(--ink);line-height:1.32}
.cfield p{margin-top:8px;font-size:16px;line-height:1.6;color:var(--muted);text-wrap:pretty}
.cfield p .lead{color:var(--body)}
.cfield>*:hover{border-left-color:var(--blue-line)}
.cfield>*:hover p .lead{color:var(--ink)}
@media (max-width:1000px){
  .cfield{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cfield>*{padding-left:28px;border-left:1px solid var(--line)}
  .cfield>*:nth-child(2n+1){padding-left:0;border-left:0}
}
@media (max-width:700px){
  .cfield{grid-template-columns:minmax(0,1fr)}
  .cfield>*,.cfield>*:nth-child(2n+1),.cfield>*:nth-child(3n+1){
    padding:22px 0;border-left:0;border-top:1px solid var(--line);
  }
  .cfield>*:first-child{border-top:0;padding-top:0}
}

/* ---------- C0144 Held statement (dark bands) ---------------------------- */
/* The band wakes; the type does not perform. Four of these across the site, all
   identical, so they read as punctuation rather than four separate events.

   AMENDED (horizontal composition). The first build gave the statement a 1fr
   track and its note a 300px one, which flung the two halves at opposite edges
   of the canvas. Measured at 1440 on the stage: 394px of empty band between the
   headline and the note on trust #scope, 463px on platform #improvement, 518px
   on use-cases #s-choose — and the densest legal copy on the site running 37.6
   characters to the line, the narrowest measure on the page. Three faults, one
   cause: the note column was sized as an afterthought rather than as half of a
   grid. The band now sits on the page's own grid — the same even split and the
   same 1080px collapse C0147 uses — and the gutter is DRAWN with C0143's own
   `border-left`, so the space between the halves is a ruled gutter instead of
   an unexplained hole. Nothing here is a new colour: the note's ink and rule
   are aliases that resolve to tokens the file already uses. */

.band-hold{
  display:grid;grid-template-columns:minmax(0,1fr);gap:28px 0;align-items:start;
  --ic-band-note:var(--muted);
  --ic-band-rule:var(--line);
}
/* C0144 is used on paper and on the shell tint as well as on night, so the note
   cannot hard-code night ink: at 15px, --night-lede on paper is 2.06:1. */
.sec-night .band-hold,.sec-plat .band-hold{
  --ic-band-note:var(--night-lede);
  --ic-band-rule:rgba(255,255,255,.16);
}
/* Whatever else the band carries (platform's rule list) belongs to the band,
   not to one of its halves. Without this it auto-placed into the statement's
   column and reserved the note's width beside it as more empty band. */
.band-hold>*{grid-column:1/-1;min-width:0}
.band-hold__note{
  font-size:15px;line-height:1.6;color:var(--ic-band-note);
  padding-top:10px;border-top:1px solid var(--ic-band-rule);
}
.sec-night[data-band-hold]{position:relative;isolation:isolate}
.sec-night[data-band-hold]::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(126,166,255,.07),rgba(126,166,255,.02) 55%,transparent 100%);
  opacity:0;transition:opacity var(--ic-enter) var(--ic-ease);
}
.sec-night[data-band-hold][data-chassis-in="true"]::after{opacity:1}

/* Two-up only when there IS a second half. pricing #fact publishes no note and
   was reserving 300px of empty navy for one; a band with a single child is a
   single column and the Fault-B label head below takes it from there. */
@media (min-width:1081px){
  .band-hold:has(>.band-hold__note){
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:48px;row-gap:48px;
  }
  .band-hold:has(>.band-hold__note)>:first-child{grid-column:1/2;grid-row:1}
  .band-hold:has(>.band-hold__note)>.band-hold__note{
    grid-column:2/3;grid-row:1;
    padding:0 0 0 28px;border-top:0;border-left:1px solid var(--ic-band-rule);
    /* The note's text still starts on the statement's first line; the BOX takes
       the row, so the gutter rule spans the pair instead of stopping short of
       the headline's last line. This is `.cfield`'s cell rule, same behaviour. */
    align-self:stretch;
  }
  /* The column is the measure. Two nested caps — a 20ch headline inside a 780px
     track — is what left the slack the note was then pushed away from. */
  .band-hold:has(>.band-hold__note)>:first-child .h2{max-width:none}
}
@media (max-width:1080px){
  .band-hold__note{max-width:52ch}
}

/* ---------- C0158 Label head (a section head with no lede) --------------- */
/* `.sec-head` is sized for prose: a 20ch headline stacked over a 62ch `.lede`,
   inside a 760px block, with 56px of air before whatever follows. Remove the
   lede and every one of those numbers is measuring against a paragraph that is
   not there. What is left poses as the left column of a two-up that has no
   right column: measured at 1440, trust #avoid rendered a 229px headline over
   two lines with 531px of empty paper beside it, and demo #demo-cover a 267px
   headline with 493px beside it. The kit correctly forbids putting a figure
   there (an 89px head against a 286px figure is worse, not better), so the
   answer is not to fill the column — it is to stop drawing one.

   A head with no lede is not prose, it is a LABEL, and a label takes the width
   of the thing it labels. Two moves, both reuse:

   1. The headline takes `.h2.wide`'s existing 24ch measure. 20ch is the width
      that pairs a headline with the lede beneath it; with no lede there is
      nothing to pair with, and the sanctioned wide measure is already in v2.css
      (`.h2.wide`), so no third measure is invented. Headlines that already
      carry `.wide` are unchanged.
   2. The head closes on its object. Every device these heads introduce —
      `.blist`, `.dgrid`, `.cfield`, `.plan-cols`, `.industry-visual-grid` —
      already draws its own full-width rule, so 32px puts the label on that rule
      as its caption instead of leaving it floating 56px above it.

   Scope is deliberately narrow: `:has(p)` excludes every head that has a lede,
   a `.hold-line` (C0152) or a `.band-hold__note`, and the `.sec-split` guard
   keeps C0147's asides out of it. A browser without `:has()` drops the block
   and gets today's layout, complete and readable. No JavaScript is involved. */

:not(.sec-split)>.sec-head:not(:has(p)){margin-bottom:32px}
:not(.sec-split)>.sec-head:not(:has(p)) .h2{max-width:24ch}

/* ---------- C0145 Plan columns (pricing) --------------------------------- */

.plan-cols{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--blue-line);margin-top:8px;
}
.plan-col{
  padding:26px 22px;border-right:1px dashed var(--line);
  transition:border-right-color var(--t-base) var(--ease),background var(--t-base) var(--ease);
}
.plan-col:first-child{padding-left:0}
.plan-col:last-child{border-right:0;padding-right:0}
.plan-col:hover{border-right-color:var(--edge)}
@media (hover:hover){
  .plan-col:hover{box-shadow:0 0 0 16px var(--paper),inset 0 0 0 999px var(--paper)}
}
@media (max-width:1000px){
  .plan-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plan-col{border-right:1px dashed var(--line)}
  .plan-col:nth-child(2n){border-right:0;padding-right:0}
  .plan-col:nth-child(2n+1){padding-left:0}
  .plan-col:nth-child(-n+2){border-bottom:1px dashed var(--line)}
}
@media (max-width:640px){.plan-cols{grid-template-columns:minmax(0,1fr)}.plan-col{border-right:0;border-bottom:1px dashed var(--line)}}

/* ---------- C0146 Story spread (customers) ------------------------------- */

.story-facts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin:28px 0;
}
.story-fact{padding:20px 24px;border-left:1px solid var(--line)}
.story-fact:first-child{padding-left:0;border-left:0}
.story-fact b{display:block;font-size:21px;font-weight:600;letter-spacing:-.016em;color:var(--ink);line-height:1.2}
.story-fact span{display:block;margin-top:6px;font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--quiet)}
.story-quote{
  position:relative;margin:28px 0;padding-left:22px;
  font-size:20px;line-height:1.5;color:var(--body);max-width:56ch;text-wrap:pretty;
}
.story-quote::before{
  content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;background:var(--blue-line);
  transform:scaleY(0);transform-origin:top center;
  transition:transform var(--ic-enter) var(--ic-ease);
}
.story-quote[data-chassis-in="true"]::before{transform:scaleY(1)}
@media (max-width:800px){
  .story-facts{grid-template-columns:minmax(0,1fr)}
  .story-fact{padding:16px 0;border-left:0;border-top:1px solid var(--line)}
  .story-fact:first-child{border-top:0}
}

/* ---------- Sub-nav ------------------------------------------------------ */

.subnav{
  position:sticky;top:64px;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:12px 0;background:var(--paper);border-bottom:1px solid var(--line);
}
/* The bar spans the page; the shell keeps its content on the site grid. */
.subnav .shell{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
.sec[id],.cta[id],.editorial-band[id],.editorial-proof[id]{scroll-margin-top:150px}
.subnav-name{white-space:nowrap;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.subnav-tabs{
  display:flex;gap:22px;overflow-x:auto;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 28px),transparent 100%);
  mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 28px),transparent 100%);
}
@media (min-width:1100px){.subnav-tabs{-webkit-mask-image:none;mask-image:none}}
.subnav-tabs::-webkit-scrollbar{display:none}
/* The fade tells the reader there is more strip in that direction. Static, it
   lied at the right-hand end (a tab permanently half-faded with nothing behind
   it) and said nothing at the left-hand end once the strip had been scrolled.
   `data-strip` is set by whichever page script owns the strip - today
   page-customers.js - and the CSS simply answers it. A page with no such
   script never gets the attribute and keeps the default single fade. */
.subnav-tabs[data-strip="none"]{-webkit-mask-image:none;mask-image:none}
.subnav-tabs[data-strip="start"]{
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 28px),transparent 100%);
  mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 28px),transparent 100%);
}
.subnav-tabs[data-strip="mid"]{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);
}
.subnav-tabs[data-strip="end"]{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 28px,#000 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 28px,#000 100%);
}
@media (min-width:1100px){
  .subnav-tabs[data-strip]{-webkit-mask-image:none;mask-image:none}
}
/* `white-space:pre`, not `nowrap`, and the reason is load-bearing. A flex
   container wraps each contiguous run of child text in its own anonymous flex
   item and collapses the white space at that item's edges. A tab whose label
   contains a nested span - the Headstart tab is authored
   `[ BEFORE <span data-brand>AIM AI</span> ]` - therefore became three items
   with the spaces between them thrown away, and rendered `[ BEFOREAIM AI]` at
   every width. `pre` preserves the author's own spaces inside those runs while
   still forbidding a wrap, so every tab that has no nested span keeps the exact
   geometry it had. Measured across all nine pages that carry a sub-nav, at 1440
   and 390: the Headstart tab goes 104.84px -> 110.44px (the two spaces it was
   missing) and every other tab on every page is identical in text, width and
   height, with the bar height and page overflow unchanged.
   The one authoring rule this creates: a tab label must stay on ONE source
   line, because `pre` would honour a newline as a line break. */
.subnav-tab{
  position:relative;min-height:44px;display:inline-flex;align-items:center;
  font-size:14px;color:var(--quiet);text-decoration:none;white-space:pre;
  transition:color var(--t-base) var(--ease);
}
.subnav-tab::after{
  content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--blue);
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--t-base) var(--ease);
}
.subnav-tab:hover{color:var(--ink)}
.subnav-tab[aria-current="true"]{color:var(--ink)}
.subnav-tab[aria-current="true"]::after{transform:scaleX(1)}
.subnav-tab:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
/* P5: the bar was sticking at 56px while the primary nav is 64px tall at every
   width, so it hid 8px of itself under the nav on mobile. */
@media (max-width:760px){
  .subnav{top:64px}
  .subnav-name{display:none}
  .sec[id],.cta[id],.editorial-band[id],.editorial-proof[id]{scroll-margin-top:138px}
}

/* ---------- Reduced motion and print ------------------------------------- */

@media (prefers-reduced-motion:reduce){
  [data-chassis]::before,.story-quote::before{transform:none;transition:none}
  [data-chassis]::before{transform:scaleX(1)}
  .story-quote::before{transform:scaleY(1)}
  .sec-night[data-band-hold]::after{opacity:1;transition:none}
  .subnav-tab::after{transition:none}
}
@media print{
  [data-chassis]::before{display:none}
  .subnav{position:static}
  .story-quote::before{transform:scaleY(1)}
}