/* =======================
   Home — Hero (Section 1)
   ======================= */

.pl-hero{
  position:relative;isolation:isolate;
  background:
    radial-gradient(1200px 600px at 10% 0%, color-mix(in oklab, var(--pl-peach) 40%, transparent), transparent 70%),
    radial-gradient(900px 500px at 100% 20%, color-mix(in oklab, var(--pl-powder) 45%, transparent), transparent 70%),
    var(--pl-oatmilk);
  padding:48px 0 28px;
  overflow:hidden;
}

/* zipper divider */
.pl-zip{display:flex;align-items:center;justify-content:center;height:28px}
.pl-zip__teeth{
  width:100%;height:10px;display:block;
  background:
    repeating-linear-gradient(90deg,
      color-mix(in oklab, var(--pl-warmgray), white 50%) 0 22px,
      transparent 22px 32px);
  mask:linear-gradient(#000 0 0);
  opacity:.6;
}
.pl-zip__pull{
  position:absolute;right:24px;width:18px;height:18px;border-radius:6px;background:var(--pl-champagne);
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}

/* grid */
.pl-hero__grid{
  display:grid;gap:28px;align-items:center;
  grid-template-columns: 1.2fr 1fr;
}
.pl-hero__content .pl-eyebrow{
  letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--pl-warmgray);
}
.pl-hero__title{
  font-family:"Fraunces", serif;
  font-size:42px;line-height:1.12;margin:6px 0 10px;
}
.pl-hero__lead{max-width:56ch}

/* media layout with unique belt-wave clipping */
.pl-hero__media{
  position:relative;display:grid;gap:16px;
  grid-template-areas:
    "bag belt"
    "wallet belt";
  grid-template-columns: 1fr 1fr;
  align-items:center;
  padding:16px;
  border-radius:calc(var(--pl-radius) + 6px);
  background:
    linear-gradient(180deg, color-mix(in oklab, #fff, var(--pl-oatmilk) 60%), var(--pl-oatmilk));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);
  clip-path: polygon(0 0, 88% 0, 100% 18%, 100% 100%, 12% 100%, 0 82%);
}
.pl-hero__rail{
  position:absolute;left:-10px;top:0;bottom:0;width:10px;border-radius:10px;
  background:
    repeating-linear-gradient(180deg, var(--pl-champagne) 0 8px, transparent 8px 16px);
  filter:drop-shadow(0 0 6px rgba(0,0,0,.06));
}

.pl-shot{position:relative;overflow:hidden;border-radius:16px}
.pl-shot img{
  width:100%;max-width:350px;border-radius:16px;
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  transform:translateZ(0);
}

/* shine hover */
.pl-shot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.5) 30%, transparent 60%);
  transform:translateX(-100%);
  transition:transform var(--pl-d2) var(--pl-ease);
  pointer-events:none;
}
.pl-shot:hover::after{transform:translateX(100%)}

/* placement */
.pl-shot--bag{grid-area:bag}
.pl-shot--belt{grid-area:belt}
.pl-shot--wallet{grid-area:wallet}

/* entrance reveal */
.js-reveal{opacity:0;transform:translateY(18px);transition:opacity var(--pl-d2) var(--pl-ease), transform var(--pl-d2) var(--pl-ease)}
.js-reveal.is-visible{opacity:1;transform:none}

/* responsive */
@media (max-width: 1020px){
  .pl-hero__grid{grid-template-columns:1fr}
  .pl-hero__media{order:-1;clip-path: polygon(0 0, 100% 0, 100% 86%, 86% 100%, 0 100%, 0 12%)}
  .pl-hero__title{font-size:36px}
}
@media (max-width: 680px){
  .pl-hero{padding:36px 0 20px}
  .pl-hero__media{
    grid-template-areas:
      "bag"
      "belt"
      "wallet";
    grid-template-columns:1fr;
  }
  .pl-hero__title{font-size:30px}
}
@media (prefers-reduced-motion: reduce){
  .js-reveal, .pl-shot::after, .pl-btn{transition:none}
}
/* Мобилка: сначала контент (заголовок+текст), потом изображения */
@media (max-width: 1020px){
  .pl-hero__grid{
    grid-template-columns: 1fr;
  }
  .pl-hero__content{ order: 1; }
  .pl-hero__media{
    order: 2;
    /* ваш мобильный клип-путь сохраняем */
    clip-path: polygon(0 0, 100% 0, 100% 86%, 86% 100%, 0 100%, 0 12%);
  }
}

@media (max-width: 680px){
  .pl-hero__media{
    grid-template-areas:
      "bag"
      "belt"
      "wallet";
    grid-template-columns: 1fr;
  }
}
/* =======================
   Sections 2–4
   ======================= */

/* Общие секционные отступы + заголовки */
.pl-sec__title{
  font-family:"Fraunces", serif;
  font-size:34px; line-height:1.16; margin:0 0 12px;
}
.pl-fig{border-radius:16px; overflow:hidden}
.pl-fig img{width:100%; max-width:350px; border-radius:16px; box-shadow:0 10px 26px rgba(0,0,0,.08)}
.pl-fig:hover img{transform:translateY(-2px); transition:transform var(--pl-d1) var(--pl-ease)}
.pl-stitchline{
  height:12px; margin:18px 0;
  background: repeating-linear-gradient(90deg, transparent 0 12px, var(--pl-champagne) 12px 16px);
  opacity:.8; transform-origin:left center; transform:scaleX(0);
  transition: transform var(--pl-d2) var(--pl-ease);
}
.js-reveal.is-visible .pl-stitchline{ transform:scaleX(1) }

/* Sect.2 — Build (grid + chips) */
.pl-build{padding:40px 0; background:
  radial-gradient(800px 400px at 0% 10%, color-mix(in oklab, var(--pl-celadon) 35%, transparent), transparent 70%),
  var(--pl-oatmilk);}
.pl-build__grid{display:grid; gap:28px; grid-template-columns:1.1fr 1fr; align-items:start}
.pl-steps{padding-left:18px}
.pl-steps li{margin:8px 0}
.pl-chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.pl-chip{
  appearance:none; border:1.5px dashed var(--pl-champagne); background:linear-gradient(#fff, color-mix(in oklab, var(--pl-oatmilk), white));
  padding:10px 14px; border-radius:999px; cursor:pointer; font-weight:600; transition:transform var(--pl-d1) var(--pl-ease), box-shadow var(--pl-d1) var(--pl-ease), background var(--pl-d1);
}
.pl-chip:hover{transform:translateY(-2px)}
.pl-chip.is-active{background:var(--pl-powder); box-shadow:0 6px 18px rgba(0,0,0,.08)}
.pl-build__media{display:grid; gap:16px; grid-template-columns:1fr 1fr}

/* Sect.3 — Atelier (timeline) */
.pl-atelier{padding:44px 0; position:relative; background:
  radial-gradient(900px 420px at 100% 0%, color-mix(in oklab, var(--pl-peach) 40%, transparent), transparent 70%),
  var(--pl-oatmilk);}
.pl-atelier__grid{display:grid; gap:28px; grid-template-columns:1.1fr 1fr}
.pl-timeline{list-style:none; margin:16px 0 0; padding:0; position:relative}
.pl-timeline li{position:relative; padding:12px 0 12px 24px}
.pl-timeline li::before{
  content:""; position:absolute; left:0; top:14px; width:12px; height:12px; border-radius:50%;
  background:var(--pl-champagne); box-shadow:0 0 0 3px #fff;
}
.pl-timeline li + li{border-top:1px dashed color-mix(in oklab, var(--pl-warmgray), transparent 40%)}
.pl-atelier__media{display:grid; gap:16px; grid-template-columns:1fr 1fr}

/* Sect.4 — Materials (specs + badges) */
.pl-materials{padding:44px 0; background:
  radial-gradient(900px 420px at 10% 100%, color-mix(in oklab, var(--pl-powder) 40%, transparent), transparent 70%),
  var(--pl-oatmilk);}
.pl-materials__grid{display:grid; gap:28px; grid-template-columns:1.1fr 1fr}
.pl-specs{display:grid; grid-template-columns:1fr; gap:10px; margin:12px 0}
.pl-specs dt{font-weight:700}
.pl-specs dd{margin:4px 0 0}
.pl-badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; list-style:none; padding:0}
.pl-badges li{
  padding:8px 12px; border-radius:999px; background:var(--pl-celadon);
  border:1px solid color-mix(in oklab, var(--pl-champagne), transparent 40%);
}

/* Responsive: контент → потом медиа */
@media (max-width: 1020px){
  .pl-build__grid,
  .pl-atelier__grid,
  .pl-materials__grid{ grid-template-columns:1fr }
  .pl-build__content,
  .pl-atelier__content,
  .pl-materials__content{ order:1 }
  .pl-build__media,
  .pl-atelier__media,
  .pl-materials__media{ order:2 }
}
/* =======================
   Unique media layouts (Sect.2–4)
   ======================= */

/* — Sect.2: Mosaic collage — */
.pl-mosaic{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  padding:10px 10px 40px;
}
.pl-mosaic__stitch{
  position:absolute; inset:auto 0 0 0; height:14px; opacity:.75;
  background:repeating-linear-gradient(90deg, transparent 0 12px, var(--pl-champagne) 12px 16px);
}
.pl-mosaic__a{
  justify-self:start;
  transform:rotate(-2deg);
  z-index:2;
  animation:plFloatA 6s var(--pl-ease) infinite alternate;
}
.pl-mosaic__b{
  justify-self:end;
  margin-top:-38px;    /* перекрытие */
  transform:rotate(3deg);
  z-index:1;
  animation:plFloatB 7s var(--pl-ease) infinite alternate;
}
@keyframes plFloatA { to { transform: translateY(-6px) rotate(-1deg); } }
@keyframes plFloatB { to { transform: translateY(6px) rotate(2deg); } }

/* — Sect.3: Vertical rail — */
.pl-rail{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:start;
  gap:28px;
  padding:14px 0;
}
.pl-rail__line{
  position:absolute; top:0; bottom:0; left:50%; width:2px; transform:translateX(-1px);
  background:
    repeating-linear-gradient(180deg, var(--pl-warmgray) 0 10px, transparent 10px 18px);
  opacity:.5;
}
.pl-rail__item{ position:relative; }
.pl-rail__item--left{ justify-self:start; transform:translateX(-6%); }
.pl-rail__item--right{ justify-self:end; transform:translateX(6%); }
.pl-rail__item:hover img{ transform:translateY(-4px); transition:transform var(--pl-d1) var(--pl-ease); }

/* — Sect.4: Shapes (circle + diamond) — */
.pl-shapes{
  display:grid; gap:22px; grid-template-columns:1fr 1fr; align-items:center;
}
.pl-shape img{ transition:transform var(--pl-d1) var(--pl-ease); }
.pl-shape--circle img{
  border-radius:999px;
  box-shadow:0 10px 26px rgba(0,0,0,.08), inset 0 0 0 1px rgba(0,0,0,.04);
}
.pl-shape--diamond img{
  clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
}
.pl-shape--circle:hover img{ transform:rotate(-2deg) scale(1.02); }
.pl-shape--diamond:hover img{ transform:rotate(2deg) scale(1.02); }

/* MOBILE: контент → затем медиа, без перекрытий */
@media (max-width: 1020px){
  .pl-mosaic__a, .pl-mosaic__b { margin-top:0; transform:none; animation:none; }
  .pl-rail{ grid-template-columns:1fr; }
  .pl-rail__line{ left:auto; right:10px; transform:none; opacity:.35; }
  .pl-rail__item--left, .pl-rail__item--right{ transform:none; justify-self:start; }
  .pl-shapes{ grid-template-columns:1fr; }
}
@media (max-width: 680px){
  .pl-mosaic{ padding-bottom:16px; }
}
/* =======================
   Sections 5–7
   ======================= */

/* Sect.5 — Moods (serpentine gallery) */
.pl-moods{padding:44px 0; background:
  radial-gradient(900px 420px at 90% 10%, color-mix(in oklab, var(--pl-celadon) 35%, transparent), transparent 70%),
  var(--pl-oatmilk);}
.pl-moods__grid{display:grid; gap:28px; grid-template-columns:1.1fr 1fr}
.pl-tags{display:flex; gap:10px; flex-wrap:wrap; list-style:none; padding:0; margin:12px 0 0}
.pl-tags li{padding:8px 12px; border-radius:999px; background:var(--pl-powder); border:1px solid color-mix(in oklab, var(--pl-champagne), transparent 40%)}

.pl-snake{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:12px 6px}
.pl-snake__path{
  position:absolute; inset:6px; border-radius:20px; opacity:.55;
  background:
    radial-gradient(12px 12px at 10% 20%, var(--pl-champagne) 35%, transparent 36%),
    radial-gradient(12px 12px at 80% 40%, var(--pl-champagne) 35%, transparent 36%),
    radial-gradient(12px 12px at 30% 60%, var(--pl-champagne) 35%, transparent 36%),
    radial-gradient(12px 12px at 90% 78%, var(--pl-champagne) 35%, transparent 36%);
  mask: linear-gradient(#000 0 0);
}
.pl-snake__item--a{ align-self:start; justify-self:start; transform:translateY(-6px) rotate(-2deg) }
.pl-snake__item--b{ align-self:end;   justify-self:end;   transform:translateY( 8px) rotate( 1.5deg) }
.pl-snake__item--c{ align-self:center;justify-self:start; transform:translateY( 2px) rotate(-1deg) }
.pl-snake__item--d{ align-self:start; justify-self:end;   transform:translateY(-10px) rotate( 2deg) }
.pl-snake__item:hover img{ transform:translateY(-4px); transition:transform var(--pl-d1) var(--pl-ease) }

/* Sect.6 — Length (strap simulation + media) */
.pl-length{padding:44px 0; background:
  radial-gradient(900px 420px at 10% 90%, color-mix(in oklab, var(--pl-peach) 35%, transparent), transparent 70%),
  var(--pl-oatmilk);}
.pl-length__grid{display:grid; gap:28px; grid-template-columns:1.1fr 1fr; align-items:center}
.pl-length__sim{
  margin-top:14px; width:260px; height:260px; border-radius:24px;
  background:linear-gradient(180deg, #fff, color-mix(in oklab, var(--pl-oatmilk), white));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); display:flex; align-items:center; justify-content:center;
}
.pl-length__svg{ width:200px; height:200px; }
.strap{ opacity:0; stroke-dasharray:300; stroke-dashoffset:300; transition:stroke-dashoffset 600ms var(--pl-ease), opacity 260ms var(--pl-ease) }
#pl-length-sim.len-shoulder .strap--shoulder,
#pl-length-sim.len-mid .strap--mid,
#pl-length-sim.len-cross .strap--cross{ opacity:1; stroke-dashoffset:0 }

.pl-length__media{ display:grid; gap:16px; grid-template-columns:1fr 1fr }

/* Sect.7 — Voices (quotes + polaroids) */
.pl-voices{padding:44px 0; background:
  radial-gradient(900px 420px at 90% 100%, color-mix(in oklab, var(--pl-powder) 35%, transparent), transparent 70%),
  var(--pl-oatmilk);}
.pl-voices__grid{display:grid; gap:28px; grid-template-columns:1.1fr 1fr}
.pl-quotes{list-style:none; padding:0; margin:14px 0 0}
.pl-quotes li{position:relative; padding:10px 0 10px 18px}
.pl-quotes li::before{
  content:"“"; position:absolute; left:0; top:0; color:var(--pl-champagne); font-family:"Fraunces", serif; font-size:22px;
}
.pl-polaroids{ position:relative; display:grid; grid-template-columns:1fr 1fr 1fr; gap:0; padding:12px }
.pl-polaroid{ width:100%; max-width:350px; padding:12px; background:#fff; box-shadow:0 12px 30px rgba(0,0,0,.12); border-radius:10px }
.pl-polaroid--a{ transform:rotate(-4deg); z-index:3 }
.pl-polaroid--b{ transform:rotate( 3deg);  z-index:2; margin-top:16px }
.pl-polaroid--c{ transform:rotate(-1.5deg); z-index:1; margin-top:-8px }
.pl-polaroid img{ width:100%; max-width:326px; border-radius:6px }
.pl-polaroid:hover{ transform:translateY(-4px) rotate(var(--tw-rot, 0deg)); transition:transform var(--pl-d1) var(--pl-ease) }

/* Responsive: text → media */
@media (max-width: 1020px){
  .pl-moods__grid,
  .pl-length__grid,
  .pl-voices__grid{ grid-template-columns:1fr }
  .pl-moods__content,
  .pl-length__content,
  .pl-voices__content{ order:1 }
  .pl-moods__media,
  .pl-length__media,
  .pl-polaroids{ order:2 }
  .pl-polaroids{ grid-template-columns:1fr; gap:12px }
  .pl-polaroid--b, .pl-polaroid--c{ margin-top:0; transform:none }
  .pl-snake{ grid-template-columns:1fr; }
  .pl-snake__item--a, .pl-snake__item--b, .pl-snake__item--c, .pl-snake__item--d{ transform:none }
  .pl-length__sim{ margin-left:0 }
}
/* =======================
   Sections 8–10
   ======================= */

/* Sect.8 — Centerfold (text in center, images on sides) */
.pl-centerfold{
  padding:46px 0;
  background:
    radial-gradient(900px 420px at 50% 0%, color-mix(in oklab, var(--pl-powder) 30%, transparent), transparent 70%),
    var(--pl-oatmilk);
  position:relative;
}
.pl-centerfold__grid{
  display:grid; gap:24px;
  grid-template-columns: 1fr minmax(0, 560px) 1fr;
  align-items:center;
}
.pl-centerfold__left,.pl-centerfold__right{ display:flex; justify-content:center }
.pl-sideimg img{ transition: transform var(--pl-d1) var(--pl-ease) }
.pl-sideimg--left:hover img{ transform: translateY(-4px) rotate(-2deg) }
.pl-sideimg--right:hover img{ transform: translateY(-4px) rotate(2deg) }

.pl-beltline{
  position:absolute; left:0; right:0; height:14px; opacity:.7;
  background: repeating-linear-gradient(90deg, transparent 0 12px, var(--pl-champagne) 12px 16px);
}
.pl-beltline--top{ top:0 }
.pl-beltline--bottom{ bottom:0 }

/* Sect.9 — Left media stack (stepped images) */
.pl-leftmedia{
  padding:44px 0;
  background:
    radial-gradient(900px 420px at 0% 100%, color-mix(in oklab, var(--pl-peach) 34%, transparent), transparent 70%),
    var(--pl-oatmilk);
}
.pl-leftmedia__grid{
  display:grid; gap:28px; align-items:center;
  grid-template-columns: 1fr 1.1fr;
}
.pl-stepshots{ position:relative; width:min(100%, 360px); margin-left:auto }
.pl-step{ position:relative }
.pl-step--a{ transform:rotate(-3deg); z-index:3 }
.pl-step--b{ transform:translateY(-14px) rotate(2deg); z-index:2; margin-left:14% }
.pl-step--c{ transform:translateY(-24px) rotate(-1deg); z-index:1; margin-left:28% }
.pl-step img{ box-shadow:0 12px 28px rgba(0,0,0,.12) }
.pl-step:hover img{ transform:translateY(-4px); transition:transform var(--pl-d1) var(--pl-ease) }

.pl-points{ list-style:none; padding:0; margin:12px 0 0 }
.pl-points li{ margin:8px 0 }

/* Sect.10 — Right text + Left filmstrip */
.pl-rightmedia{
  padding:44px 0;
  background:
    radial-gradient(900px 420px at 100% 40%, color-mix(in oklab, var(--pl-celadon) 34%, transparent), transparent 70%),
    var(--pl-oatmilk);
}
.pl-rightmedia__grid{
  display:grid; gap:28px; align-items:center;
  grid-template-columns: 1fr 1.1fr;
}
.pl-rightmedia__media{ order:1 }
.pl-rightmedia__content{ order:2 }

.pl-filmstrip{
  position:relative; width:min(100%, 360px);
  display:grid; gap:14px;
  grid-template-columns:1fr; justify-items:start;
  padding-left:16px;
}
.pl-filmstrip__rail{
  position:absolute; left:0; top:0; bottom:0; width:6px; border-radius:6px;
  background:
    repeating-linear-gradient(180deg, var(--pl-warmgray) 0 10px, transparent 10px 18px);
  opacity:.5;
  animation: railDrift 6s linear infinite alternate;
}
@keyframes railDrift { to { opacity:.75 } }

.pl-film{ transform-origin:left center }
.pl-film--1{ transform:rotate(-2deg) }
.pl-film--2{ transform:rotate( 1.5deg) }
.pl-film--3{ transform:rotate(-1deg) }
.pl-film:hover{ transform:translateY(-3px) rotate(var(--rot,0deg)); transition:transform var(--pl-d1) var(--pl-ease) }

.pl-facts{ list-style:disc; padding-left:18px; margin:10px 0 0 }

/* Responsive: на мобилке — сначала текст, потом изображения */
@media (max-width: 1020px){
  .pl-centerfold__grid{ grid-template-columns:1fr }
  .pl-centerfold__content{ order:1 }
  .pl-centerfold__left{ order:2 }
  .pl-centerfold__right{ order:3 }

  .pl-leftmedia__grid{ grid-template-columns:1fr }
  .pl-leftmedia__content{ order:1 }
  .pl-leftmedia__media{ order:2 }
  .pl-stepshots{ margin-left:0 }

  .pl-rightmedia__grid{ grid-template-columns:1fr }
  .pl-rightmedia__content{ order:1 }
  .pl-rightmedia__media{ order:2 }
}
/* =======================
   Sections 11–13
   ======================= */

/* Sect.11 — Cassette grid */
.pl-cassette{
  padding:46px 0;
  background:
    radial-gradient(900px 420px at 50% 100%, color-mix(in oklab, var(--pl-peach) 32%, transparent), transparent 70%),
    var(--pl-oatmilk);
}
.pl-cassette__grid{
  display:grid; gap:28px;
  grid-template-columns:1.1fr 1fr; align-items:center;
}
.pl-cassette__media{ display:block }
.pl-tape{
  position:relative; padding:16px; border-radius:16px;
  background:linear-gradient(180deg, #fff, color-mix(in oklab, var(--pl-oatmilk), white));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
  display:grid; gap:12px;
  grid-template-areas:
    "wide tall"
    "mini tall"
    "mini2 wide2";
  grid-template-columns: 1fr 1fr;
}
.pl-tape__holes{
  position:absolute; left:8px; right:8px; top:-10px; height:10px; opacity:.55;
  background:
    radial-gradient(6px 6px at 20px 5px, var(--pl-warmgray) 45%, transparent 46%) repeat-x;
  mask:linear-gradient(#000 0 0);
}
.pl-frame{ position:relative; border-radius:16px }
.pl-frame::after{ /* пряжечный угол */
  content:""; position:absolute; width:18px; height:18px; right:0; top:0;
  background:conic-gradient(from 90deg at 100% 0, transparent 0 75%, var(--pl-champagne) 75% 100%);
  border-bottom-left-radius:8px;
}
.pl-frame--wide{ grid-area:wide }
.pl-frame--tall{ grid-area:tall }
.pl-frame--mini{ grid-area:mini }
.pl-frame--mini2{ grid-area:mini2 }
.pl-frame--wide2{ grid-area:wide2 }
.pl-frame img{ width:100%; max-width:350px; border-radius:16px; box-shadow:0 10px 26px rgba(0,0,0,.08) }
.pl-frame:hover img{ transform:translateY(-3px); transition:transform var(--pl-d1) var(--pl-ease) }

/* Sect.12 — Diagonal band */
.pl-diagonal{
  padding:46px 0;
  background:
    radial-gradient(900px 420px at 0% 0%, color-mix(in oklab, var(--pl-powder) 30%, transparent), transparent 70%),
    var(--pl-oatmilk);
}
.pl-diagonal__grid{
  display:grid; gap:28px;
  grid-template-columns:1fr 1.1fr; align-items:center;
}
.pl-diagonal__media{ order:1 }
.pl-diagonal__content{ order:2 }

.pl-slope{
  position:relative; overflow:hidden; padding:12px;
  display:grid; gap:14px; grid-template-columns:1fr 1fr;
}
.pl-slope__belt{
  position:absolute; left:-10%; right:-10%; top:20%; height:16px; opacity:.5;
  transform:rotate(-8deg);
  background: repeating-linear-gradient(90deg, transparent 0 12px, var(--pl-champagne) 12px 16px);
}
.pl-slope__a{ transform:translateY(-12px) rotate(-2deg) }
.pl-slope__b{ transform:translateY(  6px) rotate( 1deg) }
.pl-slope__c{ transform:translateY( -4px) rotate(-1deg) }
.pl-slope__d{ transform:translateY( 10px) rotate( 2deg) }
.pl-slope figure:hover img{ transform:translateY(-3px); transition:transform var(--pl-d1) var(--pl-ease) }

/* Sect.13 — Stitch lab */
.pl-stitchlab{
  padding:46px 0;
  background:
    radial-gradient(900px 420px at 100% 100%, color-mix(in oklab, var(--pl-celadon) 32%, transparent), transparent 70%),
    var(--pl-oatmilk);
}
.pl-stitchlab__grid{
  display:grid; gap:28px;
  grid-template-columns:1fr; /* текст сверху, свотчи ниже — центричный блок */
}
.pl-stitchlab__media{
  margin-top:8px;
  display:grid; gap:16px; grid-template-columns:1fr 1fr 1fr; justify-items:start;
}
.pl-swatch{
  position:relative; border-radius:16px; padding:6px; background:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.08), inset 0 0 0 1px rgba(0,0,0,.05);
}
.pl-swatch img{ width:100%; max-width:350px; border-radius:10px }
.pl-swatch.is-focus{
  outline:2px dashed var(--pl-champagne); outline-offset:4px;
  transform:translateY(-2px);
  transition:transform var(--pl-d1) var(--pl-ease);
}

/* Responsive: text → media */
@media (max-width: 1020px){
  .pl-cassette__grid{ grid-template-columns:1fr }
  .pl-cassette__content{ order:1 }
  .pl-cassette__media{ order:2 }

  .pl-diagonal__grid{ grid-template-columns:1fr }
  .pl-diagonal__content{ order:1 }
  .pl-diagonal__media{ order:2 }

  .pl-stitchlab__media{ grid-template-columns:1fr }
}
/* =======================
   Sections 14–15
   ======================= */

/* Sect.14 — Care (center column + side notes) */
.pl-care{
  padding:46px 0;
  background:
    radial-gradient(900px 420px at 50% 0%, color-mix(in oklab, var(--pl-peach) 28%, transparent), transparent 70%),
    var(--pl-oatmilk);
  position:relative;
}
.pl-care__grid{
  display:grid; gap:24px;
  grid-template-columns: 1fr 1.4fr 1fr; /* слева заметки — центр текст — справа заметки */
  align-items:start;
}
.pl-care__side-title{ font-weight:800; letter-spacing:.02em; margin:0 0 8px }
.pl-care__list{ list-style:disc; padding-left:18px; margin:0 }
.pl-care__content p{ margin:10px 0 }
.pl-care__cards{
  margin-top:12px;
  display:grid; gap:12px; grid-template-columns:1fr 1fr 1fr;
}
.pl-care__card{
  background:linear-gradient(180deg, #fff, color-mix(in oklab, var(--pl-oatmilk), white));
  border-radius:16px; padding:14px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06), 0 10px 20px rgba(0,0,0,.06);
  transition:transform var(--pl-d1) var(--pl-ease);
}
.pl-care__card header{ font-weight:700; margin-bottom:6px }
.pl-care__card:hover{ transform:translateY(-3px) }

/* dekoratif zip altından geçen */
.pl-zip--care{
  display:block; height:16px; margin-top:16px;
  background: repeating-linear-gradient(90deg, transparent 0 12px, var(--pl-champagne) 12px 16px);
  opacity:.7;
}

/* Sect.15 — FAQ (zip separator + accordion) */
.pl-faq{ padding:46px 0; background:
  radial-gradient(900px 420px at 100% 100%, color-mix(in oklab, var(--pl-powder) 28%, transparent), transparent 70%),
  var(--pl-oatmilk);}
.pl-faq__zip{ position:relative; height:24px; margin:10px 0 16px }
.pl-faq__teeth{
  position:absolute; inset:8px 0 8px 0;
  background: repeating-linear-gradient(90deg, transparent 0 12px, var(--pl-champagne) 12px 16px);
  opacity:.65;
}
.pl-faq__pull{
  position:absolute; right:6px; top:2px; width:18px; height:18px; border-radius:6px;
  background: var(--pl-champagne); box-shadow:0 2px 6px rgba(0,0,0,.08);
  animation: pullBlink 3.6s ease-in-out infinite;
}
@keyframes pullBlink { 50% { transform: translateY(2px) } }

.pl-faq__list{ display:grid; gap:10px }
.pl-faq__item{
  background:#fff; border-radius:14px; box-shadow:0 8px 18px rgba(0,0,0,.06), inset 0 0 0 1px rgba(0,0,0,.05);
  overflow:hidden;
}
.pl-faq__item > summary{
  cursor:pointer; padding:12px 14px; list-style:none; position:relative; font-weight:700;
}
.pl-faq__item > summary::marker{ display:none }
.pl-faq__item > summary::after{
  content:""; position:absolute; right:14px; top:50%; width:10px; height:10px;
  border-right:2px solid var(--pl-ink); border-bottom:2px solid var(--pl-ink);
  transform:translateY(-50%) rotate(-45deg); transition: transform var(--pl-d1) var(--pl-ease);
}
.pl-faq__item[open] > summary::after{ transform:translateY(-50%) rotate(45deg) }
.pl-faq__content{ padding:0 14px 12px; border-top:1px dashed color-mix(in oklab, var(--pl-warmgray), transparent 40%) }

/* Responsive: text → side notes ниже, в 1 столбец */
@media (max-width: 1020px){
  .pl-care__grid{ grid-template-columns:1fr }
  .pl-care__content{ order:1 }
  .pl-care__side--left{ order:2 }
  .pl-care__side--right{ order:3 }
  .pl-care__cards{ grid-template-columns:1fr }
}