/* Digital Platform page (route /digital-platform). Section markup lives in the bundle. */
/* Draft layout. Type, colour and card classes come from the live site's own CSS. */

  .pf{padding:112px 0 144px}
  .pf-intro{max-width:40rem}
  .pf-list{margin-top:120px;display:grid;gap:160px}
  .pf-row{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
  .pf-copy{max-width:26rem}
  .pf-num{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-size:18px}
  .pf-h3{font-family:"Playfair Display",Georgia,serif;font-size:clamp(26px,3vw,34px);line-height:1.15;margin:8px 0 16px}
  .pf-points{margin-top:24px;display:grid;gap:10px;list-style:none;padding:0}
  .pf-points li{display:flex;gap:12px;align-items:baseline;font:500 15px/1.45 "DM Sans",system-ui}
  .pf-points li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:hsl(var(--primary));transform:translateY(-2px)}

  .pf-shot{margin:0;border-radius:18px;overflow:hidden;background:#fff;border:1px solid hsl(40 4% 76%);
    box-shadow:0 1px 0 hsl(0 0% 100% / .7) inset,0 30px 70px -36px hsl(220 45% 18% / .45)}
  .pf-shot img,.pf-shot picture{display:block;width:100%;height:auto}
  .pf-cap{margin-top:14px;font:400 13px/1.5 "DM Sans",system-ui;color:hsl(45 6% 38%)}

  .pf-stack{position:relative;max-width:620px;justify-self:center;width:100%}
  .pf-phone{position:absolute;right:-20px;bottom:-48px;width:38%;min-width:170px;border-radius:22px;overflow:hidden;border:1px solid hsl(40 4% 76%);
    box-shadow:0 34px 60px -26px hsl(220 45% 18% / .5);background:#fff}
  .pf-phone img{display:block;width:100%;height:auto}
  .pf-sub{margin-top:96px}

  .pf-wide{margin-top:0}
  .pf-wide .pf-copy{max-width:40rem;margin-bottom:40px}

  @media (min-width:1024px){
    .pf-row{grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:80px}
    .pf-row.flip{grid-template-columns:minmax(0,8fr) minmax(0,5fr)}
    .pf-row.flip .pf-copy{order:2}
  }
  @media (max-width:767px){
    .pf{padding:72px 0 96px}
    .pf-list{margin-top:72px;gap:104px}
    .pf-phone{display:none}
    .pf-sub{margin-top:56px}
  }


  /* v3: smaller screenshots, larger text */
  .pf .body-text{font-size:19px;line-height:1.7}
  .pf-intro .body-text{font-size:21px}
  .pf-h3{font-size:clamp(30px,3.4vw,42px)}
  .pf-points li{font-size:17px}
  .pf-cap{font-size:15px}
  .pf-copy{max-width:32rem}
  .pf-shot{max-width:620px;justify-self:center;width:100%}
  .pf-sub{max-width:760px;margin-left:auto;margin-right:auto}
  .pf-sub .pf-shot{max-width:none}
  @media (min-width:1024px){
    .pf-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:88px}
    .pf-row.flip{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  }
  @media (max-width:767px){ .pf .body-text{font-size:18px} .pf-intro .body-text{font-size:19px} .pf-shot{max-width:none} }

  /* Scroll effects: only when JS is on and the visitor has not asked for reduced motion. */
  @media (prefers-reduced-motion: no-preference){
    .pfjs [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
    .js [data-reveal="shot"]{transform:translateY(40px) scale(.97);clip-path:inset(0 0 12% 0 round 18px);
      transition:opacity .9s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1),clip-path 1.1s cubic-bezier(.16,1,.3,1)}
    .pfjs [data-reveal].in{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 18px)}
    .pfjs [data-reveal][data-delay="1"]{transition-delay:.12s}
    .pfjs [data-reveal][data-delay="2"]{transition-delay:.24s}
    @supports (animation-timeline: view()){
      .pf-phone{animation:pf-float linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
      @keyframes pf-float{from{translate:0 60px}to{translate:0 -60px}}
    }
  }