/* Product workflows: a quiet, editorial counterpoint to the peer network. */
.sync-visual{min-height:0;padding:100px 4.5% 106px;background:var(--paper)}
.sync-composition{display:grid;grid-template-columns:.9fr 1.4fr;gap:7%;align-items:start}
.sync-intro>img{width:142px;height:auto;filter:brightness(0);margin-bottom:22px}
.sync-product{font-size:17px;letter-spacing:-.02em}
.sync-intro h4{margin:29px 0 24px;font-size:clamp(37px,4.2vw,70px);font-weight:400;letter-spacing:-.065em;line-height:1.05}
.sync-intro h4 em{font-style:normal;color:#526246}
.sync-intro>p:not(.sync-product){font-size:14px;line-height:1.7;max-width:280px;color:#495044}
.sync-context{display:block;margin-top:31px;max-width:260px;font-size:11px;color:#495044}
.sync-explorer{min-width:0;padding-top:7px}
.sync-controls{display:flex;border-bottom:1px solid #929c8a}
.sync-controls button{position:relative;flex:1;min-height:54px;padding:10px 6px 17px;background:transparent;font-size:16px;text-align:left;color:#4e5847;transition:color var(--fast)}
.sync-controls button .mono{font-size:11px;margin-right:8px}
.sync-controls button:after{content:'';position:absolute;bottom:-1px;left:0;right:15px;height:3px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform var(--medium) var(--ease)}
.sync-controls button[aria-pressed=true]{color:var(--ink)}
.sync-controls button[aria-pressed=true]:after{transform:scaleX(1)}
.sync-controls button:hover{color:var(--ink)}
.sync-controls button:focus-visible{outline-color:var(--ink);outline-offset:2px}
.sync-scene{min-height:480px;padding-top:29px;animation:sync-scene-in 320ms var(--ease) both}
.sync-scene[hidden]{display:none}
.sync-scene-heading>.mono{font-size:11px;color:#495044}
.sync-scene-heading h5{font-size:clamp(21px,2.2vw,32px);font-weight:400;letter-spacing:-.045em;line-height:1.2;margin:9px 0 12px}
.sync-scene-heading>p{font-size:13px;line-height:1.65;color:#495044;max-width:440px;min-height:44px}
.access-window,.sharing-window,.recovery-window{margin-top:25px;background:#edf0e8;border:1px solid #aeb7a5;box-shadow:0 12px 28px #20251f08}
.window-bar{display:flex;align-items:center;gap:9px;padding:14px 17px;border-bottom:1px solid #c6cec0;font-size:13px}
.window-bar>svg,.availability>svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.window-bar>.mono{margin-left:auto;font-size:9px;color:#495044;letter-spacing:.025em}
.access-row{display:grid;grid-template-columns:14px 1fr auto;align-items:center;gap:10px;padding:16px 17px;font-size:12px;border-bottom:1px solid #d4dacd}
.access-row:last-child{border-bottom:0}
.document-icon{width:11px;height:14px;border:1px solid #748069;position:relative}
.document-icon:after{content:'';position:absolute;left:2px;right:2px;top:4px;height:3px;border-top:1px solid #748069;border-bottom:1px solid #748069}
.availability{display:flex;align-items:center;gap:7px;font-size:11px;color:#495044}
.access-offline{background:#e0e7d8}.access-offline .availability{color:#34462b}
.sync-insight{display:flex;gap:11px;align-items:flex-start;margin-top:22px;max-width:460px;color:#495044;font-size:12px;line-height:1.65}
.insight-mark{font-size:21px;line-height:1;color:#526246}
.recipient{display:flex;align-items:center;gap:12px;padding:18px 17px;border-bottom:1px solid #d4dacd;font-size:12px}
.recipient-avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid #a6b29b;background:#e0e7d8;font-size:12px;flex-shrink:0}
.recipient>div{display:grid;gap:4px}.recipient strong{font-weight:500}.recipient>div>span{font-size:10px;color:#495044}
.recipient-right{margin-left:auto;font-size:11px;color:#495044;text-align:right;max-width:130px}
.permission-legend{padding:13px 17px;font-size:9px;color:#495044;letter-spacing:.02em}
.recovery-window{padding:23px 20px}
.version-track{display:flex;position:relative;justify-content:space-between;padding-bottom:33px;font-size:11px;color:#495044}
.version-selected{color:var(--ink)}
.version-line{position:absolute;left:5px;right:5px;bottom:9px;display:flex;align-items:center;justify-content:space-between;height:1px;background:#a1ac96}
.version-line i{width:6px;height:6px;border-radius:50%;background:#97a48d;border:1px solid #edf0e8}
.version-line i:nth-child(3){width:12px;height:12px;background:var(--ink);box-shadow:0 0 0 4px #edf0e8,0 0 0 5px #a1ac96}
.recovery-copies{display:grid;grid-template-columns:1fr 26px 1fr;gap:14px;align-items:center;margin-top:14px}
.recovery-copies>div{padding:17px 13px;border:1px solid #bdc7b3;display:grid;gap:7px;min-height:94px}
.recovery-copies .mono{font-size:9px;letter-spacing:.02em}.recovery-copies strong{font-size:15px;font-weight:400;letter-spacing:-.025em}.recovery-copies>div>span:last-child{font-size:11px;color:#495044}
.recovery-copies>svg{width:26px;fill:none;stroke:#6d7b62;stroke-width:1.5}
.recovery-copies .snapshot-copy{background:#dae4d0;border-color:#829473}
.recovery-distinction{display:grid;grid-template-columns:1fr 1fr;gap:19px;margin-top:20px;font-size:11px;line-height:1.6;color:#495044}
.recovery-distinction strong{display:block;font-size:12px;color:var(--ink);font-weight:500}
.career-detail:has([data-project=bootech]) .text-link{align-self:start}
@keyframes sync-scene-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(min-width:1600px){.sync-composition{gap:10%;grid-template-columns:1fr 1.3fr}.sync-scene{min-height:480px}.sync-intro>p:not(.sync-product){font-size:16px;max-width:330px}.sync-scene-heading>p{font-size:15px;min-height:50px}.access-row{padding:19px 22px;font-size:14px}.availability{font-size:12px}.sync-intro h4{font-size:72px}}
@media(max-width:1050px){.sync-composition{grid-template-columns:.85fr 1.4fr;gap:5%}.sync-visual{padding:90px 4% 96px}.sync-intro h4{font-size:40px}.sync-scene-heading h5{font-size:24px}.sync-controls button{font-size:14px}.sync-controls button .mono{margin-right:5px}.access-row{padding:15px 12px;gap:7px;font-size:11px}.availability{font-size:10px;gap:5px}.window-bar{padding:13px 12px}.recipient{padding:18px 12px;gap:9px}.recipient-right{font-size:10px}.recovery-copies{gap:8px;grid-template-columns:1fr 20px 1fr}.recovery-copies>div{padding:14px 10px}.recovery-copies>svg{width:20px}}
@media(max-width:760px){.sync-visual{padding:68px 23px 91px}.sync-composition{display:block}.sync-intro>img{width:126px;margin-bottom:15px}.sync-product{font-size:15px}.sync-intro h4{font-size:clamp(37px,7.5vw,53px);margin:24px 0 18px}.sync-intro h4 br:nth-of-type(2){display:none}.sync-intro h4 em:before{content:' '}.sync-intro>p:not(.sync-product){font-size:13px;max-width:340px}.sync-context{margin-top:18px;font-size:9px;max-width:none}.sync-explorer{margin-top:25px;padding-top:0}.sync-controls button{font-size:15px;min-height:54px}.sync-scene{min-height:510px;padding-top:23px}.sync-scene-heading h5{font-size:24px}.sync-scene-heading>p{font-size:12px;min-height:60px}.sync-scene-heading>.mono{font-size:10px}.access-window,.sharing-window,.recovery-window{margin-top:20px}.access-row{padding:15px 11px;font-size:11px;gap:7px}.availability{font-size:9px;gap:4px}.availability>svg{width:15px;height:15px}.window-bar{font-size:12px;padding:12px 11px}.window-bar>.mono{font-size:8px}.sync-insight{margin-top:20px;font-size:11px}.recipient{padding:17px 11px;gap:8px;font-size:11px}.recipient-avatar{width:26px;height:26px}.recipient-right{font-size:9px;max-width:86px}.permission-legend{font-size:8px;padding:13px 11px}.recovery-window{padding:22px 13px}.recovery-copies>div{padding:13px 10px}.recovery-copies .mono{font-size:8px}.recovery-copies strong{font-size:14px}.recovery-copies>div>span:last-child{font-size:10px}.recovery-distinction{font-size:10px;gap:15px}.sync-visual .project-open>.mono{display:block}}
@media(max-width:370px){.sync-visual{padding-left:17px;padding-right:17px}.sync-controls button{font-size:13px}.sync-controls button .mono{font-size:9px}.sync-scene-heading h5{font-size:22px}.access-row{font-size:10px;padding-left:9px;padding-right:9px}.availability{font-size:8px}.recovery-copies{gap:6px;grid-template-columns:1fr 16px 1fr}.recovery-copies>div{padding:12px 7px}.recovery-copies>svg{width:16px}}
@media(prefers-reduced-motion:reduce){.sync-scene{animation:none}}

/* Keep the illustrated interface legible on touch screens, too. */
.sync-context,.window-bar>.mono,.permission-legend,.recovery-copies .mono{font-size:11px}
.availability,.recipient-right,.recipient>div>span,.recovery-distinction{font-size:12px}
@media(max-width:1050px){.sync-scene{min-height:490px}.window-bar>.mono,.permission-legend,.recovery-copies .mono{font-size:10px}.availability,.recipient-right,.recipient>div>span{font-size:11px}}
@media(max-width:760px){.sync-scene{min-height:510px}.sync-context{font-size:10px}.availability,.recipient-right,.recipient>div>span,.recovery-distinction{font-size:10px}.window-bar>.mono,.permission-legend,.recovery-copies .mono{font-size:10px}}
@media(max-width:370px){.sync-scene{min-height:530px}.window-bar>.mono{max-width:95px;text-align:right}.recipient-right{max-width:65px}}

.career-links{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:24px}
.career-detail .career-links .text-link{margin-top:10px}
@media(max-width:370px){.sync-controls button{display:flex;flex-direction:column;gap:3px;white-space:nowrap}.sync-controls button .mono{margin-right:0}.career-links{gap:18px}}
