/* companion.apexedgesalesengineering.com: the chrome.

   The header, the footer, the skip link, the back-to-top control, and the
   tokens they read. build_site.py serves this file first in site.css and
   inlines it whole into the form page, so a rule for the chrome lives here and
   nowhere else, and the 2 pages cannot drift. Everything else is in pages.css.

   Built to match www.apexedgesalesengineering.com. The hairline header rule
   and the collapsing footer grid are taken from that site's stylesheet so the
   estate reads as one thing.

   Light surface set only: 006-...-visual-brand.md Section 10 makes White the
   default until a dark theme is approved, and none is. */


/* IBM Plex Sans Condensed, weight 600 only, which is the 1 weight the estate
   guideline asks Condensed for. www gets this family from the Google Fonts CDN;
   this site cannot, because it serves script-src 'none' and its isolation check
   fails on any reference off this origin, so the face is vendored here as the
   roman faces are and served from /assets/fonts. Same 2 unicode ranges as those,
   taken from the same source, so the split matches. */
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-condensed-latin-roman.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-condensed-latin-ext-roman.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --cobalt: #0047AB;
  --steel-blue: #2364AA;
  --orange: #FE5A1D;
  --orange-dark: #E04A10;
  --black: #1A1A1A;
  --text: #243244;
  --muted: #5A6878;
  --white: #FFFFFF;
  --paper: #FCFCFD;
  --surface: #F7F8FA;
  --surface-alt: #F1F4F8;
  --border: #DCE3EB;
  --border-strong: #C5D0DC;
  --link-hover: #1C4C84;
  --hairline: rgba(0, 71, 171, 0.08);

  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 8px 24px rgba(22, 34, 51, 0.04);
  --shadow-md: 0 18px 40px rgba(22, 34, 51, 0.06);
  --shadow-lg: 0 20px 36px rgba(22, 34, 51, 0.08);

  --text-xs: 0.75rem;
  --text-sm: 0.889rem;
  --text-lg: 1.111rem;

  /* The estate's shared footer size. Every type role in the footer sets at this
     1 size, and weight, letter-spacing, and case carry the hierarchy instead.
     See docs/reference/apex-edge-sales-engineering-header-and-footer-guideline.md.

     The max() is mandatory and not decoration. This site's root is the browser
     default 16px, where 0.72rem is 11.52px, under canon 009's 12px floor for
     helper text. The clamp is the only thing holding the floor, so a bare
     0.72rem here would sit below it at every width. --text-xs is 0.75rem, which
     clears 12px by arithmetic alone and needs no clamp, which is exactly why
     swapping one for the other looks safe and is not.

     www runs a root of 18px stepping to 17px and 16px, so the same declaration
     renders 12.96 / 12.24 / 12px there against a flat 12px here. Matching its
     root would rescale every rem on this site, so section 2 of the guideline is
     taken at its word and the figure is recomputed against our own. */
  --text-micro: max(12px, 0.72rem);

  --max: 1120px;
  --measure: 68ch;
  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  /* Falls back to the roman face rather than to a system condensed, which would
     be a different typeface at a different width. */
  --condensed: 'IBM Plex Sans Condensed', var(--sans);
}

.wrap { width: min(calc(100% - 40px), var(--max)); margin: 0 auto; }

/* Announces to a screen reader what a sighted reader gets from the new-tab
   itself. It carries the cue inside the anchor for every external footer link,
   so it has to be defined for the whole site and not only inside a query. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 16px; top: -52px; z-index: 200;
  padding: 10px 14px; border-radius: var(--radius-md);
  background: var(--white); color: var(--cobalt);
  border: 1px solid rgba(0, 71, 171, 0.2); font-weight: 600; font-size: 14px;
  transition: top 150ms ease;
}
.skip:focus { top: 12px; }

/* ── Header: a hairline, not a rule ─────────────*/
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(252, 252, 253, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}

/* The header is sticky, so without this an anchor lands its target at the top of
   the viewport and the header covers it outright. It is chrome because the
   header is: this file reaches the form page whole, and while the rule lived in
   pages.css the skip link there put the top of the form under the header.

   The header is a 36px brand mark inside 14px of padding, 65px with its rule,
   and the word mark beside it is deliberately shorter than the mark at 34.6px,
   so the mark sets the height and the type cannot push it. It does not wrap,
   because NAV is empty, the word mark is its only item, and both of its lines
   are nowrap. 76px clears that at every width with 11px to spare. */
html { scroll-padding-top: 76px; }
.head-inner {
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  align-items: center; justify-content: space-between;
  padding: 14px 0;
}
/* www's lockup, with our strings: a 36px mark, a 12px gap, and the name over the
   company line. The mark is tools/form-assets/brand-mark.png, rendered by
   build_brand_assets.py to www's geometry and colours, so only the drawn size
   changed.

   3 constraints meet here and they fix each other's values. The 2 lines end
   together, the pair sits inside the 36px mark, and the company line holds the
   12px floor.

   The company line cannot follow the name down, because 12px is the floor, so the
   only lever which narrows it is its tracking. That makes the name size and the
   tracking 1 dial with 2 ends, and this is the whole of it, measured: the company
   line is 177.7px untracked at 12px and each 1em of tracking adds 336px, while
   the name runs 9.7px of width per px of size at 700.

     name 22.1px -> 0.109em      name 20.0px -> 0.049em
     name 21.0px -> 0.077em      name 18.3px -> 0.000em, and no smaller

   18.3px is the arithmetic floor: below it the company line cannot be narrowed to
   meet the name without going under 12px. The practical floor is higher. Tracking
   is what makes an uppercase microlabel read as one, and by 19px it is down to
   0.02em, which is not tracking any more. 20px keeps 0.0485em, which still reads.

   This site sets 20px and 0.0485em. The estate guideline gives 0.11em, and gives
   it to 4 roles at once, so this is a deviation and the only one: the footer
   tagline and both cluster labels still set 0.11em. It is taken because the name
   was too heavy at the 22.1px which 0.11em forces here, and because the guideline
   fixes the tracking for a lockup which does not also have to match 2 widths.

   Condensed is what makes any of it fit. The same string in the roman face is
   8.1% wider at 12px, which would need a 24.4px name and a 38px block, and would
   not fit the mark. It is also why the 9px this used to run at is gone, and why
   docs/decisions/0011 is retired rather than reworded.

   Re-measure if either string, either weight, or either face changes, and measure
   the rendered ink: nothing in the audit can see a glyph. */
.brand { display: flex; align-items: center; gap: 12px; }
/* The breathing space. Both lines set at 1.0 so no leading is spent inside the
   line boxes, which leaves 36 - 20 - 12 = 4px between the pair and the mark, and
   2.6px of it is the gap. The other 1.4px is left unspent: the block is centred on
   the mark, so it reads as margin above and below rather than as a loose lockup,
   and the gap was set when the name was larger and has not needed to move since.
   A wider gap is available here if it is ever wanted. */
.brand span { display: flex; flex-direction: column; align-items: stretch; gap: 2.6px; }
.brand strong {
  font-size: 20px; font-weight: 700; line-height: 1; color: var(--black);
  white-space: nowrap;
}
.brand em {
  font-style: normal; font-family: var(--condensed);
  font-size: var(--text-micro); font-weight: 600; line-height: 1;
  letter-spacing: 0.0485em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
}
.site-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.site-nav a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 0 14px; border-radius: var(--radius-pill);
  color: var(--text); font-size: var(--text-sm); font-weight: 500;
}
.site-nav a:hover { background: var(--white); color: var(--cobalt); }
.site-nav a[aria-current] { background: var(--white); color: var(--cobalt); font-weight: 600; }

/* ── Footer: word mark, then clusters which collapse on a small screen ──
   The collapse is <details> and <summary>, as www does it. No script, which
   matters because this site serves script-src 'none'. */
.site-foot {
  background: var(--surface); border-top: 1px solid var(--hairline);
  padding: 56px 0 44px;
}
/* The descriptor on its own line, the clusters under it, and every one of them
   starting at the same left edge as the copyright below. A column rather than a
   row, so there is 1 measure down the footer instead of a label in a first column
   and the lists in a second. align-items is flex-start so the children take their
   own width and none of them stretches the row it sits in.

   www runs its brand block and clusters side by side, and this no longer does.
   That went with the word mark: side by side is a lockup beside a nav, and what
   is left here is 3 labels of the same size, which read as 1 group stacked. */
.foot-grid {
  display: flex; flex-direction: column; align-items: flex-start; gap: 32px;
}
.foot-brand { flex: none; }
.foot-clusters { display: flex; flex-wrap: wrap; gap: 48px; }
/* Role 2 of 5. It was a tagline under a word mark and is now a label beside the
   other 2, so it takes their treatment exactly: the same size, the same 600, the
   same 0.11em, the same case, the same Restrained Grey, and the same 24px row, so
   the 3 sit on one line across the footer.

   The estate guideline gives this role 400 on a 1.625 line in sentence case,
   which is right for a sentence sitting under a word mark and wrong for what
   this now is. Section 1 of that document is explicit that size is the shared
   thing and that weight, tracking, and case carry the hierarchy, so a role which
   changes from sentence to label changes those 3 and keeps the size and the
   colour. --text-micro and --muted are unchanged, which is what the audit holds. */
.foot-brand span {
  display: flex; align-items: center; min-height: 24px;
  font-family: var(--condensed);
  font-size: var(--text-micro); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.11em; color: var(--muted);
}

/* 10px from the label to the list it heads, which is www's figure. It is a
   column gap rather than a margin so the summary carries no spacing of its own
   and the mobile rules do not have to unset one. */
.foot-cluster { border: 0; display: flex; flex-direction: column; gap: 10px; }
.foot-cluster summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; list-style: none; min-height: 24px;
  /* A heading on desktop, where the cascade holds the cluster open whatever the
     open attribute says, so a click there changes nothing visible. It stays
     clickable: a browser without ::details-content renders the clusters closed,
     and pointer-events: none would leave a mouse user no way to open them. */
  cursor: default;
  /* Role 3 of 5, the cluster label, in Condensed as the guideline asks. It ran in
     the roman face until the Condensed one was vendored for the header, which was
     a divergence nobody had written down. */
  font-family: var(--condensed);
  font-size: var(--text-micro); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.11em; color: var(--muted);
}
.foot-cluster summary::-webkit-details-marker { display: none; }
.foot-cluster summary::marker { content: ''; }
.foot-chevron { display: none; flex: none; transition: transform 180ms ease; }
.foot-cluster[open] .foot-chevron { transform: rotate(180deg); }
/* Closed on a small screen, as www presents it, and always open on desktop.
   www toggles the open attribute with script; this site serves script-src 'none',
   so the same result comes from the cascade instead. */
/* The rows abut, as they do on www. A 10px gap on top of the line box put
   roughly 32px of pitch around 1 short line, which read as separated lines
   rather than a list. The target has not shrunk with the gap gone: each row is
   held at 24px, which is the WCAG 2.2 2.5.8 floor and is what www settled on.
   Do not take the rows below 24px to close the list up further. */
.foot-links { display: none; flex-direction: column; gap: 0; }
.foot-cluster[open] > .foot-links { display: flex; }
@media (min-width: 761px) {
  /* A closed <details> hides its content with content-visibility on
     ::details-content, which display on the child cannot override. Both are
     needed to keep the clusters open on desktop. */
  .foot-cluster > .foot-links { display: flex; }
  .foot-cluster::details-content { content-visibility: visible; }
}
/* www's footer link is max(12px, 0.74rem) in --color-muted, which on a 16px root
   renders at 12px. --text-xs is this site's own 12px, so the 2 footers set their
   links at the same size without this file reaching for a pixel value outside
   the scale. --muted is #5A6878 here and on www, so the colour needs no mapping.
   The hover darkens to --text, which is www's --color-text and the same #243244,
   rather than the cobalt the rest of this site's links take. The footer is the 1
   place the 2 sites sit side by side in a reader's memory, so it follows www. */
/* Role 4 of 5, the cluster link. 300 rather than the body's 400: at this size a
   regular weight in a list of 6 reads heavier than the label above it. The
   target is on min-height and not on the line box, so the type can move without
   the 24px moving with it. */
.foot-links a {
  display: flex; align-items: center; min-height: 24px; line-height: 1;
  font-size: var(--text-micro); font-weight: 300; color: var(--muted);
}
.foot-links a:hover { color: var(--text); }
/* The copyright line sets with the cluster links, not a size above them. www
   floors both at 12px, and its own note records why: 12px is canon 009's floor
   for a microlabel, and the copyright is the smallest thing in the footer
   rather than a size of its own. The 40px margin, the 24px padding, and the
   hairline already matched www before this. */
/* Role 5 of 5, the copyright. */
.foot-note {
  max-width: none;
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--hairline);
  font-size: var(--text-micro); font-weight: 300; line-height: 1.16;
  color: var(--muted);
}

@media (max-width: 760px) {
  /* The column is the base now, so this only opens the gap up. */
  .foot-grid { gap: 28px; }
  .foot-clusters {
    flex-direction: column; flex-wrap: nowrap; gap: 0; width: 100%; align-self: stretch;
  }
  /* The clusters stack as 1 ruled list, so a cluster is a block again and its
     own 10px column gap would double the padding under a closed label. */
  .foot-cluster {
    display: block; border-top: 1px solid var(--hairline); padding: 10px 0 2px;
  }
  .foot-cluster:last-child { border-bottom: 1px solid var(--hairline); padding-bottom: 10px; }
  .foot-cluster[open] { padding-bottom: 8px; }
  /* 44px here, not 24px. Where the cluster collapses the summary is the control
     a reader must hit before any link inside it can be reached at all, and
     touch is primary at this width. */
  .foot-cluster summary { cursor: pointer; min-height: 44px; }
  .foot-cluster[open] > .foot-links { padding-top: 8px; }
  .foot-links a { line-height: 1.28; }
  .foot-chevron { display: block; }
}

/* ── Back to top ────────────────────────────────
   www's dimensions, treatment, and position exactly: a 44px circle at the bottom
   right, white on a cobalt hairline, cobalt chevron. www hides it until scrolled, with script. This site
   serves script-src 'none', so it is an anchor, and only long pages carry one.
   It appears after a little scrolling, by a scroll-driven animation rather
   than script (below). The 1 script it has, TO_TOP_JS in build_site.py, only
   keeps a click from writing #top into the address. */
.to-top {
  position: fixed; right: 24px; z-index: 40;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid rgba(0, 71, 171, 0.18); border-radius: var(--radius-pill);
  background: var(--white); color: var(--cobalt); box-shadow: var(--shadow-sm);
  transition: background 180ms ease, border-color 180ms ease;
}
.to-top:hover { background: #F8FBFF; border-color: rgba(0, 71, 171, 0.32); color: var(--cobalt); }
.to-top:focus-visible { outline: 2px solid rgba(0, 71, 171, 0.25); outline-offset: 3px; }

/* Hidden at the top of the page, fading in between 160px and 320px of scroll.
   visibility and not opacity alone, so a control nobody can see is out of the
   tab order too. The timeline is declared after the shorthand, which resets it.
   A browser without scroll-driven animations shows the control always, as it
   did before, and so does a reader asking for reduced motion, where the site's
   stylesheet removes every animation. */
@supports (animation-timeline: scroll()) {
  .to-top {
    animation: to-top-reveal linear both;
    animation-timeline: scroll(root block);
    animation-range: 160px 320px;
  }
}
@keyframes to-top-reveal {
  from { opacity: 0; visibility: hidden; transform: translateY(8px); }
  to   { opacity: 1; visibility: visible; transform: none; }
}

/* companion.apexedgesalesengineering.com: the pages.

   Everything the marketing and legal pages add to the chrome: the type, the
   sections, the cards, the tables, and the rendered documents. It follows
   chrome.css in site.css and reads the tokens declared there. It is not
   inlined into the form page, which carries its own styles.

   Built to match www.apexedgesalesengineering.com. Radii, shadows, pill
   controls, the card lift, and the 22px blueprint grid are all taken from that
   site's stylesheet so the estate reads as one thing. */


@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-latin-roman.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: italic; font-weight: 300 700; font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-latin-ext-roman.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

html {
  /* The scroll padding which clears the sticky header is in chrome.css beside
     the header, because the form page needs it too. This stays here: the form
     sets its own scroll-behavior and resets it under prefers-reduced-motion,
     and a rule inlined after it would override that reset. */
  scroll-behavior: smooth;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

@media (max-width: 700px) { body { font-size: 16px; } }

/* Links never carry an underline. Colour and weight do the work. */
a { color: var(--steel-blue); text-decoration: none; transition: color 160ms ease; }
a:hover { color: var(--link-hover); }
a:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; border-radius: 3px; }

/* ── Sections ───────────────────────────────────*/
section { padding: 68px 0; }
section.alt { background: var(--surface); }

/* Section 11 of the visual brand canon: a low-contrast blueprint grid, at the
   same 22px pitch the rest of the estate uses. */
.hero, section.alt {
  background-image:
    linear-gradient(rgba(0, 71, 171, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 71, 171, 0.028) 1px, transparent 1px);
  background-size: 22px 22px;
}
.hero { padding: 76px 0 64px; }

.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 18px;
}
.eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--cobalt); flex: none; }

h1 {
  font-size: clamp(30px, 4.2vw, 44px); line-height: 1.14; letter-spacing: -0.02em;
  font-weight: 600; color: var(--black); margin-bottom: 18px; text-wrap: balance;
}
.hero h1 {
  font-size: clamp(36px, 5.6vw, 58px); line-height: 1.06;
  letter-spacing: -0.026em; font-weight: 700;
}
h2 {
  font-size: clamp(26px, 3.2vw, 34px); line-height: 1.2; letter-spacing: -0.016em;
  font-weight: 600; color: var(--black); margin-bottom: 16px; text-wrap: balance;
}
h3 { font-size: 1.111rem; font-weight: 600; color: var(--black); margin-bottom: 8px; }

p { max-width: var(--measure); margin-bottom: 16px; text-align: left; }
p:last-child { margin-bottom: 0; }
strong { color: var(--black); font-weight: 600; }
.lede { font-size: 1.25rem; line-height: 1.5; max-width: 60ch; }
/* The landing hero names the product and sets the positioning line under it, a
   step below the name and above the lede. SemiBold, as section 2's banner sets
   its primary line. Black like every heading, because blue here reads as a link
   and would compete with the orange CTA. */
.hero .tagline {
  font-size: clamp(20px, 2vw, 24px); line-height: 1.25; letter-spacing: -0.012em;
  font-weight: 600; color: var(--black); margin-bottom: 22px;
}

/* www sets the paragraph which opens a section a step above body copy. Matched
   by position rather than a class, so a new section gets it without the builder
   having to remember, and scoped to a section wrap so the legal documents,
   whose headings sit inside article.doc, are untouched. */
section > .wrap > h2 + p {
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.55; max-width: 58ch; margin-bottom: 20px;
}

ul, ol { max-width: var(--measure); margin-bottom: 16px; padding-left: 24px; }
li { margin-bottom: 10px; }

/* ── Controls: pill, per www ────────────────────*/
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; max-width: none; }
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 1.4rem; border-radius: var(--radius-pill);
  /* www's .btn exactly: 16px at 600. www computes 16px from 0.889rem on an 18px
     root; this site's root is 16px, so the same rendered size is 1rem.

     This does not meet WCAG AA. The label is white on Giants Orange, 3.14:1,
     and 16px at 600 is normal text, where the floor is 4.5:1. It was 18.7px at
     700 to reach the 3:1 large-text floor instead. Matching www was chosen with
     that measured and stated. See docs/decisions/0010. */
  border: 1px solid transparent; font-size: 1rem; font-weight: 600;
  line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
/* White label, on instruction and consistent with www and WinCommand. */
.cta-primary { background: var(--orange); color: var(--white); border-color: var(--orange); }
.cta-primary:hover { background: var(--orange-dark); border-color: var(--orange-dark); color: var(--white); }
.cta-secondary { background: var(--white); color: var(--cobalt); border-color: var(--border); }
.cta-secondary:hover { border-color: var(--cobalt); color: var(--cobalt); }

.cta-note { font-size: var(--text-sm); color: var(--muted); margin-top: 16px; max-width: none; }
.cta-note span + span::before { content: '  |  '; }
/* The address is the way in for a question the page has not answered. It sits under
   the note and not in the CTA row, so it never competes with Start. */
/* The address is 1 unbroken string wider than a 320px screen, so it may break. */
.cta-ask { margin-top: 6px; overflow-wrap: anywhere; }

/* ── Cards: lift, strengthen, and reveal the foot bar ──*/
.grid { display: grid; gap: 18px; margin: 28px 0 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card {
  position: relative;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--white); padding: 24px 26px;
  box-shadow: var(--shadow-sm);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
/* www carries a 3px tinted bar at the card foot on hover. Its panels are wide
   enough that it disappears; at this card width the same bar reads as a
   coloured smear, so the lift, the shadow, the border and the heading colour
   carry the hover instead. */
.card:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border-strong);
}
.card:hover h3 { color: var(--cobalt); }
.card h3 { transition: color 160ms ease; }
.card p { font-size: var(--text-sm); color: var(--muted); margin: 0; max-width: none; }

/* A card which is itself the link. The anchor covers the card, so the whole
   surface is clickable while the heading keeps the hover treatment. */
.card-link { display: block; color: inherit; }
.card-link:hover { color: inherit; }
/* A column, so the affordance can sit at the foot: cards in a row share a
   height, and a shorter description would otherwise lift its link above the
   others. */
.card-link .card { height: 100%; display: flex; flex-direction: column; }

/* ── Card eyebrow: a dot and a label ────────────
   www marks a card with a small dot and a tracked label. Cobalt is structural
   and names what a card is; orange is directional and marks the set a reader
   is being asked to choose from. Specificity is `.card .card-accent` because
   `.card p` would otherwise win and take the colour and the size back. */
.card .card-accent {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 12px; max-width: none;
  font-size: max(12px, var(--text-xs)); font-weight: 600;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted);
}
.card .card-accent::before {
  content: ''; flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--cobalt); box-shadow: 0 0 0 6px rgba(0, 71, 171, 0.08);
}
.card .card-accent--orange::before {
  background: var(--orange); box-shadow: 0 0 0 6px rgba(254, 90, 29, 0.09);
}

/* ── Panel: a section which reads as one object ─*/
.panel {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 36px 40px;
  box-shadow: var(--shadow-sm);
}
.panel > p:last-child { margin-bottom: 0; }
@media (max-width: 700px) { .panel { padding: 26px 22px; } }

/* ── Pull line: the left-edge accent of canon Section 11, which lists quote
   blocks and strategic notes among its uses. Sized as a statement, not a
   heading, so it does not compete with the h2 above it. */
.pull {
  border-left: 3px solid var(--orange);
  padding: 2px 0 2px 22px; margin: 26px 0;
  font-size: 1.25rem; line-height: 1.4; font-weight: 600;
  color: var(--black); max-width: 44ch;
}

/* ── Reasons: three short failures, read side by side rather than as one
   paragraph, because the point is the pattern across them. */
.reasons {
  display: grid; gap: 14px; margin: 24px 0;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
}
.reason {
  border: 1px solid var(--border); border-left: 2px solid var(--border-strong);
  border-radius: var(--radius-md); background: var(--surface); padding: 18px 20px;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.reason:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong);
}
.reason strong { display: block; color: var(--black); margin-bottom: 6px; }
.reason span { display: block; font-size: var(--text-sm); color: var(--muted); }

/* ── Step cards ─────────────────────────────────
   Still an ol, because the order is the process. The step which is ours takes
   cobalt and says so, so the heading's claim is visible rather than counted. */
.step-cards {
  list-style: none; padding: 0; max-width: none;
  display: grid; gap: 18px; margin: 28px 0 8px;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
}
.step-cards li {
  position: relative; margin: 0;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--white); padding: 24px 26px; box-shadow: var(--shadow-sm);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.step-cards li:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border-strong);
}
.step-cards li:hover h3 { color: var(--cobalt); }
.step-cards h3 { margin-bottom: 8px; transition: color 160ms ease; }
.step-cards p { font-size: var(--text-sm); color: var(--muted); margin: 0; max-width: none; }
/* Same dot and label as a card eyebrow, so the two grids read as one system.
   The label is muted rather than orange: Giants Orange is 3.14 on white, which
   clears AA only as large bold text, and this is a 12px label. The colour sits
   in the dot, which is a graphical object and needs 3:1. */
.step-n {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px;
  font-size: max(12px, var(--text-xs)); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.step-n::before {
  content: ''; flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--orange); box-shadow: 0 0 0 6px rgba(254, 90, 29, 0.09);
}
.step-cards li.is-ours { border-top: 2px solid var(--cobalt); }
.step-cards li.is-ours .step-n::before {
  background: var(--cobalt); box-shadow: 0 0 0 6px rgba(0, 71, 171, 0.08);
}

/* ── Spec: what a deliverable carries, as items rather than a sentence ─*/
.spec {
  list-style: none; padding: 0; max-width: none;
  display: grid; gap: 12px; margin: 24px 0 22px;
  grid-template-columns: repeat(auto-fit, minmax(236px, 1fr));
}
.spec li {
  position: relative; margin: 0; padding: 14px 18px 14px 38px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--white); box-shadow: var(--shadow-sm);
  font-size: var(--text-sm); color: var(--text);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.spec li:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border-strong);
}
.spec li::before {
  content: ''; position: absolute; left: 18px; top: 1.35em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--orange); transform: translateY(-50%);
}

/* A grid holding 1 card should not stretch it across the full measure. */
.grid--one { grid-template-columns: minmax(0, 640px); }

/* The affordance on a card which is itself a link. The arrow is a glyph rather
   than an image, and it is not the only signal: the label says where it goes. */
.card-go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-size: var(--text-sm); font-weight: 600; color: var(--cobalt);
}
/* Auto top margin takes the spare height; the padding keeps the 16px gap on
   the tallest card, where there is none to take. */
.card-link .card-go { margin-top: auto; padding-top: 16px; align-self: flex-start; }
.card-go::after { content: '\2192'; transition: transform 160ms ease; }
.card-link:hover .card-go::after { transform: translateX(3px); }

/* A limit is an exclusion, so it takes the accent the canon gives to emphasis
   rather than the cobalt it gives to structure. The heading states the limit
   and the colour only repeats it. */
.card.limit { border-top: 2px solid var(--orange); }

/* A figure and what it counts. Used where a section turns on 2 or 3 numbers a
   reader is trying to find. */
.facts {
  display: grid; gap: 16px; margin: 26px 0 20px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.fact {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--white); padding: 22px 24px; box-shadow: var(--shadow-sm);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.fact:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border-strong);
}
.fact b {
  display: block; font-size: 2rem; font-weight: 700; color: var(--black);
  letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 8px;
}
.fact span { display: block; font-size: var(--text-sm); color: var(--muted); }

/* ── Pricing ────────────────────────────────────*/
.price-card .price-fig {
  display: block; font-size: 2.4rem; font-weight: 700; color: var(--black);
  letter-spacing: -0.02em; margin: 6px 0 10px; max-width: none;
}
.price-note { font-size: var(--text-sm); color: var(--muted); }
/* Cobalt is the standing service, orange the expedited one. The tiers are named
   in the heading as well, so the colour is not carrying the difference alone. */
.price-card { border-top: 2px solid var(--cobalt); }
.price-card--fast { border-top-color: var(--orange); }

/* ── Callout: left-edge accent, canon Section 11 ─*/
.callout {
  background: var(--white); border: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius-md); padding: 22px 26px; margin: 26px 0;
  max-width: var(--measure); box-shadow: var(--shadow-sm);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.callout:hover {
  transform: translateY(-3px); box-shadow: var(--shadow-lg);
  border-color: var(--border-strong); border-left-color: var(--orange);
}
.callout p { max-width: none; }

/* A question and its answer, as a card. Same hover as every other card. */
.faq-grid { display: grid; gap: 18px; margin: 28px 0 8px;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.faq-grid .card h3 { font-size: 1.05rem; margin-bottom: 10px; }
.faq-grid .card p { font-size: var(--text-sm); color: var(--text); }

/* ── Rendered documents ─────────────────────────*/
.doc { padding: 56px 0 76px; }
.doc h1 { margin-bottom: 22px; }
.doc h2 {
  font-size: 1.55rem; margin-top: 46px; margin-bottom: 14px;
  padding-top: 24px; border-top: 1px solid var(--border);
}
.doc h3 { font-size: 1.111rem; margin-top: 28px; }
.doc hr { border: 0; height: 0; margin: 0; }
.doc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em; background: var(--surface);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 0.1em 0.36em; color: var(--black);
}
.doc a { font-weight: 500; }
.legal-index { list-style: none; padding: 0; }
.legal-index li { margin-bottom: 12px; font-size: 1.111rem; }

/* ── Tables ─────────────────────────────────────*/
.scroller {
  overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--white); margin: 24px 0; box-shadow: var(--shadow-sm);
}
table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); min-width: 520px; }
th, td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--border); vertical-align: top; }
thead th {
  font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cobalt); font-weight: 600; background: var(--surface-alt); white-space: nowrap;
}
tbody td { color: var(--black); }
tbody th { color: var(--black); font-weight: 600; }   /* a row header in a key and value table */
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }   /* th as well: a row header left its rule behind */

/* ── Example deliverables: an excerpt set as the document it is ─────────────
   The report or charter sits in white sheets, and our commentary sits between
   them on the orange left rule, so a note is never read as part of what a
   subscriber receives. Severity keeps the report's filled label: the word on
   its ground, never colour alone. The 2 grounds are the visual brand canon's
   semantic colours, declared here and not in chrome.css because only these
   pages use them. */
:root { --red: #D32F2F; --amber: #FFB000; }
.sheet {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 34px 40px; margin: 24px 0;
  box-shadow: var(--shadow-sm);
}
@media (max-width: 700px) { .sheet { padding: 24px 18px; } }
.sheet h3 { margin-top: 30px; }
.sheet > h3:first-child { margin-top: 0; }
.sheet h4 { font-size: 1rem; font-weight: 600; color: var(--black); margin: 22px 0 8px; }
.sheet .scroller { box-shadow: none; margin: 16px 0; }
.sheet-cover { border-bottom: 2px solid var(--orange); padding-bottom: 18px; margin-bottom: 28px; }
.sheet-kicker {
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.sheet-title { font-size: var(--text-lg); font-weight: 700; color: var(--black); margin-bottom: 6px; }
.sheet-meta { font-size: var(--text-sm); color: var(--muted); }
.sheet-gap { font-size: var(--text-sm); color: var(--muted); font-style: italic; }
.sev {
  display: inline-block; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em;
  line-height: 1.5; padding: 1px 8px; border-radius: 3px; margin: 0 10px 0 6px; vertical-align: 2px;
}
.sev--red { background: var(--red); color: var(--white); }
.sev--amber { background: var(--amber); color: var(--black); }
.note {
  border-left: 3px solid var(--orange); padding: 2px 0 2px 20px; margin: 28px 0;
  max-width: var(--measure);
}
.note p { font-size: var(--text-sm); color: var(--text); margin: 0; }
.note strong { color: var(--black); }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .card:hover, .reason:hover, .spec li:hover, .step-cards li:hover { transform: none; }
  html { scroll-behavior: auto; }
}