/* ==========================================================================
   SPACE FRIENDS · Apple-fidelity skin
   Loaded AFTER each page's inline <style>, so equal-specificity rules win.
   Values mirror apple.com.cn: 44px glass nav, SF/PingFang stack, 4-step
   gray ramp (#1d1d1f / #6e6e73 / #86868b / #d2d2d7), 980px pill buttons.
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root{
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --ink:#1D1D1F;          /* Apple primary label */
  --muted:#6E6E73;        /* Apple secondary label (4.94:1 on white) */
  --tertiary:#86868B;     /* Apple tertiary (large text only) */
  --line:#D2D2D7;         /* Apple hairline */
  --line-hover:#86868B;
  --band:#F5F5F7;         /* Apple section gray */
  --accent:#0071E3;       /* Apple blue (fill) */
  --accent-ink:#0066CC;   /* Apple blue (text) */
  --bubble:#F5F5F7;
  --header-h:44px;
  --radius:18px;
}

/* ---------- 2. Base typography (Apple body: 17/1.47059/-.022em) ---------- */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  font-family:"SF Pro SC","SF Pro Display","SF Pro Text","SF Pro Icons",-apple-system,
              BlinkMacSystemFont,"PingFang SC","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.47059;
  letter-spacing:-.022em;
  color:#1D1D1F;
  background:#FFFFFF;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
p{letter-spacing:-.022em;}

/* kill non-Apple flourishes */
.scroll-progress{display:none !important;}

/* ---------- 3. Announcement ribbon ---------- */
.announce{
  background:var(--band);
  border-bottom:1px solid var(--line);
  color:#1D1D1F;
  font-size:14px;
  line-height:1.42859;
  letter-spacing:-.016em;
  text-align:center;
  padding:12px 40px;
  margin-top:44px;
}
.announce a{color:var(--accent-ink);text-decoration:none;font-weight:400;}
.announce a:hover{text-decoration:underline;}

/* ---------- 4. Navigation: 44px frosted glass, 12px labels ---------- */
header.site{
  background:rgba(251,251,253,.8);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.08);
}
header.site nav{
  height:44px;
  max-width:1024px;
  margin:0 auto;
  padding:0 22px;
  background:transparent;
  border:0;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  display:flex;align-items:center;justify-content:space-between;
}
header.site nav .logo img{height:18px;width:auto;display:block;}
header.site nav .links{gap:0;}
header.site nav .links a{
  color:rgba(0,0,0,.8);
  font-size:12px;
  line-height:1;
  letter-spacing:-.01em;
  height:44px;
  padding:0 11px;
  display:inline-flex;align-items:center;
  text-decoration:none;
  transition:color .2s ease;
}
header.site nav .links a::after{display:none;}
header.site nav .links a:hover,
header.site nav .links a.active{color:#000;}
header.site nav .auth-slot{gap:0;}
header.site nav .auth-slot a{
  color:rgba(0,0,0,.8);
  font-size:12px;
  line-height:1;
  letter-spacing:-.01em;
  height:44px;
  padding:0 11px;
  display:inline-flex;align-items:center;
  text-decoration:none;
  transition:color .2s ease;
}
header.site nav .auth-slot a:hover{color:#000;}
header.site nav .auth-slot .me{color:#1D1D1F;font-weight:600;}

/* ---------- 5. Hero ---------- */
.hero{
  min-height:calc(100vh - 88px);
  display:flex;align-items:center;
  padding:72px 22px 88px;
  text-align:center;
  max-width:none;margin:0 auto;
}
.hero-inner{max-width:1024px;padding:0 22px;}
.hero .eyebrow{
  font-size:17px;
  font-weight:600;
  letter-spacing:-.022em;
  text-transform:none;
  color:var(--muted);
  margin-bottom:10px;
}
.hero h1{
  font-size:clamp(40px,6.4vw,64px);
  font-weight:600;
  line-height:1.0625;
  letter-spacing:-.009em;
  max-width:840px;
  color:var(--ink);
}
.hero .sub{
  font-size:21px;
  line-height:1.381;
  letter-spacing:-.011em;
  color:var(--muted);
  max-width:620px;
  margin:14px auto 0;
  text-align:center;
}
.hero .actions{gap:28px;margin-top:30px;justify-content:center;}

/* ---------- 6. Buttons + inline links ---------- */
.btn{
  height:44px;
  padding:0 22px;
  border-radius:980px;
  font-size:17px;
  line-height:1.17648;
  font-weight:400;
  letter-spacing:-.022em;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.btn-primary{background:#0071E3;color:#FFFFFF;border-color:#0071E3;}
.btn-primary::after{content:none;}
.btn-primary:hover{background:#0077ED;color:#FFFFFF;border-color:#0077ED;transform:none;}
.btn-ghost{
  height:auto;padding:0;border:0;border-radius:0;
  background:transparent;color:var(--accent-ink);
  font-size:17px;font-weight:400;letter-spacing:-.022em;
}
.btn-ghost::after{content:" ›";}
.btn-ghost:hover{color:var(--accent-ink);text-decoration:underline;transform:none;}
.learn-more{
  font-size:21px;line-height:1.381;letter-spacing:-.011em;
  color:var(--accent-ink);text-decoration:none;
}
.learn-more:hover{color:var(--accent-ink);text-decoration:underline;}

/* ---------- 7. Sections + Apple eyebrow / headline ---------- */
.section{max-width:1024px;padding:100px 22px;}
.section-head{margin-bottom:56px;text-align:center;}
.section-head .kicker{
  display:inline-flex;align-items:center;justify-content:center;gap:0;
  font-size:17px;font-weight:600;letter-spacing:-.022em;
  text-transform:none;color:var(--muted);
  margin-bottom:8px;
}
.section-head .kicker .k-line,
.section-head .kicker .k-no{display:none;}
.band-light .section-head .kicker{color:var(--muted);}
.section-head h2{
  font-size:clamp(32px,4.4vw,48px);
  font-weight:600;
  line-height:1.08349;
  letter-spacing:-.003em;
  max-width:820px;margin:0 auto;
}
.section-head > p{
  font-size:21px!important;
  line-height:1.381!important;
  letter-spacing:-.011em!important;
  color:var(--muted)!important;
  max-width:620px!important;
  margin:14px auto 0!important;
}

/* ---------- 8. Product tiles ---------- */
.products-section{max-width:none;padding:0;}
.products-section .section-head{max-width:1024px;margin:0 auto;padding:100px 22px 64px;}
.product-tile{
  background:#FFFFFF;
  border-top:0;
  padding:88px 22px 96px;
  text-align:center;
}
.product-tile.alt{background:var(--band);}
.tile-inner{max-width:820px;}
.product-tile .p-eyebrow{
  font-size:17px;font-weight:600;letter-spacing:-.022em;
  color:var(--muted);margin-bottom:6px;
}
.product-tile .p-name{
  font-size:clamp(36px,5vw,56px);
  font-weight:600;
  line-height:1.07143;
  letter-spacing:-.005em;
  margin-bottom:14px;
}
.product-tile .p-desc{
  font-size:21px;line-height:1.381;letter-spacing:-.011em;
  color:var(--muted);max-width:620px;margin:0 auto 18px;
}
.product-tile .p-tags{
  font-size:17px;line-height:1.47059;letter-spacing:-.022em;
  color:var(--muted);margin-bottom:24px;
}
.tile-visual{margin:6px auto 28px;max-width:820px;}

/* ---------- 9. Capability grid ---------- */
.grid{gap:12px;}
.cell{
  background:var(--band);
  border-radius:18px;
  padding:48px 32px;
  text-align:center;
  transition:background .25s ease;
}
.cell:hover{background:#EDEDF0;}
.cell .idx{display:none;}
.cell h3{
  font-size:24px;font-weight:600;
  line-height:1.16667;letter-spacing:.009em;
  margin-bottom:8px;
}
.cell p{
  font-size:17px;line-height:1.47059;letter-spacing:-.022em;
  color:var(--muted);
}

/* ---------- 10. Dark statistics band ---------- */
.stats{
  max-width:none;
  margin:0;
  background:#1D1D1F;
  color:var(--band);
  padding:0;
}
.stat{padding:80px 24px;border-right:0;text-align:center;}
.stat .num{
  font-size:clamp(40px,5vw,56px);
  font-weight:600;
  line-height:1.07143;
  letter-spacing:-.005em;
  color:var(--band);
}
.stat .num::after{display:none;}
.stat .label{
  margin:10px auto 0;
  font-size:17px;
  line-height:1.47059;
  letter-spacing:-.022em;
  color:var(--tertiary);
  max-width:280px;
}

/* ---------- 11. Dark CTA band ---------- */
.cta-band{background:#1D1D1F;margin-top:0;}
.cta{max-width:1024px;padding:120px 22px 128px;}
.cta h2{
  font-size:clamp(32px,4.4vw,48px);
  font-weight:600;
  line-height:1.08349;
  letter-spacing:-.003em;
  color:var(--band);
  margin-bottom:14px;
}
.cta p{
  font-size:21px;
  line-height:1.381;
  letter-spacing:-.011em;
  color:var(--tertiary);
  max-width:560px;
  margin:0 auto 34px;
}
.cta .btn-primary{background:var(--band);color:#1D1D1F;border-color:var(--band);}
.cta .btn-primary:hover{background:#FFFFFF;color:#1D1D1F;border-color:#FFFFFF;}

/* ---------- 12. Embedded assistant card ---------- */
.band-light{background:var(--band);}
.band-light .assistant-card{border-color:var(--line);}
.assistant-card{
  border:1px solid var(--line);
  border-radius:18px;
  background:#FFFFFF;
}
.ai-bar{padding:14px 22px;border-bottom:1px solid var(--line);}
.ai-bar-id{font-size:17px;font-weight:600;letter-spacing:-.022em;}
.ai-bar-status{font-size:12px;letter-spacing:-.01em;color:var(--muted);}
.ai-thread{padding:26px 28px 14px;gap:22px;}
.greeting-lead{font-size:28px;font-weight:600;line-height:1.14286;letter-spacing:.007em;}
.greeting-sub{font-size:17px;line-height:1.47059;letter-spacing:-.022em;color:var(--muted);max-width:460px;}
.chip{
  font-size:14px;line-height:1.42859;letter-spacing:-.016em;
  color:#1D1D1F;background:#FFFFFF;border:1px solid var(--line);
  border-radius:980px;padding:9px 16px;
}
.chip:hover{background:var(--band);border-color:var(--line-hover);}
.u-bubble{background:var(--band);font-size:17px;line-height:1.47059;letter-spacing:-.022em;border-radius:20px;}
.a-text{font-size:17px;line-height:1.52941;letter-spacing:-.022em;}
.ai-box{
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:none;
  background:#FFFFFF;
}
.ai-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(0,113,227,.12);}
.ai-box textarea{font-size:17px;line-height:1.47059;letter-spacing:-.022em;}
.ai-box textarea::placeholder{color:var(--tertiary);}
.ai-hint{font-size:12px;letter-spacing:-.01em;color:var(--muted);}
.ai-gated h3{font-size:28px;line-height:1.14286;letter-spacing:.007em;}
.ai-gated p{font-size:17px;line-height:1.47059;letter-spacing:-.022em;color:var(--muted);}
.ai-openfull{font-size:17px;color:var(--muted);}

/* ---------- 13. Footer: full-bleed #f5f5f7, 12px ---------- */
footer{
  background:var(--band);
  border-top:0;
  max-width:none;
  margin:0;
  padding:0 22px;
}
.foot-top{
  max-width:1024px;
  margin:0 auto;
  padding:36px 0 24px;
  border-bottom:1px solid var(--line);
  gap:32px;
}
.foot-brand{font-size:12px;font-weight:600;letter-spacing:-.01em;color:#1D1D1F;}
.foot-brand img{height:20px;}
.foot-brand p{
  margin-top:10px;
  font-size:12px;
  line-height:1.33333;
  letter-spacing:-.01em;
  color:var(--muted);
  font-weight:400;
}
.foot-links{gap:56px;}
.foot-links div{gap:8px;}
.foot-links a{
  font-size:12px;
  line-height:1.33333;
  letter-spacing:-.01em;
  color:#424245;
  padding:2px 0;
  transition:color .2s ease;
}
.foot-links a:hover{color:#1D1D1F;text-decoration:underline;}
.foot-bottom{
  max-width:1024px;
  margin:0 auto;
  padding:17px 0 21px;
  border-top:0;
  font-size:12px;
  line-height:1.33333;
  letter-spacing:-.01em;
  color:var(--muted);
}

/* ---------- 14. Contact page ---------- */
.hero .eyebrow{text-transform:none;}
.hero h1{letter-spacing:-.009em;line-height:1.0625;font-size:clamp(40px,5.6vw,64px);max-width:820px;}
.hero .sub{font-size:21px;line-height:1.381;letter-spacing:-.011em;max-width:620px;margin-top:16px;}
.layout{max-width:1024px;padding:32px 22px 100px;gap:56px;}
form{gap:24px;}
.field label{
  font-size:12px;line-height:1.33333;letter-spacing:-.01em;
  text-transform:none;color:var(--muted);font-weight:400;
}
.field input,.field textarea,.field select{
  font-size:17px;line-height:1.47059;letter-spacing:-.022em;
  border-bottom:1px solid var(--line);
  padding:10px 0;
}
.field input:focus,.field textarea:focus,.field select:focus{border-bottom-color:var(--accent);}
.form-note{font-size:12px;line-height:1.5;color:var(--muted);letter-spacing:-.01em;}
.aside{border-top:1px solid var(--line);}
.aside .block{padding:26px 0;border-bottom:1px solid var(--line);}
.aside h4{
  font-size:12px;line-height:1.33333;letter-spacing:-.01em;
  text-transform:none;color:var(--muted);font-weight:400;margin-bottom:12px;
}
.aside li{font-size:17px;line-height:1.47059;letter-spacing:-.022em;color:var(--muted);}
.aside li b{font-size:17px;line-height:1.47059;letter-spacing:-.022em;color:#1D1D1F;font-weight:600;}
.aside .pill{font-size:12px;border-radius:980px;padding:5px 12px;color:var(--muted);border-color:var(--line);}
.legal{max-width:1024px;padding:0 22px 88px;}
.legal-head{
  font-size:12px;line-height:1.33333;letter-spacing:-.01em;
  text-transform:none;color:var(--muted);margin-bottom:12px;
}
.legal-item{grid-template-columns:220px 1fr;gap:40px;padding:28px 0;border-top:1px solid var(--line);}
.legal-item h3{font-size:21px;line-height:1.381;letter-spacing:.011em;font-weight:600;}
.legal-item p{font-size:17px;line-height:1.47059;letter-spacing:-.022em;color:var(--muted);max-width:680px;}
.success h3{font-size:28px;line-height:1.14286;letter-spacing:.007em;}
.success p{font-size:17px;line-height:1.47059;letter-spacing:-.022em;color:var(--muted);}

/* ---------- 15. Auth page ---------- */
main{padding:120px 22px 80px;}
.card{max-width:480px;}
.eyebrow{
  font-size:12px;line-height:1.33333;letter-spacing:-.01em;
  text-transform:none;color:var(--muted);margin-bottom:14px;
}
h1{font-size:clamp(36px,5vw,48px);font-weight:600;line-height:1.08349;letter-spacing:-.003em;}
.lede{font-size:21px;line-height:1.381;letter-spacing:-.011em;color:var(--muted);margin-bottom:32px;}
.tabs{
  background:var(--band);
  border:0;
  border-radius:980px;
  padding:2px;
  gap:2px;
  margin-bottom:28px;
}
.tabs button{
  height:32px;border-radius:980px;
  font-size:13px;letter-spacing:-.01em;
  color:#1D1D1F;
  transition:background .2s ease,box-shadow .2s ease;
}
.tabs button.active{
  background:#FFFFFF;color:#1D1D1F;
  box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 1px rgba(0,0,0,.04);
}
.field label{
  font-size:12px;line-height:1.33333;letter-spacing:-.01em;
  text-transform:none;color:var(--muted);font-weight:400;
}
.field input{
  font-size:17px;line-height:1.47059;letter-spacing:-.022em;
  border-bottom:1px solid var(--line);padding:10px 0;
}
.field input:focus{border-bottom-color:var(--accent);}
.btn{font-size:17px;font-weight:400;height:44px;}
.msg{font-size:14px;line-height:1.42859;letter-spacing:-.016em;}
.msg.err{color:#BF4800;}
.msg.ok{color:#008009;}
.note{font-size:12px;line-height:1.5;letter-spacing:-.01em;color:var(--muted);}

/* ---------- 16. Chat page ---------- */
header.bar{
  height:44px;
  padding:0 22px;
  border-bottom:1px solid rgba(0,0,0,.08);
  background:rgba(251,251,253,.8);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
}
header.bar .logo img{height:18px;}
header.bar .title b{font-size:12px;font-weight:600;letter-spacing:-.01em;color:#1D1D1F;}
header.bar .title span{font-size:11px;letter-spacing:-.01em;color:var(--muted);}
header.bar .me{font-size:12px;color:#1D1D1F;font-weight:600;}
header.bar .right a{font-size:12px;color:rgba(0,0,0,.8);}
header.bar .right a:hover{color:#000;}
.chat{padding:32px 22px 20px;}
.wrap{max-width:720px;gap:26px;}
.suggestions{gap:12px;max-width:640px;}
.sug{
  font-size:17px;line-height:1.47059;letter-spacing:-.022em;
  border:1px solid var(--line);border-radius:18px;
  padding:16px 18px;background:#FFFFFF;
}
.sug:hover{background:var(--band);border-color:var(--line-hover);transform:none;}
.sug svg{color:var(--muted);}
.sug:hover svg{color:var(--accent-ink);}
.u-bubble{font-size:17px;line-height:1.47059;letter-spacing:-.022em;border-radius:20px;}
.a-text{font-size:17px;line-height:1.52941;letter-spacing:-.022em;}
.mark{background:#1D1D1F;}
.dock{background:linear-gradient(to top,#FFFFFF 78%,rgba(255,255,255,0));padding:0 22px 18px;}
.box{
  max-width:720px;border:1px solid var(--line);border-radius:26px;
  box-shadow:none;padding:12px 12px 12px 20px;
}
.box:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(0,113,227,.12);}
.box textarea{font-size:17px;line-height:1.47059;letter-spacing:-.022em;}
.box textarea::placeholder{color:var(--tertiary);}
.hint{font-size:12px;line-height:1.5;letter-spacing:-.01em;color:var(--muted);}
.gated h2{font-size:48px;font-weight:600;line-height:1.08349;letter-spacing:-.003em;}
.gated p{font-size:21px;line-height:1.381;letter-spacing:-.011em;color:var(--muted);}
.gated a.btn{font-size:17px;font-weight:400;height:44px;}

/* ---------- 17. Page-scoped corrections ---------- */
.page-contact .hero{
  max-width:1024px;
  margin:0 auto;
  display:block;
  min-height:auto;
  padding:132px 22px 44px;
  text-align:left;
}
.page-contact .hero h1{margin:0;max-width:820px;}
.page-contact .hero .sub{margin:16px 0 0;max-width:620px;text-align:left;}

/* ---------- 18. Small screens ---------- */
@media(max-width:900px){
  header.site nav{padding:0 16px;}
  header.site nav .links{gap:0;}
  header.site nav .links a{padding:0 8px;}
  .hero{padding:56px 18px 64px;min-height:auto;}
  .hero h1{font-size:clamp(36px,9vw,44px);letter-spacing:-.006em;}
  .hero .sub{font-size:19px;}
  .section{padding:72px 18px;}
  .products-section .section-head{padding:72px 18px 48px;}
  .product-tile{padding:64px 18px 72px;}
  .product-tile .p-desc{font-size:19px;}
  .cell{padding:36px 24px;}
  .stat{padding:56px 20px;}
  .cta{padding:88px 18px 96px;}
  .foot-links{gap:32px;}
  footer{padding:0 18px;}
  .layout{padding:24px 18px 72px;}
  .legal{padding:0 18px 72px;}
  .legal-item{grid-template-columns:1fr;gap:10px;}
  main{padding:100px 20px 64px;}
  header.bar{padding:0 16px;}
}