.pl-page{background:var(--paper,#f6f2ea);color:var(--ink,#171717)}
.pl-page main{max-width:1440px;margin:0 auto;padding:clamp(6.5rem,9vw,8.6rem) var(--page-x,clamp(1.2rem,5vw,5rem)) 5rem}
.pl-hero{min-height:min(86vh,930px);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,.72fr);gap:clamp(2rem,7vw,7.5rem);align-items:center;border-bottom:1px solid var(--rule,rgba(17,17,17,.18));padding:clamp(1.5rem,4vw,4.6rem) 0}
.pl-brand-line{display:flex;align-items:center;gap:1rem}.pl-mini-icon{width:58px;height:58px;border-radius:14px;box-shadow:0 .5rem 1.8rem rgba(0,95,160,.15)}
.pl-kicker,.pl-eyebrow,.pl-section-no{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;opacity:.56}
.pl-hero-copy h1{font-size:clamp(4.5rem,10.8vw,10.8rem);font-weight:500;line-height:.77;letter-spacing:-.078em;margin:1rem 0 2.2rem}.pl-hero-copy h1 span{color:#0798f7}
.pl-lede{max-width:47rem;font-size:clamp(1.25rem,2.3vw,2.15rem);line-height:1.28;letter-spacing:-.027em;margin:0}
.pl-tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:2rem}.pl-tags span{border:1px solid var(--rule,rgba(17,17,17,.2));border-radius:999px;padding:.5rem .78rem;font-size:.65rem;letter-spacing:.09em;text-transform:uppercase;background:rgba(255,255,255,.18)}.pl-status{font-size:.78rem;margin-top:1rem;opacity:.6}
.pl-phone-shot{margin:0;justify-self:center}.pl-phone-shot img{display:block;width:min(100%,330px);height:auto;border-radius:32px;box-shadow:0 1.6rem 5rem rgba(15,20,40,.14)}.pl-phone-shot figcaption,.pl-mac-shot figcaption{margin-top:1rem;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;opacity:.5}
.pl-ios-detail{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);gap:clamp(2.5rem,7vw,8rem);align-items:center;padding:clamp(4.5rem,9vw,9rem) 0;border-bottom:1px solid var(--rule,rgba(17,17,17,.18))}
.pl-ios-detail h2,.pl-mac-section h2{font-size:clamp(2.8rem,6.2vw,6.4rem);font-weight:500;line-height:.92;letter-spacing:-.06em;margin:.6rem 0 2rem}.pl-copy>p:not(.pl-section-no),.pl-mac-copy>p:not(.pl-section-no):not(.pl-eyebrow){max-width:54rem;font-size:clamp(1rem,1.5vw,1.32rem);line-height:1.64;margin:0 0 1rem}
.pl-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--rule,rgba(17,17,17,.18))}.pl-feature-grid article{min-height:20rem;padding:clamp(1.5rem,3vw,2.8rem);border-right:1px solid var(--rule,rgba(17,17,17,.18));border-top:1px solid var(--rule,rgba(17,17,17,.18))}.pl-feature-grid article:nth-child(3n){border-right:0}.pl-num{font-size:.66rem;letter-spacing:.15em;opacity:.42}.pl-feature-grid h3{font-size:clamp(1.45rem,2.2vw,2.3rem);font-weight:500;letter-spacing:-.035em;margin:3.5rem 0 1rem}.pl-feature-grid p{font-size:.94rem;line-height:1.66;max-width:29rem;margin:0;opacity:.78}
.pl-mac-section{display:grid;grid-template-columns:minmax(0,.78fr) minmax(420px,1.22fr);gap:clamp(2rem,6vw,7rem);align-items:center;padding:clamp(5rem,9vw,9rem) 0;border-bottom:1px solid var(--rule,rgba(17,17,17,.18))}.pl-mac-shot{margin:0}.pl-mac-shot img{display:block;width:100%;height:auto;border-radius:24px;box-shadow:0 1.8rem 5rem rgba(23,28,40,.15)}
.pl-icon-story{display:grid;grid-template-columns:minmax(240px,.62fr) minmax(0,1.38fr);gap:clamp(2rem,7vw,8rem);align-items:center;padding:clamp(5rem,9vw,9rem) 0;border-bottom:1px solid var(--rule,rgba(17,17,17,.18))}.pl-icon-big img{display:block;width:min(100%,390px);height:auto;border-radius:23%;box-shadow:0 1.4rem 4rem rgba(0,90,160,.16)}.pl-icon-story h2{font-size:clamp(5rem,10vw,10rem);line-height:.8;margin:.8rem 0 2rem}.pl-icon-quote{font-size:clamp(1.5rem,3vw,3rem);line-height:1.16;letter-spacing:-.04em;max-width:52rem;margin:0}.pl-icon-note{font-size:.85rem;opacity:.55;margin-top:1.2rem}
.pl-bottom-nav{display:flex;justify-content:space-between;gap:1rem;padding:3rem 0 0;font-size:.76rem;letter-spacing:.11em;text-transform:uppercase}.pl-bottom-nav a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:.2rem}
@media(max-width:950px){.pl-page main{padding-top:5.6rem}.pl-hero{grid-template-columns:1fr;min-height:auto}.pl-phone-shot-hero{justify-self:start}.pl-phone-shot-hero img{width:min(66vw,330px)}.pl-ios-detail{grid-template-columns:1fr;align-items:start}.pl-ios-detail .pl-phone-shot{justify-self:start}.pl-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pl-feature-grid article:nth-child(3n){border-right:1px solid var(--rule,rgba(17,17,17,.18))}.pl-feature-grid article:nth-child(2n){border-right:0}.pl-mac-section{grid-template-columns:1fr}.pl-icon-story{grid-template-columns:1fr}.pl-icon-big img{width:min(68vw,340px)}}
@media(max-width:600px){.pl-mini-icon{width:48px;height:48px;border-radius:12px}.pl-hero-copy h1{font-size:clamp(4rem,19vw,6.5rem)}.pl-phone-shot img{width:min(78vw,310px);border-radius:26px}.pl-feature-grid{grid-template-columns:1fr}.pl-feature-grid article,.pl-feature-grid article:nth-child(2n),.pl-feature-grid article:nth-child(3n){border-right:0;min-height:16rem}.pl-mac-shot img{border-radius:16px}.pl-bottom-nav{flex-direction:column;align-items:flex-start}}

/* PL_MOBILE_HEADER_FIX_V1_START */
/*
  Mobile header:
  English labels are wider than Chinese, so the brand/language selector
  gets the first row and project navigation gets a full-width second row.
*/
@media (max-width: 760px) {
  .pl-page .site-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand lang"
      "nav   nav";
    align-items: center;
    column-gap: 1rem;
    row-gap: .72rem;
  }

  .pl-page .wordmark {
    grid-area: brand;
    min-width: 0;
    white-space: nowrap;
  }

  .pl-page .header-tools {
    display: contents;
  }

  .pl-page .language-switch {
    grid-area: lang;
    justify-self: end;
    white-space: nowrap;
  }

  .pl-page .nav {
    grid-area: nav;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, max-content);
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    min-width: 0;
  }

  .pl-page .nav a {
    margin: 0;
    white-space: nowrap;
    font-size: .70rem;
    letter-spacing: .105em;
  }

  .pl-page main {
    padding-top: 8.35rem;
  }
}

@media (max-width: 390px) {
  .pl-page .site-header {
    column-gap: .7rem;
    row-gap: .62rem;
  }

  .pl-page .nav {
    gap: .28rem;
  }

  .pl-page .nav a {
    font-size: .64rem;
    letter-spacing: .075em;
  }

  .pl-page main {
    padding-top: 8.15rem;
  }
}
/* PL_MOBILE_HEADER_FIX_V1_END */