/* The home page's Pip, stacks and research sections (index.html). */

/* Pip in the hero: press for another outfit. */
.hero-pip{display:block;margin:0 auto 14px;padding:6px;border:0;border-radius:24px;background:transparent;cursor:pointer;line-height:0}
.hero-pip img{width:112px;height:112px}
.hero-pip:hover{background:rgba(255,253,248,.1)}
.hero-pip.spin img{animation:pip-spin .9s cubic-bezier(.65,0,.35,1)}
@keyframes pip-spin{0%{transform:scaleX(1)}25%{transform:scaleX(0) translateY(-6px)}50%{transform:scaleX(1) translateY(-8px)}75%{transform:scaleX(0) translateY(-6px)}100%{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.hero-pip.spin img{animation:none}}

/* Meet Pip */
.pip-big{padding:clamp(56px,8vw,104px) 0}
/* Both sections are banana: one gap between them, not two. */
.pip-big + .for-you{padding-top:0}
.pip-big-head{max-width:46rem}
.pip-big-head .eyebrow{color:var(--ink)}
.pip-big-head h2{font-size:clamp(2.25rem,5.5vw,4rem);margin-top:14px}
.pip-big-head p:last-child{margin-top:18px;font-size:clamp(1.0625rem,1.6vw,1.25rem);line-height:1.5}
.pip-shots{list-style:none;padding:0;margin:clamp(32px,5vw,56px) 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.pip-shot{background:var(--cream);color:var(--ink);border-radius:24px;padding:20px 20px 24px;display:flex;flex-direction:column;gap:10px}
.pip-shot-img{border-radius:16px;overflow:hidden;background:var(--paper);display:flex;align-items:center;justify-content:center;aspect-ratio:16/11;padding:14px}
.pip-shot-img img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:12px;box-shadow:0 10px 28px rgba(20,18,26,.18)}
.pip-shot h3{font-size:1.5rem;margin-top:6px}
.pip-shot p{margin:0;font-size:.98rem;line-height:1.5;color:var(--muted)}
.pip-looks{margin-top:20px;background:var(--ink);color:var(--cream);border-radius:24px;padding:24px 28px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center}
.pip-looks h3{font-size:1.5rem}
.pip-looks p{margin:8px 0 0;font-size:.98rem;line-height:1.5;color:rgba(255,253,248,.85)}
.pip-looks-row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
.pip-looks-row img{width:72px;height:72px;display:block}
.pip-big-foot{margin-top:24px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center}
.pip-big-foot p{margin:0;font-size:.98rem;line-height:1.55;max-width:52rem}
.pip-big-links{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:900px){
  .pip-shots,.pip-looks,.pip-big-foot{grid-template-columns:minmax(0,1fr)}
  .pip-looks-row{justify-content:flex-start}
  .pip-looks-row img{width:56px;height:56px}
}

/* Stacks: text beside a screenshot */
.stacks-sec{padding:clamp(56px,8vw,104px) 0}
.feature-split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,64px);align-items:center}
.feature-text .eyebrow{color:var(--cobalt)}
.feature-text h2{font-size:clamp(2.25rem,5vw,3.5rem);margin-top:14px}
.feature-lede{margin-top:16px;font-size:clamp(1.0625rem,1.6vw,1.2rem);line-height:1.5}
.feature-list{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:14px}
.feature-list li{display:flex;flex-direction:column;gap:3px;line-height:1.5;color:var(--muted);font-size:.98rem}
.feature-list strong{color:var(--ink);font-size:1.05rem;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.feature-note{margin-top:18px;font-size:.95rem;color:var(--muted)}
.feature-shot{margin:0}
.feature-shot .shot-frame{border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(20,18,26,.22)}
.feature-shot img{display:block;width:100%;height:auto}
@media (max-width:900px){.feature-split{grid-template-columns:minmax(0,1fr)}}

/* Sources and the Research library */
.research-sec{padding:clamp(56px,8vw,104px) 0}
.research-sec .section-head{max-width:46rem}
.research-sec .section-head h2{font-size:clamp(2.25rem,5vw,3.5rem);margin-top:14px}
.research-sec .section-head p{color:rgba(255,253,248,.9)}
.research-grid{margin-top:clamp(28px,4vw,48px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:20px;align-items:start}
.research-card{margin:0;background:var(--cream);color:var(--ink);border-radius:22px;padding:14px 14px 18px;display:flex;flex-direction:column;gap:12px}
.research-card .shot-frame{border-radius:14px;overflow:hidden;border:1px solid rgba(20,18,26,.14)}
.research-card img{display:block;width:100%;height:auto}
.research-card figcaption{font-size:.95rem;line-height:1.5;color:var(--muted);padding:0 6px}
.research-card figcaption strong{color:var(--ink)}
.research-points{list-style:none;padding:0;margin:24px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.research-points li{border:2px solid rgba(255,253,248,.4);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:6px;font-size:.95rem;line-height:1.5;color:rgba(255,253,248,.88)}
.research-more{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px 28px}
.research-more a{color:var(--cream);font-weight:700;font-size:1.0625rem;text-underline-offset:4px}
.research-points strong{color:var(--cream);font:800 1.1rem/1.2 var(--head)}
@media (max-width:1000px){.research-points{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1000px){.research-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.research-points{grid-template-columns:minmax(0,1fr)}}
html.rc-hc .pip-shot,html.rc-hc .research-card{border:2px solid var(--ink)}