/* "Why track executive purchases?", /executive-purchases/why-track-executive-purchases (the design Roy approved on Oct
   21; WHY-TRACK-EXECUTIVE-PURCHASES-DESIGN.md): loaded by that page only, from a link in its own view
   (why-track-executive-purchases.ejs), so no shared stylesheet is touched. The sibling of what-are-investor-days.css: its
   frame, reading column, type sizes, head, short answer, numbered reasons, caution and table are that file's rules,
   copied under .wte (CC-2, 7d: no shared stylesheet). What is new: the comparison's four columns and its phone stack
   (under 640 px), "How <brand> helps" as five full-width rows, the wordless mark (the recap article's .ra-orn,
   recap-public.css) and the Sources. Every rule is under .wte or .wte-table / .wte-stack (inside it); every colour and
   face is the site's own variable (app.css). Display type uses lining figures, as on the home page. */

.wte.page { max-width: 1120px; padding-bottom: 80px; --wte-ink-soft: #3b352d; }

.wte :focus-visible { outline: 2px solid var(--sellier); outline-offset: 3px; }

.wte__col { max-width: 760px; }

.wte .display,
.wte h1,
.wte h2,
.wte h3,
.wte__n { font-variant-numeric: lining-nums; }

/* ---- head ---- */
.wte__head .eyebrow { margin: 0 0 14px; }
.wte__head .display { margin: 0; font-size: 60px; line-height: 1.04; }
.wte__dek { max-width: 640px; margin: 18px 0 0; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 23px; line-height: 1.42; color: var(--wte-ink-soft); text-wrap: pretty; }

/* ---- labels and section headings ---- */
.wte__label { margin: 0 0 12px; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sellier); }
.wte h2 { margin: 0 0 22px; font-family: var(--font-display); font-weight: 500; font-size: 34px; line-height: 1.12; color: var(--ink); text-wrap: balance; }

/* ---- the short answer: the page's lede, set large ---- */
.wte__short { margin: 56px 0 0; padding-top: 28px; border-top: 1px solid var(--ink); }
.wte__lede { margin: 0; font-family: var(--font-display); font-size: 25px; line-height: 1.48; color: var(--ink); text-wrap: pretty; }

/* ---- six numbered reasons (the numbers are in the copy) ---- */
.wte__why { margin: 80px 0 0; }
.wte__reasons { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.wte__reasons li { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 8px; padding: 26px 0 24px; border-bottom: 1px solid var(--rule); }
.wte__n { font-family: var(--font-display); font-size: 44px; line-height: 0.9; color: var(--sellier); }
.wte__reasons h3 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 500; font-size: 25px; line-height: 1.2; color: var(--ink); text-wrap: pretty; }
.wte__reasons p { margin: 0; max-width: 62ch; font-size: 16.5px; line-height: 1.7; color: var(--ink); text-wrap: pretty; }

/* ---- the caution: a quiet note, as "After the day" is on the sibling ---- */
.wte__after { margin: 56px 0 0; padding: 4px 0 4px 26px; border-left: 2px solid var(--sellier); }
.wte__after h2 { margin-bottom: 10px; font-size: 26px; }
.wte__after p { margin: 0; max-width: 62ch; font-size: 16px; line-height: 1.7; color: var(--ink-2); }

/* ---- the comparison: the sibling's table, four columns (the row label at 20%, the three ways at about 27% each) ---- */
.wte__compare { margin: 80px 0 0; }
.wte-table { overflow-x: auto; margin: 6px 0 10px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); -webkit-overflow-scrolling: touch; }
.wte-table table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 14.5px; line-height: 1.45; }
.wte-table th,
.wte-table td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--rule); }
.wte-table thead th { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--ink-2); padding: 12px 14px 10px; border-bottom: 1px solid var(--ink); white-space: nowrap; }
.wte-table tbody tr:last-child > * { border-bottom: 0; }
.wte-table th:first-child,
.wte-table td:first-child { padding-left: 0; }
.wte-table th:last-child,
.wte-table td:last-child { padding-right: 0; }
.wte-table tr > :first-child { width: 20%; }
.wte-table td { width: 26.6%; }
/* the row labels muted; "Open-market purchase" the subject: its header in the accent, its cells in full ink */
.wte-table tbody th { font-weight: 400; font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.wte-table td { color: var(--ink-2); }
.wte-table thead th.wte-table__id { color: var(--sellier); }
.wte-table td.wte-table__id { color: var(--ink); font-weight: 500; }

/* the same comparison on a phone: one block per way of owning shares, label and value pairs; hidden until then */
.wte-stack { display: none; border-top: 2px solid var(--ink); }
.wte-stack__way { padding: 18px 0 14px; border-bottom: 1px solid var(--rule); }
.wte-stack__way:last-child { border-bottom: 1px solid var(--ink); }
.wte-stack__name { margin: 0 0 8px; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--ink-2); }
.wte-stack__way--id .wte-stack__name { color: var(--sellier); }
.wte-stack dl { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); gap: 6px 14px; margin: 0; font-size: 14.5px; line-height: 1.45; }
.wte-stack dt { padding-top: 1px; font-size: 13px; color: var(--ink-3); }
.wte-stack dd { margin: 0; color: var(--ink-2); }
.wte-stack__way--id dd { color: var(--ink); font-weight: 500; }

.wte__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- how the brand helps: five ways, one per row across the full frame, the title left and the text right ---- */
.wte__helps { margin: 88px 0 0; padding-top: 28px; border-top: 1px solid var(--ink); }
.wte__helps-intro { max-width: 62ch; margin: 0 0 30px; font-size: 17px; line-height: 1.7; color: var(--ink); }
.wte__ways { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.wte__way { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 8px 48px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--rule); }
.wte__way h3 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 1.15; color: var(--ink); }
.wte__way div { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.wte__way p { max-width: 62ch; margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }
.wte__way a { padding-bottom: 1px; font-size: 14px; font-weight: 500; color: var(--sellier); text-decoration: none; border-bottom: 1px solid currentColor; }
.wte__way a:hover { color: var(--sellier-deep); }

/* ---- the ending: a wordless mark, the recap article's ornament (.ra-orn) ---- */
.wte__mark { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 72px 0 0; color: var(--sellier); }
.wte__mark::before,
.wte__mark::after { content: ""; width: 56px; height: 1px; background: var(--rule); }
.wte__mark span { width: 6px; height: 6px; border: 1px solid currentColor; transform: rotate(45deg); }

/* ---- sources: a quiet footnote block in the reading column ---- */
.wte__sources { margin: 56px 0 0; }
.wte__sources h2 { margin: 0 0 12px; font-family: inherit; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; line-height: 1.4; text-transform: uppercase; color: var(--ink-2); }
.wte__sources ol { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0 0 0 18px; font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.wte__sources a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.wte__sources a:hover { text-decoration-color: var(--sellier); }

/* ---- phone ---- */
@media (max-width: 700px) {
  .wte.page { padding-top: 40px; padding-left: 16px; padding-right: 16px; padding-bottom: 56px; }
  .wte__head .display { font-size: 38px; }
  .wte__dek { font-size: 19.5px; }
  .wte__short { margin-top: 40px; padding-top: 22px; }
  .wte__lede { font-size: 21px; }
  .wte h2 { font-size: 28px; }
  .wte__why, .wte__compare { margin-top: 60px; }
  .wte__reasons li { grid-template-columns: 44px minmax(0, 1fr); padding: 22px 0 20px; }
  .wte__n { font-size: 34px; }
  .wte__reasons h3 { font-size: 22px; }
  .wte__reasons p { font-size: 16px; }
  .wte__after { padding-left: 16px; }
  .wte__after h2 { font-size: 24px; }
  .wte__helps { margin-top: 64px; }
  .wte__way { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 20px 0; }
  .wte__way h3 { font-size: 22px; }
  .wte__mark { margin-top: 56px; }
  .wte__sources { margin-top: 40px; }
}

/* the comparison stacks under 640 px (the design's only phone version); the table is hidden from sight only, not with
   display: none, so screen readers keep reading it (the stack is aria-hidden) */
@media (max-width: 639px) {
  .wte-table { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .wte-stack { display: block; }
}