:root{--ground:#F3F5F8;--surface:#FFFFFF;--ink:#000000;--onInk:#FFFFFF;--rule:#D8DDE6;--chip:#E8ECF3;--navy:#1E2761;--navy-deep:#12152B;--accent:#B7760F;--accent-ink:#FFFFFF;--shadow:0 18px 40px -22px rgba(22,32,58,.45);--body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--measure:62ch}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--ground:#0F1422;--surface:#171D2E;--ink:#FFFFFF;--onInk:#000000;--rule:#2C3550;--chip:#222A40;--navy:#AFC0F0;--navy-deep:#0A0D1A;--accent:#E0A33C;--accent-ink:#1A1204;--shadow:0 18px 40px -22px rgba(0,0,0,.8)}}
:root[data-theme="dark"]{--ground:#0F1422;--surface:#171D2E;--ink:#FFFFFF;--onInk:#000000;--rule:#2C3550;--chip:#222A40;--navy:#AFC0F0;--navy-deep:#0A0D1A;--accent:#E0A33C;--accent-ink:#1A1204;--shadow:0 18px 40px -22px rgba(0,0,0,.8)}
/* Association Insights, LLC. The one style sheet for associationinsights.ai.
   Colors, typeface, and footer follow the project style standard. */
/* The page colors, the typeface and the text width are set in content/style.json
   and written above this line by the build. */

*{box-sizing:border-box}
[hidden]{display:none!important}
img{max-width:100%}
body{background:var(--ground);color:var(--ink);font:16px/1.6 var(--body);margin:0;
  padding-inline:clamp(16px,4vw,48px)}
.wrap{max-width:1180px;margin:0 auto}
a{color:var(--ink);text-underline-offset:3px;text-decoration-color:var(--accent);
  text-decoration-thickness:2px}
a:hover{text-decoration-thickness:3px}
a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* The trademark mark. The marks are claimed in use rather than registered, so
   the mark drawn is TM rather than the registered symbol. It is drawn by the
   style sheet so that the text itself stays plain when it is edited. */
.tm::after{content:"\2122";font-size:.62em;vertical-align:super;line-height:0;
  margin-left:.06em;font-weight:inherit}

/* the opening block */
.hero{padding-block:clamp(30px,5vw,54px) clamp(22px,4vw,38px);
  border-bottom:1px solid var(--rule);display:grid;gap:14px}
.eyebrow{font:600 12.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;margin:0}
h1{font:700 clamp(28px,4.2vw,46px)/1.1 var(--body);letter-spacing:-.01em;margin:0;
  max-width:24ch;text-wrap:balance}
.standfirst{margin:0;max-width:var(--measure);font-size:17.5px;line-height:1.55}
.standfirst p{font-size:inherit;line-height:inherit;max-width:none}
.standfirst p:last-child{margin-bottom:0}
.standfirst ul.bullets{font-size:inherit;max-width:none}

/* sections */
main{display:block}
main section{padding-block:clamp(30px,4.5vw,46px);border-bottom:1px solid var(--rule)}
main section:last-of-type{border-bottom:0}
h2{font:700 clamp(22px,2.8vw,30px)/1.15 var(--body);margin:0 0 22px;text-wrap:balance}
h3{font:600 17px/1.35 var(--body);margin:0 0 6px}
p{margin:0 0 16px;max-width:var(--measure)}
p:last-child{margin-bottom:0}
.lede{font-size:17.5px}

/* the statement list */
.points{display:grid;gap:22px;margin:0;padding:0;list-style:none}
.points li{display:grid;grid-template-columns:minmax(0,18rem) minmax(0,1fr);gap:8px 32px;
  padding-top:12px;border-top:2px solid var(--ink)}
.points li h3{font:600 16px/1.35 var(--body);margin:0}
.points li p{font-size:15.5px;margin:0;max-width:60ch}
@media (max-width:760px){.points li{grid-template-columns:1fr;gap:6px}}

/* the card row */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:clamp(14px,2vw,22px)}
.cards > div{background:var(--surface);border:1px solid var(--rule);border-radius:10px;
  box-shadow:var(--shadow);padding:22px 20px}
.cards h3{font:700 20px/1.25 var(--body);margin:0 0 12px}
.cards p{font-size:15.5px;max-width:none}
.cards ul{margin:0;padding-left:18px;font-size:15.5px;display:grid;gap:5px}
.cards li::marker{color:var(--accent)}
.cards a.go{display:inline-flex;align-items:center;gap:8px;margin-top:18px;background:var(--ink);
  color:var(--onInk);text-decoration:none;font:600 14.5px/1 var(--body);padding:11px 16px;
  border-radius:8px}
.cards a.go:hover{opacity:.85;color:var(--onInk)}

/* the three parties, each with what it provides and what it receives */
.parties{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:clamp(14px,2vw,22px)}
.parties > div{background:var(--surface);border:1px solid var(--rule);border-radius:10px;
  box-shadow:var(--shadow);padding:22px 20px}
.parties h3{font:700 20px/1.2 var(--body);margin:0 0 12px}
.parties .role{font:700 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;
  margin:16px 0 8px}
.parties ul{margin:0;padding-left:18px;font-size:15.5px;display:grid;gap:5px}
.parties li{margin:0}
.parties li::marker{color:var(--accent)}
.parties a.go{display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  background:var(--ink);color:var(--onInk);text-decoration:none;
  font:600 14.5px/1 var(--body);padding:11px 16px;border-radius:8px}
.parties a.go:hover{opacity:.85;color:var(--onInk)}

/* the illustrative example */
.example{background:var(--chip);border:1px solid var(--rule);border-radius:10px;
  padding:26px 24px}
.example .tag{font:700 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 12px}
.example h3{font:700 20px/1.2 var(--body);margin:0 0 12px}
.example p{max-width:62ch}
.example dl{display:grid;grid-template-columns:minmax(0,12rem) minmax(0,1fr);
  gap:10px 24px;margin:18px 0 0;font-size:15.5px}
.example dt{font-weight:700}
.example dd{margin:0}
@media (max-width:640px){.example dl{grid-template-columns:1fr;gap:2px}
  .example dd{margin-bottom:12px}}

/* the list of research methods */
.methods{width:100%;border-collapse:collapse;font-size:15.5px}
.methods th,.methods td{text-align:left;padding:11px 16px 11px 0;
  border-bottom:1px solid var(--rule);vertical-align:top}
.methods th{font-weight:700;width:18rem;border-bottom:1px solid var(--rule)}
@media (max-width:640px){.methods,.methods tbody,.methods tr,.methods th,.methods td{
  display:block;width:auto}
  .methods th{border-bottom:0;padding-bottom:2px}.methods td{padding-top:0}}

/* the shaded panel */
.panel{background:var(--chip);border:1px solid var(--rule);border-radius:10px;padding:26px 24px}
.panel .tag{font:700 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px}
.panel h3{font:700 20px/1.25 var(--body);margin:0 0 12px}

/* the definition table */
.deftable{width:100%;border-collapse:collapse;font-size:15.5px}
.deftable th,.deftable td{text-align:left;padding:11px 16px 11px 0;
  border-bottom:1px solid var(--rule);vertical-align:top}
.deftable thead th{font-weight:700;border-bottom:2px solid var(--ink)}
.deftable tbody th{font-weight:700;width:18rem}
@media (max-width:640px){.deftable,.deftable tbody,.deftable tr,.deftable th,.deftable td{
  display:block;width:auto}
  .deftable tbody th{border-bottom:0;padding-bottom:2px}.deftable td{padding-top:0}}

/* the closing block */
.close{background:var(--surface);border:1px solid var(--rule);border-radius:10px;
  box-shadow:var(--shadow);padding:28px 26px;display:grid;gap:14px}
.close h2{margin-bottom:0}
.close .buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.close .buttons a{display:inline-flex;align-items:center;background:var(--ink);color:var(--onInk);
  text-decoration:none;font:600 14.5px/1 var(--body);padding:12px 18px;border-radius:8px}
.close .buttons a.second{background:var(--surface);color:var(--ink);border:1px solid var(--ink)}
.note{font-size:14.5px;border-left:3px solid var(--accent);padding-left:14px;max-width:60ch;margin:0}

/* the draft marker, which is removed when the wording is approved */
.draft{border:2px dashed var(--accent);border-radius:10px;padding:18px 20px;margin:0 0 26px;
  font-size:14.5px;background:var(--surface)}
.draft p{max-width:70ch}
.draft strong{letter-spacing:.04em;text-transform:uppercase;font-size:12.5px}

/* the control that returns the page to the top */
#aiGoTop{position:fixed;right:clamp(14px,3vw,28px);bottom:clamp(14px,3vw,28px);z-index:9999;
  display:inline-flex;align-items:center;gap:8px;background:var(--surface);color:var(--ink);
  border:1px solid var(--rule);border-radius:999px;padding:12px 18px;
  font:600 14px/1 var(--body);cursor:pointer;box-shadow:var(--shadow)}
#aiGoTop:hover{background:var(--chip)}
#aiGoTop:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media print{#aiGoTop{display:none}}

/* A bulleted list inside a group of paragraphs. These rules are placed after the
   rules for cards and panels, so that a list keeps the same spacing wherever it
   appears. */
ul.bullets{margin:0 0 16px;padding-left:20px;display:grid;gap:6px;
  max-width:var(--measure);list-style:disc}
.cards ul.bullets,.panel ul.bullets,.example ul.bullets,.close ul.bullets{
  margin:0 0 16px;padding-left:20px;gap:6px;max-width:none;font-size:inherit}
ul.bullets > li{margin:0}
ul.bullets > li::marker{color:var(--accent)}
ul.bullets:last-child{margin-bottom:0}

/* the copyright line, eight point Arial, at the bottom of every page */
footer.site > .wrap{border-top:1px solid var(--rule);padding-block:22px 34px;text-align:center}
.copyright{font:8pt/1.5 Arial,Helvetica,sans-serif;color:var(--ink);margin:0;max-width:none}

@media print{
  body{background:#FFFFFF;color:#000000;padding-inline:0}
  .cards > div,.close{box-shadow:none}
  .draft{display:none}
}

/* the small drawings beside a card or a statement */
.sym{width:44px;height:44px;display:block;margin:0 0 14px;fill:none;
stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sym .hot{stroke:var(--accent)}
.points li .sym{width:34px;height:34px;margin:0 0 6px}
@media print{.sym{stroke:#000000}.sym .hot{stroke:#000000}}

/* the drawings that state the idea of a page */
.figure{margin:0;display:grid;gap:14px;justify-items:start}
.figure svg{width:100%;max-width:860px;height:auto;display:block}
.figure .node{fill:var(--surface);stroke:var(--ink);stroke-width:1.5}
.figure .nm{fill:var(--ink);font:700 17px/1 var(--body)}
.figure .sub{fill:var(--ink);font:400 13px/1 var(--body)}
.figure .lbl{fill:var(--ink);font:600 13px/1 var(--body)}
.figure .flow{stroke:var(--ink);stroke-width:1.75;fill:none}
.figure .hot{stroke:var(--accent)}
.figure text.hot{fill:var(--accent);stroke:none}
.figure figcaption{font-size:14.5px;max-width:60ch}
@media print{.figure .node{fill:#FFFFFF;stroke:#000000}
.figure .nm,.figure .sub,.figure .lbl{fill:#000000}
.figure .flow{stroke:#000000}}
:root{--ai-top-bg:#FFFFFF;--ai-mission:#4E5F5C;--ai-divider:#D2491E;--ai-menu-bg:#FFFFFF;--ai-menu-rule:#DDE2E1;--ai-menu-text:#1F2827;--ai-menu-hover:#EEF2F1;--ai-selected-bg:#33403E;--ai-selected-text:#FFFFFF;--ai-section-border:#C9D1CF;--ai-button-border:#4E5F5C;--ai-button-text:#1F2827;--ai-phone-mark:#D2491E;--ai-phone-selected:#F7F9F8;--ai-focus:#D2491E}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--ai-menu-bg:#1C2524;--ai-menu-rule:#2F3B39;--ai-menu-text:#FFFFFF;--ai-menu-hover:#2A3533;--ai-selected-bg:#4E5F5C;--ai-selected-text:#FFFFFF;--ai-section-border:#3E4B49;--ai-phone-selected:#243030}}
:root[data-theme="dark"]{--ai-menu-bg:#1C2524;--ai-menu-rule:#2F3B39;--ai-menu-text:#FFFFFF;--ai-menu-hover:#2A3533;--ai-selected-bg:#4E5F5C;--ai-selected-text:#FFFFFF;--ai-section-border:#3E4B49;--ai-phone-selected:#243030}

.ai-hdr{position:relative;z-index:320;display:block;text-align:left;line-height:1.3;
  --aiPadL:clamp(16px,4vw,48px);--aiPadR:clamp(16px,4vw,48px);
  margin-left:calc(-1 * var(--aiPadL));margin-right:calc(-1 * var(--aiPadR))}
/* A dashboard with a left navigation moves its page 264 pixels to the right on a
   wide screen. The header reaches back across that space, so that it spans the
   whole window above the navigation. */
body.ai-dash > .ai-hdr{--aiPadL:264px;--aiPadR:0px;transition:margin-left .28s ease}
body.ai-dash.nav-hidden > .ai-hdr{--aiPadL:0px}
body.ai-flat > .ai-hdr{--aiPadL:0px;--aiPadR:0px}
@media (max-width:900px){body.ai-dash > .ai-hdr{--aiPadL:0px}}
.ai-hdr *,.ai-hdr *::before,.ai-hdr *::after{box-sizing:border-box}
.ai-hdr .ai-in{box-sizing:content-box;max-width:1180px;margin:0 auto;
  padding-inline:clamp(16px,4vw,48px)}
.ai-band{background:var(--ai-top-bg)}
.ai-bandin{display:flex;align-items:center;justify-content:space-between;gap:12px 28px;padding-block:12px}
/* the logo is drawn on the band itself, which is the color of the logo's background */
.ai-plate{display:inline-flex;flex:none;background:transparent;padding:9px 0;text-decoration:none}
.ai-logo{display:block;height:30px;width:auto;max-width:none;margin:0}
/* the mission line is drawn in the same style as the section labels on every
   page, at every width */
.ai-mission{margin:0;max-width:none;color:var(--ai-mission);font:600 12.5px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  letter-spacing:.16em;text-transform:uppercase;text-align:right}
.ai-edge{height:3px;background:var(--ai-divider)}
.ai-row{background:var(--ai-menu-bg);border-bottom:1px solid var(--ai-menu-rule)}
.ai-menu{display:flex;flex-wrap:wrap;gap:6px;padding-block:8px;margin:0 -12px}
.ai-menu a{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:999px;
  color:var(--ai-menu-text);text-decoration:none;font:600 14px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:0;text-transform:none}
.ai-menu a:hover{background:var(--ai-menu-hover);color:var(--ai-menu-text)}
.ai-menu a[aria-current="page"]{background:var(--ai-selected-bg);color:var(--ai-selected-text)}
/* the pages of one section are pills, and the page on screen is a filled pill,
   the same as the selected item of the menu above */
.ai-hdr nav.section{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:8px 0 10px;
  border-top:1px solid var(--ai-menu-rule)}
.ai-hdr nav.section a{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;
  border:1px solid var(--ai-section-border);border-radius:999px;color:var(--ai-menu-text);
  text-decoration:none;font:600 13px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.ai-hdr nav.section a:hover{background:var(--ai-menu-hover)}
.ai-hdr nav.section a[aria-current="page"]{background:var(--ai-selected-bg);
  border-color:var(--ai-selected-bg);color:var(--ai-selected-text)}
.ai-hdr [hidden]{display:none!important}
.ai-hdr a:focus-visible,.ai-menubtn:focus-visible{outline:3px solid var(--ai-focus);outline-offset:2px}
/* the menu for a narrow screen, which opens under the header */
.ai-mobile{display:none}
.ai-menubtn{list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;
  padding:0 14px;border-radius:999px;border:1.5px solid var(--ai-button-border);color:var(--ai-button-text);
  background:transparent;font:600 15px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;cursor:pointer;user-select:none;-webkit-user-select:none}
.ai-menubtn::-webkit-details-marker{display:none}
.ai-menubtn::marker{content:""}
.ai-menubtn svg{display:block}
.ai-menubtn .ai-x,.ai-menubtn .ai-t-close{display:none}
.ai-mobile[open] .ai-menubtn .ai-x,.ai-mobile[open] .ai-menubtn .ai-t-close{display:inline}
.ai-mobile[open] .ai-menubtn .ai-bars,.ai-mobile[open] .ai-menubtn .ai-t-open{display:none}
.ai-panel{position:absolute;left:0;right:0;top:100%;display:flex;flex-direction:column;
  background:var(--ai-menu-bg);border-bottom:1px solid var(--ai-menu-rule);
  box-shadow:0 14px 28px -18px rgba(31,40,39,.55)}
.ai-panel a{display:flex;align-items:center;min-height:48px;padding:0 20px;border-top:1px solid var(--ai-menu-rule);
  color:var(--ai-menu-text);text-decoration:none;font:600 16px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.ai-panel a[aria-current="page"]{box-shadow:inset 4px 0 0 0 var(--ai-phone-mark);background:var(--ai-phone-selected)}
/* A medium screen keeps the menu on one row by drawing it slightly closer. At
   1100 pixels and narrower the menu opens from one button instead, with room to
   spare for the wider system fonts some computers use. */
@media (max-width:1240px){
  .ai-menu{gap:2px;margin:0 -9px}
  .ai-menu a{padding:0 9px;font-size:13.5px}
}
@media (max-width:1100px){
  .ai-bandin{flex-wrap:wrap;padding-block:10px 12px;gap:10px}
  .ai-mission{order:3;width:100%;text-align:left}
  .ai-mobile{display:block;margin-left:auto}
  .ai-menu{display:none}
  .ai-row:not(:has(nav.section:not([hidden]))){display:none}
  .ai-hdr nav.section{border-top:0}
}
@media (max-width:600px){
  .ai-plate{padding:7px 0}
  .ai-logo{height:20px}
}
@media print{
  .ai-band{background:none!important}
  .ai-bandin{padding-block:0 8px}
  .ai-mission{color:#000000}
  .ai-edge,.ai-row,.ai-mobile{display:none!important}
  body.ai-dash > .ai-hdr,body.ai-flat > .ai-hdr{display:none!important}
}