/* Pepful Signature website study. Approved palette, logo and app visual language.
   Copy, section order, form behavior and responsive content remain in the source. */
.editorial {
 --cr-surface-canvas:#FAF7F2; --cr-text-primary:#111111; --cr-text-secondary:#62595B;
 --cr-action-primary:#76565A; --cr-action-hover:#624448; --cr-border-subtle:#E5DCDA;
 color:var(--cr-text-primary); background:var(--cr-surface-canvas);
}
.editorial h1,.editorial h2,.editorial .display {
 font-family:var(--cr-font-heading); font-weight:450; letter-spacing:-.045em;
 color:var(--cr-text-primary);
}
.editorial em { font-style:normal; font-weight:600; color:var(--cr-action-primary); }
.editorial h3 { font-weight:550; letter-spacing:-.02em; color:var(--cr-text-primary); }
.editorial .launch-note { background:var(--cr-surface-canvas); color:var(--cr-text-secondary); border-bottom:1px solid var(--cr-border-subtle); letter-spacing:0; }
.editorial .site-header { background:var(--cr-surface-canvas); border-bottom:1px solid var(--cr-border-subtle); }
.editorial .site-header .wrap { min-height:100px; }
.editorial .wordmark img { width:180px; }
.editorial .cr-btn { border-radius:2px 12px 2px 2px; background:var(--cr-action-primary); color:#FAF7F2; border-color:var(--cr-action-primary); box-shadow:none; font-weight:600; }
.editorial .cr-btn:hover { background:var(--cr-action-hover); }
.editorial .text-link { color:var(--cr-action-primary); border-bottom-color:var(--cr-border-control); }
.editorial .eyebrow { font-family:var(--cr-font-body); font-weight:500; letter-spacing:.09em; color:var(--cr-text-secondary); margin-bottom:20px; }
.editorial .hero-full { background:var(--cr-surface-canvas); }
.editorial .hero-inner { padding-top:64px; padding-bottom:56px; }
.editorial .hero-copy { max-width:540px; }
.editorial .hero-copy .display { font-size:clamp(42px,4.3vw,66px); line-height:1.08; margin-bottom:26px; }
.editorial .hero-copy .display em { margin-top:8px; }
.editorial .hero-copy .lead { color:var(--cr-text-secondary); font-size:19px; line-height:1.55; max-width:38ch; margin-bottom:28px; }
.editorial .hero-photo { min-height:620px; margin:28px 28px 28px 0; border-radius:3px 44px 3px 3px; overflow:hidden; }
.editorial .hero-photo img { object-position:64% center; }
.editorial .hero-note { color:var(--cr-text-secondary); }
.editorial section { padding-top:80px; padding-bottom:80px; }
.editorial .hero-full { padding:0; }
.editorial .how-head h2,.editorial .supporters h2,.editorial .partners h2,
.editorial .recover-copy .display,.editorial .updates h2,.editorial .faq-intro h2 {
 font-size:clamp(32px,3.5vw,48px); line-height:1.12;
}
.editorial .how-head .lead,.editorial .record .lead,.editorial .partners .lead { font-size:18px; line-height:1.6; }
.editorial .how-head { margin-bottom:36px; }
.editorial .record,.editorial .partners,.editorial .updates,.editorial .season { background:var(--cr-surface-canvas); }
.editorial .record .display { font-size:38px; line-height:1.15; }
.editorial .record { border-top:1px solid var(--cr-border-subtle); border-bottom:1px solid var(--cr-border-subtle); }
.editorial .supporters,.editorial .connected { background:var(--cr-surface-soft); }
.editorial .situation img,.editorial .stack-front,.editorial .stack-front img { border-radius:2px 24px 2px 2px; }
.editorial .situation { box-shadow:none; background:transparent; }
.editorial .situation h3 { font-size:20px; line-height:1.35; }
.editorial .season-grid article { background:transparent; border-radius:0; box-shadow:none; border:0; border-top:1px solid var(--cr-border-subtle); padding:24px 0; }
.editorial .signature-feature-icon { width:32px; height:32px; margin-bottom:20px; }
.editorial .signature-area-icon { width:28px; height:28px; grid-column:1; grid-row:1/4; margin-top:3px; }
.editorial .showcase-tab { grid-template-columns:32px 1fr; column-gap:18px; border-radius:0; border-left:0; border-top:1px solid var(--cr-border-subtle); padding:24px 0; }
.editorial .showcase-tab > :not(.signature-area-icon) { grid-column:2; }
.editorial .showcase-tab[aria-selected=true] { background:transparent; border-left:0; }
.editorial .showcase-tab[aria-selected=true] .showcase-tab-title { color:var(--cr-action-primary); }
.editorial .showcase-tab-title { font-family:var(--cr-font-heading); font-weight:500; color:var(--cr-text-primary); font-size:19px; }
.editorial .showcase-tab-desc { color:var(--cr-text-secondary); margin-top:6px; }
.editorial .showcase-phone { border:0; background:transparent; padding:0; border-radius:0; }
.editorial .showcase-panel img { border-radius:18px; border:1px solid var(--cr-border-control); box-shadow:none; }
.editorial .story-number { font-family:var(--cr-font-heading); font-weight:450; color:var(--cr-action-primary); }
.editorial .story-steps li { border-color:var(--cr-border-subtle); }
.editorial .rule { display:none; }
.editorial .commit { border-color:var(--cr-border-control); }
.editorial .commit h3,.editorial .faq-group-title,.editorial .faq-nav a { color:var(--cr-action-primary); }
.editorial .faq-note { background:transparent; border-left:0; padding-left:0; }
.editorial .faq-nav a,.editorial .faq-list details,.editorial .partner-points li { border-color:var(--cr-border-subtle); }
.editorial .faq-lead,.editorial .faq-help,.editorial .faq-note,.editorial .partner-points p,
.editorial .partners-intro p:not(.eyebrow):not(.lead),.editorial .situation p,.editorial .season-grid p,
.editorial .story-steps p,.editorial .how-head .lead { color:var(--cr-text-secondary); }
.editorial input,.editorial select,.editorial textarea,.editorial .choices label { border-radius:3px; }
.editorial .updates form { border-radius:3px 24px 3px 3px; box-shadow:none; }
.editorial .site-footer { background:var(--cr-surface-canvas); color:var(--cr-text-secondary); border-top:1px solid var(--cr-border-subtle); }
@media(max-width:1050px) {
 .editorial .hero-inner { padding:46px 28px; }
 .editorial .hero-copy .display { font-size:44px; }
 .editorial .hero-photo { min-height:600px; margin-right:20px; }
}
@media(max-width:820px) {
 .editorial .showcase-tabs { margin:0; padding:0; gap:0; justify-content:space-between; overflow:visible; }
 .editorial .showcase-tab { display:flex; flex-direction:column; align-items:center; flex:1 1 0; min-width:0; gap:10px; padding:12px 3px; border:0; border-bottom:1px solid var(--cr-border-subtle); border-radius:0; background:transparent; }
 .editorial .signature-area-icon { margin:0; width:24px; height:24px; }
 .editorial .showcase-tab[aria-selected=true] { background:transparent; border-bottom:2px solid var(--cr-action-primary); }
 .editorial .showcase-tab .showcase-tab-name { font-size:13px; color:var(--cr-text-secondary); }
 .editorial .showcase-tab[aria-selected=true] .showcase-tab-name { color:var(--cr-action-primary); }
 .editorial .showcase-panel img { mask-image:none; max-height:none; object-fit:contain; }
 .editorial .showcase-phone { padding-top:12px; }
}
@media(max-width:767px) {
 .editorial section { padding-top:52px; padding-bottom:52px; }
 .editorial .launch-note { padding:8px 20px; font-size:11px; gap:12px; }
 .editorial .site-header .wrap { min-height:82px; }
 .editorial .wordmark img { width:138px; }
 .editorial .hero-full { padding:0; }
 .editorial .hero-inner { padding:36px 20px 28px; }
 .editorial .hero-copy .display { font-size:clamp(35px,9vw,48px); line-height:1.1; }
 .editorial .hero-copy .lead { font-size:18px; max-width:none; }
 .editorial .hero-photo { margin:0 20px 28px; min-height:0; border-radius:2px 28px 2px 2px; }
 .editorial .hero-photo img { aspect-ratio:4/3; object-position:64% center; }
 .editorial .how-head h2,.editorial .supporters h2,.editorial .partners h2,.editorial .record .display,.editorial .updates h2,.editorial .faq-intro h2 { font-size:34px; }
 .editorial .signature-feature-icon { width:28px; height:28px; margin-bottom:16px; }
 .editorial .mobile-cta:not([hidden]) { box-shadow:none; }
}

/* Section cadence: each adjacent section has a distinct existing brand surface. */
.editorial .hero-full { background:#FAF7F2; }
.editorial .situations { background:#F1E7E7; }
.editorial .product-proof { background:#FFFFFF; }
.editorial .connected { background:#B89395; }
.editorial .connected :is(h2,h3,p,.eyebrow,.story-number,em) { color:#111111; }
.editorial .connected .story-steps li { border-color:#76565A; }
.editorial .record { background:#76565A; border:0; }
.editorial .record :is(h2,p,.lead,.eyebrow,em,p.dark) { color:#FAF7F2; }
.editorial .season { background:#FAF7F2; }
.editorial .supporters { background:#F1E7E7; }
.editorial .partners { background:#FFFFFF; border:0; }
.editorial .launch-faq { background:#FAF7F2; }
.editorial .updates { background:#F1E7E7; }
.editorial .site-footer { background:#FFFFFF; }
/* Images move inside their own frames; content, controls and page scrolling stay native. */
.editorial .supporters .stack-front { overflow:hidden; }
@media(prefers-reduced-motion:no-preference) {
 .editorial .hero-photo img.scroll-motion,
 .editorial .supporters .stack-front img.scroll-motion {
  transform:translate3d(0,var(--scroll-shift,0px),0) scale(1.12);
  transform-origin:center;
  transition:none;
 }
}
@media(prefers-reduced-motion:reduce) {
 .editorial .hero-photo img.scroll-motion,
 .editorial .supporters .stack-front img.scroll-motion { transform:none; }
}

/* Introductions share the width and alignment of the content they introduce. */
.editorial .situations .how-head,
.editorial .season .how-head { max-width:none; }
.editorial .launch-faq { padding-bottom:80px; }
.editorial .faq-help { margin-bottom:0; }
@media(min-width:821px) {
 .editorial .situations .how-head,
 .editorial .season .how-head { display:grid; grid-template-columns:1fr 1fr; column-gap:64px; align-items:end; margin-bottom:48px; }
 .editorial .situations .how-head .eyebrow,
 .editorial .season .how-head .eyebrow { grid-column:1 / -1; }
 .editorial .situations .how-head h2,
 .editorial .season .how-head h2 { margin:0; }
 .editorial .situations .how-head .lead,
 .editorial .season .how-head .lead { margin:0; max-width:52ch; }
 .editorial .product-proof > .wrap { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,390px); column-gap:clamp(48px,7vw,112px); align-items:start; }
 .editorial .product-proof .how-head { grid-column:1; grid-row:1; max-width:none; margin-bottom:28px; }
 .editorial .product-proof .showcase { display:contents; }
 .editorial .product-proof .showcase-tabs { grid-column:1; grid-row:2; }
 .editorial .product-proof .showcase-phone { grid-column:2; grid-row:1 / 3; align-self:center; }
 .editorial .product-proof .showcase-panel img { max-width:360px; }
 .editorial .product-proof .proof-footer { grid-column:1 / -1; }
}
@media(max-width:820px) {
 .editorial .launch-faq { padding-bottom:56px; }
}

/* Keep the short season introduction together rather than isolated across columns. */
.editorial .season .how-head { display:block; max-width:none; }
.editorial .season .how-head .lead { margin:20px 0 0; max-width:62ch; }
@media(min-width:821px) {
 .editorial .season .how-head h2 br { display:none; }
 .editorial .season .how-head h2 em::before { content:' '; }
}

/* Use the same connected introduction for the starting-point section. */
.editorial .situations .how-head { display:block; max-width:none; }
.editorial .situations .how-head .lead { margin:20px 0 0; max-width:76ch; }
@media(min-width:821px) {
 .editorial .situations .how-head h2 br { display:none; }
 .editorial .situations .how-head h2 em::before { content:' '; }
}

/* The mobile source is a portrait: preserve its framing and headroom. */
@media(max-width:767px) {
 .editorial .hero-photo { height:auto; aspect-ratio:4 / 5; }
 .editorial .hero-photo img { display:block; width:100%; height:auto; aspect-ratio:4 / 5; max-height:none; object-position:center top; }
}
