/* Plattformen (/plattformen) — extends the Metod page (research-lab.css): same navy, type, pills and tinted surfaces. */
/* Hero: the same frame as Bolagsanalys and Bygg portfölj: it fills the window below the 82px header,
   the copy is centred in it and the title is the same size. The map reaches into the right gutter
   (clipped by .research-page's overflow-x) and is sized to the viewport so the whole film is visible. */
.pf-hero { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px; align-items: center; height: calc(100svh - 82px); min-height: 640px; max-height: 980px; padding: 0; }
.pf-hero .rm-hero-copy { position: relative; z-index: 1; padding: 0 0 40px; }
.pf-hero h1 { font-size: clamp(44px, 5.3vw, 76px); line-height: 1.02; white-space: nowrap; }
.pf-hero .rm-lede { max-width: 545px; margin-bottom: 30px; }
/* The price note hangs in the copy's bottom padding, so it does not push the title off the shared line. */
.pf-hero .pf-note { position: absolute; left: 0; top: calc(100% - 26px); margin: 0; }
/* The page's accent is the Tillväxt blue (no teal). The hero's accent word takes the colour of the companies
   lit in the map (--pf-accent, set by plattformen.js per map: Tillväxt blue, Momentum yellow, Värde purple). */
.pf-main :is(h1, h2) em { color: #6d9fd0; }
.pf-main .pf-hero h1 em { color: var(--pf-accent, #6d9fd0); transition: color 2.6s ease; }
.pf-film { position: relative; margin-right: -136px; }
/* The fade reaches zero inside the canvas, so nothing is cut off by a hard edge; a second fade keeps
   the band at the bottom clear, so the points never run through the question. */
.pf-film canvas { display: block; width: 100%; aspect-ratio: 1.1 / 1; max-height: min(780px, calc(100vh - 110px)); min-height: 360px; cursor: grab; touch-action: pan-y;
  -webkit-mask-image: radial-gradient(closest-side, #000 84%, transparent 100%), linear-gradient(#000 var(--pf-clear, 79%), transparent calc(var(--pf-clear, 79%) + 9%));
          mask-image: radial-gradient(closest-side, #000 84%, transparent 100%), linear-gradient(#000 var(--pf-clear, 79%), transparent calc(var(--pf-clear, 79%) + 9%));
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.pf-film canvas.is-dragging { cursor: grabbing; }
.pf-scene { position: absolute; left: 8%; right: 8%; bottom: 7%; text-align: center; margin: 0; font: 400 clamp(17px, 1.6vw, 22px)/1.2 "Funnel Display", sans-serif; letter-spacing: -.015em; color: var(--rm-head);
  transition: opacity .8s ease, transform .8s ease; pointer-events: none; }
.pf-scene.is-off { opacity: 0; transform: translateY(6px); }

.pf-player { margin: 0; }
/* No divider straight under the hero. */
.pf-main .pf-hero + .rm-block { border-top: 0; padding-top: clamp(24px, 3vw, 40px); }
.pf-screen { aspect-ratio: 16 / 9; }
.pf-screen video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Under each recording: what is playing, and a way straight into that view. */
.pf-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 14px; min-height: 22px; }
.pf-view { font: 400 15px "Funnel Sans", sans-serif; color: var(--rm-muted); }
.pf-cap .pf-more { margin-top: 0; margin-left: auto; }

/* Pricing, kept quiet: one line under the hero actions and one sentence at the close. */
.pf-note { margin: 18px 0 0; font: 400 13px "Funnel Sans", sans-serif; color: var(--rm-muted); }
.pf-price { max-width: 560px; margin: 12px 0 0; font: 400 15px/1.6 "Funnel Sans", sans-serif; color: var(--rm-muted); }
.pf-price strong { font-weight: 500; color: var(--rm-head); }

/* Email capture: one quiet row under the closing, no panel. */
.rm-closing { flex-wrap: wrap; }
.pf-signup { flex: 1 0 100%; margin-top: 36px; padding-top: 24px; border-top: 1px solid rgba(238, 243, 247, .1); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 8px 32px; align-items: center; }
.pf-signup-h { margin: 0; font: 400 15px/1.5 "Funnel Sans", sans-serif; color: var(--rm-body); }
.pf-signup-form { display: flex; gap: 8px; }
.pf-signup-form input[type=email] { flex: 1; min-width: 0; height: 40px; padding: 0 14px; border: 1px solid var(--rm-line-2); border-radius: 999px; background: transparent; color: var(--rm-head); font: 400 14px "Funnel Sans", sans-serif; }
.pf-signup-form input[type=email]::placeholder { color: var(--rm-label); }
.pf-signup-form button { height: 40px; padding: 0 16px; border: 1px solid var(--rm-line-2); border-radius: 999px; background: transparent; color: var(--rm-head); font: 500 13px "Funnel Sans", sans-serif; cursor: pointer; white-space: nowrap; }
.pf-signup-form button:hover { border-color: var(--rm-action); }
.pf-signup-form button:disabled { opacity: .6; cursor: default; }
.pf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pf-signup-note, .pf-signup-msg { grid-column: 2; margin: 0; font: 400 12px/1.5 "Funnel Sans", sans-serif; color: var(--rm-label); }
.pf-signup-msg { display: none; }
.pf-signup.is-done .pf-signup-form, .pf-signup.is-done .pf-signup-note { display: none; }
.pf-signup.is-done .pf-signup-msg.is-ok, .pf-signup.has-error .pf-signup-msg.is-err { display: block; color: var(--rm-body); }

/* Blueprints: an editorial list in the style of the Metod page's sources, monochrome. */
.pf-blueprints { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(238, 243, 247, .18); }
.pf-blueprints li { border-bottom: 1px solid rgba(238, 243, 247, .1); }
.pf-blueprints a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, .95fr) 18px; gap: 24px; align-items: center; padding: 20px 0; text-decoration: none; color: var(--rm-head); }
.pf-bp-name small { display: block; margin-bottom: 6px; font: 500 10px "Spline Sans Mono", monospace; letter-spacing: .12em; color: var(--rm-label); }
.pf-bp-name b { font: 400 20px/1.25 "Funnel Display", sans-serif; letter-spacing: -.01em; }
.pf-bp-desc { font: 400 15px/1.55 "Funnel Sans", sans-serif; color: var(--rm-muted); }
.pf-bp-tilt { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 400 11px "Spline Sans Mono", monospace; letter-spacing: .06em; text-transform: uppercase; color: var(--rm-body); }
.pf-bp-go { color: rgba(238, 243, 247, .4); font-size: 14px; transition: transform .2s ease, color .2s ease; }
.pf-blueprints a:hover .pf-bp-name b { text-decoration: underline; text-decoration-color: rgba(238, 243, 247, .35); text-underline-offset: 5px; }
.pf-blueprints a:hover .pf-bp-go { color: var(--rm-head); transform: translateX(3px); }
.pf-blueprints a:focus-visible, .pf-more:focus-visible, .pf-faq summary:focus-visible { outline: 2px solid var(--rm-action); outline-offset: 3px; }
.pf-more { display: inline-flex; gap: 8px; margin-top: 22px; font: 500 14px "Funnel Sans", sans-serif; color: var(--rm-head); text-decoration: none; }
.pf-more:hover span:first-child { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(238, 243, 247, .35); }

/* FAQ: plain rows that open in place, no panels. */
#faq .rm-head { grid-template-columns: 1fr; }
.pf-faq { max-width: 860px; border-top: 1px solid rgba(238, 243, 247, .18); }
.pf-faq details { border-bottom: 1px solid rgba(238, 243, 247, .1); }
.pf-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; cursor: pointer; list-style: none; font: 400 18px/1.35 "Funnel Display", sans-serif; letter-spacing: -.01em; color: var(--rm-head); }
.pf-faq summary::-webkit-details-marker { display: none; }
.pf-faq summary::after { content: "+"; flex: none; font: 300 20px "Funnel Sans", sans-serif; color: rgba(238, 243, 247, .45); transition: transform .2s ease; }
.pf-faq details[open] summary::after { transform: rotate(45deg); }
.pf-faq details > div { padding: 0 0 20px; max-width: 720px; }
.pf-faq p { margin: 0 0 10px; font: 400 15px/1.65 "Funnel Sans", sans-serif; color: var(--rm-muted); }

@media (max-width: 980px) {
  .pf-signup { grid-template-columns: 1fr; }
  .pf-signup-note, .pf-signup-msg { grid-column: 1; }
  .pf-blueprints a { grid-template-columns: minmax(0, 1fr) 18px; gap: 8px 16px; }
  .pf-bp-name, .pf-bp-desc, .pf-bp-tilt { grid-column: 1; }
  .pf-bp-go { grid-column: 2; grid-row: 1; }
  /* Phones and tablets: title, then the map straight under it, then the text and the actions. The title
     starts where the secondary pages' titles do (40px under the header) and the whole map is in the
     first screen on a 640px-high phone (it was cut off below the text before). */
  .pf-hero { grid-template-columns: 1fr; gap: 0; height: auto; min-height: 0; max-height: none; padding: 0 0 clamp(16px, 3vw, 40px); }
  .pf-hero h1 { white-space: normal; font-size: clamp(36px, 11.2vw, 44px); }
  .pf-hero .pf-note { position: static; margin: 18px 0 0; }
  .pf-hero .rm-hero-copy { display: contents; }
  .pf-hero .rm-eyebrow { order: 1; padding-top: 40px; }
  .pf-hero h1 { order: 2; margin-bottom: 0; }
  .pf-hero .pf-film { order: 3; }
  .pf-hero .rm-lede { order: 4; margin: 6px 0 24px; }
  .pf-hero .rm-actions { order: 5; }
  .pf-hero .pf-note { order: 6; }
  .pf-film { margin-right: 0; }
  .pf-film canvas { aspect-ratio: 1 / 1; max-height: 560px; margin: 0 auto; --pf-clear: 68%; }
}
@media (prefers-reduced-motion: reduce) { .pf-scene, .pf-bp-go, .pf-faq summary::after, .pf-main .pf-hero h1 em { transition: none; } }
/* Phones: the map runs edge to edge and is a little taller than wide, so the cloud has room; the band below stays clear
   for the question (owner's iPhone test, 5 Oct 2026). Desktop is unchanged. */
@media (max-width: 760px) {
  .pf-hero .pf-film { margin-inline: calc(-1 * var(--rm-gutter, 16px)); }
  .pf-film canvas { width: 100%; aspect-ratio: 1 / 1.1; max-height: min(620px, 82svh); min-height: 0; }
}