/* Blueprints (/strategier): Metod shell (landing/research.html + research-lab.css); this file styles only
   <main class="cn-bp">. October 18, 2026 (second pass): a shape hero, a card library, no arrows or underlines;
   it sits on the page ground like the home page: no tinted panels, hairlines, the Blueprints blue as the single accent. */
.cn-bp{--page:#050d16; --line:#1a2c40; --line-2:#2b465d;
  --head:#eef3f7; --body:#b5c0c3; --muted:#8ea3b2; --label:#7f929e;
  --teal:#84c9be; --em:#9fd6d0; --action:#4b91b8; --surface:rgba(22,44,66,.32);
  --P:#68aa83; --Q:#55a7a0; --G:#6d9fd0; --M:#d3a24d; --V:#9e7bb2; --S:#8fa1ac;
  color-scheme:dark;}
.cn-bp .wrap{width:min(1200px,calc(100% - 32px));margin:0 auto}
.cn-bp .eyebrow{margin:0;font:500 11px "Spline Sans Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cn-bp .tag{font:400 10px "Spline Sans Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--label)}
.cn-bp h1,.cn-bp h2,.cn-bp h3{font-family:"Funnel Display",sans-serif;font-weight:400;color:var(--head)}
.cn-bp h1 em,.cn-bp h2 em,.cn-bp h3 em{font-style:normal;color:var(--em)}
.cn-bp svg.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cn-bp .lede{max-width:545px;margin:0 0 30px;font-size:16px;line-height:1.6;color:var(--body)}
.cn-bp .actions{display:flex;gap:12px;flex-wrap:wrap}
.cn-bp .cta{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 22px;border-radius:999px;font:600 14px "Funnel Sans",sans-serif;text-decoration:none;white-space:nowrap;transition:background .18s,border-color .18s}
.cn-bp .cta.primary{background:var(--action);color:#04121c}
.cn-bp .cta.primary:hover{background:#5ba0c6}
.cn-bp .cta.secondary{border:1px solid var(--line-2);color:#e0e8ef}
.cn-bp .cta.secondary:hover{border-color:var(--action)}
.cn-bp .cta:focus-visible,.cn-bp .tlink:focus-visible,.cn-bp .bp-card:focus-visible{outline:2px solid var(--action);outline-offset:3px}
.cn-bp .blk{padding:clamp(56px,7vw,88px) 0;border-top:1px dashed var(--line)}
.cn-bp .head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end;margin-bottom:34px}
.cn-bp .head h2{margin:12px 0 0;font-size:clamp(28px,3.2vw,42px);line-height:1.08;letter-spacing:-.03em}
.cn-bp .head>p{margin:0;max-width:440px;color:var(--muted);font-size:15px}
.cn-bp .index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-2)}
.cn-bp .index a{display:grid;gap:4px;padding:18px 22px 0 0;text-decoration:none}
.cn-bp .index a+a{padding-left:22px;border-left:1px dashed var(--line)}
.cn-bp .index b{font:400 22px "Funnel Display",sans-serif;color:var(--head);letter-spacing:-.01em}
.cn-bp .index span{font-size:14px;color:var(--muted)}
.cn-bp .index a:hover b{color:var(--em)}
.cn-bp .links{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px}
.cn-bp .tlink{font:500 14px "Funnel Sans",sans-serif;color:var(--teal);text-decoration:none}
.cn-bp .tlink:hover{color:#d7f1ec}
.cn-bp .closing{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;padding:clamp(64px,8vw,96px) 0;border-top:1px dashed var(--line)}
.cn-bp .closing h2{margin:0;font-size:clamp(28px,3vw,36px);line-height:1.1;letter-spacing:-.02em}
.cn-bp .closing p{margin:10px 0 0;max-width:520px;color:var(--muted)}
.cn-bp .rv{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.cn-bp .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .cn-bp .rv{opacity:1;transform:none;transition:none}
  .cn-bp .bar::after{transition:none}
}
.cn-bp{--grid:rgba(120,170,210,.065);--grid-2:rgba(120,170,210,.028);--ink:#dce9f1;--teal:#6d9fd0;--em:#6d9fd0}
.cn-bp .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cn-bp .steps4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;margin:0;padding:20px 0 0;list-style:none;border-top:1px solid var(--rule)}
.cn-bp .steps4 li{display:grid;gap:8px;align-content:start}
.cn-bp .steps4 h3{display:flex;align-items:center;gap:10px}
@media (prefers-reduced-motion:reduce){
    }
.cn-bp .steps4 h3{margin:0;font:500 17px "Funnel Sans",sans-serif;color:var(--head)}
.cn-bp .steps4 p{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}
.cn-bp #bp-regler .links{margin-top:22px}
.cn-bp .honesty{margin:20px 0 0;max-width:760px;font:400 13px/1.6 "Funnel Sans",sans-serif;color:var(--muted)}
.cn-bp .honesty b{color:var(--muted);font-weight:500}

/* Exclusions: open rows on the page, no box */
.cn-bp .lim-groups{border-top:1px solid var(--rule);border-bottom:1px solid var(--hair)}
.cn-bp .lim-groups>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:6px 16px;align-items:center;padding:16px 0;border-top:1px solid var(--hair)}
.cn-bp .lim-groups>div:first-child{border-top:0}
.cn-bp .lim-groups p:not(.eyebrow){margin:0 0 10px;font-size:13px;color:var(--muted)}
.cn-bp .chips{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
/* The examples are not controls here, so they read as a plain list, not as pills */
.cn-bp .chips{gap:0}
.cn-bp .chips li{font:400 14px "Funnel Sans",sans-serif;color:var(--body)}
.cn-bp .chips li+li::before{content:"·";margin:0 10px;color:var(--label)}


.cn-bp{--rule:rgba(238,243,247,.18);--hair:rgba(238,243,247,.1);--bp:#6d9fd0}
.cn-bp .cta:focus-visible,.cn-bp .bp-tabs button:focus-visible,/* Text links: the system teal, no arrow, no underline (owner, October 18, 2026); white on hover. */
.cn-bp .tlink{color:#84c9be;text-decoration:none}
.cn-bp .tlink:hover{color:var(--head)}

/* The six-factor shape, shared by the hero, the cards and the worked example (same axes as the /bygg radar). */
.cn-bp svg .grid polygon,.cn-bp svg .grid line{fill:none;stroke:rgba(238,243,247,.07);stroke-width:1;vector-effect:non-scaling-stroke}
.cn-bp svg .grid polygon.mid{stroke:rgba(238,243,247,.16);stroke-dasharray:3 4}
.cn-bp svg use{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Page head: the library is the first thing on the page (owner, October 18: no hero) */
.cn-bp .bp-libsec{padding:clamp(40px,5vw,72px) 0 clamp(56px,7vw,88px)}
.cn-bp .bp-top h1{margin:14px 0 0;font-size:clamp(40px,4.6vw,64px);line-height:1.04;letter-spacing:-.035em}

/* Library: kind tabs, then a grid of Blueprint cards */
.cn-bp .bp-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 26px}
.cn-bp .bp-tabs button{border:1px solid var(--line-2);background:none;color:var(--muted);border-radius:999px;padding:8px 16px;font:500 13px "Funnel Sans",sans-serif;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.cn-bp .bp-tabs button:hover{color:var(--head);border-color:rgba(238,243,247,.35)}
.cn-bp .bp-tabs button[aria-selected="true"]{color:#04121c;background:var(--head);border-color:var(--head)}
.cn-bp .bp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.cn-bp .bp-card{display:flex;min-width:0}
.cn-bp .bp-card[hidden],.cn-bp .bp-more[hidden]{display:none}
@keyframes bpIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* The card (owner's pick "D"): the Screener Urval card's anatomy and palette (app/screen-library-cards.css) at page
   scale: name with a small engraved shape in the corner, factors in weight order, the thesis in two lines, and a bottom
   row with three example holdings (logos exactly as in 4176, via app/company-logos.js, side by side with a small gap
   rather than overlapping, so transparent marks never run together), their names and the horizon. */
.cn-bp .bp-dcard{position:relative;display:flex;flex-direction:column;gap:4px;width:100%;box-sizing:border-box;min-height:156px;padding:14px 14px 12px;background:#0a1723;border:1px solid #1b3040;border-radius:9px;text-decoration:none;color:#edf3f6;transition:border-color .15s ease,background-color .15s ease}
/* Cards are not links (only the "Visa alla" tile is a control) */
.cn-bp .bp-dhead{display:grid;grid-template-columns:minmax(0,1fr) 40px;gap:10px;align-items:start}
.cn-bp .bp-dtitle{display:grid;gap:3px;min-width:0}
.cn-bp .bp-dhead b{font:600 15px/1.3 "Funnel Sans",sans-serif;color:#edf3f6}
.cn-bp .bp-mini{width:40px;height:40px;margin-top:-2px;overflow:visible}
.cn-bp .bp-mini .grid polygon,.cn-bp .bp-mini .grid line{fill:none;stroke:rgba(238,243,247,.09);stroke-width:1;vector-effect:non-scaling-stroke}
.cn-bp .bp-mini .contours polygon{fill:none;stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.cn-bp .bp-mini .contours polygon:first-child{stroke-width:1.4}
.cn-bp .bp-dfx{font:400 12px "Funnel Sans",sans-serif;letter-spacing:.02em;color:#7f929f}
.cn-bp .bp-dfx span+span::before{content:"·";margin:0 6px}
.cn-bp .bp-dth{flex:1;margin-top:6px;font:400 13px/1.45 "Funnel Sans",sans-serif;color:#a4b3bd;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cn-bp .bp-dbt{display:flex;align-items:center;gap:10px;margin-top:8px;padding-top:10px;border-top:1px solid #1b3040}
.cn-bp .bp-logos{display:flex;align-items:center;flex:none}
.cn-bp .bp-logos .flag{position:relative;display:block;width:24px;height:24px;border-radius:6px;background:rgba(238,243,247,.06)}
.cn-bp .bp-logos{gap:4px}
.cn-bp .bp-logos .cwp-company-logo[data-company]::before{border-radius:6px}
.cn-bp .bp-who{flex:1;min-width:0;font:400 12px "Funnel Sans",sans-serif;color:#7f929f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cn-bp .bp-who span+span::before{content:", "}
.cn-bp .bp-pill{display:inline-flex;align-items:center;height:20px;padding:0 7px;border:1px solid #315165;border-radius:9px;background:#132d3e;color:#90afbe;font:400 11px "Funnel Sans",sans-serif;white-space:nowrap}
/* The gap tile: the same card with a dashed edge, leading into the builder (blueprints.js shows it in a gap) */
.cn-bp .bp-more{display:flex}
.cn-bp .bp-dcard.bp-own{font:inherit;text-align:left;cursor:pointer;background:transparent;border-style:dashed;border-color:#2b465d;transition:border-color .15s ease}
.cn-bp .bp-dcard.bp-own:hover{border-color:rgba(75,145,184,.6)}
.cn-bp .bp-dcard.bp-own:focus-visible{outline:2px solid var(--action);outline-offset:2px}
.cn-bp .bp-own .bp-dhead b{color:#84c9be}

/* How it works: four steps in open columns on a hairline, no icons (owner, October 18) */
.cn-bp .steps4 li{gap:10px}

/* Close-ups in the Metod method cards' format (research-lab.css .rm-cards/.rm-card/.rm-surface): the panel holds a mono
   label, six profile bars with factor icons (lead factors blue, the rest white, growing in on scroll; no numbers) and what
   weighs most on the right; a title and one line underneath. */
.cn-bp .bp-prof{position:relative;aspect-ratio:16/10;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr;gap:10px 18px;padding:5.5% 4% 6%;box-sizing:border-box}
.cn-bp .bp-prof-label{grid-column:1/-1;margin:0;font:400 11px "Spline Sans Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:rgba(238,243,247,.5)}
.cn-bp .bp-prof-bars{display:grid;align-content:center;gap:9%;margin:0;padding:0;list-style:none}
.cn-bp .bp-prof-bars li{display:grid;grid-template-columns:16px minmax(0,1fr);align-items:center;gap:12px;color:rgba(238,243,247,.9)}
.cn-bp .bp-prof-bars .i{width:15px;height:15px}
.cn-bp .bp-prof-bars .track{position:relative;display:block;height:4px;background:rgba(238,243,247,.14)}
.cn-bp .bp-prof-bars .track i{position:absolute;inset:0 auto 0 0;width:var(--v);background:rgba(238,243,247,.8);transform-origin:0 50%;transform:scaleX(0);transition:transform 1.1s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.cn-bp .bp-prof-bars li.lead .track i{background:#6d9fd0}
.cn-bp .bp-close.in .bp-prof-bars .track i{transform:none}
.cn-bp .bp-prof-sum{display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:6px;margin:0;min-width:96px;text-align:right}
.cn-bp .bp-prof-sum b{display:grid;gap:2px;font:400 clamp(18px,1.8vw,24px)/1.15 "Funnel Display",sans-serif;letter-spacing:-.01em;color:var(--head)}
.cn-bp .bp-prof-sum small{font:400 11px "Spline Sans Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:rgba(238,243,247,.5)}
@media (prefers-reduced-motion:reduce){.cn-bp .bp-prof-bars .track i{transform:none;transition:none}}

/* Why it works: one short finding per factor with its study, in open columns on a hairline */
.cn-bp .bp-evidence{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px;margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.cn-bp .bp-evidence li{display:grid;grid-template-rows:auto 1fr auto;gap:8px;padding:20px 0 0}
.cn-bp .bp-evidence h3{margin:0;font:500 17px "Funnel Sans",sans-serif;color:var(--head)}
.cn-bp .bp-evidence p{margin:0;font:400 14px/1.55 "Funnel Sans",sans-serif;color:var(--muted)}
.cn-bp .bp-evidence cite{font:normal 400 11px "Spline Sans Mono",monospace;letter-spacing:.04em;color:var(--label)}
.cn-bp #varfor .honesty{margin-top:28px}

@media (max-width:1100px){
  .cn-bp .steps4{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:26px}
  .cn-bp .bp-evidence{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px}
}
@media (max-width:980px){
  .cn-bp .head{grid-template-columns:1fr;gap:14px}
  .cn-bp .bp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .cn-bp .steps4{grid-template-columns:1fr}
  .cn-bp .bp-tabs{flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding-inline:16px;scrollbar-width:none}
  .cn-bp .bp-tabs::-webkit-scrollbar{display:none}
  .cn-bp .bp-tabs button{flex:none}
  .cn-bp .bp-tabs{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .cn-bp .bp-grid{grid-template-columns:minmax(0,1fr)}
  /* Phones: two example holdings */
  .cn-bp .bp-logos .flag:nth-child(3),.cn-bp .bp-who span:nth-child(3){display:none}
  .cn-bp .bp-evidence{grid-template-columns:1fr;row-gap:0}
  .cn-bp .bp-evidence li{padding:18px 0;border-top:1px solid var(--hair)}
  .cn-bp .bp-evidence li:first-child{border-top:0}
          .cn-bp .lim-groups>div{grid-template-columns:1fr;gap:8px}
}
/* Mid widths: a smaller stack in the side column; single-column tablets: the stack centred under the copy */
@media (min-width:601px) and (max-width:1180px){.cn-bp .bp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.cn-bp .bp-card.enter{animation:none}.cn-bp .bp-dcard{transition:none}}