/* "What are investor days?", /investor-days/what-are-investor-days (the design Roy approved on Oct 15; design chat
   DCAL-6): loaded by that page only, from a link in its own view (what-are-investor-days.ejs), so no shared stylesheet
   is touched. Every rule is under .wai; every colour and face is the site's own variable (app.css). The frame is the
   calendar's (its left edge on the wordmark); the text sits in a 760 px reading column, and "How Daily Scout helps" and
   the close use the full frame. The table's rules are the recap tables' (.ra-table, recap-public.css): a real table in a
   box that scrolls sideways only if it must, the first column fixed, edge to edge on a phone. */

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

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

.wai__col { max-width: 760px; }

/* ---- head ---- */
.wai__head .eyebrow { margin: 0 0 14px; }
.wai__head .display { margin: 0; font-size: 60px; line-height: 1.04; }
.wai__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(--wai-ink-soft); text-wrap: pretty; }

/* ---- labels and section headings ---- */
.wai__label { margin: 0 0 12px; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sellier); }
.wai 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 ---- */
.wai__short { margin: 56px 0 0; padding-top: 28px; border-top: 1px solid var(--ink); }
.wai__lede { margin: 0; font-family: var(--font-display); font-size: 25px; line-height: 1.48; color: var(--ink); text-wrap: pretty; }

/* ---- seven numbered reasons (the numbers are in the copy) ---- */
.wai__why { margin: 80px 0 0; }
.wai__reasons { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.wai__reasons li { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 8px; padding: 26px 0 24px; border-bottom: 1px solid var(--rule); }
.wai__n { font-family: var(--font-display); font-size: 44px; line-height: 0.9; color: var(--sellier); font-variant-numeric: lining-nums; }
.wai__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; }
.wai__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, not a selling point ---- */
.wai__after { margin: 56px 0 0; padding: 4px 0 4px 26px; border-left: 2px solid var(--sellier); }
.wai__after h2 { margin-bottom: 10px; font-size: 26px; }
.wai__after p { margin: 0; max-width: 62ch; font-size: 16px; line-height: 1.7; color: var(--ink-2); }

/* ---- the comparison: the recap tables' rules (.ra-table), then this table's own subject column ---- */
.wai__compare { margin: 80px 0 0; }
.wai-table { overflow-x: auto; margin: 6px 0 10px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); -webkit-overflow-scrolling: touch; }
.wai-table:focus-visible { outline: 2px solid var(--sellier); outline-offset: 2px; }
.wai-table table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 14.5px; line-height: 1.45; }
.wai-table th,
.wai-table td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--rule); }
.wai-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; }
.wai-table tbody tr:last-child > * { border-bottom: 0; }
.wai-table tbody th { min-width: 110px; }
.wai-table td { min-width: 120px; }
.wai-table th:first-child,
.wai-table td:first-child { padding-left: 0; }
.wai-table th:last-child,
.wai-table td:last-child { padding-right: 0; }
.wai-table tr > :first-child { position: sticky; left: 0; background: var(--paper); z-index: 1; }
/* the row labels muted; the "Investor day" column the subject: its header in the accent, its cells in full ink */
.wai-table tbody th { font-weight: 400; font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.wai-table td { color: var(--ink-2); }
.wai-table thead th.wai-table__id { color: var(--sellier); }
.wai-table td.wai-table__id { color: var(--ink); font-weight: 500; }

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

/* ---- how Daily Scout helps: three ways in, the full frame ---- */
.wai__helps { margin: 88px 0 0; padding-top: 28px; border-top: 1px solid var(--ink); }
.wai__helps-intro { max-width: 62ch; margin: 0 0 30px; font-size: 17px; line-height: 1.7; color: var(--ink); }
.wai__ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.wai__way { display: flex; flex-direction: column; gap: 10px; padding: 24px 28px 26px 0; }
.wai__way + .wai__way { padding-left: 28px; border-left: 1px solid var(--rule); }
.wai__way h3 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 1.15; color: var(--ink); }
.wai__way p { flex: 1; margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.wai__way a { align-self: flex-start; padding-bottom: 1px; font-size: 14px; font-weight: 500; color: var(--sellier); text-decoration: none; border-bottom: 1px solid currentColor; }
.wai__way a:hover { color: var(--sellier-deep); }

/* ---- the close ---- */
.wai__close { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 40px; margin: 80px 0 0; padding: 44px 0 0; border-top: 1px solid var(--rule); }
.wai__close p { max-width: 560px; margin: 0; font-family: var(--font-display); font-size: 32px; line-height: 1.2; color: var(--ink); text-wrap: balance; }

/* ---- phone ---- */
@media (max-width: 700px) {
  .wai.page { padding-top: 40px; padding-left: 16px; padding-right: 16px; padding-bottom: 56px; }
  .wai__head .display { font-size: 38px; }
  .wai__dek { font-size: 19.5px; }
  .wai__short { margin-top: 40px; padding-top: 22px; }
  .wai__lede { font-size: 21px; }
  .wai h2 { font-size: 28px; }
  .wai__why, .wai__compare { margin-top: 60px; }
  .wai__reasons li { grid-template-columns: 44px minmax(0, 1fr); padding: 22px 0 20px; }
  .wai__n { font-size: 34px; }
  .wai__reasons h3 { font-size: 22px; }
  .wai__reasons p { font-size: 16px; }
  .wai__after { padding-left: 16px; }
  .wai__after h2 { font-size: 24px; }
  .wai-table { margin-left: -16px; margin-right: -16px; }
  .wai-table th:first-child,
  .wai-table td:first-child { padding-left: 16px; }
  .wai-table th:last-child,
  .wai-table td:last-child { padding-right: 16px; }
  .wai-table tbody th { min-width: 0; box-shadow: inset -1px 0 0 var(--rule); }
  .wai-table thead th:first-child { box-shadow: inset -1px 0 0 var(--rule); }
  .wai-table table { font-size: 14px; }
  .wai-table td { min-width: 110px; }
  .wai__helps { margin-top: 64px; }
  .wai__ways { grid-template-columns: minmax(0, 1fr); }
  .wai__way, .wai__way + .wai__way { padding: 22px 0; border-left: 0; }
  .wai__way + .wai__way { border-top: 1px solid var(--rule); }
  .wai__close { margin-top: 48px; padding-top: 32px; }
  .wai__close p { font-size: 26px; }
}