/* StrayBirds product subpages (/one-touch, /folding). Loaded after styles.css; all new layout uses the pp- prefix. */

/* Shared hero */
.pp-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;padding-block:40px 80px;align-items:stretch}
.pp-hero-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding-top:28px}
.pp-display{font-family:Impact,"Arial Narrow",Arial,sans-serif;font-size:min(max(4.5rem,11vw),10rem,13vw);font-weight:900;line-height:.88;letter-spacing:-.045em;margin-top:28px}
.pp-lede{font-size:clamp(1.375rem,2.4vw,2rem);font-weight:800;letter-spacing:-.03em;line-height:1.35;margin-top:30px}
.pp-intro{margin-top:18px;color:#5c6056;line-height:1.95;max-width:34em}
.pp-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:32px}
.pp-actions .button,.pp-actions .text-link{font-size:.875rem}
.pp-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));width:100%;margin:auto 0 0;padding-top:44px;gap:0 16px}
.pp-facts div{border-top:1px solid var(--line);padding-top:14px;min-width:0}
.pp-facts dt{font-size:.8125rem;letter-spacing:.1em;color:var(--muted)}
.pp-facts dd{margin:6px 0 0;font-weight:700;overflow-wrap:anywhere}

.pp-hero-product{position:relative;display:flex;flex-direction:column;background:#e8e9e1;min-width:0}
.pp-hero-product img{height:auto;aspect-ratio:4/5;object-fit:contain;mix-blend-mode:multiply;padding:28px 28px 0}
.pp-hero-product figcaption{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 16px;padding:16px 24px 20px;font-size:.875rem;letter-spacing:.06em;border-top:1px solid var(--line)}
.pp-hero-product .photo-sticker{top:24px;right:24px;background:var(--accent);color:var(--ink)}

.pp-hero--folding{align-items:end;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.pp-hero--folding .pp-hero-copy{padding-bottom:12px}
.pp-hero--folding h1{font-size:clamp(2.625rem,6vw,5.5rem);font-weight:900;line-height:1.14;margin-top:30px}
.pp-hero--folding .pp-intro{margin-top:28px}
.pp-hero-lifestyle{position:relative;aspect-ratio:4/5;overflow:hidden;background:#b3b7a9;min-width:0}
.pp-hero-lifestyle img{position:absolute;inset:0;object-position:50% 58%}
.pp-hero-lifestyle figcaption{position:absolute;inset:auto 0 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 16px;padding:48px 20px 18px;background:linear-gradient(transparent,rgba(0,0,0,.5));color:#fff;font-size:.875rem;letter-spacing:.04em}

/* ONE TOUCH: colors */
.pp-colors{background:#e9e9df}
.pp-colors-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px 48px;align-items:end}
.pp-colors-head>p{color:#5c6056;line-height:1.95;max-width:30em}
.pp-palette{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:0 32px}
.pp-palette li{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-top:1px solid #c6c9bd;min-width:0}
.pp-palette .swatch{margin-top:3px}
.pp-palette strong{display:block}
.pp-palette li span:not(.swatch){display:block;font-size:.875rem;color:#5c6056;margin-top:2px}
.pp-colors-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 24px;margin-top:20px;border-top:1px solid #c6c9bd;padding-top:16px}
.pp-colors-foot .color-footnote{margin:0}

/* ONE TOUCH: craft */
.pp-craft-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px 8%;align-items:end}
.pp-craft-photo{position:relative;aspect-ratio:4/5;overflow:hidden;background:#ddd}
.pp-craft-photo figcaption{position:absolute;left:20px;bottom:20px;right:20px;width:fit-content;background:var(--paper);padding:8px 14px;font-size:.875rem}
.pp-craft-copy{min-width:0}
.pp-craft-copy h2{margin-top:20px}
.pp-craft-copy .body-copy{max-width:32em}
.pp-quote{margin:44px 0 0;padding:28px 0 0;border-top:1px solid var(--ink)}
.pp-quote p{font-size:clamp(1.625rem,3vw,2.5rem);font-weight:800;letter-spacing:-.04em;line-height:1.3}
.pp-note,.pp-point-note{font-size:.875rem;color:var(--muted);line-height:1.8;margin-top:24px}

/* ONE TOUCH: three selling points, each with its own composition */
.pp-points-head{display:flex;justify-content:space-between;align-items:end;gap:24px 48px;margin-bottom:56px;flex-wrap:wrap}
.pp-points-head>p{color:#5c6056;line-height:1.95;max-width:26em}
.pp-num{display:block;font-family:Impact,"Arial Narrow",Arial,sans-serif;font-size:clamp(4rem,8vw,7.5rem);line-height:.85;letter-spacing:-.04em;color:var(--accent)}
.pp-point{min-width:0}
.pp-point+.pp-point{margin-top:88px}
.pp-point h3{font-size:clamp(1.75rem,3vw,2.75rem);letter-spacing:-.05em;line-height:1.2}
.pp-point-copy{min-width:0}
.pp-point-copy>p:not(.pp-pull):not(.pp-point-note){margin-top:18px;color:#5c6056;line-height:1.95;max-width:30em}

.pp-point--frame{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr) minmax(0,3.2fr);gap:32px 40px;align-items:start;border-top:1px solid var(--ink);padding-top:32px}
.pp-point--frame .pp-point-copy{padding-top:8px}
.pp-tags{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.pp-tags li{border:1px solid var(--ink);border-radius:999px;padding:6px 14px;font-size:.875rem}
.pp-point-product{background:#e8e9e1;display:flex;flex-direction:column}
.pp-point-product img{height:auto;aspect-ratio:4/5;object-fit:contain;mix-blend-mode:multiply;padding:20px 20px 0}
.pp-point-product figcaption{padding:12px 20px 16px;font-size:.875rem;letter-spacing:.06em}

.pp-point--fold{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:40px 56px;align-items:center;background:var(--ink);color:var(--paper);padding:56px clamp(24px,5vw,64px)}
.pp-point--fold h3{margin-top:24px}
.pp-point--fold .pp-point-copy>p:not(.pp-point-note){color:#d9dbd2}
.pp-point--fold .pp-point-note{color:#b9bcb2}
.pp-point--fold .text-link{margin-top:20px}
.pp-point--fold .text-link:hover{color:#ff8a6e}
.pp-point--fold :focus-visible{outline-color:#ff8a6e}
.pp-pair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:16px;align-items:center}
.pp-pair figure{background:var(--paper);color:var(--ink);display:flex;flex-direction:column;min-width:0}
.pp-pair img{height:auto;aspect-ratio:2/3;object-fit:contain;mix-blend-mode:multiply;padding:14px 14px 0}
.pp-pair figcaption{padding:10px 14px 14px;font-size:.875rem;font-weight:700;letter-spacing:.06em}
.pp-pair-arrow{font-size:1.75rem;color:#ff8a6e}

.pp-point--style{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px 8%;align-items:end}
.pp-point-photo{aspect-ratio:3/4;overflow:hidden;background:#ddd}
.pp-point-photo img{object-position:50% 60%}
.pp-point--style .pp-point-copy{border-top:1px solid var(--ink);padding-top:28px}
.pp-pull{font-size:clamp(2rem,4.4vw,3.75rem);font-weight:900;letter-spacing:-.055em;line-height:1.15;margin-top:28px}
.pp-point--style h3{font-size:1.25rem;letter-spacing:0;margin-top:32px}

/* Cross-page navigation */
.pp-next{border-top:1px solid var(--line)}
.pp-next-head{display:flex;justify-content:space-between;align-items:end;flex-wrap:wrap;gap:20px 40px;margin-bottom:36px}
.pp-next-head h2{margin-top:16px}
.pp-next-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.pp-next-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);background:#e9e9df;transition:background-color .25s}
.pp-next-card:hover{background:#e2e3d7}
.pp-next-card figure{aspect-ratio:3/4;overflow:hidden;background:#d7d9ce}
.pp-next-card img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pp-next-card:hover img{transform:scale(1.04)}
.pp-next-card--product figure{background:#e8e9e1}
.pp-next-card--product img{object-fit:contain;mix-blend-mode:multiply;padding:12px}
.pp-next-body{display:flex;flex-direction:column;gap:14px;padding:24px;min-width:0}
.pp-next-meta{font-size:.875rem;letter-spacing:.1em;color:var(--muted)}
.pp-next-body strong{font-size:clamp(1.375rem,2.2vw,1.875rem);line-height:1.3;letter-spacing:-.04em}
.pp-next-go{margin-top:auto;align-self:flex-start;display:inline-flex;gap:12px;font-size:.875rem;font-weight:700;border-bottom:1px solid currentColor;padding-bottom:4px}
.pp-next-card:hover .pp-next-go{color:#bc3518}

/* FOLDING: before / after */
.pp-compare{background:#e9e9df}
.pp-compare-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px 7%;align-items:start}
.pp-fold-visual{background:var(--paper);min-height:0}
.pp-fold-visual>img{height:auto;aspect-ratio:4/5;padding:0 24px 16px}
.pp-compare-copy{min-width:0;padding-top:12px}
.pp-states{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:24px}
.pp-states li{border-top:2px solid var(--ink);padding-top:18px;transition:opacity .3s}
.pp-state-tag{display:inline-block;font-size:.875rem;font-weight:700;letter-spacing:.1em;background:var(--ink);color:var(--paper);padding:3px 10px}
.pp-state--closed .pp-state-tag{background:var(--accent);color:var(--ink)}
.pp-states .pp-state--closed{border-top-color:var(--accent)}
.pp-states h3{font-size:1.25rem;margin-top:14px}
.pp-states p{margin-top:8px;color:#5c6056;line-height:1.85}
/* Highlight the state currently shown in the viewer (progressive; readable without it). */
.pp-compare:has([data-fold=open][aria-pressed=true]) .pp-state--closed,.pp-compare:has([data-fold=closed][aria-pressed=true]) .pp-state--open{opacity:.55}
.pp-caution{margin-top:32px;padding:16px 18px;border-left:3px solid var(--accent);background:var(--paper);font-size:.9375rem;color:#3f423b;line-height:1.8;max-width:36em}

/* FOLDING: six folded colors */
.pp-set-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 48px;align-items:end;margin-bottom:40px}
.pp-set-head>p{color:#5c6056;line-height:1.95;max-width:30em}
.pp-folded-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.pp-folded-grid li{background:var(--paper);min-width:0}
.pp-folded-grid figure{display:flex;flex-direction:column;height:100%}
.pp-folded-grid img{height:auto;aspect-ratio:4/5;object-fit:contain;mix-blend-mode:multiply;padding:20px}
.pp-folded-grid figcaption{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-top:auto;padding:14px 20px 18px;border-top:1px solid var(--line)}
.pp-folded-grid figcaption span{font-size:.875rem;color:#5c6056}
.pp-folded-set .color-footnote{margin-top:16px}

/* FOLDING: carry story */
.pp-carry{background:#e9e9df}
.pp-carry-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:40px 8%;align-items:center}
.pp-carry-photo{position:relative;aspect-ratio:2/3;overflow:hidden;background:#ccc}
.pp-carry-photo figcaption{position:absolute;left:20px;bottom:20px;right:20px;width:fit-content;background:var(--paper);padding:8px 14px;font-size:.875rem}
.pp-carry-copy{min-width:0}
.pp-carry-copy h2{margin-top:20px}
.pp-day{list-style:none;margin:36px 0 0;padding:0}
.pp-day li{display:grid;grid-template-columns:minmax(5.5em,auto) minmax(0,1fr);gap:4px 24px;padding:18px 0;border-top:1px solid #c6c9bd}
.pp-day li:last-child{border-bottom:1px solid #c6c9bd}
.pp-day-when{font-weight:700;font-size:.875rem;letter-spacing:.08em;color:#bc3518;padding-top:2px}
.pp-day p{line-height:1.85}

/* FOLDING: film CTA */
.pp-film{background:var(--ink);color:var(--paper);padding-block:88px}
.pp-film-inner{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px 64px;align-items:end}
.pp-film .eyebrow{color:#ff8a6e}
.pp-film h2{font-size:clamp(2.25rem,5vw,4.5rem);margin-top:18px}
.pp-film-copy{color:#d9dbd2;line-height:1.95;max-width:30em}
.pp-film .button{margin-top:28px}
.pp-film .button.light:hover{background:var(--accent);color:var(--ink)}
.pp-film :focus-visible{outline-color:#ff8a6e}

/* FOLDING: FAQ */
.pp-faq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:40px 8%;align-items:start}
.pp-faq-head h2{margin-top:20px}
.pp-faq-head>p:last-child{margin-top:20px;color:#5c6056;line-height:1.95}
.pp-faq-list details{border-top:1px solid var(--ink)}
.pp-faq-list details:last-child{border-bottom:1px solid var(--ink)}
.pp-faq-list summary{list-style:none;display:flex;align-items:center;gap:20px;padding:22px 0;min-height:44px;cursor:pointer;font-size:1.125rem;font-weight:700;line-height:1.5}
.pp-faq-list summary::-webkit-details-marker{display:none}
.pp-faq-list summary::after{content:"+";margin-left:auto;flex-shrink:0;font-size:1.625rem;font-weight:400;line-height:1;transition:transform .25s}
.pp-faq-list details[open] summary::after{transform:rotate(45deg)}
.pp-faq-list summary:hover .pp-faq-q{color:#bc3518}
.pp-faq-list summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.pp-faq-no{font-family:monospace;font-size:.875rem;font-weight:400;color:#bc3518;flex-shrink:0}
.pp-faq-q{min-width:0}
.pp-faq-answer{padding:0 44px 26px;color:#3f423b;line-height:1.95;max-width:42em}

/* Tablet */
@media(max-width:1050px){
  .pp-hero{gap:32px;padding-bottom:64px}
  .pp-point--frame{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pp-point--frame .pp-num{grid-column:1/-1}
  .pp-point--fold{grid-template-columns:1fr}
  .pp-point+.pp-point{margin-top:64px}
  .pp-next-card{grid-template-columns:1fr}
  .pp-next-card figure{aspect-ratio:4/3}
  .pp-next-card img{object-position:50% 70%}
  .pp-next-card--product img{object-position:center}
  .pp-film{padding-block:64px}
}

/* Mobile */
@media(max-width:760px){
  .pp-hero,.pp-hero--folding{grid-template-columns:1fr;gap:32px;padding-block:22px 48px}
  .pp-hero-copy{padding-top:12px}
  /* Wordmark tracks viewport width so "TOUCH" never overflows, even at 200% text. */
  .pp-display{font-size:min(24vw,7rem);margin-top:22px}
  .pp-lede{margin-top:22px}
  .pp-facts{padding-top:32px}
  .pp-hero-product img{padding:16px 16px 0}
  .pp-hero-product .photo-sticker{top:14px;right:14px}
  .pp-hero--folding h1{font-size:clamp(2.375rem,10.5vw,3.5rem);margin-top:22px}
  .pp-colors-head,.pp-set-head,.pp-craft-grid,.pp-point--frame,.pp-point--style,.pp-compare-grid,.pp-carry-grid,.pp-film-inner,.pp-faq-grid,.pp-next-grid{grid-template-columns:1fr}
  .pp-colors-head h2,.pp-set-head h2{font-size:2.125rem}
  .pp-palette{margin-top:28px}
  .pp-craft-photo{aspect-ratio:3/4}
  .pp-points-head{margin-bottom:36px}
  .pp-point--frame{padding-top:24px}
  .pp-point--fold{padding:36px 20px;margin-inline:-18px}
  .pp-pair{gap:8px}
  .pp-pair img{padding:8px 8px 0}
  .pp-pair figcaption{padding:8px 10px 10px}
  .pp-pair-arrow{font-size:1.25rem}
  .pp-point--style .pp-point-photo{aspect-ratio:4/5}
  .pp-point--style .pp-point-copy{order:-1}
  .pp-next-grid{gap:16px}
  .pp-next-card{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .pp-next-card figure{aspect-ratio:3/4}
  .pp-next-body{padding:18px 16px}
  .pp-fold-visual>img{padding:0 12px 12px}
  .pp-folded-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp-folded-grid img{padding:12px}
  .pp-folded-grid figcaption{padding:12px 14px 14px}
  .pp-day li{grid-template-columns:1fr}
  .pp-film{padding-block:48px}
  .pp-faq-list summary{font-size:1.0625rem;gap:14px;padding-block:18px}
  .pp-faq-answer{padding:0 0 22px}
}
@media(max-width:390px){
  .pp-next-card{grid-template-columns:1fr}
  .pp-next-card figure{aspect-ratio:4/3}
  .pp-folded-grid figcaption{display:block}
  .pp-folded-grid figcaption span{display:block;margin-top:2px}
}
/* Preserve text contrast in the inactive comparison state and on orange labels. */
.pp-hero-product .photo-sticker,.pp-state--closed .pp-state-tag,.pp-film .button.light:hover{color:#151713}.pp-compare-copy>.body-copy,.pp-carry-copy>.body-copy{color:#5c6056}.pp-compare:has([data-fold=open][aria-pressed=true]) .pp-state--closed,.pp-compare:has([data-fold=closed][aria-pressed=true]) .pp-state--open{opacity:1;border-top-style:dashed;border-top-color:#92978b}
.pp-film .button.light{color:var(--ink)}
/* On phones, introduce the actual bicycle before the longer product story. */
@media(max-width:760px){
 .pp-hero--product{row-gap:0}.pp-hero--product .pp-hero-copy{display:contents}
 .pp-hero--product .pp-hero-copy>.eyebrow{order:1;margin-top:12px}.pp-hero--product .pp-display{order:2}
 .pp-hero--product .pp-lede{order:3;margin-bottom:24px}.pp-hero--product .pp-hero-product{order:4}
 .pp-hero--product .pp-hero-product img{height:360px;aspect-ratio:auto;width:100%}
 .pp-hero--product .pp-intro{order:5;margin-top:24px}.pp-hero--product .pp-actions{order:6;margin-top:22px}.pp-hero--product .pp-facts{order:7;margin-top:10px}
}
/* Mobile pass: tablet hero product card hugs its content; tall 2:3 lifestyle frames shortened on phones. */
@media(min-width:761px) and (max-width:1050px){.pp-hero--product{align-items:start}}
@media(max-width:760px){.pp-carry-photo{aspect-ratio:3/4}.pp-carry-photo img{object-position:50% 70%}.pp-hero-lifestyle{aspect-ratio:4/5}}