/* What we do: three goals told as scroll chapters, use cases as a hover theatre of case miniatures */
:root { --ink:#1c1c1c; --bg:#fbfbfb; --g1:#eaeaea; --g2:#cdcdcd; --g3:#8a8a8a; --acc:#eaff95; }
.wwd { position: relative; }

/* intro: who we help, and the chat entry */
.wwd-intro { padding: 9rem var(--pad, 1.5rem) 5rem; max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem 4rem; align-items: end; }
.wwd-intro .h2 { grid-column: 1 / -1; text-align: left; }
.wwd-lead { font-size: clamp(1.75rem, 3.2vw, 2.75rem); line-height: 1.12; letter-spacing: -.03rem; font-weight: 300; }
.wwd-lead .who { position: relative; display: inline-block; font-weight: 600; cursor: default; border-bottom: 1.5px solid var(--g2); line-height: 1; padding-bottom: .1em; transition: border-color .2s; }
.wwd-lead .who:hover, .wwd-lead .who:focus-visible { border-color: var(--ink); outline: none; }
.who__pop { display: none; position: absolute; left: 0; top: calc(100% + .6rem); z-index: 30; width: 15rem; background: #fff; border-radius: .9rem; padding: .9rem 1rem; box-shadow: 0 0 0 1px var(--g1), 0 24px 48px -24px rgba(0,0,0,.35);
  font-size: .8125rem; line-height: 1.35; letter-spacing: 0; font-weight: 300; color: #555; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .25s, transform .25s cubic-bezier(.22,1,.36,1); }
.who__pop img { height: 1.1rem; width: auto; display: block; margin-bottom: .6rem; filter: grayscale(1); }
.who__pop b { display: block; color: var(--ink); font-weight: 600; margin-bottom: .15rem; }
.who:hover .who__pop, .who:focus-visible .who__pop, .who.is-open .who__pop { display: block; opacity: 1; transform: none; pointer-events: auto; }

.wwd-ask { align-self: end; }
.wwd-ask__label { font-size: .8125rem; color: var(--g3); margin-bottom: .6rem; }
.wwd-ask__box { display: flex; align-items: center; gap: .75rem; background: #fff; border-radius: 1.1rem; padding: .5rem .5rem .5rem 1.15rem; box-shadow: 0 0 0 1px var(--g1), 0 20px 40px -28px rgba(0,0,0,.35); }
.wwd-ask__box input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: 1rem; padding: .85rem 0; color: var(--ink); }
.wwd-ask__box input::placeholder { color: #9a9a9a; }
.wwd-ask__send { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; background: var(--ink); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.wwd-ask__goals { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.wwd-ask__goals button { font: inherit; font-size: .8125rem; font-weight: 600; border: 0; border-radius: 999px; padding: .55rem .9rem; min-height: 2.75rem; background: var(--g1); color: var(--ink); cursor: pointer; transition: background .2s; }
.wwd-ask__goals button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.wwd-ask__note { font-size: .75rem; color: var(--g3); margin-top: .6rem; }

/* chapters: one per goal, sticky so the next one slides over the last */
.wwd-chapters { position: relative; }
.chapter { position: sticky; top: 0; min-height: 100vh; display: grid; grid-template-columns: minmax(18rem, 34%) 1fr; gap: 3rem; padding: 6.5rem var(--pad, 1.5rem) 3rem;
  background: var(--bg); color: var(--ink); border-top: 1px solid var(--g1); transform-origin: 50% 0; overflow-x: clip; }
.chapter[data-tone="2"] { background: #f2f1ef; }
.chapter[data-tone="3"] { background: var(--ink); color: var(--bg); border-top-color: #000; }
.chapter__side { display: flex; flex-direction: column; justify-content: space-between; min-height: calc(100vh - 9.5rem); }
.chapter__steps { display: flex; flex-direction: column; gap: .35rem; font-size: .8125rem; color: var(--g3); }
.chapter__steps span { display: flex; align-items: center; gap: .55rem; }
.chapter__steps span::before { content: ""; width: 1.25rem; height: 1px; background: currentColor; opacity: .5; }
.chapter__steps .is-on { color: inherit; font-weight: 600; }
.chapter__steps .is-on::before { width: 2.25rem; opacity: 1; background: var(--acc); height: 2px; }
.chapter[data-tone="3"] .chapter__steps { color: #8f8f8f; }
.chapter__title { font-size: clamp(3.5rem, 7.4vw, 7rem); line-height: .94; letter-spacing: -.03em; margin: 2rem 0 1.25rem; }
.chapter__title span { display: block; overflow: hidden; }
.chapter__title .a { font-weight: 300; }
.chapter__title .b { font-weight: 600; }
.chapter__meta { font-size: .875rem; color: var(--g3); }
.chapter[data-tone="3"] .chapter__meta { color: #9a9a9a; }
.chapter__ask { margin-top: 1.25rem; align-self: flex-start; font: inherit; font-size: .875rem; font-weight: 600; border: 0; border-radius: 999px; padding: .75rem 1.15rem; min-height: 2.75rem; cursor: pointer; background: var(--ink); color: #fff; }
.chapter[data-tone="3"] .chapter__ask { background: var(--bg); color: var(--ink); }

/* use cases: rows, miniatures slide in on hover */
.uc-list { list-style: none; margin: 0; padding: 0; align-self: center; border-top: 1px solid var(--g1); }
.chapter[data-tone="3"] .uc-list, .chapter[data-tone="3"] .uc { border-color: #333; }
.uc { position: relative; display: grid; grid-template-columns: minmax(14rem, 1fr) auto; align-items: center; gap: 1.5rem; padding: 1.15rem 0; border-bottom: 1px solid var(--g1); min-height: 6.5rem; }
.uc__name, .uc__desc { margin: 0; }
.uc__name { font-size: clamp(1.25rem, 1.7vw, 1.6rem); font-weight: 600; letter-spacing: -.02rem; line-height: 1.12; }
.uc__desc { font-size: .9375rem; color: var(--g3); margin-top: .3rem; max-width: 30rem; }
.chapter[data-tone="3"] .uc__desc { color: #9a9a9a; }
.uc__hint { font-size: .8125rem; color: var(--g3); white-space: nowrap; transition: opacity .25s; }
.uc__mins { display: flex; gap: .6rem; position: absolute; right: 0; top: 50%; transform: translateY(-50%); pointer-events: none; }
.uc.has-cases { cursor: default; }
.uc.has-cases:hover .uc__hint, .uc.has-cases:focus-within .uc__hint, .uc.is-active .uc__hint { opacity: 0; }

.mini { position: relative; width: 9.5rem; height: 6.25rem; border-radius: .7rem; background: #fff; box-shadow: 0 0 0 1px var(--g1); padding: .6rem .7rem; display: flex; flex-direction: column; justify-content: space-between;
  text-align: left; font: inherit; color: var(--ink); cursor: pointer; border: 0; opacity: 0; transform: translateX(1.5rem); pointer-events: auto; }
.chapter[data-tone="3"] .mini { background: #262626; color: var(--bg); box-shadow: 0 0 0 1px #3a3a3a; }
.mini__name { font-size: .6875rem; font-weight: 600; line-height: 1.15; }
.mini__num { font-size: 1.6rem; font-weight: 300; letter-spacing: -.03em; line-height: 1; }
.mini__lab { font-size: .625rem; color: var(--g3); line-height: 1.2; margin-top: .15rem; }
.mini__dot { position: absolute; right: .6rem; top: .65rem; width: .4rem; height: .4rem; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.mini:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.chapter[data-tone="3"] .mini:focus-visible { outline-color: var(--acc); }

/* floating preview that follows the cursor over a miniature */
.peek { position: fixed; left: 0; top: 0; z-index: 60; width: 20rem; pointer-events: none; background: #fff; color: var(--ink); border-radius: 1rem; padding: 1.1rem 1.2rem 1.15rem;
  box-shadow: 0 0 0 1px var(--g1), 0 30px 60px -30px rgba(0,0,0,.45); opacity: 0; visibility: hidden; }
.peek__t { font-size: 1rem; font-weight: 600; line-height: 1.2; letter-spacing: -.01rem; }
.peek__o { font-size: .875rem; color: #555; margin-top: .55rem; line-height: 1.38; }
.peek__cta { font-size: .75rem; color: var(--g3); margin-top: .8rem; }

/* preview drawer */
.sheet-scrim { position: fixed; inset: 0; background: rgba(28,28,28,.35); z-index: 80; opacity: 0; visibility: hidden; }
.sheet { position: fixed; top: 0; right: 0; bottom: 0; width: min(34rem, 100%); z-index: 90; background: var(--bg); color: var(--ink); padding: 2rem 2.25rem 2rem; display: flex; flex-direction: column;
  box-shadow: -30px 0 60px -30px rgba(0,0,0,.35); visibility: hidden; overflow-y: auto; }
.sheet__close { align-self: flex-end; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; background: var(--g1); cursor: pointer; font-size: 1.1rem; }
.sheet__goal { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: 1rem; }
.sheet__goal span { font-size: .75rem; font-weight: 600; padding: .35rem .65rem; border-radius: 999px; background: var(--g1); }
.sheet__goal span.is-goal { background: var(--acc); }
.sheet__title { font-size: 2rem; line-height: 1.05; letter-spacing: -.03rem; font-weight: 600; margin: 1rem 0 1.5rem; }
.sheet__title span { display: block; font-weight: 300; }
.sheet__num { display: flex; align-items: baseline; gap: .6rem; padding: 1.1rem 0; border-top: 1px solid var(--g1); }
.sheet__num b { font-size: 3.25rem; font-weight: 300; letter-spacing: -.04em; line-height: 1; }
.sheet__num span { font-size: .875rem; color: var(--g3); }
.sheet dl { margin: 0; }
.sheet dl div { padding: .95rem 0; border-top: 1px solid var(--g1); display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; }
.sheet dt { font-size: .75rem; color: var(--g3); padding-top: .2rem; }
.sheet dd { margin: 0; font-size: 1rem; line-height: 1.4; }
.sheet__ask { margin-top: 1.5rem; align-self: flex-start; font: inherit; font-weight: 600; font-size: .875rem; border: 0; border-radius: 999px; padding: .8rem 1.2rem; min-height: 2.75rem; background: var(--ink); color: #fff; cursor: pointer; }
.sheet__done { margin-top: auto; padding-top: 2rem; display: flex; align-items: center; gap: .75rem; font-size: .75rem; color: var(--g3); }
.sheet__done img { height: 1.1rem; width: auto; filter: grayscale(1); opacity: .8; }

/* phones: no pinning, miniatures always visible as a swipe strip, preview as a bottom sheet */
@media (max-width: 900px) {
  .wwd-intro { grid-template-columns: 1fr; padding-top: 6rem; gap: 2rem; }
  .chapter { position: relative; min-height: 0; grid-template-columns: 1fr; gap: 1.5rem; padding: 4rem var(--pad, 1rem) 3rem; }
  .chapter__side { min-height: 0; }
  .chapter__steps { flex-direction: row; flex-wrap: wrap; gap: .3rem 1rem; }
  .chapter__title { margin: 1.25rem 0 .75rem; }
  .uc { grid-template-columns: 1fr; gap: .9rem; min-height: 0; }
  .uc__hint { display: none; }
  .uc__mins { position: static; transform: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .25rem; margin-right: calc(-1 * var(--pad, 1rem)); }
  .mini { opacity: 1; transform: none; flex: none; scroll-snap-align: start; }
  .peek { display: none; }
  .sheet { top: auto; left: 0; width: 100%; max-height: 88vh; border-radius: 1.25rem 1.25rem 0 0; padding: 1.25rem 1.25rem 1.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .chapter { position: relative; }
  .mini { opacity: 1; transform: none; }
}

/* more than three cases: a "+n" tile opens the row and lays every miniature out below */
.mini--more { justify-content: center; align-items: center; font-size: .875rem; font-weight: 600; background: var(--g1); box-shadow: none; }
.chapter[data-tone="3"] .mini--more { background: #333; }
.mini.is-extra { display: none; }
.uc.is-open .mini.is-extra { display: flex; }
.uc.is-open .mini--more { display: none; }
.uc.is-open .uc__mins { position: static; transform: none; grid-column: 1 / -1; flex-wrap: wrap; }
.uc.is-open .uc__hint { display: none; }

/* cases: the eight areas we used AI in are the first filter, goals the second, search the third */
.cases { padding: 8rem var(--pad, 1.5rem) 6rem; max-width: 1440px; margin: 0 auto; }
.cases__head { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.cases__count { font-size: .875rem; color: var(--g3); }
.areas { margin: 2.5rem 0 2rem; font-size: clamp(1.9rem, 4.2vw, 3.75rem); line-height: 1.12; letter-spacing: -.035em; font-weight: 300; color: #b9b9b9; }
.areas__lead { color: var(--ink); }
.area { font: inherit; color: inherit; letter-spacing: inherit; border: 0; background: none; padding: 0; cursor: pointer; position: relative; transition: color .25s; }
.area sup { font-size: .32em; letter-spacing: 0; font-weight: 600; vertical-align: super; margin-left: .1em; color: var(--g3); }
.area:hover, .area:focus-visible { color: var(--ink); outline: none; }
.area[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.area[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: .35em; bottom: .08em; height: .09em; background: var(--acc); z-index: -1; }
.area.is-empty { cursor: help; }
.cases__bar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; padding: 1rem 0; border-top: 1px solid var(--g1); border-bottom: 1px solid var(--g1); position: sticky; top: 4.5rem; background: var(--bg); z-index: 5; }
.goalf { display: flex; gap: .35rem; flex-wrap: wrap; }
.goalf button { font-size: .8125rem; font-weight: 600; border-radius: 999px; padding: .55rem .9rem; min-height: 2.75rem; background: var(--g1); }
.goalf button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.search { flex: 1; min-width: 14rem; display: flex; align-items: center; gap: .6rem; border-radius: 999px; padding: 0 1rem; min-height: 2.75rem; box-shadow: inset 0 0 0 1px var(--g1); }
.search input { flex: 1; border: 0; outline: none; background: none; font: inherit; font-size: .9375rem; min-width: 0; }
.view { display: flex; gap: .25rem; font-size: .8125rem; }
.view button { min-height: 2.75rem; padding: 0 .6rem; color: var(--g3); }
.view button[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.view button[aria-pressed="true"]::before { content: "• "; }
.cases__reset { font-size: .8125rem; text-decoration: underline; min-height: 2.75rem; color: var(--g3); }

.grid { margin-top: 2rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.25rem 1.5rem; }
.card { text-align: left; display: flex; flex-direction: column; gap: .85rem; }
.card.is-dim, .card.was-dim { transition: opacity .35s ease; }
.card__cover { position: relative; aspect-ratio: 16 / 10; border-radius: 1rem; padding: 1.1rem 1.2rem; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
  background: #fff; box-shadow: 0 0 0 1px var(--g1); transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s; }
.card[data-tone="2"] .card__cover { background: #f2f1ef; box-shadow: none; }
.card[data-tone="3"] .card__cover { background: var(--ink); color: var(--bg); box-shadow: none; }
.card:hover .card__cover, .card:focus-visible .card__cover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--g1), 0 26px 50px -30px rgba(0,0,0,.4); }
.card:focus-visible { outline: none; }
.card:focus-visible .card__cover { outline: 2px solid var(--ink); outline-offset: 3px; }
.card__goal { font-size: .75rem; font-weight: 600; display: flex; align-items: center; gap: .4rem; }
.card__goal::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.card__num { font-size: clamp(2.6rem, 4.5vw, 4rem); font-weight: 300; letter-spacing: -.045em; line-height: .95; }
.card__lab { font-size: .8125rem; color: var(--g3); margin-top: .35rem; }
.card[data-tone="3"] .card__lab { color: #9a9a9a; }
.card__name { font-size: 1.05rem; font-weight: 600; line-height: 1.2; letter-spacing: -.01rem; }
.card__name span { font-weight: 300; }
.card__out { font-size: .875rem; color: #6d6d6d; line-height: 1.38; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card.is-dim { opacity: .14; pointer-events: none; }

/* list view */
.grid.is-list { grid-template-columns: 1fr; gap: 0; }
.grid.is-list .card { display: grid; grid-template-columns: 7rem minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 1.5rem; padding: 1rem 0; border-bottom: 1px solid var(--g1); }
.grid.is-list .card__cover { aspect-ratio: 16 / 10; padding: .45rem .55rem; border-radius: .55rem; }
.grid.is-list .card__num { font-size: 1.35rem; }
.grid.is-list .card__lab, .grid.is-list .card__goal { display: none; }
.grid.is-list .card__tags { display: flex; }
.card__tags { display: none; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
.card__tags span { font-size: .6875rem; font-weight: 600; padding: .3rem .55rem; border-radius: 999px; background: var(--g1); white-space: nowrap; }
.grid.is-list .card:hover { background: #f4f4f3; }

@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; }
  .cases__bar { top: 3.75rem; }
  .grid.is-list .card { grid-template-columns: 5rem 1fr; }
  .grid.is-list .card__out, .grid.is-list .card__tags { grid-column: 2; }
}
@media (max-width: 560px) { .grid { grid-template-columns: 1fr; } }

/* the chat: one conversation, opened from the launcher, the prompt in "What we do" and every ask button */
.launch { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 70; display: flex; align-items: center; gap: .6rem; background: var(--ink); color: #fff; border-radius: 999px; padding: .55rem 1.1rem .55rem .6rem; min-height: 3rem;
  font-size: .875rem; font-weight: 600; box-shadow: 0 18px 40px -18px rgba(0,0,0,.55); }
.launch__dot { width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--acc); display: grid; place-items: center; color: var(--ink); }
.launch[hidden] { display: none; }
.chat { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 95; width: min(25rem, calc(100vw - 2.5rem)); height: min(40rem, calc(100vh - 2.5rem)); background: var(--bg); color: var(--ink);
  border-radius: 1.4rem; box-shadow: 0 0 0 1px var(--g1), 0 40px 80px -30px rgba(0,0,0,.5); display: flex; flex-direction: column; overflow: hidden; visibility: hidden; transform-origin: 100% 100%; }
.chat__head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1rem .9rem 1.2rem; border-bottom: 1px solid var(--g1); }
.chat__who { font-size: .875rem; font-weight: 600; line-height: 1.2; }
.chat__who span { display: block; font-weight: 300; font-size: .75rem; color: var(--g3); }
.chat__close { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--g1); font-size: 1.1rem; }
.chat__log { flex: 1; overflow-y: auto; padding: 1.1rem 1.1rem .5rem; display: flex; flex-direction: column; gap: .7rem; }
.msg { max-width: 88%; font-size: .9375rem; line-height: 1.42; padding: .7rem .9rem; border-radius: 1rem; }
.msg--bot { background: #fff; box-shadow: 0 0 0 1px var(--g1); border-bottom-left-radius: .3rem; }
.msg--me { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: .3rem; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chips button { font-size: .8125rem; font-weight: 600; border-radius: 999px; padding: .55rem .9rem; min-height: 2.75rem; background: var(--g1); }
.chips button:hover { background: var(--g2); }
.chat-case { text-align: left; background: #fff; box-shadow: 0 0 0 1px var(--g1); border-radius: 1rem; padding: .9rem 1rem; max-width: 88%; }
.chat-case b { display: block; font-size: .875rem; font-weight: 600; line-height: 1.25; }
.chat-case span { display: block; font-size: .8125rem; color: #666; margin-top: .3rem; line-height: 1.35; }
.chat-case i { display: block; font-style: normal; font-size: .75rem; color: var(--ink); margin-top: .5rem; text-decoration: underline; }
.chat-form { background: #fff; box-shadow: 0 0 0 1px var(--g1); border-radius: 1rem; padding: .9rem 1rem; display: grid; gap: .6rem; max-width: 92%; }
.chat-form input[type="email"], .chat-form input[type="url"] { font: inherit; font-size: .9375rem; border: 0; border-radius: .6rem; padding: .7rem .8rem; background: var(--bg); box-shadow: inset 0 0 0 1px var(--g1); min-height: 2.75rem; }
.chat-form label { display: flex; gap: .55rem; align-items: flex-start; font-size: .75rem; color: #666; line-height: 1.35; }
.chat-form label input { margin-top: .15rem; width: 1rem; height: 1rem; flex: none; }
.chat-form button { justify-self: start; font-size: .875rem; font-weight: 600; border-radius: 999px; padding: .7rem 1.1rem; min-height: 2.75rem; background: var(--ink); color: #fff; }
.chat-form small { font-size: .6875rem; color: var(--g3); }
.chat__input { display: flex; gap: .5rem; padding: .7rem .8rem .8rem; border-top: 1px solid var(--g1); }
.chat__input input { flex: 1; min-width: 0; font: inherit; font-size: .9375rem; border: 0; outline: none; background: #fff; border-radius: 999px; padding: 0 1rem; box-shadow: inset 0 0 0 1px var(--g1); min-height: 2.75rem; }
.chat__input button { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; flex: none; }
.chat__foot { font-size: .6875rem; color: var(--g3); padding: 0 1.1rem .7rem; }
.typing { display: inline-flex; gap: .25rem; padding: .85rem .9rem; }
.typing i { width: .4rem; height: .4rem; border-radius: 50%; background: var(--g2); animation: blink 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 50% { opacity: .3; } }
@media (max-width: 600px) { .chat { right: 0; bottom: 0; width: 100%; height: 92vh; border-radius: 1.25rem 1.25rem 0 0; } .launch { right: .9rem; bottom: .9rem; } }

/* ===== v2 intro: one headline with real faces and logos set in the line, the three goals as tiles, the prompt as a bar ===== */
.wwd-intro { display: block; text-align: center; padding: 8.5rem var(--pad, 1.5rem) 5rem; }
.wwd-intro .h2 { text-align: center; }
.wwd-lead { font-size: clamp(2.1rem, 5vw, 4.75rem); line-height: 1.1; letter-spacing: -.045em; font-weight: 300; max-width: 72rem; margin: 2.25rem auto 0; }
.wwd-lead .who { display: inline; white-space: nowrap; border: 0; padding: 0; font-weight: 600; position: relative; cursor: default; }
.wwd-lead .who:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: .2em; }
.who__face { display: inline-block; height: .86em; width: 1.12em; object-fit: cover; border-radius: .2em; vertical-align: -.1em; margin-right: .14em; }
.who__logo { display: inline-flex; align-items: center; justify-content: center; height: .86em; min-width: 1.12em; padding: 0 .2em; border-radius: .2em; background: #fff; box-shadow: inset 0 0 0 1px var(--g1); vertical-align: -.1em; margin-right: .14em; }
.who__logo img { height: .38em; width: auto; max-width: 2.6em; display: block; }
.wwd-lead .who__pop { width: 19rem; text-align: left; white-space: normal; left: 50%; margin-left: -9.5rem; }
.who__pop q { display: block; margin-top: .45rem; font-style: normal; color: #555; }
.who__pop b { margin-bottom: 0; }

.goal-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 75rem; margin: 3.75rem auto 0; }
.goal-tile { position: relative; display: flex; flex-direction: column; text-align: left; min-height: 14rem; padding: 1.4rem 1.5rem; border-radius: 1.25rem; background: #fff; box-shadow: 0 0 0 1px var(--g1); color: var(--ink); text-decoration: none;
  transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s; }
.goal-tile[data-tone="2"] { background: #f2f1ef; box-shadow: none; }
.goal-tile[data-tone="3"] { background: var(--ink); color: var(--bg); box-shadow: none; }
.goal-tile:hover, .goal-tile:focus-visible { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--g1), 0 30px 60px -36px rgba(0,0,0,.45); outline: none; }
.goal-tile:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.goal-tile__a { font-size: clamp(2rem, 3.2vw, 3rem); font-weight: 300; letter-spacing: -.035em; line-height: .98; }
.goal-tile__b { font-size: clamp(2rem, 3.2vw, 3rem); font-weight: 600; letter-spacing: -.035em; line-height: .98; }
.goal-tile__meta { margin-top: auto; font-size: .8125rem; color: var(--g3); }
.goal-tile[data-tone="3"] .goal-tile__meta { color: #9a9a9a; }
.goal-tile__arrow { position: absolute; right: 1.25rem; bottom: 1.1rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--g1); color: var(--ink); font-size: 1rem; transition: transform .4s; }
.goal-tile[data-tone="3"] .goal-tile__arrow { background: var(--acc); }
.goal-tile:hover .goal-tile__arrow { transform: translateY(3px); }

.wwd-intro .wwd-ask { max-width: 46rem; margin: 2.5rem auto 0; }
.wwd-intro .wwd-ask__box { border-radius: 999px; padding: .45rem .45rem .45rem 1.4rem; }
.wwd-intro .wwd-ask__goals { justify-content: center; }
.wwd-intro .wwd-ask__note { text-align: center; }

@media (max-width: 900px) {
  .wwd-intro { padding-top: 6rem; }
  .wwd-lead { font-size: clamp(1.9rem, 8.4vw, 2.6rem); }
  .wwd-lead .who__pop { left: 0; margin-left: 0; }
  .goal-tiles { grid-template-columns: 1fr; margin-top: 2.25rem; }
  .goal-tile { min-height: 9.5rem; }
}

/* chapters: where you are, where you came from, where you go next */
.chapter__main { display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh - 9.5rem); }
.chapter__main .uc-list { align-self: stretch; }
.chapter__steps a { display: flex; align-items: center; gap: .55rem; color: inherit; text-decoration: none; min-height: 1.6rem; }
.chapter__steps a::before { content: ""; width: 1.25rem; height: 1px; background: currentColor; opacity: .5; transition: width .3s; }
.chapter__steps a:hover::before { width: 2rem; }
.chapter__steps a.is-on { color: var(--ink); font-weight: 600; }
.chapter[data-tone="3"] .chapter__steps a.is-on { color: var(--bg); }
.chapter__steps a.is-on::before { width: 2.25rem; opacity: 1; background: var(--acc); height: 2px; }
.chapter__nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.cnav { display: flex; flex-direction: column; gap: .2rem; text-decoration: none; color: inherit; padding: .7rem 1rem; border-radius: .9rem; min-height: 2.75rem; transition: background .25s; }
.cnav small { font-size: .75rem; color: var(--g3); }
.cnav span { font-size: 1.15rem; font-weight: 600; letter-spacing: -.01rem; }
.cnav--next { text-align: right; margin-left: auto; background: var(--g1); }
.chapter[data-tone="2"] .cnav--next { background: #e6e4e0; }
.chapter[data-tone="3"] .cnav--next { background: var(--acc); color: var(--ink); }
.chapter[data-tone="3"] .cnav--next small { color: #555; }
.cnav:hover { background: rgba(0,0,0,.05); }
.cnav--next:hover { background: var(--g2); }
.chapter[data-tone="3"] .cnav:hover { background: rgba(255,255,255,.08); }
.chapter[data-tone="3"] .cnav--next:hover { background: #dff57f; }
@media (max-width: 900px) { .chapter__main { min-height: 0; } .chapter__steps a { min-height: 2.75rem; } }

/* ===== v2 cases: tabs per area, tiles with one number ===== */
.cases { padding-top: 7rem; }
.tabs { display: flex; gap: .25rem; margin-top: 1.75rem; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--g1); }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; position: relative; font-size: .9375rem; font-weight: 300; padding: .85rem .9rem 1rem; min-height: 2.75rem; color: var(--g3); white-space: nowrap; transition: color .2s; }
.tab sup { font-size: .6875rem; font-weight: 600; margin-left: .2rem; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: .9rem; right: .9rem; bottom: -1px; height: 2px; background: var(--ink); }
.tab:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: .4rem; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 1.75rem; }
.tile { position: relative; min-width: 0; aspect-ratio: 1 / 1; border-radius: 1.25rem; padding: 1.1rem 1.2rem 1.15rem; text-align: left; display: flex; flex-direction: column;
  background: #fff; box-shadow: 0 0 0 1px var(--g1); color: var(--ink); transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s; }
.tile[data-tone="2"] { background: #f2f1ef; box-shadow: none; }
.tile[data-tone="3"] { background: var(--ink); color: var(--bg); box-shadow: none; }
.tile[hidden] { display: none; }
.tile:hover, .tile:focus-visible { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--g1), 0 30px 60px -36px rgba(0,0,0,.45); outline: none; }
.tile:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.tile__goal { font-size: .75rem; font-weight: 600; display: flex; align-items: center; gap: .4rem; }
.tile__goal::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.tile__num { margin-top: auto; font-size: clamp(2.6rem, 4.6vw, 4.25rem); font-weight: 300; letter-spacing: -.05em; line-height: .92; }
.tile__num--soon { color: #b5b5b5; }
.tile[data-tone="3"] .tile__num--soon { color: #6a6a6a; }
.tile__lab { font-size: .8125rem; color: var(--g3); margin-top: .3rem; }
.tile[data-tone="3"] .tile__lab { color: #9a9a9a; }
.tile__name { margin-top: 1.1rem; padding-top: .75rem; border-top: 1px solid var(--g1); font-size: 1rem; font-weight: 600; letter-spacing: -.01rem; padding-right: 2.6rem; }
.tile[data-tone="2"] .tile__name { border-color: #e2e0dc; }
.tile[data-tone="3"] .tile__name { border-color: #333; }
.tile__go { position: absolute; right: 1rem; bottom: .95rem; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--g1); color: var(--ink); font-size: .85rem; transition: transform .4s, background .3s; }
.tile[data-tone="3"] .tile__go { background: var(--acc); }
.tile:hover .tile__go { transform: translateX(3px); background: var(--acc); }
@media (max-width: 1100px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; } .tile { padding: .9rem; border-radius: 1rem; } .tile__name { font-size: .875rem; padding-right: 2.2rem; } .tile__lab { font-size: .75rem; } }
/* the page wrapper is a flex/grid parent: let sections shrink so the tab row scrolls instead of widening the page */
.wwd, .cases { min-width: 0; max-width: 100%; }
.cases { width: 100%; max-width: 1440px; box-sizing: border-box; }
.tabs { max-width: 100%; }

/* ===== v3 headline: words carry the line, three real photos sit after the word they prove (as on notavideo.com). No logos in the line. ===== */
.wwd-lead { font-weight: 300; }
.wwd-lead b { font-weight: 600; }
.wwd-lead .who { display: inline-block; vertical-align: middle; margin: -.12em .18em 0 .2em; white-space: normal; }
.who__photo { display: block; height: .92em; width: 1.42em; object-fit: cover; border-radius: .2em; box-shadow: 0 0 0 1px rgba(0,0,0,.06); transition: transform .4s cubic-bezier(.22,1,.36,1); }
.wwd-lead .who:hover .who__photo, .wwd-lead .who:focus-visible .who__photo { transform: scale(1.06) rotate(-2deg); }
.wwd-lead .who__pop { top: calc(100% + .5rem); width: 17rem; font-size: .8125rem; line-height: 1.35; letter-spacing: 0; }
.who__poplogo { height: 1rem !important; width: auto; margin-bottom: .55rem; filter: grayscale(1); opacity: .85; display: block; }
.who__pop span { display: block; color: var(--g3); font-size: .75rem; }

/* ===== QA round 1 fixes (design-qa, 20 Oct) ===== */
:root { --g3: #6b6b6b; }                                   /* small grey text: 4.5:1 on #fbfbfb and #f2f1ef */
.h2.gray { color: #8a8a8a; }                               /* section labels: 3.4:1, was 1.54:1 */
.tile__num--soon { color: #8a8a8a; }
.tile[data-tone="3"] .tile__num--soon { color: #8f8f8f; }
.chapter[data-tone="2"] .cnav--next small, .chapter[data-tone="1"] .cnav--next small { color: #5a5a5a; }
.wwd-ask__box:focus-within { box-shadow: 0 0 0 2px var(--ink), 0 20px 40px -28px rgba(0,0,0,.35); }
.wwd-lead .nw { white-space: nowrap; }
.wwd-lead .who { margin: -.12em .06em 0 .22em; }
.who__photo { filter: grayscale(1); transition: transform .4s cubic-bezier(.22,1,.36,1), filter .4s; }
.wwd-lead .who:hover .who__photo, .wwd-lead .who:focus-visible .who__photo { filter: none; }
.nav { transition: background-color .3s, box-shadow .3s; }
.nav.is-scrolled { background: var(--bg); box-shadow: 0 1px 0 var(--g1); }
/* QA round 2: grey text on the dark chapter, the hero's small greys, focus on the prompt itself */
.chapter[data-tone="3"] .mini__lab, .chapter[data-tone="3"] .uc__hint, .chapter[data-tone="3"] .cnav small, .chapter[data-tone="3"] .uc__desc, .chapter[data-tone="3"] .chapter__meta { color: #a8a8a8; }
.stack__item { color: #6b6b6b; }
.stack__label, .proof__label, .review__who b, .review__who span { color: #6b6b6b; }
.wwd-ask__box:focus-within { box-shadow: 0 0 0 1px var(--g1), 0 20px 40px -28px rgba(0,0,0,.35); }
.wwd-ask__box input:focus-visible { outline: 2px solid var(--ink); outline-offset: .55rem; border-radius: .4rem; }
.chapter[data-tone="3"] .cnav--next small { color: #4a4a4a; }
.proof .review .review__who span, .proof .review .review__who b { color: #6b6b6b; }

/* ===== v4 (QA round 3, 20 Oct): brand carousel for startups, faces for executives, one neutral tile style,
   chapters read top-down with a preview stage, case tiles sized to their content ===== */
#what, #cases, .chapter { scroll-margin-top: 4.5rem; }
.wwd-intro { padding: 10.5rem var(--pad, 1.5rem) 3.5rem; }

/* headline: photos in colour, punctuation hugs the slot */
.who__photo { filter: none; height: 1em; width: 1.5em; }
.wwd-lead .who { margin: -.14em .02em 0 .2em; }
.wwd-lead .who--faces { display: inline-flex; }
.wwd-lead .who--faces .who__photo + .who__photo { margin-left: -.3em; box-shadow: 0 0 0 .07em var(--bg); }
.wwd-lead .who--faces:hover .who__photo, .wwd-lead .who--faces:focus-visible .who__photo { filter: none; }
.who--brands { width: 2.75em; height: 1em; }
.brands { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: .2em; background: #fff; box-shadow: inset 0 0 0 1px var(--g1); }
.brand { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 .3em; }
.brand:not(.is-on) { opacity: 0; visibility: hidden; }
.brand img { display: block; max-width: 100%; max-height: .42em; width: auto; height: auto; }
.wwd-lead .who--brands:hover .who__photo { transform: none; }

/* the headline ends in a colon and the tiles complete it: one neutral style, no "selected" look */
.goal-tiles { margin-top: 2.25rem; }
.goal-tile, .goal-tile[data-tone] { min-height: 11rem; background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--g1); padding: 1.35rem 1.5rem 1.4rem; }
.goal-tile__meta { margin-top: auto; padding-right: 3.25rem; font-size: .875rem; line-height: 1.4; color: var(--g3); }
.goal-tile__arrow, .goal-tile[data-tone] .goal-tile__arrow { background: var(--g1); }
.goal-tile:hover .goal-tile__arrow { background: var(--acc); }
.wwd-intro .wwd-ask { margin-top: 2rem; }

/* chapters: goal tabs across the top, title and list start on the same line, the preview plays under the title */
.chapter { grid-template-rows: auto 1fr; gap: 2.75rem 3rem; padding-top: 6rem; }
.chapter__steps { grid-column: 1 / -1; flex-direction: row; gap: .5rem 2rem; font-size: .875rem; }
.chapter__side { min-height: 0; justify-content: flex-start; }
.chapter__title { margin: 0 0 1.25rem; }
.chapter__main { min-height: 0; justify-content: flex-start; }
.chapter__main .uc-list { align-self: stretch; }
.chapter__preview { margin-top: 2.5rem; max-width: 24rem; padding-top: 1.25rem; border-top: 1px solid var(--g1); opacity: 0; visibility: hidden; }
.chapter[data-tone="2"] .chapter__preview { border-color: #e2e0dc; }
.chapter[data-tone="3"] .chapter__preview { border-color: #333; }
.pv__num { font-size: 3rem; font-weight: 300; letter-spacing: -.045em; line-height: 1; }
.pv__lab { font-size: .875rem; color: var(--g3); margin-top: .3rem; }
.pv__t { font-size: 1.125rem; font-weight: 600; margin-top: 1rem; }
.pv__o { font-size: .9375rem; line-height: 1.42; margin-top: .35rem; color: #4a4a4a; }
.pv__cta { font-size: .75rem; color: var(--g3); margin-top: .75rem; }
.chapter[data-tone="3"] .pv__lab, .chapter[data-tone="3"] .pv__cta { color: #a8a8a8; }
.chapter[data-tone="3"] .pv__o { color: #d6d6d6; }
.uc__hint--ask { font: inherit; font-size: .8125rem; font-weight: 600; color: inherit; background: none; border: 0; padding: .5rem 0; min-height: 2.75rem; cursor: pointer; text-decoration: underline; text-underline-offset: .25em; text-decoration-color: var(--g2); }
.uc__hint--ask:hover { text-decoration-color: currentColor; }
.mini--more { flex-direction: column; gap: .1rem; }
.mini--more b { font-size: 1.25rem; font-weight: 600; line-height: 1; }
.mini--more span { font-size: .6875rem; font-weight: 300; }

/* previous and next: one style, the direction does the talking */
.cnav, .cnav--next, .chapter[data-tone] .cnav--next { background: none; color: inherit; box-shadow: inset 0 0 0 1px var(--g2); }
.chapter[data-tone="3"] .cnav, .chapter[data-tone="3"] .cnav--next { box-shadow: inset 0 0 0 1px #444; color: var(--bg); }
.cnav:hover, .cnav--next:hover { background: rgba(0,0,0,.04); }
.chapter[data-tone="3"] .cnav:hover, .chapter[data-tone="3"] .cnav--next:hover { background: rgba(255,255,255,.07); }
.chapter[data-tone] .cnav small, .chapter[data-tone] .cnav--next small { color: var(--g3); }
.chapter[data-tone="3"] .cnav small, .chapter[data-tone="3"] .cnav--next small { color: #a8a8a8; }

/* sheet: one title, a plain subtitle, the stat lives in the outcome */
.sheet__title { margin: 1rem 0 .4rem; }
.sheet__sub { font-size: 1.0625rem; line-height: 1.4; color: #4a4a4a; margin: 0 0 1.5rem; }
.sheet__done img { filter: none; opacity: 1; height: 1.25rem; }

/* case tiles: sized to their content, the number is the result, the goal is written out */
.tile, .tile[data-tone] { aspect-ratio: auto; min-height: 0; background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--g1); padding: 1.15rem 1.2rem 1.2rem; gap: 0; }
.tile__name { order: 0; margin: 0; padding: 0 2.6rem 0 0; border: 0; font-size: 1rem; }
.tile__num { order: 1; margin-top: 1.4rem; font-size: clamp(2.4rem, 3.6vw, 3.4rem); }
.tile__lab { order: 2; margin-top: .35rem; font-size: .875rem; line-height: 1.35; color: #4a4a4a; }
.tile__goal { order: 3; margin-top: 1.1rem; padding-top: .75rem; border-top: 1px solid var(--g1); font-weight: 300; color: var(--g3); }
.tile__goal::before { display: none; }
.tile__go { top: 1rem; bottom: auto; }

/* launcher: light over the dark chapter, a round button on phones */
.launch.launch--light { background: var(--bg); color: var(--ink); }

@media (max-width: 900px) {
  .wwd-intro { padding-top: 7.5rem; }
  .who__photo { height: 1.1em; width: 1.75em; }
  .who--brands { width: 3.9em; height: 1.1em; }
  .brand img { max-height: .5em; }
  .goal-tile, .goal-tile[data-tone] { min-height: 0; }
  .goal-tile__meta { margin-top: 1rem; }
  .chapter { gap: 1.5rem; padding-top: 4.5rem; }
  .chapter__steps { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 1.25rem; margin-right: calc(-1 * var(--pad, 1rem)); }
  .chapter__steps::-webkit-scrollbar { display: none; }
  .chapter__steps a { flex: none; white-space: nowrap; }
  .chapter__steps a::before { display: none; }
  .chapter__steps a.is-on { text-decoration: underline; text-decoration-color: var(--acc); text-decoration-thickness: 3px; text-underline-offset: .45em; }
  .chapter__preview { display: none; }
  .uc__hint--ask { display: inline-block; justify-self: start; padding: 0; }
  .sheet dl div { grid-template-columns: 1fr; gap: .3rem; }
}
@media (max-width: 600px) {
  .launch { padding: 0; width: 3.25rem; height: 3.25rem; min-height: 0; justify-content: center; border-radius: 50%; }
  .launch__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* QA round 3b */
.wwd-lead .who { margin-right: -.06em; }
.chapter__steps a.is-on::before { background: var(--ink); }
.chapter[data-tone="3"] .chapter__steps a.is-on::before { background: var(--acc); }
.chapter__preview p { margin: 0; }
.pv__lab { margin-top: .4rem; }
.pv__t { margin-top: 1.1rem; }
.pv__o, .pv__cta { margin-top: .4rem; }
@media (max-width: 900px) {
  .who--brands { width: 3.4em; }
  .brand img { max-height: .6em; }
  .chapter__steps a.is-on { text-decoration-color: var(--ink); }
  .chapter[data-tone="3"] .chapter__steps a.is-on { text-decoration-color: var(--acc); }
}
/* executives: round profile photos, overlapping, one tone */
.wwd-lead .who--faces { vertical-align: middle; }
.wwd-lead .who--faces .who__photo { width: 1em; height: 1em; border-radius: 50%; filter: grayscale(1); box-shadow: 0 0 0 .06em var(--bg); }
.wwd-lead .who--faces .who__photo + .who__photo { margin-left: -.22em; }
.wwd-lead .who--faces:hover .who__photo { transform: none; }
@media (max-width: 900px) { .wwd-lead .who--faces .who__photo { width: 1.15em; height: 1.15em; } }
.wwd-lead .who--faces:hover .who__photo, .wwd-lead .who--faces:focus-visible .who__photo, .wwd-lead .who--faces .who__photo { filter: grayscale(1); }
/* Sundo's logo is yellow only: it sits on ink (never on white, never on blue) */
.brand--dark { background: var(--ink); }
/* startups: three brand marks as overlapping circles, the same build as the executives' faces */
.wwd-lead .who--brands { display: inline-flex; width: auto; height: auto; vertical-align: middle; }
.mark { display: grid; place-items: center; width: 1em; height: 1em; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 .06em var(--bg), inset 0 0 0 1px var(--g1); background: #fff; }
.mark + .mark { margin-left: -.22em; }
.mark img { display: block; width: 62%; height: 62%; object-fit: contain; }
.mark--sundo { background: var(--ink); }
.mark--sundo img { width: 64%; height: 64%; }
.mark--biometriq { background: linear-gradient(160deg, #f1f1fe, #dfe0fc); }
.mark--biometriq img { width: 58%; height: 58%; }
@media (max-width: 900px) { .mark { width: 1.15em; height: 1.15em; } }
.mark + .mark { margin-left: -.14em; }
.mark--poppins img { width: 84%; height: 84%; }
.mark--sundo img { width: 50%; height: 50%; }
.wwd-lead .who--faces .who__photo + .who__photo { margin-left: -.16em; } .mark + .mark { margin-left: -.16em; }

/* ===== v5 (20 Oct, Jotte's review): icons instead of lines, no counts, no "goals", one CTA, use cases shown with their cases ===== */
.ico { display: inline-block; flex: none; width: 1.15em; height: 1.15em; background: currentColor; -webkit-mask: no-repeat center / contain; mask: no-repeat center / contain; vertical-align: -.2em; }

/* steps: an icon per area of impact, no dashes */
.chapter__steps a::before, .chapter__steps a.is-on::before { display: none; }
.chapter__steps a { gap: .5rem; }
.chapter__steps a .ico { width: 1.1rem; height: 1.1rem; }
.chapter__steps a.is-on { text-decoration: none; }

/* intro tiles carry the same icon */
.goal-tile__ico { width: 1.75rem; height: 1.75rem; margin-bottom: 1.1rem; }

/* use cases: icon, name, and the cases themselves on show */
.uc { grid-template-columns: 2rem minmax(0, 1fr) auto; gap: 1.25rem; min-height: 0; padding: .85rem 0; }
.uc__ico { width: 1.6rem; height: 1.6rem; }
.uc__name { font-size: clamp(1.2rem, 1.6vw, 1.55rem); }
.uc__mins { position: static; transform: none; pointer-events: auto; }
.mini { opacity: 1; transform: none; width: 8.75rem; height: 5.75rem; }
.mini__lab { display: block; font-size: .625rem; }
.mini--more { flex-direction: row; gap: .35rem; font-size: .8125rem; }
.mini--more .ico { width: .95rem; height: .95rem; }
.uc__go { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; background: none; color: inherit; box-shadow: inset 0 0 0 1px var(--g2); cursor: pointer; transition: background .25s, color .25s; }
.chapter[data-tone="3"] .uc__go { box-shadow: inset 0 0 0 1px #444; }
.uc__go:hover { background: var(--ink); color: var(--bg); }
.chapter[data-tone="3"] .uc__go:hover { background: var(--bg); color: var(--ink); }
.uc.no-cases { cursor: pointer; }
.uc.is-open .uc__mins { grid-column: 2 / -1; }

/* previous / next */
.cnav span { display: inline-flex; align-items: center; gap: .4rem; }
.cnav .ico { width: 1.05rem; height: 1.05rem; }

/* domain tags: icon pills, the same in the sheet, on the tiles and in the filter */
.dtag { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 600; line-height: 1; padding: .4rem .65rem .4rem .5rem; border-radius: 999px; background: var(--g1); color: var(--ink); white-space: nowrap; }
.dtag .ico { width: .95rem; height: .95rem; }
.sheet__goal span.dtag { background: var(--g1); padding: .4rem .65rem .4rem .5rem; }
.tile__tags { order: 3; display: flex; flex-wrap: wrap; gap: .35rem; margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--g1); }
.dfilter { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; }
.dfilter__b { display: inline-flex; align-items: center; gap: .55rem; font: inherit; font-size: .9375rem; font-weight: 600; min-height: 2.75rem; padding: .6rem 1.1rem .6rem .85rem; border-radius: 999px; border: 0; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--g2); cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; }
.dfilter__b .ico { width: 1.25rem; height: 1.25rem; transition: background .25s; }
.dfilter__b:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.dfilter__b[aria-pressed="true"] { background: var(--ink); color: var(--bg); box-shadow: none; }
.dfilter__b[aria-pressed="true"] .ico { background: var(--acc); }
.dfilter__b:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.tabs { margin-top: 1rem; }

@media (max-width: 900px) {
  .uc { grid-template-columns: 1.75rem minmax(0, 1fr) auto; gap: .9rem 1rem; }
  .uc.has-cases .uc__mins { grid-column: 1 / -1; }
  .mini { width: 8.25rem; }
  .dfilter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--pad, 1rem)); }
  .dfilter::-webkit-scrollbar { display: none; }
  .dfilter__b { flex: none; }
}
/* mini tiles: the number sits right under the name, so numbers line up across a row */
.mini { justify-content: flex-start; }
.mini > span:last-child { margin-top: .5rem; }
.mini--more { justify-content: center; }
.launch__dot .ico { width: 1rem; height: 1rem; }
/* QA round 5 */
.uc { min-height: 7.6rem; }
.mini { width: 9.75rem; height: 6.6rem; }
.mini__name { font-size: .75rem; }
.mini__lab { font-size: .75rem; line-height: 1.25; }
.mini--more, .chapter[data-tone] .mini--more { background: #fff; box-shadow: 0 0 0 1px var(--g1); }
.chapter[data-tone="3"] .mini--more { background: #262626; box-shadow: 0 0 0 1px #3a3a3a; }
/* domain tags: ink pills with a chartreuse icon, the same look as an active filter */
.dtag, .sheet__goal span.dtag { background: var(--ink); color: var(--bg); padding: .45rem .75rem .45rem .55rem; }
.dtag .ico { background: var(--acc); width: 1rem; height: 1rem; }
.cases__filters { position: sticky; top: 4.25rem; z-index: 6; background: var(--bg); padding-top: .25rem; }
.dfilter { margin-top: 1.5rem; }
.sheet__close { flex: none; }
.sheet__close:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sheet__done { margin-top: 2.25rem; }
@media (max-width: 900px) {
  .cases__filters { top: 3.6rem; }
  .uc { min-height: 0; }
  .chapter__steps, .dfilter, .uc__mins { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
}
@media (max-width: 760px) {
  .tile__tags .dtag { font-size: 0; gap: 0; padding: .4rem; }
  .tile__tags .dtag .ico { width: 1rem; height: 1rem; }
}
@media (max-width: 600px) {
  .launch { width: auto; height: 3rem; padding: .4rem 1rem .4rem .4rem; border-radius: 999px; }
  .launch__txt { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .launch__txt { font-size: 0; }
  .launch__txt::after { content: "Ask"; font-size: .875rem; }
}
/* phones: the header button keeps its label, an unlabeled "+" said nothing */
@media (max-width: 479px) {
  .nav .ask-btn__mask { display: block; }
  .nav .ask-btn { width: auto; height: 2.5rem; padding: 0 .9rem; gap: .45rem; }
}

/* ===== v6 (20 Oct, design-skill layout pass) =====
   spacing scale: 0.5 / 0.75 / 1.25 / 2 / 3.5 / 6 rem. Title to its subtext is always a visible step (>= .5rem on small type, >= 1rem on display type). */
:root { --s1: .5rem; --s2: .75rem; --s3: 1.25rem; --s4: 2rem; --s5: 3.5rem; --s6: 6rem; --out: cubic-bezier(.22,1,.36,1); }

/* readable tracking on the big type */
.wwd-lead { letter-spacing: -.025em; }
.goal-tile__a, .goal-tile__b { letter-spacing: -.015em; line-height: 1.04; }
.goal-tile__b { margin-bottom: var(--s3); }
.goal-tile__meta { margin-top: auto; line-height: 1.45; }
.chapter__title { letter-spacing: -.018em; line-height: .98; }
.tile__num { letter-spacing: -.03em; }
.tile__lab { margin-top: var(--s1); }
.cnav { gap: .3rem; }

/* logos and faces: lift on hover with their name above, the group opens up a little */
.wwd-lead .who--brands { margin-right: .1em; }
.mark, .face { position: relative; display: inline-block; transition: transform .45s var(--out); }
.face .who__photo { display: block; }
.who--brands:hover .mark:first-child, .who--faces:hover .face:first-child { transform: translateX(-.08em); }
.who--brands:hover .mark:last-child, .who--faces:hover .face:last-child { transform: translateX(.08em); }
.mark:hover, .face:hover, .who--brands:hover .mark:hover, .who--faces:hover .face:hover { transform: translateY(-.1em) scale(1.08); z-index: 2; }
.mark::after, .face::after { content: attr(data-name); position: absolute; left: 50%; bottom: calc(100% + .45rem); transform: translate(-50%, .25rem); font-size: .75rem; font-weight: 600; letter-spacing: 0; line-height: 1; white-space: nowrap;
  padding: .4rem .6rem; border-radius: 999px; background: var(--ink); color: var(--bg); opacity: 0; pointer-events: none; transition: opacity .2s, transform .3s var(--out); }
.mark:hover::after, .face:hover::after { opacity: 1; transform: translate(-50%, 0); }
.wwd-lead .who--faces .face + .face { margin-left: -.16em; }
.wwd-lead .who--faces .who__photo + .who__photo { margin-left: 0; }

/* subdomains: name and what it covers, the case visuals stacked out of sight until you point at the row */
.uc { display: block; padding: 0; min-height: 0; }
.uc__ico { display: none; }
.uc__btn { display: grid; grid-template-columns: minmax(0, 1fr) auto 2.75rem; align-items: center; gap: var(--s4); width: 100%; padding: 1.6rem 0; margin: 0;
  font: inherit; color: inherit; text-align: left; background: none; border: 0; cursor: pointer; }
.uc__btn:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: .5rem; }
.uc__text { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.uc__name { font-size: clamp(1.25rem, 1.7vw, 1.6rem); font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
.uc__desc { font-size: 1rem; font-weight: 300; line-height: 1.45; color: var(--g3); }
.chapter[data-tone="3"] .uc__desc { color: #a8a8a8; }
.uc__go { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--g2); transition: background .25s, color .25s, box-shadow .25s; }
.uc__go .ico { width: 1rem; height: 1rem; }
.uc__btn:hover .uc__go { background: var(--ink); color: var(--bg); box-shadow: none; }
.chapter[data-tone="3"] .uc__btn:hover .uc__go { background: var(--bg); color: var(--ink); }
.uc__stack { position: relative; display: flex; justify-content: flex-end; align-items: center; width: 9rem; height: 3.75rem; opacity: 0; transform: translateX(1rem); transition: opacity .3s, transform .55s var(--out); }
.uc__btn:hover .uc__stack, .uc__btn:focus-visible .uc__stack { opacity: 1; transform: none; }
.shot { display: block; flex: none; width: 5.5rem; height: 3.5rem; border-radius: .5rem; object-fit: cover; object-position: top; background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.07), 0 12px 24px -14px rgba(0,0,0,.4); transition: transform .55s var(--out); }
.shot--logo { display: grid; place-items: center; }
.shot--logo img { max-width: 64%; max-height: 44%; object-fit: contain; }
.uc__stack .shot + .shot { margin-left: -4.25rem; }
.uc__stack .shot:nth-child(1) { transform: rotate(-5deg); }
.uc__stack .shot:nth-child(2) { transform: rotate(3deg) translateY(.1rem); }
.uc__stack .shot:nth-child(3) { transform: rotate(-1deg); }
.uc__btn:hover .uc__stack .shot:nth-last-child(3) { transform: translateX(-6rem) rotate(-4deg); }
.uc__btn:hover .uc__stack .shot:nth-last-child(2) { transform: translateX(-3rem) rotate(2deg); }
.uc__btn:hover .uc__stack .shot:nth-last-child(1) { transform: rotate(0); }

/* the panel: every case of one subdomain, then the case itself with a way back */
.sheet__title { margin: var(--s3) 0 var(--s1); }
.sheet__sub { margin: 0 0 var(--s4); }
.sheet__back { display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start; font: inherit; font-size: .875rem; color: var(--g3); background: none; border: 0; padding: 0; min-height: 2.75rem; cursor: pointer; }
.sheet__back:hover { color: var(--ink); }
.sheet__back .ico { width: 1rem; height: 1rem; }
.sheet__cases { list-style: none; margin: 0 0 var(--s4); padding: 0; border-top: 1px solid var(--g1); }
.sheet__cases button { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 1.25rem; align-items: center; gap: var(--s3); width: 100%; padding: var(--s3) 0; border: 0; border-bottom: 1px solid var(--g1); background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.sheet__cases button:hover .sc__go { transform: translateX(3px); }
.sheet__cases .shot { transform: none; }
.sc__text { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.sc__text b { font-size: 1.0625rem; font-weight: 600; }
.sc__text span { font-size: .875rem; line-height: 1.4; color: #4a4a4a; }
.sc__text em { font-style: normal; font-weight: 600; color: var(--ink); }
.sc__go { width: 1.1rem; height: 1.1rem; transition: transform .3s var(--out); }

/* cases section rhythm */
.dfilter { margin-top: var(--s4); }

@media (hover: none), (max-width: 900px) {
  .uc__stack { opacity: 1; transform: none; }
}
@media (max-width: 900px) {
  .uc__btn { grid-template-columns: minmax(0, 1fr) 2.75rem; gap: var(--s2) var(--s3); padding: var(--s3) 0; }
  .uc__stack { grid-row: 2; grid-column: 1; justify-content: flex-start; width: auto; height: auto; }
  .uc__stack .shot + .shot { margin-left: -2.5rem; }
  .uc__stack .shot { width: 4.5rem; height: 2.85rem; }
  .uc__go { grid-row: 1; grid-column: 2; align-self: start; }
}
@media (max-width: 600px) {
  .launch__txt { font-size: .875rem; }
  .launch__txt::after { content: none; }
}
.mark { overflow: visible; }
@media (hover: none), (max-width: 900px) { .mark::after, .face::after { display: none; } }
/* no name labels: on a three-line headline any label lands on the line above or below */
.mark::after, .face::after { content: none; display: none; }
.who--brands:hover .mark:first-child, .who--faces:hover .face:first-child { transform: translateX(-.12em); }
.who--brands:hover .mark:last-child, .who--faces:hover .face:last-child { transform: translateX(.12em); }
.mark:hover, .face:hover, .who--brands:hover .mark:hover, .who--faces:hover .face:hover { transform: translateY(-.08em) scale(1.12); }
.who--brands:hover .mark:first-child:hover, .who--faces:hover .face:first-child:hover { transform: translate(-.12em, -.08em) scale(1.12); }
.who--brands:hover .mark:last-child:hover, .who--faces:hover .face:last-child:hover { transform: translate(.12em, -.08em) scale(1.12); }
.wwd-lead .who--brands, .wwd-lead .who--faces { margin-left: .28em; margin-right: .16em; }
/* the circles centre their mark (a later inline-block rule had broken the grid) */
.mark { display: inline-grid; place-items: center; vertical-align: middle; }
.mark img { margin: 0; }
.wwd-lead .who--brands, .wwd-lead .who--faces { margin-right: .06em; }

/* cases: one row you drag, swipe or step through */
.tiles { display: flex; grid-template-columns: none; gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
  padding: .5rem var(--pad, 1.5rem) 2rem; margin: 1.25rem calc(-1 * var(--pad, 1.5rem)) 0; cursor: grab; }
.tiles::-webkit-scrollbar { display: none; }
.tiles.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.tiles.is-dragging .tile { pointer-events: none; }
.tile, .tile[data-tone] { flex: 0 0 clamp(15rem, 22vw, 19rem); scroll-snap-align: start; user-select: none; }
.tile:hover, .tile:focus-visible { transform: translateY(-4px); }
.cases__tabsrow { display: flex; align-items: flex-end; gap: 1rem; }
.cases__filters { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 1rem; }
.cases__filters .dfilter { grid-column: 1 / -1; }
.cases__filters .tabs { grid-column: 1; min-width: 0; }
.cases__nav { grid-column: 2; display: flex; gap: .5rem; padding-bottom: .5rem; }
.cnav-b { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; border: 0; background: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--g2); cursor: pointer; transition: background .25s, color .25s, opacity .25s; }
.cnav-b .ico { width: 1rem; height: 1rem; }
.cnav-b:hover:not(:disabled) { background: var(--ink); color: var(--bg); box-shadow: none; }
.cnav-b:disabled { opacity: .35; cursor: default; }
.cnav-b:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 760px) {
  .tile, .tile[data-tone] { flex-basis: 72vw; }
  .cases__nav { display: none; }
  .tile__tags .dtag { font-size: .75rem; gap: .35rem; padding: .45rem .75rem .45rem .55rem; }
}
.tiles { scroll-padding-inline: var(--pad, 1.5rem); }

/* domain illustrations (3D, review: bees or objects). The art sits on its own warm off-white, multiplied away on light grounds */
.goal-tile__art { display: block; width: 5.5rem; height: 5.5rem; margin: -.5rem 0 .75rem -.6rem; mix-blend-mode: multiply; }
.chapter__art { display: block; width: clamp(11rem, 17vw, 16rem); height: auto; aspect-ratio: 1; margin-top: var(--s4); mix-blend-mode: multiply; }
.chapter[data-tone="3"] .chapter__art { mix-blend-mode: normal; border-radius: 1.5rem; }
.review-switch { position: fixed; left: 1rem; bottom: 1rem; z-index: 75; display: flex; align-items: center; gap: .3rem; padding: .3rem; border-radius: 999px; background: var(--bg); box-shadow: 0 0 0 1px var(--g2), 0 12px 30px -16px rgba(0,0,0,.4); font-size: .8125rem; }
.review-switch span { padding: 0 .5rem 0 .6rem; color: var(--g3); }
.review-switch button { font: inherit; font-weight: 600; border: 0; border-radius: 999px; padding: .5rem .85rem; min-height: 2.25rem; background: none; cursor: pointer; }
.review-switch button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
@media (max-width: 900px) { .chapter__art { width: 9rem; margin-top: var(--s3); } .goal-tile__art { width: 4.5rem; height: 4.5rem; } }
/* transparent art: no blending, no box on the dark chapter */
.goal-tile__art, .chapter__art, .chapter[data-tone="3"] .chapter__art { mix-blend-mode: normal; border-radius: 0; }
.uc.no-cases .uc__go { grid-column: 3; } @media (max-width: 900px) { .uc.no-cases .uc__go { grid-column: 2; } }

/* intro tiles: the title leads, the object is small, a hero bee keeps it company */
.art-wrap { position: relative; display: inline-block; align-self: flex-start; }
.goal-tile__art, .goal-tile[data-tone] .goal-tile__art { width: 3.5rem; height: 3.5rem; margin: 0 0 var(--s3) -.25rem; }
.fly-bee { position: absolute; right: -1.1rem; top: -.6rem; width: 1.6rem; height: auto; pointer-events: none; will-change: transform; z-index: 2; }
.art-wrap--big .fly-bee { width: 2.4rem; right: 0; top: .5rem; }
.chapter__art { width: clamp(9rem, 13vw, 12rem); }
.goal-tile__a, .goal-tile__b { font-size: clamp(2.1rem, 3.3vw, 3.1rem); }
.goal-tile__meta { font-size: .875rem; color: var(--g3); max-width: 22rem; }
@media (prefers-reduced-motion: reduce) { .fly-bee { transform: none !important; } }
@media (max-width: 900px) { .goal-tile__art, .goal-tile[data-tone] .goal-tile__art { width: 3rem; height: 3rem; } .chapter__art { width: 8rem; } }
/* logo circles: the first one lies on top, so no circle covers the mark of the one before it */
.who--brands .mark:nth-child(1) { z-index: 3; }
.who--brands .mark:nth-child(2) { z-index: 2; }
.who--brands .mark:nth-child(3) { z-index: 1; }
.mark--poppins img { width: 66%; height: 66%; }
.mark:hover, .who--brands .mark:hover { z-index: 4; }
.fly-bee { width: 2rem; right: -1.4rem; top: -.9rem; }
.art-wrap--big .fly-bee { width: 2.6rem; }

/* the domain's own 3D object replaces every line icon for a domain: steps, tags, filters */
.dart { display: inline-block; flex: none; width: 1.35em; height: 1.35em; object-fit: contain; vertical-align: -.3em; }
.chapter__steps a .dart { width: 1.5rem; height: 1.5rem; }
.dtag { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--g1); padding: .3rem .7rem .3rem .35rem; gap: .4rem; }
.dtag .dart { width: 1.45rem; height: 1.45rem; }
.sheet__goal span.dtag { background: #fff; color: var(--ink); padding: .3rem .7rem .3rem .35rem; }
.dfilter__b .dart { width: 1.7rem; height: 1.7rem; margin: -.3rem 0; }
.dfilter__b[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

/* case tiles: a real visual first (the client's site, or their logo on a tile), then the name and the result */
.tile, .tile[data-tone] { padding: .6rem .6rem 1.1rem; }
.tile__visual { position: relative; display: block; order: -1; height: 9.5rem; margin-bottom: 1rem; border-radius: .85rem; overflow: hidden; background: #f2f1ef; }
.tile__visual .shot { width: 100%; height: 100%; border-radius: 0; box-shadow: none; transform: none; transition: transform .7s var(--out); }
.tile__visual .shot--logo { background: #f2f1ef; }
.tile__visual .shot--logo img { max-width: 46%; max-height: 34%; }
.tile:hover .tile__visual .shot { transform: scale(1.04); }
.tile__by { position: absolute; left: .55rem; bottom: .55rem; display: grid; place-items: center; height: 1.9rem; padding: 0 .6rem; border-radius: 999px; background: #fff; box-shadow: 0 4px 14px -6px rgba(0,0,0,.3); }
.tile__by img { height: .8rem; width: auto; max-width: 4.5rem; display: block; }
.tile__visual:has(.shot--logo) .tile__by { display: none; }
.tile__name, .tile__num, .tile__lab, .tile__tags { margin-left: .6rem; margin-right: .6rem; }
.tile__go { top: 1rem; right: 1rem; background: #fff; box-shadow: 0 4px 14px -6px rgba(0,0,0,.3); }
.tile__num { margin-top: .9rem; font-size: clamp(2.1rem, 3vw, 2.8rem); }
.tile__tags { border-top: 0; padding-top: 0; margin-top: 1rem; }

/* existing sections, contrast floor (4.5:1 on small text) */
.app-soon { color: #6b6b6b; }
.mock-win__bar span { color: #6b6b6b; }
.philo .p2, #philosophy .p2 { color: #6b6b6b; }
/* entrance: hidden only for the moment between script start and the first frame of the timeline */
.wwd-intro.is-pre { visibility: hidden; }
.wwd-lead .lw { display: inline-block; will-change: transform, filter; }

/* more room between the parts of the page (Jotte, 20 Oct) */
.wwd-intro { padding-top: clamp(9rem, 14vw, 14rem); padding-bottom: clamp(6rem, 9vw, 9rem); }
.wwd-lead { margin-top: 0; }
.goal-tiles { margin-top: clamp(3.5rem, 5vw, 5rem); }
.wwd-intro .wwd-ask { margin-top: clamp(2.5rem, 3.5vw, 3.5rem); }
.cases { padding-top: clamp(9rem, 13vw, 13rem); }
@media (max-width: 900px) { .wwd-intro { padding-top: 7rem; padding-bottom: 5rem; } .goal-tiles { margin-top: 2.75rem; } .cases { padding-top: 7rem; } }

/* case visuals (21 Oct): every case has its own 4:5 visual, shown whole on the tile and in the panel */
.tile, .tile[data-tone] { aspect-ratio: auto; }
.tile__visual { height: auto; aspect-ratio: 4 / 5; }
.shot--case { object-position: center; }
.tile__who { font-size: .6875rem; font-weight: 600; line-height: 1; white-space: nowrap; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; }
.sheet__visual { display: block; width: 100%; max-width: 20rem; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1rem; margin: 0 0 1.5rem; background: #f2f1ef; }
.sheet__who { font-weight: 600; }
.tile__name--title { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); margin-bottom: 1rem; padding-right: 0; }
.tile[data-tone="3"] .tile__name--title { color: var(--bg); }
.tile__by--tags { height: auto; padding: 0; background: none; box-shadow: none; display: flex; flex-wrap: wrap; gap: .35rem; }
.tile__by--tags .dtag { background: #fff; color: var(--ink); box-shadow: 0 4px 14px -6px rgba(0,0,0,.3); }