/* parts/outcomes.php. The page can set (defaults = light pages, brand kit):
   --p-fg, --p-muted text · --p-line border · --p-pill-bg/--p-pill-fg active tab · --p-arrow-bg/--p-arrow-fg arrows
   --p-bleed carousel bleed into the page gutter · --out-w/--out-h card size */
.outc{display:flex;flex-direction:column;gap:16px;color:var(--p-fg,var(--ink-900))}
.outc__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.outc__intro{display:flex;flex-direction:column;gap:8px;max-width:620px}
.outc h2{margin:0;font:400 28px/1.22 var(--font-sans);text-wrap:pretty}
.outc h2 strong{font-weight:600}
.outc__intro p{margin:0;font:400 17px/1.45 var(--font-sans);color:var(--p-muted,var(--ink-600));text-wrap:pretty}

.parrows{display:none;gap:8px;flex:none}
.parrows button{all:unset;cursor:pointer;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--p-arrow-bg,var(--navy-900));color:var(--p-arrow-fg,var(--cream-100))}
.parrows button:focus-visible{outline:2px solid var(--orange-500);outline-offset:2px}

.outc__tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:4px;gap:4px;border:1px solid var(--p-line,rgba(11,26,51,.14));border-radius:999px}
.outc__tabs button{all:unset;cursor:pointer;text-align:center;padding:12px 0;border-radius:999px;font:500 14px/1 var(--font-sans);color:var(--p-muted,var(--ink-600))}
.outc__tabs [aria-selected="true"]{background:var(--p-pill-bg,var(--navy-900));color:var(--p-pill-fg,var(--cream-100));font-weight:600}
.outc__tabs button:focus-visible{outline:2px solid var(--orange-500)}

.outc__track{--b:var(--p-bleed,16px);display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-padding:0 var(--b);margin:0 calc(-1 * var(--b));padding:0 var(--b)}
.outc__track::-webkit-scrollbar{display:none}
.outc__track[hidden]{display:none}
.outc__card{flex:none;width:var(--out-w,135px);height:var(--out-h,200px);position:relative;border-radius:20px;overflow:hidden;scroll-snap-align:start}
.outc__photo{position:absolute;left:0;right:0;top:0;height:65%}
.outc__photo img{width:100%;height:100%;object-fit:cover}
.outc__card--you .outc__photo{display:flex;align-items:flex-end;justify-content:center;overflow:hidden;color:rgba(253,243,232,.55)}
.outc__card--you .icon{stroke-width:1.25}
.outc__info{position:absolute;z-index:2;left:6px;right:6px;bottom:6px;background:var(--cream-100);color:var(--ink-900);border-radius:12px;padding:8px 12px;display:flex;flex-direction:column;gap:4px}
.outc__info b{font:600 14px/1.15 var(--font-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.outc__info span{font:400 14px/1.2 var(--font-sans);color:var(--ink-600);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em;text-wrap:balance;white-space:pre-line}
.outc__logo{height:18px;width:72px;margin-top:4px}
.outc__logo img{width:100%;height:100%;object-fit:contain;object-position:left center}
.outc__card--you .outc__logo{width:auto;display:flex;align-items:center;font:700 14px/1 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--orange-700)}

@media (min-width:768px){
  .outc h2{font-size:36px}
  .outc__intro p{font-size:18px}
  .parrows{display:flex}
  .outc__tabs{max-width:420px}
  .outc__track{--b:var(--p-bleed,32px);gap:16px}
  .outc__card{width:var(--out-w,180px);height:var(--out-h,266px)}
  .outc__info b{font-size:15px}
  .outc__info span{font-size:14px}
}
@media (min-width:1280px){
  .outc h2{font-size:44px}
  .outc__track{--b:var(--p-bleed,0px)}
  .outc__card{width:var(--out-w,200px);height:var(--out-h,296px)}
}