/* ============================================================
   Systemic Investing Commons · Emerging Field Beta
   styles.css — base type, the reused Ecosystem Role Map
   component, and the contribution/snapshot styles.
   ============================================================ */

html { font-size: 17px; }

/* --- the type scale --------------------------------------
   One ladder, used by both syntaxes: these variables and the
   matching fontSize overrides in tailwind.config (commons.js).
   text-sm in markup and var(--fs-sm) in CSS are the same size.
   Expressed in rem so browser text zoom still works.
   Root stays 17px, per the brand book.
   --------------------------------------------------------- */
:root{
  --fs-xs:   0.80rem;   /* 13.6px · eyebrows, meta, micro labels */
  --fs-sm:   0.90rem;   /* 15.3px · captions, panel definitions  */
  --fs-base: 1.00rem;   /* 17px   · default reading text         */
  --fs-lg:   1.12rem;   /* 19px   · lead paragraphs              */
  --fs-xl:   1.30rem;   /* 22px   · card titles                  */
}

body {
  font-family: 'Montserrat', 'Noto Sans TC', sans-serif;
  background-color: #FAF7F0;
  color: #1F2A2E;
  -webkit-font-smoothing: antialiased;
}
.font-display { font-family: 'Montserrat', 'Noto Sans TC', sans-serif; font-weight: 600; }

/* EXCEPTION: hero title and nav wordmark keep the serif identity */
.hero-serif       { font-family: 'Newsreader', serif !important; font-weight: 500 !important; }
.hero-serif-light { font-family: 'Newsreader', serif !important; font-weight: 300 !important; }

:focus-visible { outline: 3px solid #D4A547; outline-offset: 2px; border-radius: 4px; }
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* --- the page container ---------------------------------
   Wider than Tailwind's max-w-7xl. The maps, the role picker and
   the Field Pulse charts all want the room, and at 1280 the right
   third of a normal desktop sat empty. Prose still wraps at
   max-w-3xl, because line length is a reading rule, not a
   whitespace one. ------------------------------------------ */
.wrap{max-width:1560px;margin:0 auto;padding:0 24px;}
/* Section openers used to stop about two-thirds across and leave the rest
   of the row empty. They fill the width now, but as two columns rather
   than one long line: the heading takes the left, the prose the right, so
   the measure stays around 70 characters instead of running to 180.
   Below 960px it is a single column again, exactly as it was. */
/* The closing card is a link, so the whole two-column block is the
   target rather than just the button inside it. */
.next-step{ display:grid; gap:8px clamp(28px,3.4vw,72px); align-items:start;
  grid-template-columns:minmax(0,1fr); text-decoration:none; color:inherit; }
@media (min-width:960px){ .next-step{ grid-template-columns:minmax(0,1.04fr) minmax(0,1fr); } }

.lede{ display:grid; gap:0 clamp(28px,3.4vw,72px); align-items:start; grid-template-columns:minmax(0,1fr); }
@media (min-width:960px){
  .lede{ grid-template-columns:minmax(0,1.04fr) minmax(0,1fr); }
  .lede > :first-child{ grid-column:1; grid-row:1 / span 99; margin-bottom:0; }
  .lede > :first-child + *{ margin-top:0; }
  .lede > :not(:first-child){ grid-column:2; }
  /* An aside is not part of the right-hand column: it belongs to the
     whole opener, so it runs the full width underneath both. */
  .lede > .emerging-note{ grid-column:1 / -1; grid-row:auto; margin-top:28px; }
}

@media (max-width:420px){ .wrap{padding:0 18px;} }
@media (min-width:1024px){ .wrap{padding:0 48px;} }


/* --- the nav -------------------------------------------------
   Measured, not guessed: with five links the row needs about 1000px.
   1000 to 1140 is the tight band, where the links fit only at the small
   size with less air between them; 1140 to 1320 is the middle tier.
   Below 1000 the row cannot hold them and the menu button takes over.
   ------------------------------------------------------------ */
.nav-links{ display:none; align-items:center; gap:28px; font-size:var(--fs-base); }
.nav-toggle{ display:flex; }
@media (min-width:1000px){
  .nav-links{ display:flex; }
  .nav-toggle{ display:none; }
  .nav-mobile{ display:none !important; }
}
.nav-links a{ white-space:nowrap; }
@media (min-width:1000px) and (max-width:1140px){
  .nav-links{ gap:14px; font-size:var(--fs-xs); }
  .nav-resources{ padding-left:12px; margin-left:0; }
}
@media (min-width:1140px) and (max-width:1320px){
  .nav-links{ gap:20px; font-size:var(--fs-sm); }
}

/* On a phone the row holds only the wordmark, the button and the menu,
   and "Guided walkthrough" is too long a label to fit beside them.
   The button keeps its job and drops a word. */
.nav-cta{ font-size:var(--fs-sm); padding:10px 20px; }
.nav-cta-short{ display:none; }
@media (max-width:660px){
  .nav-cta-long{ display:none; }
  .nav-cta-short{ display:inline; }
  .nav-cta{ font-size:var(--fs-xs); padding:9px 16px; }
  nav .hero-serif{ font-size:1.02rem; }
}
/* The wordmark is the widest thing in the row, so it is what has to give
   as the phone narrows. These sizes are measured against the row, not
   picked: at 375px the row fits at 0.78rem and overflows at 0.85rem. */
@media (max-width:470px){
  nav .hero-serif{ font-size:0.88rem; }
  .nav-cta{ padding:8px 14px; }
}
/* Under 400px the row cannot hold all three without shrinking the
   wordmark past reading size. The button gives way instead: it is the
   first item in the menu, one tap away, and the brand stays legible. */
@media (max-width:400px){
  .nav-cta{ display:none; }
  nav .hero-serif{ font-size:0.95rem; }
}

/* --- a note the whole site uses to stay honest about coverage --- */
.emerging-note {
  border-left: 4px solid #6B4423;
  background: rgba(107,68,35,0.05);
  padding: 16px 20px; border-radius: 0 12px 12px 0;
  font-size: var(--fs-base); line-height: 1.65; color: #3B4A4F;
}
.emerging-note b { color: #1F2A2E; }

/* ============ Ecosystem Role Map (ported from Role Builder v39) ============ */
/* The map used to sit in a 1fr column beside a 340px sidebar, which made
   it a third narrower than the page and left a tall band of empty paper
   under the sidebar. The map takes the whole width now and the two
   supporting boxes sit above it, side by side. */
.rm-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start;}
/* The two boxes are a pair, so they share a baseline and a bottom edge
   rather than each ending wherever its own text runs out. */
.rm-side{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:stretch;}
@media (min-width:900px){ .rm-side{grid-template-columns:minmax(0,1fr) minmax(0,1fr);} }
.rm-def{background:#fff;border:1.5px solid rgba(31,42,46,0.12);border-radius:14px;padding:20px 22px;min-height:150px;transition:border-color .15s;}
.rm-def-eyebrow{font-size:var(--fs-xs);font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:#5F6D72;margin:0 0 7px;}
.rm-def-name{font-size:var(--fs-xl);font-weight:600;line-height:1.25;margin:0 0 8px;}
.rm-def-body{font-size:var(--fs-base);color:#3B4A4F;line-height:1.6;margin:0;}
.rm-def-empty{font-style:italic;color:#5F6D72;}
.rm-levels{background:#fff;border:1px solid rgba(31,42,46,0.10);border-radius:14px;padding:20px 22px;}
.rm-levels-title{font-size:var(--fs-xs);font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:#5F6D72;margin:0 0 10px;}
.rm-levels-title span{font-weight:500;letter-spacing:0.04em;text-transform:none;}
.rm-level{font-size:var(--fs-sm);color:#3B4A4F;line-height:1.55;margin:0 0 9px;padding:5px 8px;border-radius:8px;cursor:default;transition:background .15s;}
.rm-level:last-child{margin-bottom:0;}
.rm-level b{color:#1F2A2E;letter-spacing:0.06em;}
.rm-level:hover,.rm-level.on{background:#F1EBDC;}

.rm-canvas{background:#141210;border:1px solid rgba(31,42,46,0.12);border-radius:16px;overflow:hidden;box-shadow:0 14px 40px rgba(31,42,46,0.14);min-width:0;
  /* Never taller than the screen. The map is 1280 by 620, so its width
     is capped at the height left under the nav times that ratio, and it
     centres when the cap bites. On a narrow screen the cap is moot. */
  width:min(100%, calc((100vh - 225px) * 2.0645)); margin:0 auto;}
.rm-svg{display:block;width:100%;height:auto;}
.rm-box{transition:transform .12s;}
.rm-clickable{cursor:pointer;}
.rm-clickable:hover{transform:translateY(-2px);}
.rm-clickable:focus-visible{outline:3px solid #D4A547;outline-offset:3px;}
.rm-box.rm-active>rect:first-of-type{stroke:#D4A547;stroke-width:4;}
.rm-chip{cursor:pointer;}
.rm-chip:hover rect{fill:rgba(20,16,10,.78);}
.rm-chip-on rect{fill:#4A6741;stroke:#D4A547;stroke-width:2;}

.rm-drawer{margin-top:16px;background:#fff;border:1px solid rgba(31,42,46,0.10);border-radius:16px;padding:22px 24px;}
.rm-drawer-head{border-left:4px solid;padding-left:14px;margin-bottom:18px;}
.rm-drawer-head h3{font-size:var(--fs-xl);font-weight:600;margin:2px 0 7px;}
.rm-section{font-size:var(--fs-xs);font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:#5F6D72;margin:18px 0 9px;}
/* One row per section, however many are in it. Scrolling inside a drawer
   that itself sits inside a page is one nesting too many. */
.rm-drawer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:11px;}
.rm-grid-5{grid-template-columns:repeat(5,1fr);}
.rm-grid-6{grid-template-columns:repeat(6,1fr);}
.rm-grid-7{grid-template-columns:repeat(7,1fr);}
.rm-grid-8{grid-template-columns:repeat(8,1fr);}
@media (max-width:1100px){
  .rm-grid-5,.rm-grid-6,.rm-grid-7,.rm-grid-8{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));}
}
.rm-item{border:1px solid rgba(31,42,46,0.10);border-left:4px solid;border-radius:12px;padding:12px 14px;background:#FAF7F0;}
.rm-item b{display:block;font-size:var(--fs-base);margin-bottom:3px;}
.rm-item em{display:block;font-size:var(--fs-xs);color:#5F6D72;font-style:italic;margin-bottom:5px;}
.rm-item span{display:block;font-size:var(--fs-sm);color:#3B4A4F;line-height:1.55;}
.rm-item .rm-details{margin-top:6px;font-size:var(--fs-xs);color:#5F6D72;}

@media (max-width:980px){
  /* On a narrow screen the map scrolls sideways. */
  .rm-side{grid-template-columns:1fr;}
  .rm-canvas{overflow-x:auto;width:100%;}
  .rm-svg{min-width:820px;}
}

/* ============ Contribution form ============ */
.chip {
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  border:1px solid rgba(31,42,46,0.15); background:#fff; border-radius:999px;
  padding:11px 18px; font-size:var(--fs-base); line-height:1.2; transition:all .15s;
  min-height:44px;
}
.chip:hover { border-color:#4B9DA5; }
.chip input { position:absolute; opacity:0; width:0; height:0; }
.chip.on { background:#4A6741; border-color:#4A6741; color:#FAF7F0; }
.chip.on .chip-sub { color:rgba(250,247,240,0.75); }
.chip.disabled { opacity:.4; cursor:not-allowed; }
.chip-sub { font-size:var(--fs-xs); color:#5F6D72; }

.field-label { display:block; font-size:var(--fs-base); font-weight:600; margin-bottom:8px; }
.field-help  { font-size:var(--fs-base); color:#3B4A4F; line-height:1.6; margin-bottom:14px; }
.field-input {
  width:100%; border:1px solid rgba(31,42,46,0.15); border-radius:12px;
  padding:13px 16px; font-family:inherit; font-size:var(--fs-lg); background:#fff; color:#1F2A2E;
}
.field-input:focus { border-color:#4B9DA5; outline:none; box-shadow:0 0 0 3px rgba(75,157,165,0.15); }
.count-hint { font-size:var(--fs-sm); color:#5F6D72; }
.count-hint.maxed { color:#A63D3D; font-weight:600; }

/* ============ Snapshot card ============ */
.snapshot {
  background:linear-gradient(158deg,#FAF7F0 0%,#F1EBDC 62%,#E9DEC6 100%);
  border:1px solid rgba(31,42,46,0.14); border-radius:20px;
  padding:38px 34px 30px; position:relative; overflow:hidden;
  box-shadow:0 18px 50px rgba(31,42,46,0.13);
}
.snapshot::after {
  content:''; position:absolute; right:-70px; bottom:-70px; width:250px; height:250px;
  border-radius:50%; background:radial-gradient(circle,rgba(75,157,165,0.13),transparent 70%);
}
.snap-eyebrow { font-size:var(--fs-xs); letter-spacing:0.22em; text-transform:uppercase; color:#5F6D72; font-weight:600; }
.snap-title { font-family:'Newsreader',serif; font-weight:500; font-size:31px; line-height:1.15; margin:9px 0 4px; }
.snap-sub { font-size:var(--fs-sm); color:#3B4A4F; }
.snap-row { border-top:1px dashed rgba(31,42,46,0.18); padding:13px 0; position:relative; z-index:1; }
.snap-key { font-size:var(--fs-xs); letter-spacing:0.18em; text-transform:uppercase; color:#5F6D72; font-weight:600; margin-bottom:5px; }
.snap-val { font-size:var(--fs-lg); line-height:1.55; }
.snap-pill {
  display:inline-block; border-radius:999px; padding:3px 11px; font-size:var(--fs-sm);
  margin:0 5px 5px 0; background:rgba(31,42,46,0.06); border:1px solid rgba(31,42,46,0.10);
}
.snap-pill.offer { background:rgba(74,103,65,0.13); border-color:rgba(74,103,65,0.30); color:#3A5233; }
.snap-pill.need  { background:rgba(194,71,71,0.11); border-color:rgba(194,71,71,0.28); color:#A63D3D; }
.snap-pill.lp    { background:rgba(212,165,71,0.16); border-color:rgba(212,165,71,0.38); }
.snap-foot { border-top:1px solid rgba(31,42,46,0.14); margin-top:16px; padding-top:14px; display:flex; justify-content:space-between; align-items:baseline; gap:12px; }

/* ============ Storyline explorer ============ */
.sl-chip{padding:9px 18px;border-radius:999px;border:1px solid rgba(31,42,46,0.2);background:transparent;
  font-size:var(--fs-sm);font-weight:500;color:#4a5558;cursor:pointer;transition:all .2s;
  font-family:'Montserrat','Noto Sans TC',sans-serif;min-height:40px;}
.sl-chip:hover{border-color:#4B9DA5;color:#4B9DA5;}
.sl-chip.active{background:#4B9DA5;border-color:#4B9DA5;color:#FAF7F0;}
.sl-chip-n{display:inline-block;min-width:1.35em;margin-right:.5em;font-weight:700;opacity:.55;}
.sl-chip.active .sl-chip-n{opacity:.8;}
.sl-zoom.zooming{animation:slZoom .5s ease;}
@keyframes slZoom{0%{opacity:0;transform:scale(1.03);}100%{opacity:1;transform:scale(1);}}

/* The barriers keep the chip they always were; the description opens
   underneath the one you clicked instead of somewhere else on the page. */
.sl-barrier-list{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;}
.sl-barrier{display:inline-block;padding:4px 11px;border-radius:999px;font-size:var(--fs-xs);font-weight:500;
  background:#F0EBF8;color:#5B4A8F;border:1px solid rgba(128,105,184,0.28);}
.sl-barrier-fold{flex:0 1 auto;max-width:100%;}
.sl-barrier-fold>summary{list-style:none;cursor:pointer;user-select:none;padding-right:24px;position:relative;}
.sl-barrier-fold>summary::-webkit-details-marker{display:none;}
.sl-barrier-fold>summary::after{content:'';position:absolute;right:10px;top:50%;width:5px;height:5px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-70%) rotate(45deg);transition:transform .18s ease;}
.sl-barrier-fold[open]>summary::after{transform:translateY(-30%) rotate(-135deg);}
.sl-barrier-fold>summary:hover{background:#E7DFF5;}
.sl-barrier-fold[open]{flex:1 1 100%;}
.sl-barrier-fold[open]>summary{background:#E7DFF5;}
.sl-barrier-body{margin-top:8px;padding:12px 14px;border-radius:12px;background:#F7F4FC;
  border:1px solid rgba(128,105,184,0.22);font-size:var(--fs-sm);line-height:1.6;color:var(--ink-soft);}
.sl-barrier-ex{margin-top:6px;font-style:italic;color:#5B4A8F;}
.sl-lp{display:inline-block;padding:4px 11px;border-radius:999px;font-size:var(--fs-xs);font-weight:600;
  background:#FBECEC;color:#A63D3D;border:1px solid rgba(194,71,71,0.3);}
.sl-lp-detail{border-top:1px dashed rgba(31,42,46,0.18);margin-top:14px;padding-top:14px;}
.sl-lp-meta{display:flex;justify-content:space-between;gap:10px;font-size:var(--fs-xs);font-weight:600;
  letter-spacing:0.12em;text-transform:uppercase;color:#5F6D72;margin-bottom:6px;}
.sl-lp-ctx{font-size:var(--fs-sm);color:#1F2A2E;line-height:1.6;}

/* The diagram, following how Kumu itself renders a storyline: the whole
   map stays on screen and the inactive parts fade back, rather than
   disappearing. The circle is always there, so the active layer reads as
   a path through something, not as a handful of loose labels.

   Active nodes and edges are also moved to the end of their group in JS,
   so they paint over the faded ones instead of under them. */
#sl-diagram{background:#fff;}
.cld-node{opacity:.11;transition:opacity .5s ease;}
.cld-node.on{opacity:1;}
.cld-link{opacity:.07;transition:opacity .5s ease;}
.cld-link.on{opacity:1;}
.cld-node.cld-stock{opacity:.22;}
.cld-node.cld-stock.on{opacity:1;}
@media (prefers-reduced-motion: reduce){
  .cld-node,.cld-link{transition:none;}
}

/* ============ Leverage point picker ============ */
/* The detail panel had the wide column and the eighteen chips were
   squeezed into 320px, so choosing meant scrolling a narrow strip. The
   chips get the width now; the panel only ever holds one definition. */
.lp-picker-layout{display:grid;grid-template-columns:320px minmax(0,1fr);gap:20px;align-items:start;}
.lp-cat{margin-bottom:13px;}
.lp-cat:last-child{margin-bottom:0;}
.lp-cat-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin:0 0 7px;}
.lp-cat-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;align-self:center;}
.lp-cat-name{font-size:var(--fs-base);font-weight:600;color:#1F2A2E;}
.lp-cat-tag{font-size:var(--fs-sm);font-style:italic;}
.lp-tag-grid{display:flex;flex-wrap:wrap;gap:5px;align-content:flex-start;}
.lp-tag-chip{
  display:inline-flex;align-items:center;gap:7px;padding:7px 12px 7px 10px;
  border:1px solid rgba(31,42,46,0.10);border-radius:999px;font-size:var(--fs-sm);cursor:pointer;
  background:#fff;transition:all .12s;line-height:1.3;max-width:100%;min-height:34px;
  font-family:inherit;text-align:left;
}
.lp-tag-chip:hover{border-color:var(--cat,rgba(31,42,46,0.22));}
.lp-tag-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--cat,#5F6D72);}
.lp-tag-num{font-size:var(--fs-xs);color:#5F6D72;font-weight:500;}
.lp-tag-name{color:#1F2A2E;}
.lp-tag-chip.selected{background:var(--cat-bg,#E1F1F3);border-color:var(--cat,#4B9DA5);}
.lp-tag-chip.selected .lp-tag-name{color:#1F2A2E;font-weight:500;}

.lp-info-panel{position:sticky;top:100px;border:1px solid rgba(31,42,46,0.10);border-radius:14px;
  background:#F1EBDC;padding:16px 18px;font-size:var(--fs-base);line-height:1.55;min-height:200px;}
.lp-info-panel.loaded{background:#fff;border-width:1.5px;}
.lp-info-head{display:flex;justify-content:space-between;gap:10px;font-size:var(--fs-xs);font-weight:600;
  color:#5F6D72;letter-spacing:0.09em;text-transform:uppercase;margin-bottom:6px;}
.lp-info-name{font-size:var(--fs-lg);font-weight:600;color:#1F2A2E;margin-bottom:8px;line-height:1.3;}
.lp-info-context{font-size:var(--fs-sm);color:#1F2A2E;line-height:1.6;margin-bottom:7px;}
.lp-info-ex{font-size:var(--fs-xs);color:#5F6D72;font-style:italic;line-height:1.5;}
.lp-barrier{margin-top:12px;padding:11px 13px;border-radius:10px;background:#F0EBF8;}
.lp-barrier-head{font-size:var(--fs-xs);font-weight:600;letter-spacing:0.13em;text-transform:uppercase;color:#5B4A8F;margin:0 0 4px;}
.lp-barrier-name{font-size:var(--fs-base);font-weight:600;color:#5B4A8F;margin:0 0 5px;}
.lp-barrier-def{font-size:var(--fs-sm);color:#3B4A4F;line-height:1.55;margin:0 0 5px;}
.lp-info-handbook{font-size:var(--fs-xs);color:#5F6D72;line-height:1.55;padding-top:9px;margin-top:11px;
  border-top:1px dashed rgba(31,42,46,0.15);}
.lp-info-default-text{font-size:var(--fs-sm);color:#5F6D72;font-style:italic;line-height:1.55;margin-bottom:10px;}
@media (max-width:900px){
  .lp-picker-layout{grid-template-columns:1fr;}
  .lp-info-panel{position:static;min-height:0;margin-top:10px;}
}

/* --- a leverage point, folded ---------------------------------
   The triangle sits beside the term and the box opens under it, so
   nothing makes the reader look back up the page to find what they
   just asked for. */
.lp-fold{border-top:1px solid rgba(31,42,46,0.08);}
.lp-fold:first-child{border-top:0;}
.lp-fold > summary{
  cursor:pointer; list-style:none; display:flex; gap:8px; align-items:baseline;
  padding:7px 0; font-size:var(--fs-sm); font-weight:500; color:#1F2A2E;
}
.lp-fold > summary::-webkit-details-marker{display:none;}
.lp-fold > summary::before{
  content:'▸'; flex:0 0 auto; color:#5F6D72; font-size:var(--fs-xs);
  transition:transform .15s; transform-origin:center;
}
.lp-fold[open] > summary::before{ content:'▾'; }
.lp-fold > summary:hover{ color:#4B9DA5; }
.lp-fold-n{ color:#5F6D72; font-variant-numeric:tabular-nums; min-width:1.5em; }
.lp-fold-body{
  font-size:var(--fs-xs); color:#3B4A4F; line-height:1.6;
  padding:2px 0 12px 26px;
}
.lp-fold-body p{ margin:0 0 6px; }
.lp-fold-ex{ color:#5F6D72; font-style:italic; }
.lp-fold-barrier{ margin-top:9px; padding:9px 11px; border-radius:9px; background:#F0EBF8; }
.lp-fold-barrier-head{ font-size:10px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:#5B4A8F; margin:0 0 3px !important; }
.lp-fold-barrier-name{ font-weight:600; color:#5B4A8F; margin:0 0 4px !important; }

/* --- Find My Place ------------------------------------------- */

/* B12 · the instruction was being skipped, so it gets a ground of its own */
.field-note{
  font-size:var(--fs-sm); color:#3B4A4F; line-height:1.65;
  background:#F1EBDC; border-radius:12px; padding:16px 20px;
  margin:0 0 18px;
}

/* B14 · a rail saying which part you are in and how much is left */
/* A column of dots in the left margin, and nothing else until you point
   at it. The labels used to sit in the rail's flow, so an invisible label
   still reserved its width and the rail ran 152px into the page. They are
   overlaid now, and the rail is as wide as a dot. */
.progress-rail{
  /* On the right-hand edge of the page, clear of the content column. The
     left gutter is where the reading starts, and a column of dots sitting
     in it collided with every heading on the page. */
  position:fixed; right:max(16px, calc((100vw - 1560px) / 2 + 18px));
  top:50%; transform:translateY(-50%); z-index:40;
  display:none; flex-direction:column; gap:4px; width:11px;
}
@media (min-width:1100px){ .progress-rail{ display:flex; } }
.progress-dot{ display:block; position:relative; padding:5px 0; text-decoration:none; }
.progress-dot-mark{
  display:block; width:9px; height:9px; border-radius:50%;
  background:rgba(31,42,46,0.20); transition:background .25s, transform .25s;
}
.progress-dot.on .progress-dot-mark{ background:#4B9DA5; transform:scale(1.3); }
.progress-dot:hover .progress-dot-mark{ background:rgba(31,42,46,0.45); }
.progress-dot-label{
  /* opens toward the page, so it never runs off the right edge */
  position:absolute; right:19px; top:50%; transform:translateY(-50%) translateX(4px);
  font-size:var(--fs-xs); color:#1F2A2E; white-space:nowrap; pointer-events:none;
  background:var(--paper,#FAF7F0); padding:3px 9px; border-radius:999px;
  border:1px solid rgba(31,42,46,0.12); box-shadow:0 2px 10px rgba(31,42,46,0.10);
  opacity:0; transition:opacity .18s, transform .18s;
}
.progress-dot:hover .progress-dot-label,
.progress-dot:focus-visible .progress-dot-label{ opacity:1; transform:translateY(-50%); }

/* the family panel beside the map */
.role-panel{
  background:#fff; border:1px solid rgba(31,42,46,0.10); border-left:4px solid;
  border-radius:16px; padding:20px 22px;
}
.chip-tick{ color:inherit; margin-right:6px; font-weight:700; }
.link-chip{
  background:none; border:0; padding:4px 0; margin-right:14px; cursor:pointer;
  font-family:inherit; font-size:var(--fs-sm); color:#4B9DA5; text-decoration:underline;
  text-underline-offset:3px;
}
.link-chip:hover{ color:#4A6741; }

/* B16 · visibility reads as three cards, not a stack of radios */
.vis-card{
  display:block; text-align:left; cursor:pointer; font-family:inherit;
  background:#fff; border:1px solid rgba(31,42,46,0.12); border-radius:16px;
  padding:16px 18px; transition:all .15s;
}
.vis-card:hover{ border-color:#4B9DA5; }
.vis-card.on{ border-color:#4A6741; background:rgba(74,103,65,0.07); border-width:2px; }
/* The connection question is the same kind of choice as the three above
   it, so it gets the same box rather than a pill of its own. */
.vis-card--wide{ display:flex; gap:12px; align-items:flex-start; width:100%; margin-bottom:0; }
.vis-card--wide input{ margin-top:3px; width:17px; height:17px; accent-color:#4A6741; flex:0 0 auto; }
.vis-name{ display:block; font-weight:600; font-size:var(--fs-base); margin-bottom:5px; }
.vis-def{ display:block; font-size:var(--fs-xs); color:#3B4A4F; line-height:1.55; }

/* an insight is a claim with its caveat attached, not a chart */
.insight{
  background:#fff; border:1px solid rgba(31,42,46,0.10);
  border-left:4px solid #4B9DA5; border-radius:16px; padding:20px 22px;
}
.insight h3{ font-size:var(--fs-lg); font-weight:600; line-height:1.35; margin:0 0 8px; }
.insight p{ font-size:var(--fs-sm); color:#3B4A4F; line-height:1.65; margin:0; }

/* The five categories as a plate, built from data.js. Five columns
   with an arrow between each, the way the deck draws them. */
.five{ background:#fff; border:1px solid rgba(31,42,46,0.12); border-radius:16px; padding:22px 24px 20px;
  box-shadow:0 14px 40px rgba(31,42,46,0.08); }
.five-lede{ font-size:var(--fs-sm); color:#5F6D72; margin:0 0 16px; }
.five-cols{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px; align-items:stretch; }
@media (min-width:1024px){ .five-cols{ grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); gap:6px; } }
.five-col{ background:var(--bg); border:1px solid rgba(31,42,46,0.08); border-radius:12px; padding:16px 16px 18px; min-width:0; }
.five-cue{ display:flex; align-items:center; gap:8px; font-size:0.7rem; font-weight:700; letter-spacing:0.18em; color:var(--c); margin:0 0 8px; }
.five-num{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%;
  background:var(--c); color:#fff; font-size:0.72rem; letter-spacing:0; }
.five-col h3{ font-size:var(--fs-lg); font-weight:600; line-height:1.25; margin:0 0 6px; min-height:2.5em; }
.five-q{ font-size:var(--fs-xs); font-style:italic; color:#5F6D72; margin:0 0 12px; min-height:2.6em; }
.five-tag{ font-size:var(--fs-sm); font-weight:600; color:var(--c); margin:0 0 8px; padding-bottom:8px; border-bottom:1px solid rgba(31,42,46,0.12); }
.five-col ol{ list-style:none; margin:0; padding:0; }
.five-col li{ display:flex; gap:7px; font-size:var(--fs-xs); line-height:1.4; color:#1F2A2E; margin:0 0 5px; }
.five-col li span{ flex:0 0 auto; color:#5F6D72; font-variant-numeric:tabular-nums; min-width:1.4em; }
.five-arrow{ display:none; align-self:center; color:#5F6D72; font-size:1.2rem; }
@media (min-width:1024px){ .five-arrow{ display:block; } }
.five-line{ margin:16px 0 0; padding:12px 16px; border-radius:10px; background:#FBECEC; font-size:var(--fs-sm); line-height:1.55; color:#1F2A2E; }
.five-line b{ color:#A63D3D; }

/* The three labels above the opening paragraphs. They were set at the
   smallest size on the page, which put them below the body text they are
   supposed to introduce. A tinted plate and a step up in size make them
   read as headings rather than as captions. */
.section-tag{
  display:inline-block; margin:0 0 10px;
  font-size:var(--fs-sm); font-weight:700; letter-spacing:0.13em;
  text-transform:uppercase; color:#6B4423;
  background:#F1EBDC; border-radius:7px; padding:6px 13px;
}

/* ============ Find My Place · the four steps ============ */
.step-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:12px 14px; margin-bottom:10px; }
.step-num{
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:34px; height:34px; border-radius:50%; align-self:center;
  background:#1F2A2E; color:#FAF7F0; font-weight:700; font-size:var(--fs-sm);
}
.step-head .count-hint{ margin-left:auto; }
.step-note{ font-size:var(--fs-sm); color:#3B4A4F; line-height:1.6; margin:0 0 18px; max-width:72ch; }

.chip-sm{ padding:8px 14px; font-size:var(--fs-sm); min-height:38px; gap:6px; }
.chip-xs{ padding:5px 11px; font-size:var(--fs-xs); min-height:30px; gap:5px; border-color:rgba(31,42,46,0.12); }
.chip-xs.on{ background:#3B4A4F; border-color:#3B4A4F; }

/* the map and its family panel, side by side. The map keeps the same
   1280 by 620 canvas, at about 60 percent of the width, so the whole
   step fits one screen. */
.role-stage{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-items:start; }
@media (min-width:1024px){
  .role-stage{ grid-template-columns:minmax(0,1.45fr) minmax(360px,1fr); gap:20px; }
  .role-stage .rm-canvas{ width:100%; }
}
.role-stage .rm-layout{ display:block; }
.role-panel{
  background:#fff; border:1px solid rgba(31,42,46,0.10); border-left:4px solid;
  border-radius:16px; padding:14px 18px 16px; min-height:0;
}
.role-tabs{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; }
.role-tab{
  font-family:inherit; font-size:var(--fs-xs); font-weight:600; cursor:pointer;
  border:1px solid rgba(31,42,46,0.14); background:#fff; border-radius:999px; padding:6px 12px;
  color:#3B4A4F; display:inline-flex; align-items:center; gap:6px; transition:all .12s;
}
.role-tab:hover{ border-color:var(--fam); color:var(--fam); }
.role-tab.on{ background:var(--fam); border-color:var(--fam); color:#fff; }
.role-tab-n{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px;
  border-radius:999px; background:rgba(255,255,255,0.28); font-size:0.7rem; }
.role-tab:not(.on) .role-tab-n{ background:var(--fam); color:#fff; }
.role-fam-blurb{ font-size:var(--fs-xs); color:#5F6D72; line-height:1.5; margin:0 0 10px; }
.role-sec{ font-size:var(--fs-xs); font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:#5F6D72; margin:12px 0 7px; }
.role-sub{ margin-top:12px; padding:10px 12px; border-radius:10px; background:#F1EBDC; }
.role-sub-head{ font-size:var(--fs-sm); font-weight:600; margin:0 0 7px; }
.role-sub-head span{ font-weight:400; color:#5F6D72; }
.role-chosen{ margin-top:14px; padding-top:12px; border-top:1px dashed rgba(31,42,46,0.15); }

/* capital, as two rows of chips */
.cap-rows{ display:grid; gap:12px; }
.cap-row{ display:grid; grid-template-columns:minmax(0,1fr); gap:6px 16px; align-items:start; }
@media (min-width:760px){ .cap-row{ grid-template-columns:130px minmax(0,1fr); } }
.cap-row-label{ font-size:var(--fs-sm); font-weight:600; margin:0; padding-top:9px; }
.chip-offer.on{ background:#4A6741; border-color:#4A6741; }
.chip-need.on{ background:#C24747; border-color:#C24747; }

/* one small box per chosen leverage point */
.iv-list{ display:grid; gap:12px; grid-template-columns:minmax(0,1fr); align-items:start; }
@media (min-width:900px){ .iv-list{ grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); } }
.iv-card{ background:#fff; border:1px solid rgba(31,42,46,0.10); border-left:4px solid; border-radius:14px; padding:12px 14px 14px; }
.iv-label{ display:flex; align-items:baseline; gap:8px; font-size:var(--fs-sm); font-weight:600; margin-bottom:8px; }
.iv-num{ font-size:var(--fs-xs); color:#5F6D72; font-variant-numeric:tabular-nums; }
.iv-input{ font-size:var(--fs-sm); padding:10px 12px; }

/* leverage points at the cap */
.lp-tag-chip.capped{ opacity:.45; }
.lp-warning{ font-size:var(--fs-sm); color:#A63D3D; margin:8px 0 0; min-height:1.2em; }

/* ============ Field Pulse · one screen ============
   The dashboard is sized to the viewport on a desktop: a header row,
   the insights, three panels that take whatever height is left, and a
   footer line. Below 1100px it flows like any other page. */
.pulse-main{ padding-top:76px; }
.pulse-frame{ display:grid; grid-template-rows:auto auto auto auto; gap:14px; padding-bottom:20px; }
@media (min-width:1100px){
  .pulse-main{ height:100vh; overflow:hidden; }
  .pulse-frame{ height:calc(100vh - 76px); grid-template-rows:auto auto minmax(0,1fr) auto; padding-bottom:12px; }
}
.pulse-empty{ padding-top:40px; }

.pulse-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px 32px; padding-top:6px; }
.pulse-title{ flex:1 1 520px; min-width:0; }
.pulse-title p{ max-width:62ch; }
.pulse-stats{ display:flex; gap:28px; }
.pulse-stat{ display:flex; align-items:center; gap:10px; }
.pulse-stat-n{ font-size:2.9rem; font-weight:300; line-height:1; font-variant-numeric:tabular-nums; }
.pulse-stat-l{ font-size:var(--fs-xs); color:#3B4A4F; line-height:1.3; }
.pulse-stat-l em{ font-style:normal; font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:#6B4423; font-weight:600; }

.pulse-insights{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.pi{ background:#fff; border:1px solid rgba(31,42,46,0.10); border-left:4px solid #4B9DA5; border-radius:14px; padding:12px 16px 13px; }
.pi-wide{ grid-column:1 / -1; }
.pi-tag{ display:inline-block; font-size:0.7rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:#4B9DA5; margin-bottom:4px; }
.pi h2{ font-size:var(--fs-base); font-weight:600; line-height:1.3; margin:0 0 4px; }
.pi p{ font-size:var(--fs-xs); color:#3B4A4F; line-height:1.5; margin:0; }

.pulse-panels{ display:grid; gap:12px; grid-template-columns:minmax(0,1fr); min-height:0; }
@media (min-width:900px){ .pulse-panels{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.pp{ background:#fff; border:1px solid rgba(31,42,46,0.10); border-radius:14px; padding:14px 16px;
  min-height:0; overflow:auto; display:flex; flex-direction:column; }
.pp h3{ font-size:var(--fs-base); font-weight:600; margin:0; }
.pp-sub{ font-size:var(--fs-xs); color:#5F6D72; margin:2px 0 10px; }
.pp-foot{ font-size:var(--fs-xs); color:#5F6D72; margin:auto 0 0; padding-top:10px; line-height:1.45; }
.pp-foot i{ font-style:normal; font-weight:700; color:#A63D3D; letter-spacing:0.08em; font-size:0.68rem; text-transform:uppercase; }
.pp-empty{ font-size:var(--fs-sm); color:#5F6D72; font-style:italic; margin:6px 0; }

/* the four families in three tiers */
.mm{ display:flex; flex-direction:column; gap:8px; }
.mm-tier{ display:grid; grid-template-columns:44px minmax(0,1fr); gap:8px; align-items:stretch; }
.mm-lvl{ font-size:0.66rem; font-weight:700; letter-spacing:0.14em; color:#5F6D72; align-self:center; }
.mm-row{ display:grid; gap:6px; grid-template-columns:minmax(0,1fr); }
.mm-row-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.mm-block{ border-radius:10px; padding:10px 12px; border:1px solid rgba(31,42,46,0.08); border-left:4px solid var(--fam);
  background:color-mix(in srgb, var(--fam) 9%, #fff); display:grid; grid-template-columns:auto minmax(0,1fr); gap:0 10px; align-items:center; }
.mm-empty{ opacity:.55; }
.mm-n{ grid-row:1 / span 2; font-size:1.7rem; font-weight:600; color:var(--fam); line-height:1; font-variant-numeric:tabular-nums; }
.mm-name{ font-size:var(--fs-xs); font-weight:600; line-height:1.2; }
.mm-top{ font-size:0.7rem; color:#5F6D72; line-height:1.25; }

/* ranked leverage points */
.pp-bars{ display:flex; flex-direction:column; gap:7px; }
.pp-bar{ display:grid; grid-template-columns:minmax(0,1fr) 84px 28px; gap:8px; align-items:center; }
.pp-bar-label{ font-size:var(--fs-xs); line-height:1.25; }
.pp-bar-label b{ color:#5F6D72; font-weight:600; margin-right:3px; }
.pp-bar-track{ height:8px; border-radius:999px; background:rgba(31,42,46,0.06); overflow:hidden; display:block; }
.pp-bar-fill{ display:block; height:100%; border-radius:999px; }
.pp-bar-n{ font-size:var(--fs-xs); text-align:right; font-variant-numeric:tabular-nums; color:#3B4A4F; }

/* offer against need */
.on-rows{ display:flex; flex-direction:column; gap:5px; }
.on-row{ display:grid; grid-template-columns:104px minmax(0,1fr) 44px; gap:8px; align-items:center; }
.on-name{ font-size:var(--fs-xs); font-weight:500; display:flex; align-items:center; gap:6px; }
.on-name i{ font-style:normal; font-size:0.62rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#A63D3D; }
.on-track{ display:flex; flex-direction:column; gap:2px; }
.on-fill{ display:block; height:6px; border-radius:999px; }
.on-fill.on-offer{ background:#4A6741; }
.on-fill.on-need{ background:#C24747; }
.on-n{ font-size:var(--fs-xs); text-align:right; font-variant-numeric:tabular-nums; color:#5F6D72; }
.on-n b{ color:#3A5233; font-weight:600; }
.on-key{ display:inline-block; width:12px; height:6px; border-radius:999px; vertical-align:middle; }
.on-key-offer{ background:#4A6741; } .on-key-need{ background:#C24747; }

.pulse-foot{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 24px;
  font-size:var(--fs-xs); color:#5F6D72; border-top:1px solid rgba(31,42,46,0.08); padding-top:8px; }
.pulse-foot b{ color:#1F2A2E; }
.pulse-text summary{ cursor:pointer; color:#4B9DA5; text-decoration:underline; text-underline-offset:2px; }
.pulse-text div{ margin-top:8px; line-height:1.55; }
.pulse-text div p{ margin:0 0 4px; }
@media (min-width:1100px){
  /* opened, the text version floats over the dashboard rather than
     stretching it past one screen */
  .pulse-text{ position:relative; }
  .pulse-text[open] div{ position:absolute; bottom:calc(100% + 8px); left:0; width:min(720px, 80vw); max-height:60vh; overflow:auto;
    background:#fff; border:1px solid rgba(31,42,46,0.12); border-radius:12px; padding:14px 16px; box-shadow:0 14px 40px rgba(31,42,46,0.14); z-index:30; }
}

/* Short desktop screens (768px and 720px laptops): the same dashboard,
   tighter, so it still fits one screen. */
@media (min-width:1100px) and (max-height:840px){
  .pulse-main{ padding-top:68px; }
  .pulse-frame{ height:calc(100vh - 68px); gap:9px; padding-bottom:8px; }
  .pulse-head{ padding-top:2px; }
  .pulse-title h1{ font-size:1.5rem; }
  .pulse-title p{ margin-top:2px; font-size:var(--fs-xs); }
  .pulse-stat-n{ font-size:2.1rem; }
  .pulse-insights{ gap:8px; }
  .pi{ padding:8px 12px 9px; }
  .pi-tag{ margin-bottom:2px; font-size:0.64rem; }
  .pi h2{ font-size:0.86rem; margin-bottom:2px; }
  .pi p{ font-size:0.72rem; line-height:1.4; }
  .pulse-panels{ gap:9px; }
  .pp{ padding:9px 12px; }
  .pp h3{ font-size:var(--fs-sm); }
  .pp-sub{ margin:0 0 6px; font-size:0.7rem; }
  .pp-foot{ padding-top:5px; font-size:0.68rem; }
  .mm{ gap:5px; } .mm-tier{ gap:6px; } .mm-row{ gap:5px; }
  .mm-block{ padding:5px 9px; gap:0 8px; }
  .mm-n{ font-size:1.25rem; } .mm-name{ font-size:0.74rem; } .mm-top{ font-size:0.64rem; }
  .pp-bars{ gap:4px; } .pp-bar{ grid-template-columns:minmax(0,1fr) 70px 24px; gap:6px; }
  .pp-bar-label{ font-size:0.72rem; line-height:1.2; } .pp-bar-track{ height:6px; }
  .on-rows{ gap:3px; } .on-row{ grid-template-columns:96px minmax(0,1fr) 40px; gap:6px; }
  .on-name{ font-size:0.72rem; } .on-fill{ height:5px; } .on-n{ font-size:0.72rem; }
  .pulse-foot{ padding-top:5px; font-size:0.7rem; gap:4px 18px; }
  .pulse-body nav .wrap{ padding-top:10px; padding-bottom:10px; }
}

/* In the picker on a phone the whole map shows small rather than
   scrolling sideways: the family boxes stay tappable, and the tabs
   beside it do the rest. */
@media (max-width:980px){
  .role-stage .rm-canvas{ overflow:hidden; }
  .role-stage .rm-svg{ min-width:0; }
}

/* ============ Footer ============ */
.site-foot{ border-top:1px solid rgba(31,42,46,0.10); background:#FAF7F0; padding:48px 0 28px; }
.foot-grid{ display:grid; gap:28px; grid-template-columns:minmax(0,1fr); }
@media (min-width:900px){ .foot-grid{ grid-template-columns:1.3fr 0.8fr 1fr; gap:48px; } }
.foot-text{ font-size:var(--fs-sm); color:#3B4A4F; line-height:1.6; margin:0 0 10px; max-width:52ch; }
.foot-meta{ font-size:var(--fs-xs); color:#5F6D72; margin:0; }
.foot-head{ font-size:var(--fs-xs); font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:#5F6D72; margin:0 0 10px; }
.foot-link{ display:block; font-size:var(--fs-sm); color:#1F2A2E; text-decoration:none; padding:4px 0; }
.foot-link:hover{ color:#4B9DA5; text-decoration:underline; text-underline-offset:3px; }
.foot-logos{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:6px; }
.foot-logos img{ height:34px; width:auto; max-width:120px; object-fit:contain; opacity:.85; filter:grayscale(1); transition:all .2s; }
.foot-logos img:hover{ opacity:1; filter:none; }
.foot-copy{ font-size:var(--fs-xs); color:#5F6D72; margin:32px 0 0; padding-top:16px; border-top:1px solid rgba(31,42,46,0.08); }
.nav-resources{ padding-left:18px; margin-left:4px; border-left:1px solid rgba(31,42,46,0.15); }

/* ============ Home ============ */
/* the strip under the hero: the method numbers and the live one */
.sofar{ background:#1F2A2E; color:#FAF7F0; }
.sofar-row{ display:flex; flex-wrap:wrap; gap:0; }
.sofar-item{ display:flex; align-items:center; gap:12px; padding:18px 26px 18px 0; margin-right:26px; text-decoration:none; color:inherit;
  border-right:1px solid rgba(250,247,240,0.14); transition:opacity .15s; }
.sofar-item:last-child{ border-right:0; margin-right:0; }
a.sofar-item:hover{ opacity:.8; }
.sofar-n{ font-size:2.2rem; font-weight:300; line-height:1; font-variant-numeric:tabular-nums; }
.sofar-l{ font-size:var(--fs-xs); line-height:1.25; color:rgba(250,247,240,0.85); }
.sofar-l em{ display:block; font-style:normal; font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase; color:#D4A547; margin-top:2px; }
.sofar-live .sofar-n{ color:#D4A547; }
.sofar-meta{ margin-left:auto; }
@media (max-width:760px){ .sofar-item{ padding:12px 16px 12px 0; margin-right:16px; } .sofar-n{ font-size:1.7rem; } .sofar-meta{ margin-left:0; } }

/* start where you stand */
.stand-grid{ display:grid; gap:14px; grid-template-columns:minmax(0,1fr); }
@media (min-width:760px){ .stand-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1200px){ .stand-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.stand{ background:#fff; border:1px solid rgba(31,42,46,0.10); border-top:4px solid var(--fam); border-radius:16px; padding:20px 22px 18px;
  display:flex; flex-direction:column; }
.stand-who{ font-size:var(--fs-lg); font-weight:600; margin:0 0 8px; }
.stand-say{ font-size:var(--fs-sm); color:#3B4A4F; line-height:1.6; margin:0 0 12px; }
.stand-meta{ font-size:var(--fs-xs); color:#5F6D72; margin:auto 0 12px; line-height:1.5; }
.stand-links{ display:flex; flex-wrap:wrap; gap:6px 16px; }
.stand-links a{ font-size:var(--fs-sm); color:#4B9DA5; text-decoration:underline; text-underline-offset:3px; }
.stand-links a:hover{ color:#4A6741; }

/* three findings */
.finding{ background:#fff; border:1px solid rgba(31,42,46,0.10); border-left:4px solid #C24747; border-radius:16px; padding:20px 22px; display:flex; flex-direction:column; }
.finding h3{ font-size:var(--fs-lg); font-weight:600; line-height:1.3; margin:0 0 8px; }
.finding p{ font-size:var(--fs-sm); color:#3B4A4F; line-height:1.6; margin:0 0 12px; }
.finding a{ margin-top:auto; font-size:var(--fs-sm); color:#4B9DA5; text-decoration:underline; text-underline-offset:3px; }

/* a commons */
.commons-grid{ display:grid; gap:36px; grid-template-columns:minmax(0,1fr); }
@media (min-width:960px){ .commons-grid{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:64px; } }
.coown-list{ display:grid; gap:10px; }
@media (min-width:700px){ .coown-list{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.coown{ display:block; background:#fff; border:1px solid rgba(31,42,46,0.10); border-radius:14px; padding:14px 16px; text-decoration:none; color:inherit; transition:all .15s; }
.coown:hover{ border-color:#4B9DA5; box-shadow:0 8px 24px rgba(31,42,46,0.08); }
.coown-t{ display:block; font-weight:600; font-size:var(--fs-base); margin-bottom:4px; }
.coown-d{ display:block; font-size:var(--fs-xs); color:#3B4A4F; line-height:1.5; }
.latest-list{ display:grid; gap:0; }
.latest{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:12px; padding:12px 0; border-top:1px solid rgba(31,42,46,0.10); }
.latest:last-child{ border-bottom:1px solid rgba(31,42,46,0.10); }
.latest-date{ font-size:var(--fs-xs); color:#5F6D72; padding-top:2px; }
.latest-t{ font-size:var(--fs-sm); line-height:1.45; }

/* ============ Resources ============ */
.res-jump{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.res-jump a{ font-size:var(--fs-xs); font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:#3B4A4F; text-decoration:none;
  border:1px solid rgba(31,42,46,0.15); border-radius:999px; padding:7px 13px; }
.res-jump a:hover{ border-color:#4B9DA5; color:#4B9DA5; }
.res-soon{ display:inline-block; font-size:0.66rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:#8A6A15;
  background:#F5EEDC; border-radius:999px; padding:2px 8px; vertical-align:middle; }
.lib-groups{ display:grid; gap:22px; }
.lib-items{ display:grid; gap:10px; grid-template-columns:minmax(0,1fr); }
@media (min-width:760px){ .lib-items{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1200px){ .lib-items{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.lib-item{ display:block; background:#fff; border:1px solid rgba(31,42,46,0.10); border-radius:14px; padding:14px 16px; text-decoration:none; color:inherit; transition:all .15s; }
a.lib-item:hover{ border-color:#4B9DA5; box-shadow:0 8px 24px rgba(31,42,46,0.08); }
.lib-item-soon{ background:transparent; border-style:dashed; }
.lib-t{ display:block; font-weight:600; font-size:var(--fs-base); margin-bottom:4px; }
.lib-ext{ color:#4B9DA5; font-weight:400; }
.lib-d{ display:block; font-size:var(--fs-xs); color:#3B4A4F; line-height:1.5; }
.upd-list{ display:grid; }
.upd{ display:grid; grid-template-columns:110px minmax(0,1fr); gap:16px; padding:16px 0; border-top:1px solid rgba(31,42,46,0.10); max-width:900px; }
.upd:last-child{ border-bottom:1px solid rgba(31,42,46,0.10); }
.upd-date{ font-size:var(--fs-xs); color:#5F6D72; padding-top:3px; }
.upd-t{ font-weight:600; margin:0 0 4px; }
.upd-d{ font-size:var(--fs-sm); color:#3B4A4F; line-height:1.55; margin:0 0 4px; }
.upd-link{ font-size:var(--fs-xs); color:#4B9DA5; text-decoration:underline; text-underline-offset:3px; }
.ev-list{ display:grid; gap:10px; max-width:900px; }
.ev{ display:grid; grid-template-columns:110px minmax(0,1fr); gap:16px; background:#fff; border:1px solid rgba(31,42,46,0.10); border-radius:14px; padding:14px 16px; }
.ev-up{ border-left:4px solid #D4A547; }
.ev-when{ font-size:var(--fs-sm); font-weight:600; }
.ev-when em{ display:block; font-style:normal; font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase; color:#5F6D72; margin-top:2px; }
.ev-where{ font-weight:600; margin:0 0 3px; }
.ev-what{ font-size:var(--fs-sm); color:#3B4A4F; margin:0; line-height:1.5; }
.cite-box{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; background:#fff; border:1px solid rgba(31,42,46,0.12); border-radius:14px; padding:14px 16px; max-width:900px; }
.cite-box code{ font-family:inherit; font-size:var(--fs-sm); color:#1F2A2E; flex:1 1 400px; line-height:1.5; }