/* Three equally weighted projects; screenshots remain complete and uncropped. */
.home:not(.detail-site) .selected-work { padding-top: clamp(24px,4.5dvh,48px); }
.selected-work > .panel-kicker { margin: 0 0 20px; font-weight: 600; }
.selected-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(24px,2.5vw,40px); }
.selected-project { min-width: 0; display: flex; flex-direction: column; }
.selected-visual { display: block; height: clamp(150px,24dvh,245px); overflow: hidden; border: 1px solid #9db8bf40; text-decoration: none; background: #142131; }
.selected-visual > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 29%; }
.selected-copy { display: flex; flex: 1; flex-direction: column; }
.selected-index { margin: 17px 0 8px; font-size: .875rem; letter-spacing: .045em; color: #bcd9de; }
.selected-copy h3 { margin: 0 0 12px; font-size: clamp(1.375rem,1.8vw,1.75rem); line-height: 1.3; letter-spacing: -.02em; }
.selected-summary { margin: 0; font-size: 1rem; line-height: 1.65; color: #c5d4de; max-width: 38em; }
.selected-tags { color: #a8cdd3; font-size: .875rem; line-height: 1.6; margin: 14px 0; }
.selected-end { margin-top: auto; }
.selected-meta { font-size: .8125rem; color: #a9becb; line-height: 1.55; margin: 0; }
.selected-copy .text-link { font-size: .9375rem; margin-top: 12px; padding-bottom: 6px; }
.selected-work .secondary-project { margin-top: 24px; padding-top: 15px; grid-template-columns: 72px 1fr auto; gap: 20px; }
.selected-work .secondary-project > img { width: 72px; height: 45px; }
.selected-work .secondary-project h3 { font-size: 1rem; }
.selected-work .secondary-summary { display: none; }
.selected-work .secondary-kicker { margin-bottom: 4px; }
.sharing-diagram { width: 100%; max-width: 500px; margin-inline: auto; padding: 30px; background: linear-gradient(135deg,#253649,#172434); border: 1px solid #94b8c347; }
.sharing-diagram-title { font-size: .875rem; color: #b8d4de; padding-bottom: 22px; border-bottom: 1px solid #aec4ca40; }
.sharing-diagram ol { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 8px; }
.sharing-diagram li { display: flex; gap: 18px; align-items: center; padding: 14px 0; font-size: 1.125rem; }
.flow-index { display: inline-grid; place-items: center; flex: 0 0 32px; height: 32px; border: 1px solid #93bdc675; font-size: .8125rem; color: #c8e5e8; }
.diagram-footer { font-size: .875rem; color: #a7c2cd; border-top: 1px solid #aec4ca40; margin: 0; padding-top: 18px; }
.document-visual .sharing-diagram { height: 100%; max-width: none; padding: 20px 24px; border: 0; display: flex; flex-direction: column; justify-content: center; }
.document-visual .sharing-diagram-title { padding: 0; border: 0; }
.document-visual .sharing-diagram ol { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin: 16px 0 0; }
.document-visual .sharing-diagram li { flex: 1; display: grid; gap: 8px; padding: 0; font-size: 1rem; line-height: 1.35; }
.document-visual .diagram-footer { display: none; }
.document-cover-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px,5vw,80px); align-items: center; margin-top: 36px; }
.selected-visual.document-visual,.selected-visual.website-visual { display: flex; align-items: center; }
.selected-visual.document-visual { background: #f4f4f6; }
.selected-visual.document-visual > img,.selected-visual.website-visual > img { object-fit: contain; object-position: center; }
.platform-screen { min-width: 0; margin: 0; }
.platform-screen-link { display: block; border: 1px solid #9db8bf60; background: #f4f4f6; }
.platform-screen img { display: block; width: 100%; height: auto; }
.platform-screen figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 14px; color: #b8cbd7; font-size: .875rem; line-height: 1.5; }
.platform-screen figcaption a { color: #d2e7ec; text-underline-offset: 4px; }
.platform-screen-link:focus-visible { outline: 2px solid #c4e9ed; outline-offset: 4px; }
.document-scope { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid #b9d5de40; color: #aec6d0; font-size: .9375rem; line-height: 1.7; }
.function-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.home.robot-detail .function-heading h2 { font-size: clamp(2rem,3vw,3rem); line-height: 1.2; margin: 14px 0 18px; }
.feature-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px 32px; margin-top: 20px; }
.feature-item { border-top: 1px solid #9bbbb950; padding-top: 14px; min-width: 0; }
.feature-number { color: #a5bfcd; font-size: .8125rem; }
.feature-item h3 { margin: 8px 0; font-size: 1.125rem; line-height: 1.4; }
.feature-item p { margin: 0; font-size: 1rem; line-height: 1.65; color: #c0d0db; }
.function-page .collaboration-credit,.design-boundary { margin: 24px 0 0; color: #acc2ce; font-size: .875rem; line-height: 1.65; }
.sharing-steps { padding: 0; margin: 26px 0; list-style: none; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 48px; }
.sharing-steps li { display: flex; gap: 20px; border-top: 1px solid #bac7db50; padding-top: 20px; }
.sharing-step-number { color: #bfc7e0; font-size: 1rem; line-height: 1.6; }
.sharing-steps h3 { margin: 0 0 10px; font-size: 1.25rem; line-height: 1.4; }
.sharing-steps p { margin: 0; font-size: 1rem; line-height: 1.7; color: #c4cfde; }
.selected-visual:focus-visible { outline: 2px solid #c4e9ed; outline-offset: 4px; }
@media (min-width:651px) and (max-height:760px) {
 .selected-visual { height: 160px; }
 .home:not(.detail-site) .selected-work { padding-block: 24px 20px; }
 .selected-work > .panel-kicker { margin-bottom: 16px; }
 .selected-index { margin-top: 13px; }
 .selected-tags { margin-block: 10px; }
 .selected-work .secondary-project { margin-top: 18px; padding-top: 12px; }
 .home.robot-detail .function-page { padding-top: 26px; padding-bottom: 12px; }
 .feature-grid { gap: 20px 28px; margin-top: 12px; }
 .function-page .collaboration-credit,.function-page .design-boundary { margin-top: 18px; }
}
@media (min-width:951px) {
 .home:not(.detail-site) .selected-work { padding-top:clamp(48px,7dvh,72px); }
}
@media (min-width:651px) and (max-width:950px) {
 .selected-grid { grid-template-columns: 1fr; gap: 34px; }
 .selected-project { display: grid; grid-template-columns: .9fr 1.1fr; align-items: start; gap: 24px; }
 .selected-visual { height: 210px; }
 .selected-index { margin-top: 0; }
 .selected-work .secondary-project { grid-template-columns: 72px 1fr auto; }
 .selected-work .secondary-action { grid-column: auto; }
 .feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .function-heading,.document-cover-grid { gap: 28px; }
 .home.robot-expanded .site-header .wrap { gap: 18px; }
 .home.robot-expanded .nav { gap: 14px; }
}
@media (max-width:650px) {
 .selected-grid { grid-template-columns: 1fr; gap: 36px; }
 .selected-visual { height: 190px; }
 .selected-copy h3 { font-size: 1.6rem; }
 .selected-project + .selected-project { border-top: 1px solid #bdd5df40; padding-top: 28px; }
 .selected-work .secondary-project { grid-template-columns: 68px minmax(0,1fr); gap: 15px; margin-top: 32px; padding-top: 22px; }
 .selected-work .secondary-project > img { width: 68px; }
 .selected-work .secondary-action { grid-column: 2; }
 .function-heading,.document-cover-grid { grid-template-columns: 1fr; gap: 8px; }
 .document-cover-grid { gap: 28px; margin-top: 30px; }
 .sharing-diagram { padding: 24px; }
 .feature-grid { grid-template-columns: 1fr; gap: 26px; margin-top: 28px; }
 .home.robot-detail .function-heading h2 { font-size: 2.125rem; }
 .sharing-steps { grid-template-columns: 1fr; gap: 24px; }
 .home.robot-expanded .nav { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
 .home.robot-expanded .nav { overflow: visible; }
 .home.robot-expanded .nav a { font-size: .8125rem; line-height: 1.4; }
 .home.robot-expanded .nav a,.home.document-detail .nav a { white-space: normal; min-width: 0; }
 .home.document-detail .nav a { line-height: 1.4; }
 .home.robot-detail .robot-topline .back-link { font-size: .8125rem; }
 .robot-topline { flex-wrap: wrap; }
}

/* A dedicated recipient panel keeps both sides of the product visible. */
.recipient-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:64px; }
.recipient-points { display:grid; gap:22px; margin-top:28px; }
.recipient-points h3 { font-size:1.0625rem; margin:0 0 8px; }
.recipient-points p { color:#bfd1db; font-size:1rem; line-height:1.7; margin:0; max-width:32em; }
.recipient-screen { width:min(100%,calc(61dvh * .6923)); justify-self:center; }
.recipient-screen .platform-screen-link { background:#f4f4f6; }
.recipient-screen img { width:100%; height:min(61dvh,620px); object-fit:contain; }
.recipient-screen figcaption { font-size:.8125rem; }
@media (min-width:651px) {
 .recipient-screen { position:relative; top:clamp(16px,4dvh,32px); }
 #recipient .recipient-page { padding-bottom:calc(clamp(30px,5dvh,58px) + clamp(16px,4dvh,32px)); }
}
@media (max-width:950px) { .recipient-grid { gap:28px; } }
@media (min-width:951px) and (max-height:760px) {
 html[lang="en"] .recipient-screen { width:min(100%,calc(58dvh * .6923)); }
 html[lang="en"] .recipient-screen img { height:min(58dvh,620px); }
}
@media (max-width:650px) {
 .recipient-grid { grid-template-columns:1fr; gap:32px; }
 .recipient-screen { width:min(100%,440px); }
 .recipient-screen img { height:auto; }
 .recipient-points { gap:22px; margin-top:24px; }
}