/* "How the daily news briefing works", /monitor/how-it-works (HOW-IT-WORKS-DESIGN.md, 24 Oct; the how it works page chat,
   CC-1, CC-2): loaded by that page only, from a link in its own view (how-it-works.ejs), so no shared stylesheet is
   touched. The third explainer: its frame, reading column, type sizes, head, opening lede and quiet note are the
   siblings' rules (why-track-executive-purchases.css), copied under .hiw. What is new: the figure (three sources, an arrow,
   the home page's sample viewer), the two-column list with the home page's ticked circle, the pull line, and the closing
   section on the page's own paper around the home page's plans table. The viewer and the table keep home.css's rules;
   this file only sizes the viewer for the figure (520 px, 460 px on a phone) and gives the table the three colours the
   home page sets on .hp (home.css), because this page is not inside .hp. Every rule is under .hiw; every colour and face
   is the site's own variable (app.css). Display type uses lining figures, as on the home page. */

.hiw.page { max-width: 1120px; padding-bottom: 80px; --hiw-ink-soft: #3b352d; --hp-panel: #fbf8f1; --hp-body: #4a433a; --hp-rule-2: #e8dfd0; }

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

.hiw__col { max-width: 760px; }

.hiw .display,
.hiw h1,
.hiw h2,
.hiw__distil,
.hiw .hp-pt { font-variant-numeric: lining-nums; }

/* ---- head: the label and the title; no dek ---- */
.hiw__head .eyebrow { margin: 0 0 14px; }
.hiw__head .display { margin: 0; font-size: 60px; line-height: 1.04; }

/* ---- section headings ---- */
.hiw h2 { margin: 0 0 18px; font-family: var(--font-display); font-weight: 500; font-size: 34px; line-height: 1.12; color: var(--ink); text-wrap: balance; }
.hiw__body { max-width: 62ch; margin: 0 0 18px; font-size: 17px; line-height: 1.72; color: var(--ink); text-wrap: pretty; }

/* ---- the opening: two paragraphs under the heavy rule, the page's lede (the siblings' short answer, without a label) ---- */
.hiw__open { margin: 36px 0 0; padding-top: 28px; border-top: 1px solid var(--ink); }
.hiw__open p { margin: 0 0 18px; font-family: var(--font-display); font-size: 25px; line-height: 1.48; color: var(--ink); text-wrap: pretty; }
.hiw__open p:last-child { margin: 0; }

/* ---- who it's for: the quiet note with the rust rule, as the siblings' cautions ---- */
.hiw__who { margin: 72px 0 0; padding: 4px 0 4px 26px; border-left: 2px solid var(--sellier); }
.hiw__who h2 { margin-bottom: 12px; font-size: 30px; }
.hiw__who p { max-width: 62ch; margin: 0; font-size: 17px; line-height: 1.72; color: var(--ink); text-wrap: pretty; }

/* ---- how it's produced, and its figure between hairlines ---- */
.hiw__how { margin: 80px 0 0; }
.hiw__flow { display: grid; grid-template-columns: minmax(0, 190px) 44px minmax(0, 1fr); gap: 0 18px; align-items: center; margin: 34px 0 36px; padding: 28px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.hiw__flow-h { margin: 0 0 12px; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.hiw__srcs { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.hiw__srcs li { display: flex; gap: 12px; align-items: center; font-size: 14px; color: var(--ink); }
.hiw__srcs svg { flex: 0 0 34px; }
.hiw__arrow { display: flex; justify-content: center; color: var(--sellier); }
.hiw__out { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.hiw__out .hiw__flow-h { margin: 0 18px; }
/* the home page's viewer (partials/home/sample.ejs), sized for the figure */
.hiw .hp-sample { height: 520px; padding: 6px 18px 36px; gap: 22px; -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent); mask-image: linear-gradient(to bottom, #000 84%, transparent); }
.hiw .hp-sample--empty { -webkit-mask-image: none; mask-image: none; }
.hiw .hp-sample__caption { margin: 6px 18px 0; }

/* ---- what you'll learn: nine items, two columns, the home page's ticked circle, a hairline under each ---- */
.hiw__learn { margin: 80px 0 0; }
.hiw__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; margin: 6px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.hiw__list li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 16px; line-height: 1.5; color: var(--ink); }
.hiw__list svg { flex: 0 0 20px; margin-top: 2px; color: var(--sellier); }
.hiw__distil { max-width: 640px; margin: 28px 0 0; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 24px; line-height: 1.4; color: var(--hiw-ink-soft); text-wrap: pretty; }

/* ---- the closing section: on the page's own paper, opened by the heavy rule, the home page's plans table ---- */
.hiw__close { margin: 64px 0 0; padding: 44px 0 0; border-top: 1px solid var(--ink); }
.hiw__close-head { max-width: 720px; margin: 0 auto; text-align: center; }
.hiw__close h2 { margin: 0 0 18px; font-size: 52px; line-height: 1.06; }
.hiw__close-head p { margin: 0; font-size: 18px; line-height: 1.65; color: var(--hp-body); text-wrap: pretty; }
.hiw .hp-pt-wrap { margin-top: 44px; }
.hiw__note { max-width: 640px; margin: 28px auto 0; text-align: center; font-size: 15px; line-height: 1.65; color: var(--hp-body); text-wrap: pretty; }
.hiw__cta { display: flex; justify-content: center; margin: 26px 0 0; }
.hiw__cta .hp-btn { padding: 18px 34px; }

/* ---- phone ---- */
@media (max-width: 700px) {
  .hiw.page { padding-top: 40px; padding-left: 16px; padding-right: 16px; padding-bottom: 56px; }
  .hiw__head .display { font-size: 38px; }
  .hiw__open { margin-top: 28px; padding-top: 22px; }
  .hiw__open p { font-size: 21px; }
  .hiw h2 { font-size: 28px; }
  .hiw__body,
  .hiw__who p { font-size: 16px; }
  .hiw__who { margin-top: 56px; padding-left: 16px; }
  .hiw__who h2 { font-size: 26px; }
  .hiw__how,
  .hiw__learn { margin-top: 60px; }
  .hiw__flow { grid-template-columns: minmax(0, 1fr); gap: 18px 0; }
  .hiw__srcs { flex-direction: row; flex-wrap: wrap; gap: 10px 18px; }
  .hiw__arrow svg { transform: rotate(90deg); }
  .hiw .hp-sample { height: 460px; padding: 6px 6px 32px; }
  .hiw .hp-sample__caption,
  .hiw__out .hiw__flow-h { margin: 6px 6px 0; }
  .hiw__out .hiw__flow-h { margin-top: 0; }
  .hiw__list { grid-template-columns: minmax(0, 1fr); }
  .hiw__distil { font-size: 21px; }
  .hiw__close { margin-top: 48px; padding-top: 32px; }
  .hiw__close h2 { font-size: 38px; }
  .hiw__close-head p { font-size: 16.5px; }
  .hiw .hp-pt-wrap { margin-top: 32px; }
  .hiw__cta { display: block; }
  .hiw__cta .hp-btn { display: block; width: 100%; text-align: center; }
}