.about-story-page{
  background:var(--ds-canvas);
  color:var(--ds-ink);
}

.about-story-page main{
  overflow:hidden;
}

.about-story-page main section{
  border:0;
}

.about-shell{
  width:min(calc(100% - var(--ds-gutter) * 2),calc(var(--ds-shell) - var(--ds-gutter) * 2));
  margin-inline:auto;
}

.about-kicker,
.about-section-label{
  margin:0 0 18px;
  color:var(--ds-brand-dark);
  font:600 12px/1.35 var(--ds-data);
  letter-spacing:.06em;
}

.about-story-page h1,
.about-story-page h2,
.about-story-page h3,
.about-story-page p,
.about-story-page blockquote{
  margin-top:0;
}

.about-story-page h1{
  max-width:12ch;
  margin-bottom:24px;
  font-size:var(--ds-page-title);
  font-weight:500;
  line-height:1.12;
  letter-spacing:-.025em;
  text-wrap:balance;
}

.about-story-page h2{
  max-width:16ch;
  margin-bottom:0;
  font-size:clamp(30px,3vw,44px);
  font-weight:600;
  line-height:1.18;
  letter-spacing:-.028em;
  text-wrap:balance;
}

.about-story-page h3{
  margin-bottom:0;
  font-size:22px;
  font-weight:600;
  line-height:1.32;
  letter-spacing:-.015em;
}

html:not([lang="en"]) .about-story-page h1,
html:not([lang="en"]) .about-story-page h2,
html:not([lang="en"]) .about-story-page h3{
  letter-spacing:0;
}

html[lang="en"] .about-story-page h1{
  max-width:18ch;
}

.about-masthead{
  padding:48px 0 32px;
  background:var(--ds-canvas);
}

.about-masthead-grid{
  display:grid;
  grid-template-columns:minmax(320px,.82fr) minmax(0,1.18fr);
  align-items:stretch;
  gap:48px 80px;
}

.about-intro{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-block:32px;
}

.about-lead{
  max-width:590px;
  margin-bottom:0;
  color:var(--ds-text-secondary);
  font-size:18px;
  line-height:1.7;
}

.about-mission-panel{
  display:flex;
  min-height:350px;
  flex-direction:column;
  justify-content:center;
  padding:56px 64px;
  border-radius:12px;
  background:#eef1f7;
}

.about-mission-panel h2{
  max-width:14ch;
  margin-bottom:28px;
}

html[lang="en"] .about-mission-panel h2{
  max-width:19ch;
}

.about-origin{
  padding:104px 0;
  background:var(--ds-surface);
}

.about-origin-grid{
  display:grid;
  grid-template-columns:minmax(280px,.75fr) minmax(0,1.25fr);
  gap:48px 104px;
  align-items:start;
}

.about-origin-copy{
  max-width:760px;
}

.about-origin-copy > p{
  margin-bottom:18px;
  color:var(--ds-text-secondary);
  font-size:17px;
  line-height:1.8;
}

.about-origin-copy blockquote{
  max-width:680px;
  margin:48px 0 0;
  padding-top:28px;
  border-top:1px solid var(--ds-border-strong);
  color:var(--ds-ink);
  font-size:clamp(25px,2.5vw,34px);
  font-weight:500;
  line-height:1.35;
  letter-spacing:-.025em;
  text-wrap:balance;
}

.about-principles{
  padding:104px 0;
  background:var(--ds-canvas);
}

.about-section-head{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);
  gap:48px 96px;
  align-items:end;
  margin-bottom:56px;
}

.about-section-head > p{
  max-width:560px;
  margin-bottom:2px;
  color:var(--ds-text-muted);
  font-size:16px;
  line-height:1.75;
}

.about-principle-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--ds-border-strong);
  border-bottom:1px solid var(--ds-border);
}

.about-principle{
  min-width:0;
  padding:36px 32px 40px 0;
}

.about-principle + .about-principle{
  padding-left:32px;
  border-left:1px solid var(--ds-border);
}

.about-principle-name{
  margin-bottom:52px;
  color:var(--ds-brand-dark);
  font:600 12px/1.3 var(--ds-data);
  letter-spacing:.04em;
}

.about-principle h3{
  min-height:58px;
  margin-bottom:20px;
}

.about-principle > p:not(.about-principle-name){
  margin-bottom:0;
  color:var(--ds-text-muted);
  font-size:14px;
  line-height:1.75;
}

.about-price-rules{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin:4px 0 24px;
}

.about-price-rules div{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:8px;
}

.about-price-rules strong{
  font:500 clamp(27px,2.5vw,38px)/1 var(--ds-data);
  letter-spacing:-.04em;
  white-space:nowrap;
}

.about-price-rules span{
  color:var(--ds-text-quiet);
  font-size:11px;
  line-height:1.45;
}

.about-price-note{
  font-size:12px!important;
}

.about-text-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:24px;
  color:var(--ds-brand-dark);
  font-size:14px;
  font-weight:600;
}

.about-text-link:hover{
  color:var(--ds-ink);
}

.about-public-value{
  padding:0 0 104px;
  background:var(--ds-canvas);
}

.about-public-surface{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  gap:64px 88px;
  padding:64px;
  border-radius:12px;
  background:var(--ds-night);
  color:#fff;
}

.about-public-copy h2{
  max-width:17ch;
  margin-bottom:28px;
  color:#fff;
}

.about-public-copy > p:last-child{
  max-width:660px;
  margin-bottom:0;
  color:var(--ds-night-muted);
  font-size:16px;
  line-height:1.75;
}

.about-service-list{
  display:flex;
  flex-direction:column;
  border-top:1px solid #34363c;
}

.about-service-list a{
  display:flex;
  min-height:88px;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:18px 4px;
  border-bottom:1px solid #34363c;
  color:#fff;
  transition:color 160ms ease-out;
}

.about-service-list a:hover{
  color:#d9ddf3;
}

.about-service-list span{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.about-service-list b{
  font-size:15px;
  font-style:normal;
  font-weight:600;
}

.about-service-list small{
  color:var(--ds-night-muted);
  font-size:12px;
  line-height:1.45;
}

.about-service-list i{
  font-size:18px;
  font-style:normal;
}

.about-careers{
  padding:96px 0;
  background:var(--ds-surface);
}

.about-careers-grid{
  display:grid;
  grid-template-columns:minmax(180px,.45fr) minmax(0,1.55fr);
  gap:48px 104px;
  align-items:start;
}

.about-careers-grid > div{
  max-width:780px;
}

.about-careers h2{
  max-width:18ch;
  margin-bottom:24px;
}

.about-careers-grid > div > p{
  max-width:680px;
  margin-bottom:28px;
  color:var(--ds-text-muted);
  font-size:16px;
  line-height:1.75;
}

.about-careers-link{
  display:inline-flex;
  align-items:center;
  gap:18px;
  padding-bottom:8px;
  border-bottom:1px solid var(--ds-ink);
  color:var(--ds-ink);
  font-size:14px;
  font-weight:600;
}

.about-company{
  padding:0 0 104px;
  background:var(--ds-surface);
}

.about-company-grid{
  display:grid;
  grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr);
  gap:64px 104px;
  padding-top:104px;
  border-top:1px solid var(--ds-border);
}

.about-company-grid > div > p:last-child{
  max-width:560px;
  margin:28px 0 0;
  color:var(--ds-text-muted);
  font-size:15px;
  line-height:1.75;
}

.about-company-facts{
  margin:0;
  border-top:1px solid var(--ds-border-strong);
}

.about-company-facts div{
  display:grid;
  grid-template-columns:160px minmax(0,1fr);
  gap:24px;
  padding:22px 0;
  border-bottom:1px solid var(--ds-border);
}

.about-company-facts dt{
  color:var(--ds-text-quiet);
  font:600 11px/1.5 var(--ds-data);
  letter-spacing:.04em;
}

.about-company-facts dd{
  margin:0;
  color:var(--ds-text-secondary);
  font-size:15px;
  line-height:1.5;
  overflow-wrap:anywhere;
}

.about-company-facts a{
  color:var(--ds-brand-dark);
  text-decoration:underline;
  text-decoration-color:transparent;
  text-underline-offset:4px;
}

.about-company-facts a:hover{
  text-decoration-color:currentColor;
}

.about-story-page :focus-visible{
  outline:2px solid var(--ds-brand-dark);
  outline-offset:3px;
}

/* 中文有简体 zh-CN 与港式繁体 zh-HK 两种取值，所以只能按「不是英文」来判断，
   写死 zh-CN 会让繁体访客同时看到中英两版。 */
html:not([lang="en"]) .about-story-page .lang-en,
html[lang="en"] .about-story-page .lang-zh{
  display:none!important;
}

@media(max-width:1040px){
  .about-masthead-grid,
  .about-origin-grid,
  .about-company-grid{
    grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr);
    gap:48px;
  }

  .about-section-head{
    gap:48px;
  }

  .about-public-surface{
    gap:48px;
    padding:48px;
  }

  .about-careers-grid{
    gap:48px;
  }
}

@media(max-width:820px){
  .about-shell{
    width:calc(100% - 64px);
  }

  .about-masthead-grid,
  .about-origin-grid,
  .about-section-head,
  .about-public-surface,
  .about-careers-grid,
  .about-company-grid{
    grid-template-columns:1fr;
  }

  .about-masthead{
    padding-top:36px;
  }

  .about-mission-panel{
    min-height:310px;
  }

  .about-origin,
  .about-principles{
    padding-block:80px;
  }

  .about-principle-grid{
    grid-template-columns:1fr;
  }

  .about-principle{
    padding:32px 0;
  }

  .about-principle + .about-principle{
    padding-left:0;
    border-top:1px solid var(--ds-border);
    border-left:0;
  }

  .about-principle-name{
    margin-bottom:24px;
  }

  .about-principle h3{
    min-height:0;
  }

  .about-public-surface{
    padding:48px;
  }

  .about-company-grid{
    padding-top:80px;
  }
}

@media(max-width:700px){
  .about-shell{
    width:calc(100% - 40px);
  }

  .about-masthead{
    padding:28px 0 32px;
  }

  .about-intro{
    padding-block:8px;
  }

  .about-story-page h1{
    margin-bottom:18px;
    font-size:32px;
  }

  .about-story-page h2{
    font-size:30px;
  }

  .about-lead{
    font-size:17px;
  }

  .about-mission-panel{
    min-height:0;
    padding:42px 24px 44px;
    border-radius:8px;
  }

  .about-mission-panel h2{
    font-size:29px;
  }

  .about-origin,
  .about-principles{
    padding-block:64px;
  }

  .about-origin-copy > p{
    font-size:16px;
  }

  .about-origin-copy blockquote{
    margin-top:36px;
    font-size:25px;
  }

  .about-section-head{
    margin-bottom:36px;
  }

  .about-principle{
    padding:28px 0 32px;
  }

  .about-principle h3{
    font-size:20px;
  }

  .about-price-rules strong{
    font-size:29px;
  }

  .about-public-value{
    padding-bottom:0;
  }

  .about-public-value .about-shell{
    width:100%;
  }

  .about-public-surface{
    gap:36px;
    padding:48px 20px;
    border-radius:0;
  }

  .about-public-copy > p:last-child{
    font-size:15px;
  }

  .about-service-list a{
    min-height:78px;
  }

  .about-careers{
    padding-block:64px;
  }

  .about-company{
    padding-bottom:64px;
  }

  .about-company-grid{
    padding-top:64px;
  }

  .about-company-facts div{
    grid-template-columns:112px minmax(0,1fr);
    gap:16px;
  }
}

@media(max-width:420px){
  .about-price-rules{
    grid-template-columns:1fr;
    gap:24px;
  }
}

@media(prefers-reduced-motion:reduce){
  .about-story-page *,
  .about-story-page *::before,
  .about-story-page *::after{
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
  }
}