/* Disco. Three voices, three colours, never mixed:
   people speak in orange, the industry in blue, the brand only in outline. */
:root{
  --paper:#eef0f3; --card:#f8f9fb; --ink:#11141a; --ink-soft:#4b5563; --ink-faint:#7b8694;
  --line:#d4d9e0; --line-soft:#e3e7ec;
  --people:#dd4f22; --people-soft:#f7e2d9;
  --industry:#2a5fa6; --industry-soft:#dde6f2;   /* richer than before: passes the chroma check next to orange */
  --stage:#11141a; --stage-2:#1b1f27; --stage-ink:#eef0f3; --stage-soft:#a3adba; --stage-line:#2c323d;
  --stage-people:#ff7a4d; --stage-industry:#6aa6ea;
  --brand:#7c8794; --warn:#8a6100; --warn-soft:#f6eccf;
  --display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0f1218; --card:#171b23; --ink:#e8ebef; --ink-soft:#aab3bf; --ink-faint:#7c8695;
    --line:#2a313c; --line-soft:#222832;
    --people:#ff7a4d; --people-soft:#3a2117; --industry:#7fb2e0; --industry-soft:#16232f;
    --brand:#8d97a4; --warn:#e2b45c; --warn-soft:#2c2412;
    --stage:#171b23; --stage-2:#20252f; --stage-line:#343b47;
  }
}
*{box-sizing:border-box}
body{background:var(--paper); color:var(--ink); font-family:var(--body); font-size:16px;
     line-height:1.55; margin:0; -webkit-font-smoothing:antialiased}
.wrap{max-width:1080px; margin:0 auto; padding-inline:20px}
.wrap.wide{max-width:1240px}
h1,h2,h3{font-family:var(--display); font-weight:800; text-wrap:balance; margin:0;
         letter-spacing:-.02em; line-height:1.05}
p{margin:0}
a{color:inherit}
a.plain{text-decoration:none}
a.plain:hover{text-decoration:underline}
.mono{font-family:var(--mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase;
      color:var(--ink-faint)}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{
  outline:2px solid var(--people); outline-offset:2px}

/* ---- the search bar: this is where a search starts ---------------------- */
.searchbar{position:sticky; top:env(safe-area-inset-top,0px); z-index:30; background:var(--paper);
           border-bottom:1px solid var(--line)}
.searchbar .wrap{display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding-block:14px}
.logo{font-family:var(--display); font-weight:800; font-size:22px; letter-spacing:-.04em;
      text-decoration:none; flex:none}
/* the name is always orange: the logo, and its echo in the start-page headline */
.logo,.logo span{color:var(--people)}

.ask-form{flex:1 1 520px; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.pill{flex:1 1 300px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
      background:var(--card); border:1px solid var(--line); border-radius:999px;
      padding:6px 8px 6px 22px; cursor:text}
.pill:focus-within{border-color:var(--ink-faint); box-shadow:0 1px 8px rgba(17,20,26,.06)}
.brand-input{flex:1 1 110px; min-width:90px; border:0; background:transparent; color:var(--ink);
             font:600 19px/1.4 var(--body); padding:6px 0}
.brand-input:focus{outline:none}
.brand-input::placeholder{font-weight:500; color:var(--ink-faint)}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.chip{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px;
      letter-spacing:.07em; text-transform:uppercase; background:var(--people-soft); color:var(--people);
      border-radius:999px; padding:5px 8px 5px 11px; white-space:nowrap}
.chip button{border:0; background:transparent; color:inherit; cursor:pointer; font-size:14px;
             line-height:1; padding:0 2px}
.tag-input{flex:0 1 118px; min-width:92px; border:0; background:transparent; color:var(--ink);
           font:500 12px var(--mono); letter-spacing:.06em; text-transform:uppercase; padding:7px 0}
.tag-input:focus{outline:none}
.tag-input::placeholder{color:var(--ink-faint)}
.go{flex:none; margin-left:auto; display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px; border:0; border-radius:50%; background:var(--ink); color:var(--paper);
    cursor:pointer}
.go:hover{background:var(--people)}
.searchbar select{border:1px solid var(--line); background:var(--card); color:var(--ink);
                  border-radius:999px; padding:9px 14px; font:500 13px var(--body); flex:none}
.sources{display:flex; gap:6px; flex:none}
.sources label{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
               border:1px solid var(--line); border-radius:999px; padding:8px 13px; cursor:pointer;
               color:var(--ink-faint); user-select:none}
.sources label:has(input:checked){border-color:var(--ink); color:var(--ink)}
.sources label.off{opacity:.45; cursor:not-allowed}
.sources input{position:absolute; opacity:0; width:0; height:0}
.crumbs{display:flex; gap:12px; align-items:baseline; flex-wrap:wrap}

/* library */
.library{padding-block:44px}
/* Every earlier search is one row: brand, what it said, and the numbers
   lined up in the same place so they can be read down the column. */
.rows{margin-top:22px; border-top:1px solid var(--line); --row-cols:minmax(140px,.85fr) minmax(0,2.1fr) auto}
.rows-head{display:grid; grid-template-columns:var(--row-cols) 62px; gap:22px; align-items:baseline;
           font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
           color:var(--ink-faint); padding:10px 2px; border-bottom:1px solid var(--line-soft)}
.search-row{display:grid; grid-template-columns:1fr 62px; gap:22px; align-items:baseline;
            border-bottom:1px solid var(--line-soft)}
.row-open{display:grid; grid-template-columns:var(--row-cols); gap:22px; align-items:baseline;
          padding:15px 2px; text-decoration:none; color:var(--ink)}
.search-row:hover{background:var(--card)}
.search-row:hover .row-brand{color:var(--people)}
/* the delete control stays quiet until the row is under the cursor */
.row-delete button{border:0; background:transparent; cursor:pointer; padding:6px 0;
                   font-family:var(--mono); font-size:11px; letter-spacing:.08em;
                   text-transform:uppercase; color:transparent}
.search-row:hover .row-delete button{color:var(--ink-faint)}
.row-delete button:hover,.row-delete button:focus-visible{color:var(--people)}
.row-brand{display:flex; gap:8px; align-items:baseline; flex-wrap:wrap;
           font-size:18px; font-weight:600; line-height:1.3}
.tag{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
     background:var(--people-soft); color:var(--people); border-radius:999px; padding:3px 9px;
     font-weight:500}
.row-line{font-size:14px; color:var(--ink-soft); line-height:1.5;
          display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.row-meta{display:flex; gap:18px; align-items:baseline; justify-self:end; white-space:nowrap;
          font-family:var(--mono); font-size:11px; color:var(--ink-faint); letter-spacing:.04em;
          font-variant-numeric:tabular-nums}
.row-meta > span{flex:0 0 auto}      /* fixed widths, so heading and value always share a column */
.row-meta .by{width:76px; text-align:left; overflow:hidden; text-overflow:ellipsis}
.row-meta .win{width:118px; text-align:left}
.row-meta .num{width:52px; text-align:right}
.row-meta .dots{width:34px; text-align:right}
.unit{display:none}                   /* the column headings say it, up here */
@media (hover:none){                  /* no cursor to hover with, on a phone */
  .row-delete button{color:var(--ink-faint)}
}
@media (max-width:820px){
  .rows-head{display:none}
  .unit{display:inline}               /* no headings down here, so each number says what it is */
  .search-row{grid-template-columns:1fr auto; gap:10px}
  .row-open{grid-template-columns:1fr; gap:7px; padding:16px 2px}
  .row-meta{justify-self:start; gap:14px; flex-wrap:wrap; white-space:normal}
  .row-meta .num,.row-meta .dots,.row-meta .by,.row-meta .win{width:auto; text-align:left}
  .row-line{-webkit-line-clamp:3}
}

/* deleting a search: a line that offers it back, and the bin it went to */
.undo{display:flex; gap:14px; align-items:baseline; flex-wrap:wrap; margin-top:18px;
      border-left:2px solid var(--people); padding:10px 0 10px 14px; font-size:14px;
      color:var(--ink-soft)}
.linky{border:0; background:transparent; padding:0; cursor:pointer; color:var(--ink);
       font:600 14px var(--body); text-decoration:underline; text-underline-offset:3px}
.bin{margin-top:26px; border-top:1px solid var(--line-soft); padding-top:12px}
.bin summary{cursor:pointer; list-style:none; padding:6px 0}
.bin summary::-webkit-details-marker{display:none}
.bin summary:hover .mono{color:var(--ink)}
.bin-note{font-size:13px; color:var(--ink-soft); max-width:60ch; margin:6px 0 12px}
.bin-row{display:flex; gap:18px; align-items:baseline; flex-wrap:wrap; padding:11px 0;
         border-top:1px solid var(--line-soft); font-size:15px}
.bin-row .mono{margin-right:auto}
.forever summary{font-family:var(--mono); font-size:11px; letter-spacing:.08em;
                 text-transform:uppercase; color:var(--ink-faint)}
.forever[open] summary{color:var(--people)}
.forever-box{margin-top:10px; border:1px solid var(--warn); background:var(--warn-soft);
             border-radius:3px; padding:14px; max-width:46ch}
.forever-box p{font-size:13px; color:var(--ink)}
.forever-box button{margin-top:10px; border:0; border-radius:999px; background:var(--ink);
                    color:var(--paper); padding:9px 16px; font:500 13px var(--body); cursor:pointer}
.forever-box button:hover{background:var(--people)}
.meta{display:flex; gap:14px; flex-wrap:wrap; font-family:var(--mono); font-size:11px;
      color:var(--ink-faint); letter-spacing:.04em; margin-top:auto; padding-top:8px;
      border-top:1px solid var(--line-soft)}
.steps{display:inline-flex; gap:3px}
.step{width:7px; height:7px; border-radius:50%; background:var(--line); display:inline-block}
.step.done{background:var(--industry)}

/* shared by the sources page and the notes elsewhere */
.note{font-size:13px; color:var(--ink-soft); border-left:2px solid var(--warn); padding-left:12px}
section{padding-block:50px; border-bottom:1px solid var(--line)}
.head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap;
      margin-bottom:26px}
.head h2{font-size:clamp(22px,3.2vw,32px)}
.head p{font-size:14px; color:var(--ink-soft); max-width:46ch}
.scroller{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:14px}
th{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
   color:var(--ink-faint); text-align:left; font-weight:400; padding:0 10px 10px 0; white-space:nowrap}
td{padding:12px 10px 12px 0; border-top:1px solid var(--line-soft); vertical-align:middle}
td.name{font-weight:600; min-width:190px}
.flag{display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:.06em;
      text-transform:uppercase; background:var(--warn-soft); color:var(--warn); padding:3px 7px;
      border-radius:2px; white-space:nowrap; margin-right:4px}
.count{font-family:var(--mono); font-size:13px; font-variant-numeric:tabular-nums}
ul{margin:0; padding-left:18px}
.empty{padding-block:60px; text-align:center; color:var(--ink-soft)}
.command{font-family:var(--mono); font-size:13px; background:var(--card); border:1px solid var(--line);
         border-radius:3px; padding:12px 14px; display:inline-block; margin-top:14px; color:var(--ink);
         text-transform:none; letter-spacing:0}

/* Orange means a voice everywhere except the name itself: the logo and this echo of it. */
.claim .namecheck{color:var(--people)}

/* ---- the opening page ---------------------------------------------------- */
.opening{padding-block:70px 30px; max-width:60ch}
.claim{font-family:var(--display); font-weight:800; font-size:clamp(26px,4.2vw,44px);
       letter-spacing:-.02em; line-height:1.08}
.hint{margin-top:18px; font-size:14px; color:var(--ink-soft); max-width:52ch}

/* a search that is actually running stays visible: unfinished business */
.now{max-width:760px; border-top:1px solid var(--line); padding-top:18px; margin-bottom:10px}

/* what has already been read is folded away until asked for */
.earlier{margin:30px 0 70px}
.earlier > summary{display:flex; align-items:center; gap:12px; cursor:pointer; list-style:none;
                 padding:14px 0; border-top:1px solid var(--line); color:var(--ink-soft)}
.earlier > summary::-webkit-details-marker{display:none}
.earlier > summary::after{content:"show"; font-family:var(--mono); font-size:11px; letter-spacing:.08em;
                        text-transform:uppercase; color:var(--ink-faint); margin-left:auto}
.earlier[open] > summary::after{content:"hide"}
.earlier > summary:hover{color:var(--ink)}
.reveal{font-family:var(--display); font-weight:800; font-size:20px; color:var(--ink);
        letter-spacing:-.01em}
.count{font-family:var(--mono); font-size:11px; background:var(--line-soft); color:var(--ink-soft);
       border-radius:999px; padding:2px 9px}
.spent{margin-left:4px}
.filter{margin:18px 0 4px}
.filter input{width:min(320px,100%); border:1px solid var(--line); background:var(--card);
              color:var(--ink); border-radius:999px; padding:8px 15px; font:500 14px var(--body)}
.empty-line{color:var(--ink-faint); padding-block:18px}

/* ---- a search in flight -------------------------------------------------- */
.running{padding-block:28px; border-bottom:1px solid var(--line)}
.job-row{display:flex; gap:14px; align-items:baseline; flex-wrap:wrap; text-decoration:none;
         padding:10px 0; border-bottom:1px dashed var(--line-soft)}
.state{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
       color:var(--industry)}
.state.waiting{color:var(--people)}
.job{padding-block:44px}
.job .quiet-head{text-transform:none}
.note-line{margin-top:6px; font-size:15px; color:var(--ink-soft); max-width:62ch}
.steps-list{list-style:none; padding:0; margin:34px 0 0; max-width:520px}
.steps-list li{display:flex; align-items:center; gap:12px; padding:14px 0;
               border-bottom:1px solid var(--line-soft); color:var(--ink-faint)}
.steps-list li .tick{margin-left:auto; width:9px; height:9px; border-radius:50%; background:var(--line)}
.steps-list li.now{color:var(--ink); font-weight:600}
.steps-list li.now .tick{background:var(--people); animation:pulse 1.4s ease-in-out infinite}
.steps-list li.past{color:var(--ink-soft)}
.steps-list li.past .tick{background:var(--industry)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.steps-list li.now .tick{animation:none}}
.decide-box{margin-top:30px; border:1px solid var(--people); background:var(--people-soft);
            border-radius:3px; padding:22px; max-width:640px}
.decide-box p{color:var(--ink)}
.decide-actions{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:16px}
.decide-actions button{border:0; background:var(--ink); color:var(--paper); border-radius:999px;
  padding:11px 22px; font:600 15px var(--body); cursor:pointer}
.decide-actions button.quiet{background:transparent; color:var(--ink); border:1px solid var(--line)}
.big-link{font-family:var(--display); font-weight:800; font-size:24px; text-decoration:none}
.big-link:hover{color:var(--people)}

/* ---- before a search runs ------------------------------------------------ */
.confirm{padding-block:44px 70px; max-width:620px}
/* Mid-search pages stay quiet. Display type is for findings, not for waiting. */
.quiet-head{font-family:var(--body); font-weight:600; font-size:21px; letter-spacing:0;
            line-height:1.4; margin-top:10px}
.quiet-head strong{font-weight:600; color:var(--people)}
.plan{margin-top:32px; border-top:1px solid var(--line)}
.plan-row{display:flex; justify-content:space-between; gap:20px; padding:11px 0;
          border-bottom:1px solid var(--line-soft); font-size:15px}
.plan-row span:first-child{color:var(--ink-soft)}
.plan-row span:last-child{font-family:var(--mono); font-size:13px; text-align:right}
.plan-row.total span{font-weight:600; color:var(--ink)}
.after{margin-top:22px; color:var(--ink-soft); font-size:15px}
.confirm-actions{display:flex; align-items:center; gap:18px; margin-top:30px}
.confirm-actions button{border:0; background:var(--ink); color:var(--paper); border-radius:999px;
  padding:13px 28px; font:600 16px var(--body); cursor:pointer}
.confirm-actions button:hover{background:var(--people)}
.confirm-actions button:disabled{opacity:.4; cursor:not-allowed}
.quiet-link{color:var(--ink-soft)}

/* ---- what the search is finding, while you wait -------------------------
   One thing at a time, five seconds each. A list would be skimmed and then
   ignored; a single line at reading size is actually read. */
.ticker{margin-top:34px; max-width:660px; border-top:1px solid var(--line)}
.fact{display:flex; flex-direction:column; gap:7px; min-height:98px; padding:22px 0 18px;
      border-left:2px solid var(--line); padding-left:16px; opacity:0}
.fact.in{opacity:1}
.fact-kind{color:var(--ink-faint)}
.fact-text{font-size:20px; line-height:1.45; color:var(--ink); font-weight:500;
           max-width:52ch; overflow-wrap:anywhere}
/* k- prefixed so a voice can never collide with another class of the same name */
.fact.k-people{border-left-color:var(--people)} .fact.k-people .fact-kind{color:var(--people)}
.fact.k-industry,.fact.k-retailer{border-left-color:var(--industry)}
.fact.k-industry .fact-kind,.fact.k-retailer .fact-kind{color:var(--industry)}
.fact.k-brand{border-left-color:var(--brand)}
.fact.k-step{border-left-color:var(--line)}
.fact.k-step .fact-text{font-family:var(--mono); font-size:15px; letter-spacing:.02em;
                        color:var(--ink-soft); font-weight:400}
.fact.k-skipped .fact-text{color:var(--ink-faint); font-weight:400;
                           text-decoration:line-through; text-decoration-color:var(--line)}
.dwell{height:2px; background:var(--line-soft); overflow:hidden}
.dwell span{display:block; height:2px; width:0; background:var(--ink-faint)}
@media (prefers-reduced-motion:no-preference){
  .fact{transition:opacity .45s ease}
  .fact.in{animation:rise .45s ease}
}
@media (prefers-reduced-motion:reduce){
  .dwell{display:none}
}
@keyframes rise{from{opacity:0; transform:translateY(5px)}to{opacity:1; transform:none}}
@keyframes dwell{from{width:0}to{width:100%}}

/* ==== the result page: a briefing in chapters ==============================
   Everything is scoped under .brief so no older rule can leak in.
   Colour means a voice and nothing else: orange is people, blue the press,
   grey outline the brand. Structure uses ink, weight and size. */
.v-people{color:var(--people)} .v-industry{color:var(--industry)} .v-brand{color:var(--brand)}

.brief{display:grid; grid-template-columns:190px minmax(0,1fr); gap:56px}
@media (max-width:1060px){.brief{grid-template-columns:1fr; gap:0}.brief .rail{display:none}}

/* the rail */
.brief .rail{position:sticky; top:96px; align-self:start; padding-top:56px}
.brief .rail-title{margin-bottom:14px}
.brief .rail ol{list-style:none; margin:0; padding:0; border-left:1px solid var(--line)}
.brief .rail ol a{display:block; padding:8px 0 8px 16px; margin-left:-1px; border-left:2px solid transparent;
               font-size:14px; color:var(--ink-faint); text-decoration:none}
.brief .rail ol a span{display:block; font:500 10px var(--mono); letter-spacing:.1em}
.brief .rail ol a:hover{color:var(--ink)}
.brief .rail ol a.done{color:var(--ink-soft)}
.brief .rail ol a.on{border-left-color:var(--ink); color:var(--ink); font-weight:600}
.brief .rail-time{margin-top:18px}
.brief .rail-present{display:inline-block; margin-top:14px; font-size:13px; font-weight:600; color:var(--ink)}

/* chapters */
.brief .chapter{padding:60px 0 68px; border-bottom:1px solid var(--line); scroll-margin-top:90px}
.brief .chapter.bare{border-bottom:0}
.brief .ch-no{display:flex; align-items:center; gap:10px; margin-bottom:14px; font:500 11px var(--mono);
              letter-spacing:.12em; text-transform:uppercase; color:var(--ink)}
.brief .ch-no::before{content:""; width:22px; height:2px; background:currentColor}
.brief .ch-title{font-size:clamp(27px,3.4vw,40px); font-weight:800; max-width:22ch}
.brief .lede{margin-top:14px; font-size:17px; color:var(--ink-soft); max-width:58ch}
.brief .mono a{color:inherit}
.brief .btn{display:inline-flex; gap:8px; align-items:center; border:1px solid var(--ink); background:var(--ink);
            color:var(--paper); border-radius:999px; padding:11px 18px; font:500 14px var(--body);
            text-decoration:none; cursor:pointer}
.brief .btn:hover{background:var(--people); border-color:var(--people)}
.brief .btn.ghost{background:transparent; color:var(--ink)}
.brief .btn.ghost:hover{color:var(--paper)}
.brief .cmd{display:block; margin-top:10px; font:12px var(--mono); background:var(--card); border:1px solid var(--line);
            border-radius:3px; padding:9px 11px; color:var(--ink); overflow-wrap:anywhere}

/* a quote, anywhere in the briefing: the rule carries the voice */
.brief .q{font-size:14px; color:var(--ink-soft); border-left:2px solid var(--people); padding-left:12px}
.brief .q.v-industry{border-left-color:var(--industry)}
.brief .q.v-brand{border-left:2px dashed var(--brand)}
.brief .q .src,.brief .sq .src{display:block; margin-top:5px; font:500 10px var(--mono); letter-spacing:.06em;
                               text-transform:uppercase; color:var(--ink-faint)}
.brief .src a{color:inherit}

/* 01 the answer */
.brief .answer{padding-top:56px}
.brief .crumb{display:flex; flex-wrap:wrap; gap:6px 18px}
.brief .answer h1{margin-top:22px; font-size:clamp(36px,5.2vw,66px); font-weight:800; max-width:19ch; letter-spacing:-.035em}
/* a long sentence gets smaller type rather than seven lines */
.brief .answer h1.long{font-size:clamp(32px,3.9vw,52px); max-width:24ch}
.brief .from{margin-top:18px}
.brief .three{margin-top:44px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media (max-width:860px){.brief .three{grid-template-columns:1fr}}
.brief .know{background:var(--card); border:1px solid var(--line); border-radius:4px; padding:22px;
             display:flex; flex-direction:column; gap:14px}
.brief .know .n{font:800 44px/1 var(--display); color:var(--line)}
.brief .know h3{font:600 19px/1.3 var(--body); letter-spacing:-.005em}
.brief .lensmeter{display:flex; gap:4px; align-items:center}
.brief .lensmeter i{width:18px; height:6px; border-radius:2px; background:var(--line-soft)}
.brief .lensmeter i.on{background:var(--ink)}
.brief .lensmeter em{font:500 10px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint);
                     font-style:normal; margin-left:8px}
.brief .start{margin-top:34px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; font-size:15px; color:var(--ink-soft)}
.brief .start a:not(.btn){color:inherit}

/* 02 who's talking */
.brief .room{margin-top:34px}
.brief .split{display:flex; height:64px; gap:3px}
.brief .split div{border-radius:4px; min-width:6px}
.brief .split .p{background:var(--people)}
.brief .split .i{background:var(--industry)}
.brief .split .b{border:2px solid var(--brand);
                 background:repeating-linear-gradient(135deg,transparent 0 5px,rgba(124,135,148,.35) 5px 7px)}
.brief .split-labels{display:flex; gap:3px; margin-top:12px}
.brief .split-labels > div{min-width:0}
.brief .big-n{font:800 34px/1 var(--display); letter-spacing:-.03em}
.brief .split-labels .lbl{font-size:14px; color:var(--ink-soft); margin-top:4px}
.brief .aside-row{margin-top:32px; display:grid; grid-template-columns:1.2fr 1fr; gap:28px}
@media (max-width:860px){.brief .aside-row{grid-template-columns:1fr}}
.brief .types{display:flex; flex-wrap:wrap; gap:8px}
.brief .types span{font:500 12px var(--mono); background:var(--card); border:1px solid var(--line); border-radius:999px;
                   padding:5px 11px; color:var(--ink-soft)}
.brief .types b{color:var(--ink)}
.brief .callout{font-size:15px; border-left:3px solid var(--warn); padding:4px 0 4px 16px}

/* 03 the temperature */
.brief .legend{display:flex; gap:22px; flex-wrap:wrap; margin-top:26px; font-size:13px; color:var(--ink-soft)}
.brief .legend i{display:inline-block; width:12px; height:12px; border-radius:50%; vertical-align:-1px; margin-right:7px}
.brief .legend .lp{background:var(--people)} .brief .legend .li{background:var(--industry)}
.brief .legend .lt{border:2px solid var(--ink-faint)}
.brief .temp{margin-top:18px; border-top:1px solid var(--line)}
.brief .axis,.brief .trow{display:grid; grid-template-columns:230px minmax(0,1fr) 150px; gap:20px; align-items:center}
.brief .axis{padding:10px 0 6px}
.brief .axis .scale{display:flex; justify-content:space-between; font:500 10px var(--mono); letter-spacing:.08em;
                    color:var(--ink-faint); text-transform:uppercase}
.brief .axis .cols,.brief .counts{display:grid; grid-template-columns:repeat(3,1fr); text-align:right}
.brief .axis .cols{font:500 10px var(--mono); letter-spacing:.08em; color:var(--ink-faint); text-transform:uppercase}
.brief .trow{padding:11px 0; border-top:1px solid var(--line-soft)}
.brief .trow.hot{background:linear-gradient(90deg,var(--people-soft),transparent 55%)}
.brief .trow .name{font-size:15px; font-weight:500; line-height:1.3}
.brief .why{display:block; margin-top:3px; font:500 10px var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft)}
.brief .why.p{color:var(--people)} .brief .why.i{color:var(--industry)}
.brief .track{position:relative; height:34px}
.brief .track::before{content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--line-soft)}
.brief .track .zero{position:absolute; left:50%; top:4px; bottom:4px; width:1px; background:var(--line)}
.brief .track .link{position:absolute; top:calc(50% - 1px); height:2px; background:var(--line)}
.brief .track .link.dashed{background:none; height:0; border-top:2px dashed var(--line)}
.brief .dot{position:absolute; top:50%; border-radius:50%; transform:translate(-50%,-50%); border:2px solid var(--paper)}
.brief .dot.p{background:var(--people)} .brief .dot.i{background:var(--industry)}
.brief .dot.thin{background:var(--paper)}
.brief .dot.thin.p{border-color:var(--people)} .brief .dot.thin.i{border-color:var(--industry)}
.brief .dot:hover,.brief .dot:focus-visible{outline:2px solid var(--ink); outline-offset:1px; z-index:3}
.brief .counts{font:500 12px var(--mono); color:var(--ink-soft); font-variant-numeric:tabular-nums}
@media (max-width:860px){.brief .axis{display:none}.brief .trow{grid-template-columns:1fr; gap:8px}
  .brief .counts{text-align:left; grid-template-columns:repeat(3,auto); justify-content:start; gap:14px}}
.brief .as-table{margin-top:16px}
.brief .as-table summary{cursor:pointer}
.brief .as-table table{margin-top:12px}
.tip{position:fixed; pointer-events:none; background:var(--ink); color:var(--paper); font:12px/1.4 var(--body);
     padding:7px 10px; border-radius:3px; opacity:0; transition:opacity .1s; z-index:60; max-width:260px}
.tip.on{opacity:1}

/* 04 the friction: a dark stage of their own */
.brief .stage{background:var(--stage); color:var(--stage-ink); padding:64px clamp(20px,4vw,48px) 72px; border-radius:6px}
.brief .stage .ch-no{color:var(--stage-ink)}
.brief .stage .lede{color:var(--stage-soft)}
.brief .picker{margin-top:28px; display:flex; gap:8px; flex-wrap:wrap}
.brief .picker a{font:500 12px var(--mono); letter-spacing:.05em; color:var(--stage-soft); border:1px solid var(--stage-line);
                 border-radius:999px; padding:8px 14px; text-decoration:none; display:flex; gap:10px}
.brief .picker a b{color:var(--stage-ink)}
.brief .picker a:hover{border-color:var(--stage-soft)}
.brief .picker a.on{background:var(--stage-ink); color:var(--stage); border-color:var(--stage-ink)}
.brief .picker a.on b{color:var(--stage)}
.brief .coll{margin-top:32px; border-top:1px solid var(--stage-line); padding-top:32px; scroll-margin-top:90px}
.brief .coll + .coll{margin-top:56px}
.brief .coll-meta{display:flex; gap:10px; flex-wrap:wrap}
.brief .tagl{font:500 11px var(--mono); letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--stage-line);
             border-radius:999px; padding:4px 10px; color:var(--stage-soft)}
.brief .tagl.solid{background:var(--stage-ink); border-color:var(--stage-ink); color:var(--stage)}
.brief .coll h2{margin-top:20px; font-size:clamp(28px,3.6vw,48px); font-weight:800; max-width:23ch; letter-spacing:-.03em}
.brief .sides{margin-top:38px; display:grid; grid-template-columns:1fr 56px 1fr}
@media (max-width:860px){.brief .sides{grid-template-columns:1fr}.brief .vs{padding:14px 0}}
.brief .side .lens{font:500 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--stage-soft)}
.brief .side .read{margin-top:10px; font-size:17px; line-height:1.5}
.brief .vs{display:flex; justify-content:center; padding-top:16px; font:800 30px var(--display); color:var(--stage-soft)}
.brief .squotes{margin-top:18px; display:flex; flex-direction:column; gap:12px}
/* the quote's words stay ink; only its rule says whose voice it is */
.brief .sq,.brief .sq.v-people,.brief .sq.v-industry,.brief .sq.v-brand{color:var(--stage-ink)}
.brief .q.v-people,.brief .q.v-industry,.brief .q.v-brand{color:var(--ink-soft)}
.brief .sq{background:var(--stage-2); border-radius:4px; padding:14px 16px; font-size:14px; line-height:1.5;
           border-left:3px solid var(--stage-people)}
.brief .sq.v-industry{border-left-color:var(--stage-industry)}
.brief .sq.v-brand{border-left:3px dashed var(--brand)}
.brief .sq .src{color:var(--stage-soft)}
.brief .coll .more{margin-top:10px; font:500 11px var(--mono); letter-spacing:.07em; color:var(--stage-soft); text-transform:uppercase}
.brief .whatif{margin-top:46px; display:grid; gap:18px}
.brief .whatif .lbl{font:500 11px var(--mono); letter-spacing:.12em; color:var(--stage-soft); text-transform:uppercase}
.brief .whatif p{font:500 clamp(20px,2.3vw,28px)/1.3 var(--display); letter-spacing:-.015em; max-width:34ch}
.brief .route{margin-top:38px; display:flex; gap:16px; align-items:flex-start; background:var(--stage-2); border-radius:4px; padding:20px 22px}
.brief .route .k{flex:none; font:600 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; border:1px solid var(--stage-ink);
                 color:var(--stage-ink); border-radius:3px; padding:5px 9px}
.brief .route p{font-size:16px}
.brief .coll-actions{margin-top:28px; display:flex; gap:12px; flex-wrap:wrap}
.brief .stage .btn.light{background:var(--stage-ink); color:var(--stage); border-color:var(--stage-ink)}
.brief .stage .btn.ghost{color:var(--stage-ink); border-color:var(--stage-line)}
.brief .stage .btn:hover{background:var(--stage-soft); border-color:var(--stage-soft); color:var(--stage)}

/* 05 the four lenses */
.brief .tabs{margin-top:28px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
@media (max-width:860px){.brief .tabs{grid-template-columns:1fr 1fr}}
.brief .tab{text-align:left; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:4px;
            padding:14px 16px; cursor:pointer; font:inherit}
.brief .tab:hover{border-color:var(--ink-faint)}
.brief .tab .lname{display:block; font:700 18px var(--display)}
.brief .tab .qn{display:block; font-size:13px; color:var(--ink-soft); margin-top:3px}
.brief .tab.on{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.brief .tab.on .qn{color:var(--line)}
.brief .lens-body{margin-top:28px; display:grid; grid-template-columns:1.15fr 1fr; gap:40px}
.brief .lens-body[hidden]{display:none}
/* a map of moments or six sides needs the width; the findings go underneath */
.brief .lens-body.wide-picture{grid-template-columns:1fr; gap:34px}
@media (max-width:960px){.brief .lens-body{grid-template-columns:1fr}}
.brief .stairs{display:flex; align-items:flex-end; gap:6px; margin-top:60px}
.brief .stair{flex:1; display:flex; flex-direction:column; justify-content:flex-end; position:relative; min-width:0}
.brief .stair .blk{border-radius:3px 3px 0 0}
.brief .stair.strong .blk{background:var(--ink)}
.brief .stair.mixed .blk{border:2px solid var(--ink); border-bottom:0;
                         background:repeating-linear-gradient(135deg,var(--ink) 0 2px,transparent 2px 7px)}
.brief .stair.weak .blk,.brief .stair.no_evidence .blk{border:2px dashed var(--ink-faint); border-bottom:0}
.brief .stair.stall .blk{border:2px solid var(--warn); border-bottom:0;
                         background:repeating-linear-gradient(135deg,var(--warn) 0 2px,transparent 2px 7px)}
.brief .stair.beyond .blk{opacity:.4}
.brief .stair .lbl{margin-top:8px; font-size:12px; line-height:1.3; color:var(--ink-soft); min-height:32px}
.brief .stair .st{font:500 10px var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint)}
.brief .flagpin{position:absolute; left:50%; transform:translateX(-50%); white-space:nowrap; font:600 11px var(--mono);
                letter-spacing:.08em; text-transform:uppercase; color:var(--paper); background:var(--warn); padding:5px 9px; border-radius:3px}
.brief .flagpin::after{content:""; position:absolute; left:50%; bottom:-5px; transform:translateX(-50%);
                       border:5px solid transparent; border-top-color:var(--warn); border-bottom:0}
.brief .stall-why{margin-top:22px; font-size:15px; color:var(--ink-soft); max-width:60ch}
.brief .moments{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:700px){.brief .moments{grid-template-columns:1fr}}
.brief .moment{margin-top:10px; padding:10px 12px; border-radius:3px; font-size:14px; font-weight:500}
.brief .moment span{display:block; font-size:12px; font-weight:400; color:var(--ink-soft); margin-top:3px}
.brief .moment.strong{background:var(--ink); color:var(--paper)} .brief .moment.strong span{color:var(--line)}
.brief .moment.some{border:2px solid var(--ink)}
.brief .moment.absent{border:2px dashed var(--ink-faint); color:var(--ink-soft)}
.brief .moment.none{color:var(--ink-faint); font-weight:400}
.brief .sides-list,.brief .tension-list{margin-top:12px}
.brief .side-row{display:grid; grid-template-columns:140px 110px 1fr; gap:14px; padding:12px 0; border-top:1px solid var(--line-soft); align-items:baseline}
@media (max-width:700px){.brief .side-row{grid-template-columns:1fr}}
.brief .side-name{font-weight:600; font-size:14px}
.brief .side-says{font-size:13px; color:var(--ink-soft)}
.brief .side-says b{color:var(--ink); font-weight:600}
.brief .gap{display:inline-flex; gap:3px; align-items:center}
.brief .gap i{width:14px; height:6px; border-radius:2px; background:var(--line-soft)}
.brief .gap em{font:500 10px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); font-style:normal; margin-left:6px}
.brief .gap-small i:nth-child(-n+1),.brief .gap-large i{background:var(--ink)}
.brief .tension-row{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid var(--line-soft); font-size:15px}
.brief .pos{flex:none; font:500 10px var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint)}
.brief .pos-contested{color:var(--warn)}
.brief .findings{display:flex; flex-direction:column}
.brief .finding{border-top:1px solid var(--line-soft)}
.brief .finding summary{display:grid; grid-template-columns:1fr auto; gap:14px; align-items:baseline; padding:13px 0; cursor:pointer; list-style:none}
.brief .finding summary::-webkit-details-marker{display:none}
.brief .finding .t{font-size:15px; font-weight:500}
.brief .finding[open] .t{font-weight:600}
.brief .finding-body{padding:0 0 16px; display:flex; flex-direction:column; gap:12px; font-size:14px; color:var(--ink-soft)}
.brief .shared{display:block; margin-top:3px; font:500 10px var(--mono); letter-spacing:.06em; color:var(--ink-faint); text-transform:uppercase}
.brief .sig{display:inline-flex; gap:3px}
.brief .sig i{width:4px; height:12px; border-radius:1px; background:var(--line)}
.brief .sig.s-strong i{background:var(--ink)}
.brief .sig.s-moderate i:nth-child(-n+2){background:var(--ink)}
.brief .sig.s-weak i:first-child{background:var(--ink)}

/* 06 fine print */
.brief .fine{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:26px}
@media (max-width:860px){.brief .fine{grid-template-columns:1fr}}
.brief .fine h3{font:600 15px var(--body); margin-bottom:10px}
.brief .fine p{font-size:14px; color:var(--ink-soft); margin-top:6px}
.brief .fine p.small{font-size:12px; color:var(--ink-faint)}
.brief .fine a{color:inherit}
.brief .cost{font:800 40px/1 var(--display); letter-spacing:-.03em}
.brief .meter{display:flex; gap:3px; margin:4px 0 10px}
.brief .meter i{height:8px; border-radius:2px}
.brief .next{margin-top:40px; display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.brief .next form{margin:0}
.brief .legend-note{margin-top:40px; padding-top:20px; border-top:1px solid var(--line-soft); font-size:13px; color:var(--ink-soft); max-width:80ch}

/* ==== the lock: logging in, choosing a password, the team ================== */
.door{max-width:460px; margin:0 auto; padding-block:72px 90px}
.door .claim{margin-bottom:28px}
.door-box{display:flex; flex-direction:column; gap:16px; background:var(--card); border:1px solid var(--line);
          border-radius:6px; padding:28px}
.door-box label{display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:600}
.door-box input[type=email],.door-box input[type=password]{font:16px var(--body); color:var(--ink); background:var(--paper);
          border:1px solid var(--line); border-radius:4px; padding:11px 12px}
.door-box input:focus{outline:2px solid var(--ink); outline-offset:1px; border-color:var(--ink)}
.door-box button{align-self:flex-start; border:0; border-radius:999px; background:var(--ink); color:var(--paper);
          padding:12px 20px; font:600 15px var(--body); cursor:pointer}
.door-box button:hover{background:var(--ink-soft)}
.door-box p{font-size:15px; color:var(--ink-soft)}
.door-box .command{margin-top:0}
.door-small{font-size:13px !important; color:var(--ink-faint) !important}
.door-small a{color:inherit}
.door-problem{font-size:14px; color:var(--ink); border-left:3px solid var(--warn); background:var(--warn-soft);
              padding:9px 12px; border-radius:0 4px 4px 0}

/* the account button at the far right of the bar */
.account{position:relative; flex:none; margin-left:auto}
.account summary{list-style:none; cursor:pointer; width:34px; height:34px; border-radius:50%;
                 display:flex; align-items:center; justify-content:center; background:var(--ink); color:var(--paper);
                 font:600 14px var(--body)}
.account summary::-webkit-details-marker{display:none}
.account-menu{position:absolute; right:0; top:44px; z-index:40; min-width:230px; background:var(--card);
              border:1px solid var(--line); border-radius:6px; padding:14px 16px; display:flex; flex-direction:column;
              gap:10px; box-shadow:0 8px 24px rgba(17,20,26,.1)}
.account-email{font:500 12px var(--mono); color:var(--ink-soft); overflow-wrap:anywhere}
.account-menu a,.account-menu button{font:500 14px var(--body); color:var(--ink); text-decoration:none; background:none;
              border:0; padding:0; text-align:left; cursor:pointer}
.account-menu a:hover,.account-menu button:hover{text-decoration:underline}

/* the team page */
.team{max-width:820px; padding-block:48px 90px}
.team .quiet-head{margin:6px 0 24px}
.team .new-link{border:1px solid var(--ink); border-radius:6px; padding:18px 20px; margin-bottom:24px; background:var(--card)}
.team .new-link p{font-size:15px; color:var(--ink-soft)}
.team .link-row{display:flex; gap:8px; margin-top:12px}
.team .link-row input{flex:1; min-width:0; font:13px var(--mono); padding:10px 12px; border:1px solid var(--line);
                      border-radius:4px; background:var(--paper); color:var(--ink)}
.team .link-row button,.team .invite button{border:0; border-radius:999px; background:var(--ink); color:var(--paper);
                      padding:10px 18px; font:600 14px var(--body); cursor:pointer}
.team .invite{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:28px}
.team .invite input[type=email]{flex:1 1 260px; font:15px var(--body); padding:10px 12px; border:1px solid var(--line);
                      border-radius:4px; background:var(--card); color:var(--ink)}
.team .admin-box{font-size:14px; color:var(--ink-soft); display:flex; gap:6px; align-items:center}
.team .people{border-top:1px solid var(--line)}
.team .person{display:grid; grid-template-columns:minmax(0,1.4fr) 80px minmax(0,1fr) auto; gap:14px; align-items:baseline;
              padding:13px 0; border-bottom:1px solid var(--line-soft)}
@media (max-width:700px){.team .person{grid-template-columns:1fr; gap:4px}}
.team .person .who{font-size:15px; font-weight:500; overflow-wrap:anywhere}
.team .person .who em{font-style:normal; color:var(--ink-faint); font-weight:400}
.team .actions{display:flex; gap:14px}
.team .actions form{margin:0}
.team .linky.quiet{color:var(--ink-faint)}
.team .door-small{margin-top:14px}