/* Homepage accordion reuses the Product page's application previews and card measure. */
.figma-product .product-app-crop { width: 100%; height: 480px; min-height: 0; aspect-ratio: auto; }
@media (min-width: 801px) {
  .figma-product .product-app-crop-controls { overflow: hidden; }
  .figma-product .product-app-crop-controls .product-app-crop-window { overflow: visible; }
  .figma-product .product-app-crop-controls iframe { height: 620px; background: transparent; }
}
.figma-product .product-app-crop-window { inset-inline: 32px; }
.figma-product .product-showcase-gaps .product-showcase-canvas { align-items: flex-start; }
.figma-product .product-app-crop-evidence iframe { top: 8px; }
.figma-product :is(.product-showcase-rulebook, .product-showcase-gaps) .product-ui-card { width: 100%; max-width: 440px; }
@media (max-width: 800px) {
  .figma-product .product-app-crop-window { inset-inline: 16px; }
  .figma-product .figma-feature-inline-image { --feature-art-scale: .8; height: 360px; overflow: hidden; }
  .figma-product .figma-feature-inline-image > :is(.product-showcase, .product-app-crop) { width: calc(100% / var(--feature-art-scale)); height: calc(360px / var(--feature-art-scale)); min-height: 0; transform: scale(var(--feature-art-scale)); transform-origin: top left; }
  .figma-product .figma-feature-inline-image .product-showcase-canvas { height: calc(360px / var(--feature-art-scale)); min-height: 0; align-items: flex-start; }
}

.about-figma-page {
  --about-gutter: var(--landing-gutter);
  padding-bottom: 0;
  color: var(--text-primary);
}
.about-measure {
  width: calc(100% - 2 * var(--about-gutter));
  max-width: 1380px;
  margin-inline: auto;
}
.about-hero { margin-bottom: 144px; }
@media (min-width: 600px) and (max-width: 1023px) {
  .about-hero h1 { max-width: none; }
  .about-hero h1 :is(.about-hero-sentence, .prototype-heading-ending, .about-hero-phrase) { display: inline; }
}
@media (min-width: 801px) and (max-width: 1023px) {
  :root #prototype-main .about-figma-page .about-hero h1 { font-size: clamp(32px, 4vw, 40px); line-height: 1.1; text-wrap: wrap; }
}
@media (max-width: 599px) {
  .about-hero h1 .about-hero-sentence { display: block; text-wrap: balance; }
  .about-hero-phrase { display: inline; }
}

.about-story { scroll-margin-top: 100px; }
.about-story-image { margin: 0 0 72px; aspect-ratio: 1360 / 656; overflow: hidden; border-radius: 8px; }
.about-story-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 65%; }
.about-story-copy { display: grid; grid-template-columns: var(--landing-grid-columns); gap: 24px; }
.about-story-copy h2 {
  grid-column: 1 / span 6;
  max-width: 360px;
  margin: 0;
  font-size: var(--regel-heading-lg-size);
  line-height: var(--regel-heading-lg-line);
  letter-spacing: var(--regel-heading-lg-tracking);
  font-weight: var(--regel-type-heading-weight);
}
.about-story-body {
  grid-column: 7 / span 5;
  color: var(--text-secondary);
  font-size: var(--regel-label-lg-size);
  line-height: var(--regel-label-lg-line);
  letter-spacing: var(--regel-label-lg-tracking);
  font-weight: var(--regel-type-label-weight);
}
.about-story-body p { margin: 0; }
.about-story-body p:first-child {
  color: #000;
  font-size: var(--regel-subtitle-size);
  line-height: var(--regel-subtitle-line);
  font-weight: 500;
  letter-spacing: var(--regel-subtitle-tracking);
}
html[data-site-theme="dark"] .about-story-body p:first-child { color: var(--text-primary); }
.about-story-body p + p { margin-top: 16px; }
.about-team { margin-top: 72px; scroll-margin-top: 100px; }
.about-team > header {
  display: grid;
  grid-template-columns: var(--landing-grid-columns);
  gap: 24px;
  align-items: start;
  margin-bottom: 56px;
  color: #000;
  text-align: left;
}
.about-team h2 {
  grid-column: 1 / span 6;
  margin: 0;
  font-size: var(--regel-heading-lg-size);
  line-height: var(--regel-heading-lg-line);
  font-weight: var(--regel-type-heading-weight);
  letter-spacing: var(--regel-heading-lg-tracking);
}
.about-team > header p {
  grid-column: 7 / -1;
  max-width: 553px;
  margin: 0;
  font-size: var(--regel-subtitle-size);
  line-height: var(--regel-subtitle-line);
  letter-spacing: var(--regel-subtitle-tracking);
  font-weight: 500;
}
@media (min-width: 801px) {
  .about-team > header p { grid-column: 7 / span 5; max-width: none; }
}
html[data-site-theme="dark"] .about-team > header { color: var(--text-primary); }
.about-leaders {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
.about-profile { display: block; color: inherit; text-decoration: none; }
.about-portrait {
  display: block;
  position: relative;
  aspect-ratio: 322 / 436;
  overflow: hidden;
  border-radius: 8px;
  background: #000;
  isolation: isolate;
}
.about-portrait-image {
  position: absolute;
  inset: 0;
  transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 300ms ease;
}
.about-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0005, transparent 80%);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}
a.about-profile:is(:hover, :focus-visible) .about-portrait-image { transform: scale(1.02); opacity: 0.75; }
a.about-profile:is(:hover, :focus-visible) .about-portrait::after { opacity: 1; }
.about-portrait img {
  position: absolute;
  display: block;
  max-width: none;
  width: 102.17%;
  height: 113.3%;
  top: 0;
  left: -0.93%;
  object-fit: cover;
}
.about-portrait-joakim img,
.about-portrait-robert img {
  width: 596.27%;
  height: 288.76%;
  left: -110.25%;
  top: -78.9%;
}
.about-portrait-robert img { left: -345.65%; top: -80.28%; }
/* Roles sit below names; biographies stay visible at every width. */
.about-profile-details { margin-top: 16px; font-size: var(--regel-label-lg-size); line-height: var(--regel-label-lg-line); font-weight: var(--regel-type-label-weight); letter-spacing: var(--regel-label-lg-tracking); }
.about-profile-summary { display: flex; flex-direction: column; align-items: flex-start; margin: 0; }
.about-profile-label, .about-biography { transition: color var(--site-hover-transition); }
.about-profile-name { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; color: var(--text-primary); transition: color var(--site-hover-transition); }
.about-profile:is(:hover, :focus-visible) :is(.about-profile-name, .about-profile-label, .about-biography) { color: var(--text-primary); text-decoration: none; }
.about-profile-arrow { flex: none; width: 20px; height: 20px; opacity: 0; translate: -6px 0; transition: opacity 200ms ease, translate 240ms ease-out; }
a.about-profile:is(:hover, :focus-visible) .about-profile-arrow { opacity: 1; translate: 0; }
@media (hover: none) {
  .about-profile-arrow { opacity: 1; translate: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .about-profile-arrow { transition: none; translate: none; }
  .about-portrait-image, .about-portrait::after, .about-profile-name, .about-profile-label, .about-biography { transition: none; }
  a.about-profile:is(:hover, :focus-visible) .about-portrait-image { transform: none; }
}
.about-profile:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 4px; }
.about-profile-label { color: var(--text-secondary); }
.about-biography { margin-top: 8px; }
.about-colleagues { margin-top: 48px; }
.about-colleagues > div, .about-join-team {
  display: grid;
  grid-template-columns: 3fr 6fr 3fr;
  gap: 24px;
  padding-block: 16px;
  font-size: var(--regel-label-lg-size);
  line-height: var(--regel-label-lg-line);
  font-weight: var(--regel-type-label-weight);
  letter-spacing: var(--regel-label-lg-tracking);
}
.about-colleagues > div { border-top: 1px solid var(--border-default); }
.about-team .about-colleagues > div { grid-template-columns: 3fr 3fr 6fr; }
.about-colleagues > div:last-child { border-bottom: 1px solid var(--border-default); }
.about-colleagues dd { color: var(--text-tertiary); transition: color var(--site-hover-transition); }
.about-team .about-colleagues > div:is(:hover, :focus-within) dd { color: var(--text-primary); }
.about-colleague-preview {
  position: fixed;
  z-index: 60;
  width: 128px;
  height: 128px;
  object-fit: cover;
  border-radius: 8px;
  pointer-events: none;
}
.about-colleague-preview[hidden] { display: none; }
@media print { .about-colleague-preview { display: none; } }

.about-mobile-portrait { position: fixed; z-index: 35; width: 64px; height: 64px; pointer-events: none; }
.about-mobile-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; box-shadow: var(--regel-shadow-md); backface-visibility: hidden; }
.about-mobile-portrait[hidden] { display: none; }
@media (max-width: 599px) {
  .about-team .about-colleagues > div { transition: background-color var(--site-hover-transition); }
  .about-team .about-colleagues > div[data-portrait-active] { background-color: var(--bg-subtle); }
  .about-team .about-colleagues > div[data-portrait-active] dd { color: var(--text-primary); }
}
@media print { .about-mobile-portrait { display: none; } }

.about-join-team p { grid-column: 1; margin: 0; color: var(--text-tertiary); }
.about-join-team a { grid-column: 3 / -1; justify-self: start; }
.about-office { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 24px; margin-top: 120px; scroll-margin-top: 100px; }
.about-office-small { grid-column: span 5; position: relative; aspect-ratio: 553 / 483; overflow: hidden; border-radius: 8px; }
.about-office-small img { position: absolute; max-width: none; width: 130.92%; height: 100%; left: -11.93%; top: 0; object-fit: cover; }
.about-office-large { grid-column: span 7; padding-top: 104px; }
.about-office-large figcaption { margin-bottom: 16px; font-size: var(--regel-label-lg-size); line-height: var(--regel-label-lg-line); color: var(--text-secondary); letter-spacing: var(--regel-label-lg-tracking); font-weight: var(--regel-type-label-weight); }
.about-office-large > div { position: relative; aspect-ratio: 779 / 930; border-radius: 8px; overflow: hidden; }
.about-office-large img { position: absolute; max-width: none; width: 193.97%; height: 108.28%; left: -53.92%; top: -8.28%; object-fit: cover; }
.about-principles { margin-top: 72px; color: var(--text-primary); scroll-margin-top: 100px; }
.about-principles-layout { display: grid; grid-template-columns: var(--landing-grid-columns); gap: var(--landing-column-gap); align-items: start; border-block: 1px solid var(--border-default); padding-block: 72px; }
/* Item metrics follow Figma 1463:482 and 1463:484; the section title matches the smaller team heading. */
.about-principles h2 { grid-column: 1 / span 6; margin: 0; font-size: var(--regel-heading-lg-size); line-height: var(--regel-heading-lg-line); letter-spacing: var(--regel-heading-lg-tracking); font-weight: var(--regel-type-heading-weight); }
.about-principles ol { grid-column: 7 / span 5; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px 24px; list-style: none; padding: 0; margin: 0; }
.about-principles li { min-width: 0; }
.about-principles h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; color: #000; font-size: var(--regel-label-lg-size); line-height: var(--regel-label-lg-line); letter-spacing: var(--regel-label-lg-tracking); font-weight: var(--regel-type-label-weight); }
html[data-site-theme="dark"] .about-principles h3 { color: var(--text-primary); }
#prototype-main .about-principles h3 { text-wrap: wrap; }
.about-principle-number { flex: none; color: var(--text-tertiary); }
.about-principles p { margin: 0; color: var(--text-tertiary); font-size: var(--regel-label-md-size); line-height: var(--regel-label-md-line); letter-spacing: var(--regel-label-md-tracking); font-weight: var(--regel-type-label-weight); }
@media (min-width: 1024px) {
  .about-team .about-join-team { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .about-join-team p { grid-column: 1 / 4; }
  .about-join-team a { grid-column: 4 / -1; }
  /* Coworker titles align with Joakim in the five-column portrait grid. */
  .about-team .about-colleagues > div { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .about-team .about-colleagues dt { grid-column: 1 / 4; }
  .about-team .about-colleagues dd { grid-column: 4 / -1; }
}
@media (max-width: 1023px) {
  .about-leaders { grid-template-columns: repeat(2,minmax(0,1fr)); min-height: 0; row-gap: 56px; }
  .about-colleagues { margin-top: 80px; }
  .about-colleagues > div, .about-join-team { grid-template-columns: 1fr 1.4fr 1fr; }
  .about-team .about-colleagues > div, .about-join-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-join-team a { grid-column: 2 / -1; }
}
@media (max-width: 599px) {
  .about-team > header { margin-bottom: 32px; }
  .about-leaders { grid-template-columns: 1fr; gap: 40px; }
  .about-colleagues { margin-top: 64px; }
  .about-colleagues > div, .about-join-team { grid-template-columns: 1fr; gap: 8px; padding-block: 20px; }
  .about-team .about-colleagues > div { grid-template-columns: minmax(0, 1fr) fit-content(45%); gap: 4px 16px; align-items: start; }
  .about-team .about-colleagues dd:first-of-type { text-align: right; }

  .about-join-team p, .about-join-team a { grid-column: 1; }
  .about-office { grid-template-columns: 1fr; gap: 32px; margin-top: 80px; }
  .about-office-small, .about-office-large { grid-column: auto; }
  .about-office-large { padding-top: 0; }
  .about-principles ol { grid-template-columns: 1fr; gap: 32px; }
}
/* Keep each colleague's name, title and description in a shared column grid. */
.about-team .about-colleagues > div,
.about-team .about-join-team { grid-template-columns: 3fr 3fr 6fr; align-items: start; }
.about-team .about-colleagues dt { grid-column: 1; }
.about-team .about-colleagues dd:first-of-type { grid-column: 2; text-align: left; }
.about-team .about-colleagues dd.about-colleague-description { grid-column: 3; grid-row: auto; }
.about-team .about-join-team p { grid-column: 1 / 3; }
.about-team .about-join-team a { grid-column: 3; }
@media (max-width: 599px) {
  .about-team .about-colleagues > div { display: block; }
  .about-team .about-colleagues dt,
  .about-team .about-colleagues dd:first-of-type { display: inline; text-align: left; }
  .about-team .about-colleagues dt::after,
  .about-profile-name::after { content: ", "; }
  .about-team .about-colleagues dd.about-colleague-description { display: block; margin-top: 8px; }
  .about-profile-summary { display: block; position: relative; }
  .about-profile-name { display: inline; width: auto; }
  .about-profile-label { display: inline; color: var(--text-tertiary); }
  .about-profile-arrow { position: absolute; right: 0; top: 2px; }
  a.about-profile .about-profile-summary { padding-right: 28px; }
  .about-team .about-join-team { grid-template-columns: 1fr; }
  .about-team .about-join-team p, .about-team .about-join-team a { grid-column: 1; }
}
@media print {
  .about-figma-page { padding-bottom: 0; }
  .about-hero { margin-bottom: 64px; }
  .about-leaders { min-height: 0; }
}
@media (max-width: 800px) {
  .about-hero { margin-bottom: 80px; }
  .about-story-copy { grid-template-columns: 1fr; }
  .about-story-copy h2, .about-story-body { grid-column: auto; }
  .about-story-copy h2 { max-width: none; font-size: var(--regel-heading-md-size); line-height: var(--regel-heading-md-line); letter-spacing: var(--regel-heading-md-tracking); font-weight: var(--regel-type-heading-weight); }
  .about-team > header { grid-template-columns: 1fr; }
  .about-team h2, .about-team > header p { grid-column: auto; }
}
/* Full-width Security section spacing. Principles use the open About page grid. */
.figma-security { padding-block: 128px 160px; }
@media (max-width: 1100px) {
  .figma-security { padding-block: 96px 128px; }
}
@media (max-width: 800px) {
  .figma-security { padding-block: 80px 96px; }
  .about-principles, .about-team { margin-top: 40px; }
  .about-principles-layout { grid-template-columns: 1fr; gap: 40px; padding-block: 40px; }
  .about-principles h2, .about-principles ol { grid-column: auto; }
}