/* ═══════════════════════════════════════════════════════════
   MTWM AI READINESS FRAMEWORK — interactive component
   Added 2026-08-02. Source: mtwm-framework-3a.html (Claude design canvas).

   Extracted from the source file's inline <style> block for two reasons:
   1. Keeps the component in one place for both pages that use it.
   2. The demo file's global `body{}` and `a{}` rules were removed/scoped so
      they cannot leak into the rest of the site.

   All selectors are prefixed .mtwm- and cannot collide with site styles.
   Used by: index.html (#framework), mtwmframework.html (What It Measures).
   ═══════════════════════════════════════════════════════════ */
.mtwm{max-width:1160px;margin:0 auto;padding:32px 20px;}
  .mtwm *{box-sizing:border-box;}
  .mtwm-card{background:#FDFCFA;border:1px solid rgba(14,26,20,0.1);padding:28px;}
  .mtwm-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;}
  .mtwm-eyebrow{font-size:11px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:#4A5C50;}
  .mtwm-question{font-family:Georgia,serif;font-size:22px;line-height:1.3;margin-top:6px;max-width:460px;}
  .mtwm-statebtns{display:flex;gap:8px;}
  .mtwm-statebtns button{text-align:left;border:1px solid rgba(14,26,20,0.3);cursor:pointer;background:#FDFCFA;color:#0E1A14;font-family:inherit;padding:10px 16px;min-width:200px;transition:background 120ms cubic-bezier(0.2,0.7,0.2,1);}
  .mtwm-statebtns button[aria-pressed="true"]{background:#0E1A14;color:#FDFCFA;}
  .mtwm-statebtns .mtwm-stlabel{display:block;font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;}
  .mtwm-statebtns .mtwm-stgloss{display:block;font-size:12px;margin-top:2px;color:#4A5C50;}
  .mtwm-statebtns button[aria-pressed="true"] .mtwm-stgloss{color:rgba(253,252,250,0.85);}
  .mtwm-coh{display:block;width:100%;margin-top:8px;border:1px solid rgba(14,26,20,0.25);background:#F7F5F1;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;color:#317F87;padding:9px 14px;text-align:center;}
  .mtwm-banner{border:1px solid rgba(14,26,20,0.12);background:#F7F5F1;padding:14px 18px;margin-top:18px;}
  .mtwm-banner .mtwm-viglabel{color:#4A5C50;}
  .mtwm-banner p{margin:4px 0 0;font-size:13px;line-height:1.55;max-width:820px;}
  .mtwm-areas{display:flex;flex-direction:column;gap:18px;margin-top:18px;}
  .mtwm-areahead{color:#FFFFFF;padding:11px 16px;display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;}
  .mtwm-areahead .mtwm-tag{font-size:10px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;margin-right:10px;}
  .mtwm-areahead .mtwm-name{font-family:Georgia,serif;font-size:15.5px;}
  .mtwm-areahead .mtwm-q{font-family:Georgia,serif;font-style:italic;font-size:12.5px;}
  .mtwm-row{display:flex;align-items:stretch;gap:8px;margin-top:8px;}
  .mtwm-tile{flex:1;min-width:0;display:flex;flex-direction:column;border:1px solid rgba(14,26,20,0.1);}
  .mtwm-tile > button{text-align:left;border:0;cursor:pointer;color:#000000;padding:11px 13px;font-family:inherit;font-size:12.5px;font-weight:600;line-height:1.35;}
  .mtwm-line{padding:11px 13px;font-size:12.5px;line-height:1.55;flex:1;}
  .mtwm-detail{border-top:1px solid rgba(14,26,20,0.1);padding:11px 13px;display:flex;flex-direction:column;gap:9px;}
  .mtwm-detail[hidden]{display:none;}
  .mtwm-viglabel{font-size:9.5px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#4A5C50;}
  .mtwm-detail p{margin:3px 0 0;font-size:12px;line-height:1.55;}
  .mtwm-detail .mtwm-vigp{font-style:italic;color:#4A5C50;}
  .mtwm-detail .mtwm-vigblock{border-top:1px solid rgba(14,26,20,0.1);padding-top:9px;}
  .mtwm-foot{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-top:18px;border-top:1px solid rgba(14,26,20,0.1);padding-top:12px;}
  .mtwm-foot .mtwm-cta{margin:0;font-size:12.5px;color:#4A5C50;}
  .mtwm-foot .mtwm-note{margin:0;font-size:11px;font-style:italic;color:#4A5C50;}
  .mtwm button:focus-visible{outline:2px solid #0E1A14;outline-offset:2px;}
  .mtwm-tile > button:focus-visible{outline-offset:-2px;}
  .mtwm a{color:#317F87;} .mtwm a:visited{color:#6F7D6B;} .mtwm a:hover{color:#008080;}
  /* Gate-and-reveal controls, added 2026-08-03 */
  .mtwm-next{display:block;margin:18px auto 0;border:1px solid #0E1A14;background:#0E1A14;color:#FDFCFA;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;letter-spacing:0.02em;padding:12px 22px;transition:background 120ms cubic-bezier(0.2,0.7,0.2,1);}
  .mtwm-next:hover{background:#317F87;border-color:#317F87;}
  .mtwm-allink{display:block;margin:10px auto 0;background:none;border:0;cursor:pointer;font-family:inherit;font-size:11.5px;color:#4A5C50;text-decoration:underline;}
  .mtwm-allink:hover{color:#317F87;}
  @media (max-width:760px){
    .mtwm-row{flex-direction:column;}
    .mtwm-areahead{flex-direction:column;align-items:flex-start;gap:4px;}
    .mtwm-head{flex-direction:column;align-items:flex-start;}
    .mtwm-statebtns{width:100%;flex-wrap:wrap;}
    .mtwm-statebtns button{flex:1;min-width:160px;}
  }
  @media (prefers-reduced-motion: reduce){.mtwm *{transition:none !important;animation:none !important;}}