/* Round 9 (November 3): round 8's pages with Preslea's notes of November 2: the blog's
   topic pills sit in the middle of their band (they touched the line above), posts get
   accents (accents.js: quotes, figures, statements, callouts, subheads, facts), and
   World Vision's story has a page in the new format. Round 8 (October 28): round 7's
   pages with her next pass, and the new ones (a customer story, a blog post, an
   industry, Careers). Composed from the homepage's own parts: the frame and its rules,
   row heads, cells, the film player, the story, the logo row, the figures band and the
   close. Hunter's Planned rules hold: no borders or 1px rings (only the frame's own
   hairlines), pill buttons, no eyebrows or index numbers, no fades, nothing pinned;
   hover lifts a card and mutes the rest; figures count in once. */

/* ---------- the head of each page ---------- */
.page-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; padding: clamp(128px, 13cqw, 168px) 0 clamp(48px, 5cqw, 72px); }
.page-head > * { min-width: 0; padding-inline: var(--pad); }
.page-head .headline { max-width: 11em; font-size: clamp(44px, 5.4cqw, 76px); }
.page-head-side { display: grid; justify-items: start; gap: 22px; }
.page-head-side .lead { max-width: 26em; }
.page-head-side .actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Until its motion takes it over (pages.js), the head waits hidden; never for long. */
html.pg-intro .page-head > * { opacity: 0; }
[id] { scroll-margin-top: 104px; }

/* ---------- AI approach: the principles as one chaptered film ---------- */
.chapters { padding: 12px 12px clamp(48px, 5cqw, 72px); }
.chapter-stage { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: center; }
.chapter-view { min-width: 0; }
.chapter-frame { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 24px; background: var(--deep); }
.chapter-layer { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.chapter-layer[hidden] { display: none; }
.chapter-frame.film-grain::after { z-index: 1; }
.chapter-play { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.chapter-play .play-white { width: 88px; height: 88px; }
.chapter-play .play-white svg { width: 28px; height: 28px; margin-left: 4px; }
.chapter-play:hover .play-orb, .chapter-play:focus-visible .play-orb { transform: scale(1.07); }
.chapter-play:focus-visible { outline: 2px solid var(--white); outline-offset: -8px; border-radius: 20px; }

/* The timeline: a part per principle, as long as its film; the one playing is ink. */
.timeline { display: flex; gap: 6px; margin-top: 18px; }
.timeline button { flex: var(--secs) 1 0; display: grid; gap: 10px; min-width: 0; padding: 0 0 4px; border: 0; background: none; color: var(--muted); font: inherit; text-align: left; cursor: pointer; transition: color .2s ease; }
.tl-bar { position: relative; display: block; height: 6px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--ink) 9%, var(--paper)); }
.tl-bar i { position: absolute; inset: 0; border-radius: inherit; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s cubic-bezier(.2, .8, .2, 1); }
.timeline [aria-selected="true"] .tl-bar i { transform: none; }
/* Its name over its length, so the shortest part still holds its name whole. */
.tl-label { display: grid; gap: 2px; padding-inline: 2px; font-size: 14.5px; }
.tl-label b { font-weight: 500; white-space: nowrap; }
.tl-label span { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.timeline button:hover, .timeline [aria-selected="true"] { color: var(--ink); }
.timeline button:hover .tl-bar { background: color-mix(in srgb, var(--ink) 15%, var(--paper)); }
.timeline button:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 8px; }

.chapter-copy { display: grid; min-width: 0; padding: 0 calc(var(--pad) - 12px) 0 var(--pad); }
.chapter-copy article { grid-area: 1 / 1; display: grid; align-content: center; gap: 16px; }
.chapter-copy article[hidden] { display: none; }
.chapter-copy h2 { font-size: clamp(32px, 3.6cqw, 48px); font-weight: 500; line-height: 1.05; letter-spacing: -.035em; }
.chapter-copy p { font-size: 17px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
/* Who is in it, beside the homepage story's ink play button; it opens the film too. */
.chapter-watch { justify-self: start; margin-top: 6px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.chapter-watch .play-label { font-size: 14.5px; line-height: 1.4; }
.chapter-watch:hover .play-orb, .chapter-watch:focus-visible .play-orb { transform: scale(1.07); }
.chapter-watch:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 999px; }

/* ---------- AI approach: impact, five figures ---------- */
.impact-cells { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.impact-cells .cell { padding-block: clamp(40px, 4.6cqw, 64px) clamp(36px, 4cqw, 52px); }
.impact-cells dt { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.impact-value { font-size: clamp(40px, 4cqw, 58px); font-weight: 500; line-height: .95; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.impact-cells small { font-size: 17px; font-weight: 500; letter-spacing: -.01em; color: var(--muted); }
.impact-cells dd { max-width: 17em; margin: 16px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); }

/* ---------- AI approach: the latest release ---------- */
.release-cells { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.release-cells .cell { display: grid; align-content: start; gap: 14px; padding: 12px 12px clamp(32px, 3.4cqw, 44px); }
.release-image { display: block; overflow: hidden; aspect-ratio: 3 / 2; border-radius: 16px; background: var(--white); }
.release-image img { width: 100%; height: 100%; object-fit: cover; }
.release-cells h3, .release-cells p { padding-inline: calc(var(--pad) - 12px); }
.release-cells h3 { margin-top: 8px; font-size: 19px; font-weight: 500; line-height: 1.25; letter-spacing: -.02em; }
.release-cells p { margin-top: -6px; font-size: 15px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }

/* ---------- cards that open something: a card lifts under the one you point at, the rest step back ---------- */
.card-link { position: relative; isolation: isolate; display: grid; align-content: start; gap: 14px; height: 100%; padding: 12px 12px 28px; color: var(--ink); transition: opacity .25s ease; }
/* Preslea (October 27): the white box on hover "could be cleaned up a bit". It sits
   inside the cell's lines now, its corners an even 8px out from the picture's, flat. */
.card-link::before { content: ''; position: absolute; inset: 4px; z-index: -1; border-radius: 22px; background: var(--white); opacity: 0; transition: opacity .25s ease; }
.card-link:hover::before, .card-link:focus-visible::before { opacity: 1; }
.card-link:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; border-radius: 22px; }
.card-grid:has(.card-link:hover) .card-link:not(:hover) { opacity: .5; }
.card-image { display: block; overflow: hidden; border-radius: 14px; background: var(--card); }
.card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.card-link:hover .card-image img { transform: scale(1.035); }
.card-link h3 { padding-inline: calc(var(--pad) - 12px); margin-top: 6px; font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: -.015em; text-wrap: pretty; }
.card-link .text-link, .card-link > p { padding-inline: calc(var(--pad) - 12px); }
.card-link > p { margin-top: -4px; font-size: 15px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.card-link .text-link { margin-top: 2px; font-size: 14.5px; }
.card-link:hover .text-link span { transform: translateX(3px); }

/* ---------- Customers ---------- */
.inner-page .trust-label { grid-template-columns: 1fr; }
.story-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.story-grid > .cell { padding: 0; }
.cells.story-grid > .cell:nth-child(4n + 1) { border-left: 0; }
.cells.story-grid > .cell:nth-child(n + 5) { border-top: 1px solid var(--line); }
.story-grid .card-image { aspect-ratio: 3 / 2; }

/* ---------- Resources: guides ---------- */
.guide-cells { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.guide-cells > .cell { padding: 0; }
.guide-cells .card-image { aspect-ratio: 4 / 3; }
.guide-quote .guide-book { padding: 12px; }
.guide-book img { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 18px; object-fit: cover; }
.guide-quote .quote-cell blockquote p { font-size: clamp(22px, 2.1cqw, 30px); line-height: 1.22; letter-spacing: -.025em; }
.guide-quote figcaption { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 2px 14px; }
.guide-quote figcaption img { grid-row: span 2; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.guide-quote .text-link { grid-column: 1 / -1; margin-top: 18px; }

/* ---------- Resources: the blog ---------- */
.blog-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 24px var(--pad); }
.blog-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.blog-chips button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--ink) 6%, var(--paper)); color: var(--ink); font: inherit; font-size: 14.5px; cursor: pointer; transition: background-color .18s ease, color .18s ease; }
.blog-chips button:hover { background: color-mix(in srgb, var(--ink) 11%, var(--paper)); }
.blog-chips button[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.blog-chips button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.blog-chips sup { margin-left: 6px; font-size: 12px; font-variant-numeric: tabular-nums; vertical-align: baseline; opacity: .6; }
.blog-find { display: flex; align-items: center; gap: 16px; }
.blog-count { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.blog-search { position: relative; display: block; width: min(300px, 100%); }
.blog-search svg { position: absolute; left: 15px; top: 50%; width: 16px; height: 16px; translate: 0 -50%; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; pointer-events: none; }
.blog-search input { width: 100%; height: 44px; padding: 0 16px 0 40px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--ink) 5.5%, var(--paper)); color: var(--ink); font: inherit; font-size: 15px; transition: background-color .2s ease, box-shadow .2s ease; }
.blog-search input::placeholder { color: var(--faint); }
.blog-search input:focus { outline: none; background: var(--white); box-shadow: 0 0 0 2px var(--ink); }
.blog-search input::-webkit-search-cancel-button { cursor: pointer; }

.post-featured { margin: 0; }
.post-feature-image { padding: 12px; }
.post-image { display: block; overflow: hidden; aspect-ratio: 3 / 2; border-radius: 14px; background: var(--card); }
.post-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.post-feature-image .post-image { border-radius: 18px; }
.post-feature-image:hover img { transform: scale(1.025); }
.post-feature-copy { display: grid; align-content: center; justify-items: start; gap: 18px; }
.post-feature-title { max-width: 16em; font-size: clamp(28px, 2.8cqw, 40px); font-weight: 500; line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.post-feature-title a:hover { color: var(--deep); }
.post-feature-copy .lead { max-width: 28em; font-size: 17px; }
.post-feature-copy .button { margin-top: 6px; }
.post-meta { display: flex; flex-wrap: wrap; gap: 0 8px; font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.post-meta > * + *::before { content: '·'; margin-right: 8px; }

.post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.post-grid > .cell { padding: 0; }
.cells.post-grid > .cell:nth-child(3n + 1) { border-left: 0; }
.cells.post-grid > .cell:nth-child(n + 4) { border-top: 1px solid var(--line); }
.post-link { position: relative; isolation: isolate; display: grid; align-content: start; gap: 12px; height: 100%; padding: 12px 12px 30px; color: var(--ink); transition: opacity .25s ease; }
.post-link::before { content: ''; position: absolute; inset: 4px; z-index: -1; border-radius: 22px; background: var(--white); opacity: 0; transition: opacity .25s ease; }
.post-link:hover::before, .post-link:focus-visible::before { opacity: 1; }
.post-link:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; border-radius: 22px; }
.post-grid:has(.post-link:hover) .post-link:not(:hover) { opacity: .5; }
.post-link:hover .post-image img { transform: scale(1.035); }
.post-link > :not(.post-image) { padding-inline: calc(var(--pad) - 12px); }
.post-title { margin-top: 6px; font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: -.015em; text-wrap: pretty; }
.post-excerpt { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 15px; line-height: 1.5; color: var(--muted); }
.post-link .post-meta { margin-top: 2px; }
.blog-more { display: flex; justify-content: center; padding: clamp(32px, 3.4cqw, 44px) var(--pad); border-top: 1px solid var(--line); }
.blog-more[hidden] { display: none; }
.blog-empty { display: grid; justify-items: start; gap: 14px; padding: clamp(48px, 5cqw, 72px) var(--pad); font-size: 17px; color: var(--muted); }
.blog-empty[hidden], [data-blog-featured][hidden], .post-grid[hidden], .blog .rule[hidden] { display: none; }


/* ---------- a page's photo, under its head ---------- */
.page-photo { display: block; margin: 0; padding: 12px; }
.page-photo > span { display: block; overflow: hidden; aspect-ratio: 21 / 9; border-radius: 24px; background: var(--card); }
.page-photo img { width: 100%; height: 100%; object-fit: cover; }
.page-photo.story-film { padding: 12px; }
.page-photo .story-frame { aspect-ratio: 21 / 9; border-radius: 24px; }

/* ---------- a story's or a post's parts: the heading in the left columns, the words on the right ---------- */
.story-part { display: grid; grid-template-columns: calc(var(--col) * 4) minmax(0, 1fr); }
.part-head { padding: clamp(48px, 5cqw, 72px) var(--pad); }
.part-head h2 { font-size: clamp(26px, 2.4cqw, 34px); font-weight: 500; line-height: 1.1; letter-spacing: -.03em; }
.part-body { display: grid; align-content: start; gap: 18px; padding: clamp(48px, 5cqw, 72px) var(--pad); border-left: 1px solid var(--line); }
.part-body h3 { max-width: 24em; font-size: clamp(22px, 2cqw, 28px); font-weight: 500; line-height: 1.2; letter-spacing: -.025em; text-wrap: balance; }
.part-body p, .part-body li { max-width: 38em; font-size: 17px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.part-body .lead-para { font-size: clamp(19px, 1.6cqw, 22px); line-height: 1.5; color: var(--ink); }
.part-body ul { display: grid; gap: 10px; margin: 0; padding-left: 1.2em; }
.part-body blockquote { margin: 18px 0 0; }
.part-body blockquote p { max-width: 20em; font-size: clamp(26px, 2.6cqw, 36px); font-weight: 500; line-height: 1.15; letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
.part-body blockquote footer { margin-top: 16px; font-size: 14.5px; color: var(--muted); }

/* a story's facts beside its title */
.story-facts { display: grid; gap: 4px; width: 100%; margin: 0; }
.story-facts div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 12px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, #4F9897 8%, var(--paper)); font-size: 15px; line-height: 1.45; }
.story-facts dt { color: var(--muted); }
.story-facts dd { margin: 0; color: var(--ink); }

/* a story's results: its figures count in, its words follow */
.result-cells { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.result-cells .cell { padding-block: clamp(40px, 4.6cqw, 60px) clamp(32px, 3.6cqw, 48px); }
.result-value { font-size: clamp(40px, 4cqw, 58px); font-weight: 500; line-height: .98; letter-spacing: -.05em; font-variant-numeric: tabular-nums; text-wrap: balance; }
.result-cells dd { max-width: 18em; margin: 14px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); }

/* ---------- a blog post ---------- */
.post-head-meta { margin-top: -6px; }
.article { display: grid; justify-items: center; padding: clamp(48px, 5cqw, 80px) var(--pad); }
.article-body { width: min(100%, 680px); display: grid; gap: 22px; color: var(--ink); }
.article-body > p, .article-body li { font-size: 18px; line-height: 1.68; text-wrap: pretty; }
.article-body h2 { margin-top: 26px; font-size: clamp(26px, 2.4cqw, 32px); font-weight: 500; line-height: 1.15; letter-spacing: -.03em; text-wrap: balance; }
.article-body h3, .article-body h4 { margin-top: 12px; font-size: 21px; font-weight: 500; line-height: 1.3; letter-spacing: -.02em; }
.article-body ul, .article-body ol { display: grid; gap: 10px; margin: 0; padding-left: 1.3em; }
.article-body a { color: var(--deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article-body a:hover { color: var(--ink); }
.article-body strong, .article-body b { font-weight: 600; }
.article-body blockquote { margin: 8px 0; padding: 22px 24px; border-radius: 16px; background: color-mix(in srgb, #4F9897 8%, var(--paper)); font-size: 19px; line-height: 1.55; }
.article-figure { margin: 10px -12px; }
.article-figure img { display: block; width: 100%; height: auto; border-radius: 16px; background: var(--card); }
.article-figure figcaption { margin-top: 10px; padding-inline: 12px; font-size: 14px; color: var(--muted); }
.article-action { margin: 0; }

/* ---------- a post's accents (accents.js), each the post's own words ---------- */
.article-body > .article-sub { margin-top: 14px; font-size: 21px; font-weight: 500; line-height: 1.3; letter-spacing: -.02em; }
.article-sub a { color: inherit; }
/* a point that lands, and a person's words: large, the site's headline weight */
.article-body > .article-statement { margin: 14px 0; font-size: clamp(26px, 2.5cqw, 32px); font-weight: 500; line-height: 1.18; letter-spacing: -.03em; color: var(--deep); text-wrap: balance; }
.article-quote { margin: 18px 0; }
.article-body .article-quote blockquote { margin: 0; padding: 0; border-radius: 0; background: none; } /* no card: large words on the page, unlike a callout */
.article-quote blockquote p { font-size: clamp(25px, 2.4cqw, 31px); font-weight: 500; line-height: 1.2; letter-spacing: -.03em; color: var(--ink); text-indent: -.42em; text-wrap: pretty; }
.article-quote blockquote p::before { content: '“'; }
.article-quote blockquote p::after { content: '”'; }
.article-quote figcaption { margin-top: 16px; font-size: 15px; color: var(--muted); }
/* figures, on tint cells; they count in once */
.article-stats { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 4px; margin: 10px 0; }
.article-stat { padding: 26px 26px 24px; border-radius: 18px; background: color-mix(in srgb, #4F9897 9%, var(--paper)); }
.article-stat-value { font-size: clamp(44px, 4.4cqw, 60px); font-weight: 500; line-height: .98; letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: var(--ink); }
.article-stat-text { margin-top: 14px; font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.article-stat-text::first-letter { text-transform: uppercase; }
.article-stats.is-one .article-stat-text { max-width: 34em; font-size: 17px; color: var(--ink); }
/* a note on a tint band; its bold first line is its label */
.article-callout { display: grid; gap: 12px; margin: 6px 0; padding: 26px 28px; border-radius: 20px; background: color-mix(in srgb, #4F9897 9%, var(--paper)); }
.article-callout p, .article-callout li { font-size: 17px; line-height: 1.6; }
.article-callout .article-callout-label { font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--deep); }
.article-callout ul, .article-callout ol { gap: 8px; }
/* a venue's facts */
.article-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 4px; margin: -6px 0 0; }
.article-facts div { padding: 12px 16px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 4.5%, var(--paper)); }
.article-facts dt { font-size: 13px; color: var(--muted); }
.article-facts dd { margin: 2px 0 0; font-size: 16px; line-height: 1.4; }
.article-action .button { text-decoration: none; color: var(--ink); }

/* ---------- an industry ---------- */
.event-cells, .faq-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.event-cells .cell, .faq-cells .cell { display: grid; align-content: start; gap: 10px; padding-block: clamp(36px, 3.8cqw, 52px); }
.cells.event-cells > .cell:nth-child(odd), .cells.faq-cells > .cell:nth-child(odd) { border-left: 0; }
.cells.event-cells > .cell:nth-child(n + 3), .cells.faq-cells > .cell:nth-child(n + 3) { border-top: 1px solid var(--line); }
.event-cells h3, .faq-cells h3 { max-width: 22em; font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -.02em; }
.event-cells p, .faq-cells p { max-width: 30em; font-size: 15.5px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.industry-features { border-top: 1px solid var(--line); }
.industry-features > * + * { border-top: 1px solid var(--line); }
/* A row with its screen on the left keeps the screen as wide as the others. */
.industry-features .pp-feature.is-flipped { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); }
.industry-features .pp-feature-copy h3 { font-size: clamp(26px, 2.4cqw, 34px); font-weight: 500; line-height: 1.1; letter-spacing: -.03em; }
.industry-features .pp-feature-copy p { margin-top: 14px; font-size: 17px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }

/* ---------- Careers ---------- */
/* the perks, a tint band each */
.part-body .perk-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0; list-style: none; }
.part-body .perk-list li { max-width: none; padding: 16px 18px; border-radius: 14px; background: color-mix(in srgb, #4F9897 8%, var(--paper)); font-size: 16.5px; font-weight: 500; line-height: 1.35; letter-spacing: -.01em; color: var(--ink); }
.roles-count { display: grid; justify-items: start; gap: 6px; }
.roles-count b { font-size: clamp(44px, 4.4cqw, 64px); font-weight: 500; line-height: .95; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.roles-count span { font-size: 15px; color: var(--muted); }
.role-groups { display: grid; }
.role-group { display: grid; grid-template-columns: calc(var(--col) * 4) minmax(0, 1fr); }
.role-group + .role-group { border-top: 1px solid var(--line); }
.role-group h3 { padding: 32px var(--pad); font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
.role-group h3 span { margin-left: 8px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.role-group ul { display: grid; gap: 4px; margin: 0; padding: 22px var(--pad) 22px calc(var(--pad) - 12px); list-style: none; border-left: 1px solid var(--line); }
.role-group:has(a:hover) a:not(:hover) { opacity: .5; }
.role-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; align-items: baseline; gap: 16px; padding: 14px 14px; border-radius: 14px; color: var(--ink); transition: background-color .2s ease, opacity .25s ease; }
.role-row:hover, .role-row:focus-visible { background: var(--white); outline: none; }
.role-row:focus-visible { box-shadow: inset 0 0 0 2px var(--ink); }
.role-row b { font-size: 17px; font-weight: 500; letter-spacing: -.015em; }
.role-row span { font-size: 14.5px; color: var(--muted); white-space: nowrap; }
.role-row i { font-style: normal; color: var(--muted); transition: transform .2s ease; }
.role-row:hover i { transform: translateX(3px); color: var(--ink); }
.roles-source { padding: 20px var(--pad) 32px; font-size: 13.5px; color: var(--muted); border-top: 1px solid var(--line); }

/* ---------- tablet ---------- */
@container (max-width: 1080px) {
  .story-part, .role-group { grid-template-columns: minmax(0, 1fr); }
  .industry-features .pp-feature.is-flipped { grid-template-columns: minmax(0, 1fr); }
  .part-head { padding-bottom: 0; }
  .part-body, .role-group ul { border-left: 0; }
  .part-body { padding-top: 20px; }
  .role-group h3 { padding-bottom: 0; }
  .result-cells { grid-template-columns: repeat(min(var(--n, 3), 2), minmax(0, 1fr)); }
  .cells.perk-cells > .cell:nth-child(odd), .cells.result-cells > .cell:nth-child(odd) { border-left: 0; }
  .cells.perk-cells > .cell:nth-child(n + 3), .cells.result-cells > .cell:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .cells.perk-cells > .cell:nth-child(even), .cells.result-cells > .cell:nth-child(even) { border-left: 1px solid var(--line); border-top: 0; }
  .cells.perk-cells > .cell:nth-child(n + 3):nth-child(even), .cells.result-cells > .cell:nth-child(n + 3):nth-child(even) { border-top: 1px solid var(--line); }
  .cells.event-cells > .cell:nth-child(even), .cells.faq-cells > .cell:nth-child(even) { border-left: 1px solid var(--line); border-top: 0; }
  .cells.event-cells > .cell:nth-child(n + 3), .cells.faq-cells > .cell:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .page-head { grid-template-columns: minmax(0, 1fr); align-items: start; row-gap: 24px; }
  .chapter-stage { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .chapter-copy { padding: 0 calc(var(--pad) - 12px); }
  .impact-cells, .release-cells, .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cells.impact-cells > .cell, .cells.release-cells > .cell { border-left: 0; border-top: 0; }
  .cells.impact-cells > .cell:nth-child(2n), .cells.release-cells > .cell:nth-child(2n) { border-left: 1px solid var(--line); }
  .cells.impact-cells > .cell:nth-child(n + 3), .cells.release-cells > .cell:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .cells.impact-cells > .cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cells.story-grid > .cell { border-left: 0; border-top: 0; }
  .cells.story-grid > .cell:nth-child(2n) { border-left: 1px solid var(--line); }
  .cells.story-grid > .cell:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .guide-cells, .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cells.guide-cells > .cell, .cells.post-grid > .cell { border-left: 0; border-top: 0; }
  .cells.guide-cells > .cell:nth-child(2n), .cells.post-grid > .cell:nth-child(2n) { border-left: 1px solid var(--line); }
  .cells.guide-cells > .cell:nth-child(n + 3), .cells.post-grid > .cell:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .guide-quote .quote-cell { gap: 24px; }
}

/* ---------- phone ---------- */
@container (max-width: 680px) {
  .page-photo > span, .page-photo .story-frame { aspect-ratio: 4 / 3; border-radius: 16px; }
  .page-photo { padding: 8px; }
  .story-facts div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .result-cells, .event-cells, .faq-cells, .part-body .perk-list { grid-template-columns: minmax(0, 1fr); }
  .cells.result-cells > .cell:nth-child(n), .cells.perk-cells > .cell:nth-child(n), .cells.event-cells > .cell:nth-child(n), .cells.faq-cells > .cell:nth-child(n) { border-left: 0; }
  .cells.result-cells > .cell + .cell, .cells.perk-cells > .cell + .cell, .cells.event-cells > .cell + .cell, .cells.faq-cells > .cell + .cell { border-top: 1px solid var(--line); }
  .article { padding-inline: 20px; }
  .article-body > p, .article-body li { font-size: 17px; }
  .article-stats { grid-template-columns: minmax(0, 1fr); }
  .article-callout, .article-stat { padding: 22px 20px; }
  .role-row { grid-template-columns: minmax(0, 1fr) 20px; row-gap: 2px; }
  .role-row span { grid-row: 2; white-space: normal; }
  .role-row i { grid-row: 1 / span 2; align-self: center; }
  .page-head { padding-top: 112px; }
  .page-head .headline { font-size: 40px; }
  .chapters { padding-inline: 8px; }
  .chapter-frame { border-radius: 16px; }
  .chapter-play .play-white { width: 64px; height: 64px; }
  .chapter-play .play-white svg { width: 22px; height: 22px; }
  /* The timeline as a list: a row per principle, the one playing on a tint band. */
  .timeline { flex-direction: column; gap: 2px; margin-top: 12px; }
  .timeline button { flex: none; padding: 12px 12px; border-radius: 12px; }
  .timeline [aria-selected="true"] { background: color-mix(in srgb, var(--ink) 6%, var(--paper)); }
  .tl-bar { display: none; }
  .tl-label { display: flex; justify-content: space-between; gap: 12px; font-size: 15.5px; }
  .chapter-copy { padding-inline: 12px; }
  .impact-cells, .release-cells, .story-grid, .guide-cells, .post-grid { grid-template-columns: minmax(0, 1fr); }
  .cells.impact-cells > .cell:nth-child(n), .cells.release-cells > .cell:nth-child(n), .cells.story-grid > .cell:nth-child(n), .cells.guide-cells > .cell:nth-child(n), .cells.post-grid > .cell:nth-child(n) { border-left: 0; }
  .cells.impact-cells > .cell + .cell, .cells.release-cells > .cell + .cell, .cells.story-grid > .cell + .cell, .cells.guide-cells > .cell + .cell, .cells.post-grid > .cell + .cell { border-top: 1px solid var(--line); }
  .card-grid:has(.card-link:hover) .card-link:not(:hover), .post-grid:has(.post-link:hover) .post-link:not(:hover) { opacity: 1; }
  .blog-tools { padding-block: 20px; }
  .blog-find { width: 100%; justify-content: space-between; }
  .blog-search { width: auto; flex: 1; }
}