.feature-pills__wrap { color:#f2f2f2; background-color:#272a2a; border:2px solid #ffffff26; border-radius:1.25em; width:100%; max-width:75em; height:45em; position:relative; overflow:clip; }
.feature-pills__layout { justify-content:flex-start; align-items:stretch; width:100%; height:100%; display:flex; position:relative; }
.feature-pills__col { width:50%; position:relative; }
.feature-pills__visual-collection { z-index:0; width:100%; height:100%; position:relative; }
.feature-pills__visual-item { opacity:0; width:100%; height:100%; position:absolute; inset:0%; }
.feature-pills__visual-list { width:100%; height:100%; position:relative; overflow:hidden; }
.feature-pills__visual-img { object-fit:cover; width:100%; height:100%; }
.feature-pills__info-collection { flex-flow:column; justify-content:center; align-items:flex-start; width:100%; height:100%; padding-left:1.25em; padding-right:1.25em; display:flex; }
.feature-pills__info-list { grid-column-gap:1em; grid-row-gap:1em; max-width:var(--content-item-expanded); flex-flow:column; flex:none; justify-content:center; align-items:flex-start; width:100%; margin:0; margin-left:auto; margin-right:auto; padding:0; list-style:none; display:flex; }
.feature-pills__info-item { padding:0; position:relative; }
.feature-pills__item-bg { z-index:0; background-color:#ffffff14; border-radius:2em; width:100%; height:100%; position:absolute; inset:0%; }
.feature-pills__item-button { z-index:1; grid-column-gap:.625em; grid-row-gap:.625em; background-color:#0000; flex-flow:row; justify-content:flex-start; align-items:center; padding:.75em 1.25em; display:flex; position:relative; cursor:pointer; border:none; font:inherit; }
.feature-pills__item-label { letter-spacing:-.015em; white-space:nowrap; flex:none; font-size:1.25em; font-weight:500; }
.feature-pills__item-icon { aspect-ratio:1; background-color:#fff3; border-radius:100em; flex:none; justify-content:center; align-items:center; width:1.25em; padding:0; display:flex; position:relative; }
.feature-pills__item-icon-bar { background-color:#fff; flex:none; width:1px; height:50%; padding:0; position:absolute; }
.feature-pills__item-icon-bar.is--horizontal { width:50%; height:1px; }
.feature-pills__visual-cover { z-index:1; width:100%; height:100%; position:absolute; inset:0%; }
.feature-pills__visual-cover-img { object-fit:cover; width:100%; height:100%; }
.feature-pills__item-content { z-index:2; pointer-events:none; position:absolute; inset:0%; }
.feature-pills__item-mask { width:100%; height:100%; overflow:hidden; }
.feature-pills__item-inner { max-width:var(--content-item-expanded); flex-flow:column; justify-content:flex-start; align-items:flex-start; width:max-content; padding:1.5em 1.5em 2em; display:flex; }
.feature-pills__item-body { margin:0; font-size:1.25em; font-weight:500; }
.feature-pills__item-body-span { opacity:.5; }
.feature-pills__close { z-index:2; position:absolute; top:1em; right:1em; }
.feature-pills__close-button { aspect-ratio:1; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); background-color:#ffffff14; border-radius:10em; justify-content:center; align-items:center; width:2em; padding:8px; display:flex; position:relative; cursor:pointer; border:none; font:inherit; }
@media screen and (max-width:991px) {
 .section-resource { justify-content:center; align-items:flex-start; padding-top:5em; }
 .feature-pills__wrap { background-color:#0000; border-style:none; border-radius:0; height:auto; }
 .feature-pills__layout { flex-flow:column; }
 .feature-pills__col { width:100%; }
 .feature-pills__col.is--visual { aspect-ratio:1; border-radius:1.25em; order:-9999; overflow:hidden; }
 .feature-pills__info-collection { padding:2.5em 0 4em; }
 .feature-pills__info-list { flex-flow:wrap; justify-content:flex-start; align-items:flex-start; max-width:none; }
 .feature-pills__info-item { width:var(--content-item-expanded); }
 .feature-pills__item-button { justify-content:space-between; align-items:center; width:100%; }
 .feature-pills__item-inner { max-width:100%; }
}
[data-feature-pills-init] { --content-item-expanded:25em; }
@media screen and (max-width:991px) { [data-feature-pills-init] { --content-item-expanded:calc(50% - 0.5em); } }
@media screen and (max-width:767px) { [data-feature-pills-init] { --content-item-expanded:100%; } }
[data-feature-pills-button] { opacity:1; transition:opacity 400ms ease-in-out 300ms; }
[data-feature-pills-inner] { opacity:0; transition:opacity 300ms ease-in-out 0ms; }
[data-feature-pills-visual] { opacity:0; transition:opacity 350ms ease-in-out; }
[data-feature-pills-cover] { opacity:1; transition:opacity 350ms ease-in-out; }
[data-feature-pills-item][data-active="true"] [data-feature-pills-button] { opacity:0; transition:opacity 50ms ease-in-out 0ms; }
[data-feature-pills-item][data-active="true"] [data-feature-pills-inner] { opacity:1; }
[data-feature-pills-visual][data-active="true"] { opacity:1; }
[data-feature-pills-cover][data-active="false"] { opacity:0; }
[data-feature-pills-close] { transform:scale(0) rotate(135deg); opacity:0; pointer-events:none; transition:all 500ms cubic-bezier(.7, 0, .3, 1); }
[data-feature-pills-active="true"] [data-feature-pills-close] { transform:scale(1) rotate(45deg); opacity:1; pointer-events:auto; }
[data-feature-pills-init][data-edit-mode="true"] [data-feature-pills-collection] { overflow:auto; justify-content:start; }
[data-feature-pills-init][data-edit-mode="true"] [data-feature-pills-button] { display:none; }
[data-feature-pills-init][data-edit-mode="true"] [data-feature-pills-content] { position:relative; pointer-events:auto; }
[data-feature-pills-init][data-edit-mode="true"] [data-feature-pills-inner] { opacity:1; transform:translate(0px,0em); }

/* Existing People heading, stage selector and palette. */
.experience-section{--experience-color:var(--mint);--experience-ink:var(--ink);background:var(--paper)}
.experience-section[data-experience-theme="launch"]{--experience-color:var(--coral)}
.experience-section[data-experience-theme="postlaunch"]{--experience-color:var(--sage)}
.experience-section[data-experience-theme="loe"]{--experience-color:var(--ink);--experience-ink:var(--paper)}
.experience-heading{display:flex;gap:8vw;justify-content:space-between;align-items:flex-end;padding-bottom:48px}
.experience-heading h2{font-size:clamp(42px,4.7vw,76px);max-width:800px}
.experience-heading>p{max-width:30ch;font-size:18px;line-height:1.55;padding-bottom:4px}
.experience-navigation{position:sticky;top:0;z-index:8;background:var(--paper);padding:10px var(--gutter);border-bottom:1px solid #281c1c25}
.experience-stage-tabs{display:flex;justify-content:space-between;gap:24px;max-width:1180px;margin:auto}
.experience-stage-tabs button{display:flex;align-items:center;gap:12px;min-height:52px;padding:12px 0;border-bottom:2px solid transparent;font:600 clamp(24px,2vw,26px)/1.25 var(--sans);letter-spacing:0;color:var(--deep);white-space:nowrap}
.experience-stage-tabs button[aria-selected="true"]{border-bottom-color:var(--ink);color:var(--ink)}
.stage-color{width:14px;height:14px;display:block;flex:none;background:var(--mint)}
[data-experience-stage="launch"] .stage-color{background:var(--coral)}
[data-experience-stage="postlaunch"] .stage-color{background:var(--sage)}
[data-experience-stage="loe"] .stage-color{background:var(--ink)}
.experience-panel[hidden]{display:none}
.experience-panel:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}

/* Preserve Osmo's expansion and CSS-opacity states. Let eight experiences
   determine panel height instead of clipping them inside the three-item demo. */
.experience-panel{padding:36px var(--gutter) 72px}
.feature-pills__wrap{--content-item-expanded:100%;color:var(--ink);background:var(--paper);border:1px solid #281c1c18;border-radius:26px;max-width:1280px;min-height:760px;height:auto;margin:auto;overflow:clip}
.feature-pills__layout{height:auto;min-height:inherit;align-items:stretch}
.feature-pills__col{width:52%}
.feature-pills__col.is--visual{width:48%;min-height:100%;background:#e4e8e4}
.feature-pills__info-collection{height:auto;min-height:760px;padding:32px;justify-content:center}
.feature-pills__info-list{gap:12px;max-width:100%;width:100%;align-items:flex-start}
.feature-pills__info-item{width:max-content;max-width:100%}
.feature-pills__item-bg{background:var(--experience-color);border-radius:28px}
.feature-pills__item-button{color:var(--experience-ink);width:100%;min-height:58px;gap:12px;padding:15px 19px;text-align:left}
.feature-pills__item-label{font:500 17px/1.35 var(--sans);white-space:normal;flex:1;min-width:0;letter-spacing:-.02em}
.feature-pills__item-icon{width:22px;background:transparent;border:1px solid currentColor;margin-left:2px}
.feature-pills__item-icon-bar{background:currentColor}
.pill-audience{display:inline-flex;align-items:center;gap:6px;font:500 12px/1.2 var(--sans);letter-spacing:0;flex:none;white-space:nowrap}
.pill-audience svg{width:19px;height:19px;flex:none}
.feature-pills__item-inner{color:var(--experience-ink);width:100%;max-width:100%;padding:24px 26px 28px;gap:18px}
.feature-pills__item-body{font:500 30px/1.08 var(--serif);letter-spacing:-.03em;width:100%}
.pill-expanded-title{display:block;max-width:19ch}
.feature-pills__item-body-span{display:block;opacity:1;font:400 17px/1.5 var(--sans);letter-spacing:0;margin-top:16px;max-width:34ch}


.feature-pills__close{top:18px;right:18px;z-index:4}
.feature-pills__close-button{width:44px;height:44px;color:var(--ink);background:var(--paper);box-shadow:0 2px 10px #281c1c15;backdrop-filter:none}
.feature-pills__close-button:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.feature-pills__item-button:focus-visible{outline-offset:3px;border-radius:28px}
.feature-pills__info-item[data-active="true"]:focus-within{outline:2px solid var(--ink);outline-offset:4px;border-radius:28px}
.feature-pills__visual-collection{position:absolute;inset:0}
.feature-pills__visual-item{display:flex;align-items:center;justify-content:center;padding:7%;background:#e4e8e4}
.feature-pills__visual-cover{pointer-events:none}
.feature-pills__visual-cover-img{object-position:49% center}
.feature-pills__visual-img{object-position:49% center}
.format-placeholder{background:var(--paper);box-shadow:0 12px 35px #281c1c12;width:100%;overflow:hidden;border:1px solid #281c1c15}
.placeholder-chrome{height:45px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;font:400 12px/1.3 var(--sans);color:var(--deep);background:#f8f8f5}
.placeholder-chrome>img{width:24px;height:18px;object-fit:contain}
.placeholder-picture{width:100%;overflow:hidden}
.placeholder-film .placeholder-picture{aspect-ratio:16/9}
.placeholder-web .placeholder-picture{aspect-ratio:4/3}
.placeholder-email{width:78%;max-width:350px}.placeholder-email .placeholder-picture{aspect-ratio:4/3}
.placeholder-guide{width:77%;max-width:350px}.placeholder-guide .placeholder-picture{aspect-ratio:4/5}
.placeholder-lines{display:flex;flex-direction:column;gap:11px;padding:24px}
.placeholder-lines i{height:5px;width:100%;background:#281c1c12}.placeholder-lines i:last-child{width:65%}
/* Same source structure on narrow screens: visual above, pills below. */
@media(max-width:991px){
 .experience-panel{padding:28px var(--gutter) 56px}
 .feature-pills__wrap{--content-item-expanded:calc(50% - .5em);min-height:0;border:0;background:transparent;overflow:visible}
 .feature-pills__layout{flex-direction:column;min-height:0}
 .feature-pills__col,.feature-pills__col.is--visual{width:100%}
 .feature-pills__col.is--visual{height:440px;aspect-ratio:auto;min-height:0;border-radius:22px;order:-9999;overflow:hidden}
 .feature-pills__info-collection{min-height:0;padding:24px 0 0}
 .feature-pills__info-list{gap:16px;flex-flow:wrap;align-items:flex-start}
 .feature-pills__info-item{width:var(--content-item-expanded)}
 .feature-pills__item-label{font-size:16px}
 .feature-pills__item-button{padding:16px;gap:10px}
 .feature-pills__visual-cover-img{object-fit:cover;object-position:49% 43%}
 .feature-pills__visual-item{padding:4% 16%}
 .placeholder-film{max-width:610px}.placeholder-web{max-width:480px}.placeholder-web .placeholder-picture{aspect-ratio:16/9}
 .placeholder-email,.placeholder-guide{max-width:250px}.placeholder-email .placeholder-picture{aspect-ratio:16/9}.placeholder-guide .placeholder-picture{aspect-ratio:1}
 .placeholder-lines{padding:18px;gap:8px}
 .feature-pills__close{top:14px;right:14px}
}
@media(max-width:767px){
 .experience-heading{display:block;padding-top:60px;padding-bottom:30px}.experience-heading h2{font-size:clamp(36px,9vw,48px)}.experience-heading>p{font-size:16px;margin-top:25px;max-width:34ch}
 .experience-navigation{padding:8px 16px}.experience-stage-tabs{gap:10px}.experience-stage-tabs button{font-size:18px;min-height:48px;gap:6px;white-space:normal}.stage-color{width:10px;height:10px}
 .experience-panel{padding:24px 20px 48px}
 .feature-pills__wrap{--content-item-expanded:100%}
 .feature-pills__col.is--visual{height:310px;border-radius:20px}
 .feature-pills__info-list{flex-direction:column;gap:12px}
 .feature-pills__info-item{width:100%}
 .feature-pills__item-button{padding:16px 18px;gap:10px;min-height:62px}
 .feature-pills__item-label{font-size:16px}
 .feature-pills__item-inner{padding:22px 24px 26px;gap:16px}
 .feature-pills__item-body{font-size:29px}
 .feature-pills__item-body-span{font-size:16px;line-height:1.5;margin-top:14px}

 .feature-pills__visual-item{padding:18px}
 .placeholder-web{max-width:300px}.placeholder-web .placeholder-picture{aspect-ratio:16/9}
 .placeholder-email,.placeholder-guide{max-width:180px}.placeholder-chrome{height:34px;padding:0 14px;font-size:12px}.placeholder-chrome>img{width:21px;height:15px}
 .placeholder-guide .placeholder-picture{aspect-ratio:1}.placeholder-email .placeholder-picture{aspect-ratio:4/3}
 .placeholder-lines{padding:14px;gap:7px}.placeholder-lines i{height:4px}
}
@media(prefers-reduced-motion:reduce){
 [data-feature-pills-button],[data-feature-pills-inner],[data-feature-pills-visual],[data-feature-pills-cover],[data-feature-pills-close]{transition:none!important}
}
/* In stacked layouts the actual matching visual moves into its pill's inner
   flow. Fixed visual space makes expansion independent of image-load timing. */
@media(max-width:991px){
 .feature-pills__col.is--visual{display:none}
 .feature-pills__info-collection{padding-top:0}
 .feature-pills__item-inner>.feature-pills__visual-item{position:relative;inset:auto;flex:none;width:100%;height:260px;min-height:260px;padding:14px;margin-top:4px;border-radius:16px;overflow:hidden}
 .feature-pills__item-inner .placeholder-film{max-width:330px}
 .feature-pills__item-inner .placeholder-web{max-width:240px}
 .feature-pills__item-inner .placeholder-email{width:100%;max-width:165px}
 .feature-pills__item-inner .placeholder-guide{width:100%;max-width:145px}
 .feature-pills__item-inner .placeholder-chrome{height:30px}
 .feature-pills__item-inner .placeholder-web .placeholder-picture{aspect-ratio:16/9}
 .feature-pills__item-inner .placeholder-guide .placeholder-picture{aspect-ratio:1}
 .feature-pills__item-inner .placeholder-email .placeholder-picture{aspect-ratio:4/3}
 .feature-pills__item-inner .placeholder-lines{padding:12px;gap:6px}
 .feature-pills__item-inner .placeholder-lines i{height:4px}
 .feature-pills__info-item>.feature-pills__close{position:absolute;top:12px;right:12px;margin:0}
 .feature-pills__close-button{background:var(--paper);border:1px solid #281c1c25}
 .feature-pills__item-inner{padding-right:26px}
}

/* Compact regular chips retain the original measured expansion. */
.feature-pills__info-list{align-items:flex-start;gap:10px}
.feature-pills__info-item{width:max-content;max-width:100%}
.feature-pills__item-bg{border:0;border-radius:28px;opacity:1}
.feature-pills__item-button{min-height:50px;padding:12px 17px;gap:10px}
.feature-pills__item-label{font:500 16px/1.35 var(--sans);letter-spacing:0;text-transform:none;text-wrap:pretty}
.feature-pills__item-icon{width:20px;height:20px}
@media(max-width:991px){
 .feature-pills__wrap{--content-item-expanded:100%}
 .feature-pills__info-list{max-width:none;flex-flow:column;align-items:flex-start;gap:10px}
 .feature-pills__info-item{width:100%}
 .feature-pills__item-button{min-height:50px;padding:12px 16px}
}

/* Selected experiences keep their compact label; only the artwork changes. */
.feature-pills--compact [data-feature-pills-content]{display:none}
.feature-pills--compact [data-feature-pills-item][data-active="true"] [data-feature-pills-button]{opacity:1;transition:none}
.feature-pills--compact [data-feature-pills-item][data-active="true"] .feature-pills__item-bg{box-shadow:inset 0 0 0 2px var(--experience-ink)}
.feature-pills--compact [data-feature-pills-item][data-active="true"] .feature-pills__item-icon{transform:rotate(45deg)}
@media(max-width:991px){
 .feature-pills--compact .feature-pills__col.is--visual{display:block;height:auto;aspect-ratio:1;margin-bottom:24px}
}

/* Keep every lifecycle label inside the narrowest supported viewport. */
@media(max-width:360px){
 .experience-stage-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
 .experience-stage-tabs button{display:grid;grid-template-rows:10px auto;justify-items:stretch;align-items:start;align-content:start;min-width:0;width:100%;min-height:74px;padding:8px 0;gap:6px;text-align:center;white-space:normal}
 .experience-stage-tabs .stage-color{justify-self:center}
}