:root{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:#1b263f;background:#f7f9fc;font-synthesis:none;-webkit-font-smoothing:antialiased;font-weight:400}*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(ellipse 660px 420px at 50% 24%,#eaf0ff88,transparent),#f7f9fc}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}.page{max-width:1180px;margin:auto;padding:0 48px}.header{height:102px;display:flex;justify-content:space-between;align-items:center}.brand{display:inline-flex;align-items:center;gap:10px;font-weight:720;font-size:21px;letter-spacing:-.7px}.brand-mark{display:grid;place-items:center;background:#4263ee;color:#fff;width:37px;height:37px;border-radius:12px;box-shadow:0 4px 10px #4263ee24}.brand-mark svg{width:28px;height:28px}.header-badge{display:flex;align-items:center;gap:8px;font-size:12px;color:#6f7c95;padding:8px 12px;border:1px solid #e3e8f1;background:#ffffffb0;border-radius:24px}.header-badge>span{width:5px;height:5px;border-radius:50%;background:#637ff0}.intro{text-align:center;padding:54px 0 43px}.eyebrow{font-size:10px;font-weight:650;letter-spacing:2.4px;color:#7385aa;display:inline-flex;align-items:center;gap:10px}.eyebrow-line{height:1px;width:24px;background:#8c9fcb}h1{font-size:46px;line-height:1.4;font-weight:740;letter-spacing:-1.8px;margin:19px 0 17px}h1>span{color:#4565e7}.intro>p{font-size:15px;line-height:1.9;color:#7a859b;margin:0}.experiences{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:920px;margin:0 auto}.experience{background:#fff;border:1px solid #e4e9f2;border-radius:22px;overflow:hidden;padding:26px 28px 23px;box-shadow:0 8px 34px #273a6b04;transition:box-shadow .2s,border-color .2s}.mobile-card:hover{border-color:#bccafa;box-shadow:0 12px 40px #3c5ddd0c}.card-heading{display:flex;align-items:center;justify-content:space-between}.device-icon{display:grid;place-items:center;width:39px;height:39px;border-radius:12px}.device-icon svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.pc-icon{color:#657699;background:#eef2f9}.mobile-icon{background:#edf0ff;color:#526deb}.status{font-size:11px;display:flex;align-items:center;gap:5px;border-radius:20px;padding:6px 10px}.pending{color:#919bae;background:#f4f6f9}.available{color:#546ee0;background:#f0f3ff}.available i{height:5px;width:5px;border-radius:50%;background:#607cf1}.preview{height:220px;margin:16px -10px 9px;position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse at center,#eef2f9 0%,#fff 70%)}.preview-label{position:absolute;bottom:5px;color:#9aa5b8;font-size:10px;letter-spacing:.4px}.monitor{position:relative;width:246px;transform:perspective(700px) rotateY(-7deg) rotateX(3deg);border:4px solid #8c9bb7;border-radius:9px;background:#8c9bb7;box-shadow:0 12px 27px #65799e18}.monitor-screen{background:#f6f8fc;border-radius:4px;overflow:hidden;height:139px;border:1px solid #eef1f6}.mini-top{height:22px;background:#fff;display:flex;align-items:center;gap:5px;padding:0 8px;border-bottom:1px solid #edf0f5}.mini-logo{width:9px;height:9px;background:#7188d9;border-radius:3px}.mini-title{width:35px;height:4px;background:#ccd5e7;border-radius:3px}.mini-top>i{height:4px;width:4px;border-radius:50%;background:#d7deea}.mini-top>i:first-of-type{margin-left:auto}.mini-workspace{display:flex;height:117px}.mini-sidebar{width:41px;background:#fff;border-right:1px solid #edf0f5;padding:13px 6px}.mini-sidebar>b{display:block;background:#e4eaf5;height:4px;border-radius:3px;margin-bottom:11px}.mini-sidebar>b:first-child{height:12px;margin:-3px -3px 9px;background:#e8edff}.mini-content{flex:1;padding:13px 12px}.mini-greeting{display:block;width:69px;height:5px;background:#b3bfd5;border-radius:3px}.mini-subtitle{display:block;width:97px;height:3px;background:#dce3ef;border-radius:3px;margin-top:6px}.mini-tiles{display:flex;gap:6px;margin:12px 0}.mini-tiles>i{height:33px;flex:1;background:#fff;border:1px solid #e6eaf3;border-radius:4px;padding:5px}.mini-tiles>i>span{display:block;width:12px;height:12px;background:#e4eaff;border-radius:3px}.mini-tiles>i:nth-child(2)>span{background:#e5eff0}.mini-tiles>i:nth-child(3)>span{background:#ede8f8}.mini-row{width:100%;height:4px;background:#e2e7f1;border-radius:3px;margin-bottom:5px}.mini-row.short{width:70%}.monitor-chin{height:11px;display:grid;place-items:center}.monitor-chin>span{width:4px;height:4px;border-radius:50%;background:#dfe5ef}.monitor-neck{width:35px;height:18px;background:linear-gradient(#b5c0d3,#e0e5ed);margin-top:-2px}.monitor-foot{width:93px;height:6px;background:#bfc9da;border-radius:7px 7px 3px 3px;box-shadow:0 5px 9px #7c8aa022}.phone-preview{background:radial-gradient(ellipse at center,#edf0ff 0%,#fff 69%)}.phone{z-index:2;position:relative;width:103px;height:193px;margin-top:-12px;border:4px solid #7687b2;background:#fff;border-radius:18px;transform:rotate(8deg);box-shadow:10px 12px 25px #5872d82b;overflow:hidden}.phone-camera{position:absolute;z-index:4;top:4px;left:34px;width:29px;height:7px;background:#7687b2;border-radius:8px}.phone-screen{height:100%;background:linear-gradient(#f1f4ff,#f8faff);padding:0 7px;position:relative}.phone-top{display:flex;justify-content:space-between;align-items:center;height:21px}.phone-top>span{font-size:5px;font-weight:700;color:#455678}.phone-top>i{width:9px;height:4px;background:#8291b1;border-radius:1px}.phone-greeting{font-size:7px;font-weight:700;margin-top:8px;color:#3e4f77}.phone-greeting>span{display:block;font-size:4px;font-weight:400;margin-top:4px;color:#8e9ab2}.phone-workspace{background:#fff;border-radius:8px;margin-top:11px;padding:8px 7px;box-shadow:0 3px 7px #596dcc09}.phone-tile-icon{width:19px;height:19px;border-radius:5px;background:#edf1ff;display:grid;place-items:center}.phone-tile-icon svg{width:12px;stroke:#6982dd;stroke-width:1.6}.phone-workspace>b{display:block;font-size:6px;margin:6px 0 4px;color:#495c80}.phone-workspace>span{display:flex;align-items:center;gap:3px;font-size:4px;color:#8c9ab0}.phone-workspace>span>i{height:3px;width:3px;background:#65bda1;border-radius:50%}.phone-connect{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:5px;padding:6px;background:#5b77e8;color:white;border-radius:4px}.phone-connect>span{font-size:8px}.phone-small-row{display:flex;align-items:center;gap:4px;margin-top:10px}.phone-small-row>i{height:10px;width:10px;background:#e6ebf8;border-radius:3px}.phone-small-row>span{width:33px;height:3px;background:#d6deef;border-radius:2px}.phone-small-row>b{font-size:8px;color:#b9c3d7;margin-left:auto}.phone-dock{display:flex;justify-content:space-around;position:absolute;bottom:10px;left:7px;right:7px;padding-top:5px;border-top:1px solid #e7ecf7}.phone-dock>i{height:7px;width:7px;border:1px solid #c4cde1;border-radius:2px}.phone-dock>i:first-child{background:#768fe5;border-color:#768fe5}.phone-home{position:absolute;bottom:3px;left:31px;width:30px;height:2px;background:#9caac4;border-radius:3px}.phone-orbit{position:absolute;border:1px solid #e9edfb;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}.orbit-one{width:165px;height:165px}.orbit-two{width:228px;height:228px;border-style:dashed}.phone-float{position:absolute;width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:#fff;box-shadow:0 6px 18px #4d69c411;border:1px solid #ecf0fc;z-index:3}.phone-float svg{height:18px;width:18px;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.float-one{left:calc(50% - 109px);top:62px;color:#6787df;transform:rotate(-11deg)}.float-two{right:calc(50% - 111px);bottom:57px;color:#8895dc;transform:rotate(9deg)}.card-copy{padding:9px 0 0}.card-kicker{font-size:9px;letter-spacing:1.8px;color:#98a4bc;font-weight:650}h2{font-size:24px;letter-spacing:-.6px;font-weight:650;margin:10px 0 12px}.card-copy>p{font-size:13px;line-height:1.85;color:#8590a5;margin:0}.features{display:flex;gap:8px;margin-top:17px}.features>span{font-size:10px;color:#7786a3;background:#f5f7fb;padding:5px 8px;border-radius:5px}.card-bottom{margin-top:25px}.entry{display:flex;align-items:center;justify-content:space-between;padding:13px 17px;border-radius:10px;width:100%;font-size:13px;font-family:inherit;font-weight:550;line-height:20px;border:0}.entry svg{height:17px;width:17px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}.active-entry{background:#4969e9;color:white;box-shadow:0 4px 9px #4969e91a;transition:background .2s}.active-entry:hover{background:#3656d4}.active-entry:hover svg{transform:translateX(3px)}.disabled-entry{background:#f0f3f8;color:#a0aabe;cursor:not-allowed}.card-note{display:block;text-align:center;font-size:10px;color:#99a3b5;margin-top:12px;line-height:1.6}.closing{display:flex;align-items:center;justify-content:center;gap:8px;padding:33px 0 39px;color:#99a4b8}.closing svg{width:18px;height:18px;stroke:#a2aec3;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}.closing p{font-size:11px;margin:0}footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #e8ecf3;padding:22px 0 28px;font-size:10px;color:#a2adc1}footer>span:first-child{font-weight:600;letter-spacing:.2px}:focus-visible{outline:3px solid #7c96f4;outline-offset:5px}a.entry:focus-visible{outline-offset:4px}

/* Respect display cutouts while retaining the desktop page gutters. */
body { min-width: 0; }
.page {
  --page-gutter: 48px;
  padding: env(safe-area-inset-top, 0px)
    max(var(--page-gutter), env(safe-area-inset-right, 0px))
    env(safe-area-inset-bottom, 0px)
    max(var(--page-gutter), env(safe-area-inset-left, 0px));
}
.experiences { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.experience, .card-copy { min-width: 0; }
.entry { min-height: 46px; }
h1 > span { white-space: nowrap; }

@media (min-width: 1600px) {
  .intro { padding-top: 75px; padding-bottom: 50px; }
  .header { height: 112px; }
}

@media (max-width: 760px) {
  .page { --page-gutter: 24px; }
  .header { height: 76px; }
  .brand { font-size: 19px; }
  .brand-mark { height: 34px; width: 34px; border-radius: 10px; }
  .header-badge { font-size: 10px; padding: 7px 9px; }
  .intro { padding: 28px 0; }
  h1 { font-size: 35px; letter-spacing: -1.3px; margin: 16px 0 14px; }
  .eyebrow { font-size: 9px; letter-spacing: 1.7px; }
  .intro > p { font-size: 13px; }
  .experiences { gap: 16px; }
  .experience { padding: 21px 19px; }
  .preview { height: 201px; margin-left: -8px; margin-right: -8px; }
  .monitor { width: 210px; }
  .monitor-screen { height: 124px; }
  .mini-workspace { height: 102px; }
  .mini-content { padding: 10px 8px; }
  .mini-tiles { margin: 9px 0; }
  .card-copy > p { font-size: 12px; }
  .entry { font-size: 13px; padding: 12px; }
  .card-note { font-size: 10px; }
  .closing { padding: 26px 0; }
}

/* Portrait phones: put the mobile entry first and illustrations beside the copy. */
@media (max-width: 580px) {
  .page { --page-gutter: 18px; }
  .header { height: 68px; gap: 12px; }
  .header-badge { padding: 6px 8px; font-size: 9px; gap: 5px; white-space: nowrap; }
  .brand { gap: 8px; font-size: 18px; }
  .brand-mark { width: 32px; height: 32px; }
  .brand-mark svg { width: 25px; height: 25px; }
  .intro { padding: 22px 0 25px; }
  h1 { font-size: clamp(28px, 8vw, 35px); line-height: 1.3; margin: 13px 0 12px; }
  h1 > span { display: block; }
  .intro > p { font-size: 12px; line-height: 1.8; }
  .eyebrow { font-size: 8px; letter-spacing: 1.5px; }
  .eyebrow-line { width: 18px; }
  .experiences { grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 430px; }
  .mobile-card { order: -1; border-color: #d3dcfc; }
  .experience {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(90px, 25vw, 120px);
    grid-template-areas: 'heading heading' 'copy preview' 'bottom bottom';
    column-gap: 8px;
    padding: 18px;
    border-radius: 19px;
  }
  .card-heading { grid-area: heading; margin-bottom: 14px; }
  .device-icon { width: 34px; height: 34px; border-radius: 10px; }
  .device-icon svg { width: 19px; height: 19px; }
  .preview { grid-area: preview; width: 100%; height: 150px; margin: 0; align-self: center; }
  .preview-label, .phone-float { display: none; }
  .phone { flex-shrink: 0; transform: scale(.67) rotate(8deg); margin-top: 0; }
  .orbit-one { height: 95px; width: 95px; }
  .orbit-two { height: 125px; width: 125px; }
  .monitor { width: 140px; border-width: 3px; transform: perspective(700px) rotateY(-7deg) rotateX(3deg) scale(.72); }
  .monitor-screen { height: 82px; }
  .mini-workspace { height: 60px; }
  .mini-top { height: 16px; }
  .mini-sidebar { width: 26px; padding: 8px 4px; }
  .mini-content { padding: 7px 6px; overflow: hidden; }
  .mini-subtitle { width: 64px; }
  .mini-tiles { margin: 6px 0; gap: 3px; }
  .mini-tiles > i { height: 22px; padding: 3px; }
  .monitor-neck { width: 20px; height: 12px; margin-top: -14px; }
  .monitor-foot { width: 62px; height: 4px; }
  .card-copy { grid-area: copy; padding: 0; align-self: center; }
  .card-kicker { font-size: 8px; letter-spacing: 1px; }
  h2 { font-size: 23px; margin: 7px 0 9px; }
  .card-copy > p { font-size: 12px; line-height: 1.8; }
  .card-copy > p > br { display: none; }
  .features { gap: 6px; margin-top: 12px; flex-wrap: wrap; }
  .features > span { padding: 5px 7px; }
  .card-bottom { grid-area: bottom; margin-top: 16px; }
  .entry { padding: 13px 15px; font-size: 13px; }
  .card-note { font-size: 10px; margin-top: 9px; }
  .closing { gap: 6px; padding: 23px 0; }
  .closing p { font-size: 10px; }
  footer { font-size: 9px; padding: 18px 0 22px; }
}

@media (max-width: 360px) {
  .page { --page-gutter: 14px; }
  .brand { font-size: 16px; gap: 6px; }
  .header-badge { font-size: 8px; padding: 6px; }
  .intro > p { font-size: 11px; }
  .experience { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'heading' 'copy' 'bottom'; }
  .preview { display: none; }
}

/* Short landscape viewports need a height breakpoint, even on wide phones. */
@media (min-width: 581px) and (max-width: 1100px) and (max-height: 600px) and (orientation: landscape) {
  .page { --page-gutter: 24px; }
  .header { height: 58px; }
  .brand { font-size: 18px; }
  .brand-mark { width: 32px; height: 32px; border-radius: 10px; }
  .brand-mark svg { width: 25px; height: 25px; }
  .header-badge { font-size: 10px; padding: 6px 10px; }
  .intro { padding: 6px 0 18px; }
  .eyebrow { display: none; }
  h1 { font-size: 30px; line-height: 1.25; letter-spacing: -1px; margin: 0 0 8px; }
  .intro > p { font-size: 12px; line-height: 1.6; }
  .desktop-break { display: none; }
  .experiences { gap: 16px; }
  .experience { padding: 16px 18px; border-radius: 16px; }
  .card-heading { margin-bottom: 10px; }
  .device-icon { width: 30px; height: 30px; border-radius: 9px; }
  .device-icon svg { width: 18px; height: 18px; }
  .preview, .card-kicker, .features, .card-note, .closing { display: none; }
  .card-copy { padding: 0; }
  h2 { font-size: 21px; line-height: 1.3; margin: 0 0 7px; }
  .card-copy > p { font-size: 12px; line-height: 1.7; }
  .card-bottom { margin-top: 14px; }
  .entry { padding: 12px 14px; font-size: 13px; }
  footer { margin-top: 18px; padding: 14px 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}