:root {
            --navy: #00345B;
            --blue: #026488;
            --sky: #B4E1F1;
            --pale: #EAF5FA;
            --ink: #243746;
            --muted: #587081;
            --line: #D7E5ED;
            --white: #fff;
            --radius: 16px
        }

        * {
            box-sizing: border-box
        }

        html {
            scroll-behavior: smooth
        }

        body {
            margin: 0;
            font-family: 'DM Sans', Arial, sans-serif;
            color: var(--ink);
            font-size: 17px;
            line-height: 1.65;
            background: white
        }

        button,
        input,
        select,
        textarea {
            font: inherit
        }

        a {
            color: var(--blue)
        }

        button,
        a {
            -webkit-tap-highlight-color: transparent
        }

        a:focus-visible,
        button:focus-visible,
        summary:focus-visible,
        input:focus-visible,
        select:focus-visible,
        textarea:focus-visible {
            outline: 3px solid var(--blue);
            outline-offset: 4px
        }

        h1,
        h2,
        h3,
        p {
            margin-top: 0
        }

        h1,
        h2,
        h3 {
            line-height: 1.12;
            color: var(--navy);
            letter-spacing: -.035em
        }

        h1 {
            font-size: clamp(39px, 4.4vw, 64px);
            font-weight: 700;
            margin-bottom: 25px
        }

        .hero h1 {
            /* 字号上限 64 -> 62："Visualization of Head" 在 63.36px 时需 590px，
               列宽只有 584px，差 6px 就会多断一行；收到 62 刚好放下（2px 无感） */
            font-size: clamp(39px, 4.4vw, 62px)
        }

        body.page-neurodr .hero h1 {
            /* 小屏也要让 "Visualization of Head" 进一行，否则 375 上会折成 4 行、
               整块高 168px、观感偏重。
               这句宽 = 字号 × 9.31，可用宽 = 视口 - 左右内边距 44px，取 9.6 作安全系数。
               外层 min() 只在放不下时才缩：414 及以上仍走 clamp 原值（39~62px）。
               只作用于 NeuroDR 页，其他页面的 hero 标题不受影响。 */
            font-size: min(clamp(39px, 4.4vw, 62px), calc((100vw - 44px) / 9.6))
        }

        /* NeuroDR 标题的固定断行只在大屏生效：窄屏那条 "Visualization of Head"
           本身放不下，会二次折行，出现 "Head" 单独一行的怪现象。
           窄屏改为自然折行。 */
        @media(max-width:900px) {
            body.page-neurodr .hero h1 br {
                display: none
            }
        }

        h2 {
            font-size: clamp(29px, 3vw, 43px);
            margin-bottom: 22px
        }

        h3 {
            font-size: 24px;
            line-height: 1.22;
            margin-bottom: 13px
        }

        p {
            margin-bottom: 20px
        }

        .wrap {
            max-width: 1220px;
            padding: 0 36px;
            margin: auto
        }

        .skip {
            position: absolute;
            left: -9999px
        }

        .skip:focus {
            left: 16px;
            top: 16px;
            z-index: 100;
            background: white;
            padding: 12px
        }

        .header {
            background: #fff;
            position: sticky;
            top: 0;
            z-index: 20;
            border-bottom: 1px solid var(--line)
        }

        .header-in {
            height: 90px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px
        }

        .logo {
            text-decoration: none;
            line-height: 1.05;
            font-size: 19px;
            font-weight: bold;
            color: var(--navy);
            letter-spacing: .025em;
            white-space: nowrap
        }

        .logo span {
            font-size: 11px;
            display: block;
            letter-spacing: .22em;
            margin-top: 7px;
            color: var(--blue)
        }

        nav {
            display: flex;
            gap: 24px;
            align-items: center
        }

        nav a {
            font-size: 14px;
            text-decoration: none;
            color: var(--ink);
            font-weight: 600;
            white-space: nowrap
        }

        nav a[aria-current=page] {
            color: var(--blue);
            text-decoration: underline;
            text-underline-offset: 9px
        }

        nav .btn {
            font-size: 14px;
            padding: 11px 17px
        }

        .btn {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            border: 1px solid var(--blue);
            background: var(--blue);
            border-radius: 5px;
            color: white;
            padding: 13px 21px;
            text-decoration: none;
            font-weight: bold;
            font-size: 15px;
            line-height: 1.4;
            cursor: pointer;
            min-height: 46px
        }

        .btn.outline {
            background: transparent;
            color: var(--blue)
        }

        .btn.light {
            background: #fff;
            color: var(--navy);
            border-color: #fff
        }

        .btn.ghost {
            border-color: var(--sky);
            background: transparent;
            color: white
        }

        .actions {
            display: flex;
            gap: 13px;
            flex-wrap: wrap;
            margin-top: 25px
        }

        .menu-toggle {
            display: none;
            background: white;
            border: 1px solid var(--line);
            padding: 9px 14px;
            border-radius: 5px;
            color: var(--navy)
        }

        .section {
            padding: 76px 0
        }

        .section.small {
            padding: 48px 0
        }

        .pale {
            background: var(--pale)
        }

        .navy {
            background: var(--navy);
            color: white
        }

        .navy h1,
        .navy h2,
        .navy h3 {
            color: #fff
        }

        .navy p {
            color: #DDEBF3
        }

        .eyebrow {
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .17em;
            text-transform: uppercase;
            color: var(--blue);
            margin-bottom: 18px
        }

        .navy .eyebrow {
            color: var(--sky)
        }

        .hero {
            padding: 72px 0
        }

        .grid {
            display: grid;
            gap: 32px
        }

        .two {
            grid-template-columns: 1fr 1fr;
            align-items: center
        }

        .hero-grid {
            grid-template-columns: 1.08fr 1fr;
            gap: 64px;
            align-items: center
        }

        .three {
            grid-template-columns: repeat(3, 1fr)
        }

        .four {
            grid-template-columns: repeat(4, 1fr)
        }

        .lead {
            font-size: 20px;
            line-height: 1.6
        }

        .limited {
            max-width: 800px
        }

        .badge {
            display: inline-block;
            border: 1px solid var(--line);
            background: white;
            color: var(--navy);
            padding: 6px 11px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: bold;
            letter-spacing: .04em;
            line-height: 1.5
        }

        .navy .badge {
            background: #123F62;
            color: var(--sky);
            border-color: #42728C
        }

        .note {
            font-size: 13px;
            line-height: 1.6;
            padding: 15px 18px;
            background: var(--pale);
            color: var(--muted);
            border-left: 3px solid var(--blue);
            margin: 24px 0
        }

        .smalltext {
            font-size: 14px;
            line-height: 1.6;
            color: var(--muted)
        }

        .ph {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 240px;
            border: 1px dashed #78A5BC;
            background: linear-gradient(140deg, #F4FAFD, #DCEFF7);
            border-radius: 9px;
            text-align: center;
            color: var(--navy);
            padding: 25px;
            flex-direction: column;
            position: relative
        }

        .ph .ph-label {
            font-size: 11px;
            font-weight: bold;
            letter-spacing: .14em;
            line-height: 1.7;
            text-transform: uppercase;
            max-width: 300px
        }

        .ph .ph-detail {
            font-size: 13px;
            line-height: 1.5;
            max-width: 275px;
            margin-top: 13px;
            color: var(--muted)
        }

        .ph.dark {
            background: #0B4268;
            border-color: #5A88A1;
            color: #fff
        }

        .ph.dark .ph-detail {
            color: #D0E8F3
        }

        .ph.hero-ph {
            min-height: 430px
        }

        .ph .frame {
            width: 52px;
            height: 52px;
            border: 1px solid currentColor;
            border-radius: 7px;
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 25px;
            font-weight: normal
        }

        .ph.tall {
            min-height: 330px
        }

        .caption {
            font-size: 12px;
            line-height: 1.5;
            color: var(--muted);
            margin: 12px 0 0
        }

        .navy .caption {
            color: var(--sky)
        }

        .feature {
            padding-top: 20px;
            border-top: 2px solid var(--sky)
        }

        .feature h3 {
            font-size: 21px
        }

        .feature p {
            font-size: 15px
        }

        .cards {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px
        }

        .card {
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: white;
            overflow: hidden
        }

        .card .ph {
            border: 0;
            border-bottom: 1px solid var(--line);
            border-radius: 0;
            min-height: 210px
        }

        .card-content {
            padding: 25px
        }

        .card h3 {
            font-size: 21px
        }

        /* 批注要求：标题本身就是链接，底部不再单独放一个链接 */
        .news-grid .card h3 a {
            /* .card a 会把链接压到 14px，这里让标题链接继承 h3 的字号/字重，
               否则可点击的标题反而比纯文字标题小一号、不醒目 */
            font-size: inherit;
            font-weight: inherit;
            color: inherit;
            text-decoration: none
        }

        .news-grid .card h3 a:hover {
            text-decoration: underline
        }

        .card p {
            font-size: 15px
        }

        .card a {
            font-size: 14px;
            font-weight: bold;
            text-decoration: none
        }

        .card a:hover {
            text-decoration: underline
        }

        .card .meta {
            font-size: 11px;
            letter-spacing: .09em;
            color: var(--blue);
            text-transform: uppercase;
            margin-bottom: 15px
        }

        .link {
            font-weight: bold;
            text-decoration: none;
            border-bottom: 1px solid var(--blue);
            padding-bottom: 4px
        }

        .section-head {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 25px;
            margin-bottom: 32px
        }

        .section-head h2 {
            margin-bottom: 0
        }

        /* 批注（Jeanne）：删除 workflow 区的序号，改为纯标题 */
        .step {
            padding: 26px;
            border: 1px solid var(--line);
            border-radius: 10px;
            background: white
        }

        /* 批注要求：技术页那三个步骤去掉 01/02/03 编号（NeuroDR 页的步骤编号保留） */
        #process .step:before {
            content: none
        }

        .step h3 {
            font-size: 23px
        }

        .step p {
            font-size: 15px;
            margin: 0
        }

        .jump {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 25px
        }

        .jump a {
            background: var(--pale);
            font-size: 13px;
            border: 1px solid var(--line);
            border-radius: 4px;
            padding: 7px 13px;
            text-decoration: none
        }

        .model-section {
            scroll-margin-top: 115px;
            padding: 48px 0;
            border-bottom: 1px solid var(--line)
        }

        .model-section:first-child {
            padding-top: 0
        }

        .model-section:last-child {
            border: 0
        }

        .model-section .ph {
            min-height: 320px
        }

        .label-row {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 16px
        }

        .timeline {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px
        }

        .milestone {
            border-top: 2px solid var(--blue);
            padding-top: 20px
        }

        .milestone b {
            color: var(--blue);
            font-size: 25px
        }

        .milestone p {
            font-size: 15px;
            margin: 10px 0 0
        }

        .team-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 25px
        }

        .person {
            padding: 25px;
            background: white;
            border: 1px solid var(--line);
            border-radius: 12px
        }

        .portrait {
            width: 95px;
            height: 95px;
            border: 1px dashed #78A5BC;
            border-radius: 50%;
            background: var(--pale);
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-size: 10px;
            line-height: 1.5;
            letter-spacing: .06em;
            color: var(--blue);
            margin-bottom: 20px
        }

        .person h3 {
            font-size: 21px;
            margin-bottom: 8px
        }

        .role {
            font-size: 12px;
            font-weight: bold;
            color: var(--blue);
            min-height: 38px;
            line-height: 1.5;
            margin-bottom: 15px
        }

        .person p {
            font-size: 14px;
            margin: 0;
            line-height: 1.65
        }

        .news-grid {
            display: grid;
            /* 三列横排。注意：neurodr 页也用这个类放"三视图"，不要在这里改成单列 */
            grid-template-columns: repeat(3, 1fr);
            gap: 24px
        }

        details {
            font-size: 13px;
            line-height: 1.6;
            color: var(--muted);
            margin-top: 18px
        }

        summary {
            cursor: pointer;
            font-weight: bold;
            color: var(--blue)
        }

        .contact-grid {
            grid-template-columns: .85fr 1.2fr;
            gap: 70px;
            align-items: start
        }

        .form {
            border: 1px solid var(--line);
            border-radius: 14px;
            padding: 32px;
            background: white
        }

        .fields {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px
        }

        .field.full {
            grid-column: 1/-1
        }

        label {
            display: block;
            color: var(--navy);
            font-weight: bold;
            font-size: 13px;
            margin-bottom: 7px
        }

        input,
        select,
        textarea {
            width: 100%;
            border: 1px solid #ACC1CE;
            border-radius: 4px;
            padding: 12px;
            background: white;
            color: var(--ink);
            min-height: 47px;
            font-size: 15px
        }

        textarea {
            resize: vertical;
            min-height: 145px
        }

        .form .smalltext {
            margin-top: 16px
        }

        .form-status {
            font-size: 14px;
            font-weight: bold;
            margin-top: 18px;
            color: var(--blue)
        }

        .form-status.is-success {
            color: #1B7A4B
        }

        .form-status.is-error {
            color: #B4232B
        }

        /* 蜜罐字段：真人看不到，机器人会填 */
        .form .hp {
            position: absolute;
            left: -9999px;
            width: 1px;
            height: 1px;
            overflow: hidden
        }

        .footer {
            padding: 45px 0;
            background: var(--navy);
            color: #D5E8F4;
            font-size: 13px
        }

        .footer-grid {
            display: flex;
            justify-content: space-between;
            gap: 35px;
            align-items: start
        }

        .footer a {
            color: #fff;
            text-decoration: none
        }

        .footer .logo {
            color: white
        }

        .footer .logo span {
            color: var(--sky)
        }

        .footer-links {
            display: flex;
            flex-wrap: wrap;
            gap: 18px;
            margin-bottom: 22px
        }

        .stack {
            display: flex;
            flex-direction: column;
            gap: 16px
        }

        .inline-clearance {
            margin-top: 27px;
            border-top: 1px solid #3D6887;
            padding-top: 18px;
            font-size: 13px
        }

        .inline-clearance a {
            color: var(--sky)
        }

        @media(max-width:1050px) {
            nav {
                gap: 15px
            }

            .wrap {
                padding: 0 25px
            }

            .header-in {
                height: 82px
            }

            .logo {
                font-size: 16px
            }

            .hero-grid {
                gap: 32px
            }

            .cards {
                grid-template-columns: repeat(2, 1fr)
            }

            .hero-ph {
                min-height: 370px !important
            }

            nav a {
                font-size: 12px
            }

            nav .btn {
                font-size: 12px;
                padding: 11px
            }

            .team-grid {
                grid-template-columns: repeat(2, 1fr)
            }
        }

        @media(max-width:760px) {
            body {
                font-size: 16px
            }

            .wrap {
                padding: 0 22px
            }

            .header-in {
                height: 74px
            }

            .menu-toggle {
                display: block
            }

            nav {
                display: none;
                position: absolute;
                top: 74px;
                left: 0;
                right: 0;
                background: white;
                border-bottom: 1px solid var(--line);
                padding: 22px;
                flex-direction: column;
                align-items: stretch;
                gap: 18px
            }

            nav.open {
                display: flex
            }

            nav a {
                font-size: 15px
            }

            nav .btn {
                font-size: 14px
            }

            .hero {
                padding: 45px 0
            }

            .hero-grid,
            .two,
            .three,
            .four,
            .contact-grid {
                grid-template-columns: 1fr;
                gap: 30px
            }

            .section {
                padding: 52px 0
            }

            .section.small {
                padding: 34px 0
            }

            .hero-ph {
                min-height: 300px !important
            }

            .lead {
                font-size: 18px
            }

            .cards,
            .news-grid,
            .team-grid {
                grid-template-columns: 1fr
            }

            .card .ph {
                min-height: 230px
            }

            .section-head {
                align-items: start;
                flex-direction: column;
                gap: 20px
            }

            .timeline {
                grid-template-columns: 1fr 1fr
            }

            .fields {
                grid-template-columns: 1fr
            }

            .field.full {
                grid-column: auto
            }

            .form {
                padding: 23px
            }

            .footer-grid {
                flex-direction: column
            }

            .model-section {
                padding: 35px 0
            }

            .role {
                min-height: 0
            }

            .person .portrait {
                width: 78px;
                height: 78px
            }

            .footer-links {
                gap: 14px
            }
        }

        @media(prefers-reduced-motion:reduce) {
            html {
                scroll-behavior: auto
            }

            * {
                transition: none !important
            }
        }

        @media print {

            .header,
            .footer,
            .actions,
            .menu-toggle {
                display: none
            }

            .section,
            .hero {
                padding: 24px 0
            }

            .wrap {
                max-width: 100%;
                padding: 0
            }

            .navy {
                background: white;
                color: var(--ink)
            }

            .navy h1,
            .navy h2,
            .navy p {
                color: var(--navy)
            }
        }


        /* Revised October 2026 concept: model portfolio first, with separate technology page. */
        :root {
            --navy: #00345B;
            --blue: #026488;
            --sky: #B4E1F1;
            --ink: #243746;
            --pale: #EDF6FA;
            --muted: #526B7C
        }

        body {
            font-family: Arial, Helvetica, sans-serif
        }

        h1,
        h2,
        h3 {
            text-wrap: balance
        }

        .wrap {
            max-width: 1260px
        }

        .header-in {
            height: 86px
        }

        nav {
            gap: 27px
        }

        .logo {
            font-size: 18px
        }

        .logo span {
            font-size: 9px;
            letter-spacing: .19em
        }

        nav .contact-nav {
            padding: 11px 18px
        }

        .home-hero {
            padding: 70px 0 74px
        }

        .home-hero .hero-grid {
            /* 首行 "Precision 3D Anatomy" 需要 564px；原来文本列占 1fr（558px），
               差 6px 就被挤成两行。放宽到 1.08fr（约 579px），字号不动 */
            grid-template-columns: 1.08fr 1fr;
            gap: 55px
        }

        .home-hero h1 {
            font-size: clamp(39px, 4.05vw, 58px);
            letter-spacing: -.043em;
            line-height: 1.08;
            margin-bottom: 25px
        }

        .accent {
            color: var(--sky)
        }

        .home-hero .lead {
            font-size: 19px;
            max-width: 520px;
            line-height: 1.65
        }

        .home-hero .actions {
            gap: 11px
        }

        .btn {
            gap: 13px
        }

        .home-hero .btn {
            font-size: 14px;
            padding: 13px 16px
        }

        .transformation {
            /* 底部内边距由 17px 加到 34px：给图片下方的 INPUT / OUTPUT 标签腾位置 */
            padding: 24px 22px 34px;
            border: 1px solid #A9CDE0;
            border-radius: 12px;
            background: #E5F3F9
        }

        .visual-caption {
            display: flex;
            justify-content: space-between;
            gap: 15px;
            font-size: 12px;
            line-height: 1.6;
            color: var(--navy);
            margin-bottom: 24px
        }

        .mini-label {
            font-size: 9px;
            text-transform: uppercase;
            letter-spacing: .1em;
            white-space: nowrap;
            align-self: start;
            border: 1px solid #7AA8BE;
            border-radius: 3px;
            padding: 2px 6px
        }

        .transformation-grid {
            display: grid;
            grid-template-columns: 1fr 22px 1fr;
            gap: 9px;
            align-items: center
        }

        .image-slot {
            min-height: 270px;
            padding: 16px 10px 22px;
            border: 1px dashed #5C839C;
            border-radius: 6px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
            background: #123F5B;
            color: #E2F0F8
        }

        .image-slot.output-slot {
            background: #E5F3F8;
            color: var(--navy);
            border-color: #96C2D5
        }

        .slot-no {
            font-size: 9px;
            letter-spacing: .12em;
            position: absolute;
            /* 挂在图片正下方、水平居中（top:100% 让它完全落在图外，不再压住画面） */
            left: 50%;
            transform: translateX(-50%);
            top: 100%;
            margin-top: 7px;
            white-space: nowrap
        }

        .slot-icon {
            width: 65px;
            height: 65px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.15;
            opacity: .65;
            margin: 22px 0 18px
        }

        .image-slot strong {
            font-size: 13px;
            line-height: 1.5;
            max-width: 155px
        }

        .image-slot>span:last-child {
            font-size: 11px;
            line-height: 1.6;
            margin-top: 9px;
            opacity: .8
        }

        .transform-arrow {
            display: flex;
            align-items: center;
            justify-content: center;
            color: #5B9BD5;
            position: relative;
            /* 右侧输出槽由 aspect-ratio 定宽且 justify-self:center，比它所在的列窄，
               于是"列中点"偏左于"两张图的视觉中点"。这里右移补偿到真正的视觉中点。
               偏移量随视口变化，窄屏见下方媒体查询。
               注：在数学中点基础上再右移 6px —— 左侧 CT 图是深色块、视觉重量偏右，
               纯按几何居中看起来仍偏左，按视觉校正。 */
            left: 28px
        }

        .transform-arrow svg {
            display: block;
            width: 46px;
            height: auto;
            flex: 0 0 auto
        }

        .visual-footnote {
            font-size: 10px;
            line-height: 1.7;
            margin: 17px 0 0 !important;
            color: var(--navy) !important
        }

        .section {
            padding: 74px 0
        }

        .section-intro {
            margin: 15px 0 0;
            /* 放宽到 660px：原 600px 会让「anatomy.」掉到第二行独占一行（全文单行实测 614px） */
            max-width: 660px;
            color: var(--muted);
            font-size: 17px
        }

        .section-head {
            margin-bottom: 33px;
            align-items: center
        }

        .section-head .link {
            white-space: nowrap;
            font-size: 14px
        }

        .portfolio-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 31px
        }

        .portfolio-card {
            display: block;
            text-decoration: none;
            color: inherit;
            border: 1px solid #D6E4EC;
            border-radius: 10px;
            overflow: hidden;
            transition: border-color .15s, box-shadow .15s
        }

        .portfolio-card:hover {
            border-color: #70A6BF;
            box-shadow: 0 5px 20px #00345B0D
        }

        .portfolio-visual {
            height: 290px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            background: #EDF5F8;
            color: #527789;
            border-bottom: 1px solid #D6E4EC
        }

        .portfolio-visual.vascular {
            background: #EDF2F5
        }

        .portfolio-visual.skull {
            background: #F2F6F7
        }

        .portfolio-visual.skeleton {
            background: #E8F2F6
        }

        .portfolio-visual strong {
            display: block;
            font-size: 14px;
            font-weight: normal;
            letter-spacing: .02em;
            color: #365D71
        }

        .placeholder-cross {
            width: 46px;
            height: 46px;
            line-height: 42px;
            border: 1px solid #A5C2D0;
            border-radius: 50%;
            font-size: 30px;
            font-weight: normal;
            display: block;
            margin: 0 auto 14px;
            color: #6993A8
        }

        .asset-label {
            display: block;
            margin-top: 10px;
            font-size: 10px;
            letter-spacing: .045em;
            color: #607F90
        }

        .visual-index {
            position: absolute;
            left: 21px;
            top: 18px;
            font-size: 12px;
            font-weight: bold;
            color: #6E8C9D
        }

        .visual-type {
            position: absolute;
            left: 21px;
            bottom: 17px;
            font-size: 10px;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: #6E8C9D
        }

        .portfolio-description {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            padding: 23px 25px 24px;
            background: white
        }

        .portfolio-description h3 {
            font-size: 24px;
            margin-bottom: 8px
        }

        .portfolio-description p {
            font-size: 14px;
            line-height: 1.6;
            margin: 0;
            color: var(--muted)
        }

        .circle-arrow {
            width: 36px;
            height: 36px;
            flex-shrink: 0;
            border: 1px solid #BFD3DE;
            border-radius: 50%;
            display: grid;
            place-items: center;
            color: var(--blue);
            font-size: 19px
        }

        .portfolio-note {
            font-size: 12px;
            color: var(--muted);
            margin: 25px 0 0
        }

        .portfolio-section {
            background: #F0F6F9
        }

        .neuro-feature {
            background: #fff
        }

        .neuro-feature .grid {
            gap: 60px
        }

        .neuro-feature h2 {
            font-size: 40px
        }

        .neuro-image {
            min-height: 365px;
            border: 0
        }

        .neuro-image .asset-label {
            color: #BBD4E3;
            margin-top: 28px
        }

        .technology-teaser {
            grid-template-columns: 1fr 1fr;
            gap: 65px;
            align-items: center
        }

        .technology-teaser .lead {
            font-size: 21px
        }

        .reasoning-example .ph {
            min-height: 265px;
            border-radius: 8px 8px 0 0;
            border: 1px solid var(--line)
        }

        .example-caption {
            border: 1px solid var(--line);
            border-top: 0;
            padding: 20px 23px;
            border-radius: 0 0 8px 8px;
            font-size: 13px;
            background: #fff
        }

        .example-caption b {
            display: block;
            color: var(--navy);
            margin-bottom: 6px
        }

        .example-caption span {
            display: block;
            color: var(--muted);
            line-height: 1.7
        }

        .foundations {
            background: #F3F7F9;
            border-top: 1px solid #E1ECF2;
            border-bottom: 1px solid #E1ECF2
        }

        .foundation-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 65px
        }

        .foundation-grid>div+div {
            padding-left: 45px;
            border-left: 1px solid #CCDEE7
        }

        .foundation-label {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: .11em;
            color: var(--blue);
            display: block;
            margin: 4px 0 16px
        }

        .foundation-grid h3 {
            font-size: 26px
        }

        .foundation-grid p {
            font-size: 16px;
            margin: 0
        }

        .collaboration-panel {
            background: var(--navy);
            color: white;
            border-radius: 12px;
            padding: 49px 48px;
            display: grid;
            grid-template-columns: 1.4fr 1fr;
            align-items: center;
            gap: 40px;
            max-width: 1188px
        }

        .collaboration-panel h2 {
            color: white;
            font-size: 36px
        }

        .collaboration-panel .eyebrow {
            color: var(--sky)
        }

        .collaboration-panel p {
            font-size: 16px;
            color: #D9E8F1
        }

        .application-labels {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 23px
        }

        .application-labels span {
            font-size: 11px;
            padding: 5px 10px;
            border: 1px solid #49748E;
            border-radius: 3px;
            color: #C8E1EF
        }

        .collaboration-action {
            text-align: center
        }

        .collaboration-action p {
            font-size: 12px;
            margin: 18px 0 0;
            color: #C8DDE9;
            line-height: 1.7
        }

        .news-home {
            padding-top: 8px
        }

        .news-list {
            border-top: 1px solid var(--line)
        }

        .news-item {
            display: grid;
            grid-template-columns: 215px 1fr 30px;
            align-items: center;
            gap: 30px;
            padding: 27px 0;
            border-bottom: 1px solid var(--line);
            text-decoration: none
        }

        .news-item .meta {
            font-size: 11px;
            line-height: 1.7;
            color: var(--muted);
            max-width: 175px
        }

        .news-item h3 {
            font-size: 22px;
            line-height: 1.3;
            margin: 0
        }

        .news-item>span {
            font-size: 22px
        }

        .news-item:hover h3 {
            color: var(--blue)
        }

        .model-status {
            font-size: 12px;
            color: var(--muted);
            border-top: 1px solid var(--line);
            padding-top: 16px;
            margin: 20px 0
        }

        .science-principles {
            padding: 8px 0 8px 35px;
            border-left: 2px solid var(--sky)
        }

        .science-principles>div+div {
            margin-top: 27px
        }

        .science-principles b {
            font-size: 21px;
            color: var(--navy)
        }

        .science-principles p {
            font-size: 15px;
            margin: 7px 0 0;
            color: var(--muted)
        }

        .footer {
            padding-top: 43px
        }

        .footer .logo {
            font-size: 17px
        }

        nav .btn[aria-current=page] {
            color: white;
            text-decoration: none;
            box-shadow: 0 0 0 2px #B4E1F1
        }

        .model-section {
            scroll-margin-top: 110px
        }

        .person {
            border-radius: 8px
        }

        .footer-links {
            gap: 21px
        }

        .ph-detail {
            font-size: 12px !important
        }

        .contact-grid {
            gap: 55px
        }

        @media(max-width:1100px) {
            nav {
                gap: 19px
            }

            .transform-arrow {
                left: 24px
            }

            .home-hero .hero-grid {
                gap: 32px
            }

            .home-hero .btn {
                padding: 11px 13px;
                font-size: 13px
            }

            .collaboration-panel {
                margin: 0 25px;
                padding: 38px
            }

            .home-hero h1 {
                font-size: 46px
            }

            .image-slot {
                min-height: 255px
            }

            .neuro-feature .grid {
                gap: 38px
            }

            .hero-grid {
                gap: 35px
            }

            .portfolio-visual {
                height: 270px
            }
        }

        @media(max-width:900px) {
            .logo {
                font-size: 16px
            }

            .transform-arrow {
                left: 17px
            }

            nav {
                gap: 15px
            }

            nav a {
                font-size: 12px
            }

            .home-hero .hero-grid {
                grid-template-columns: 1fr 1fr;
                gap: 25px
            }

            .home-hero h1 {
                font-size: 40px
            }

            .transformation {
                padding: 18px 14px 14px
            }

            .visual-caption {
                display: block
            }

            .visual-caption .mini-label {
                display: none
            }

            .image-slot {
                min-height: 250px
            }

            .image-slot strong {
                font-size: 12px
            }

            .image-slot>span:last-child {
                font-size: 10px
            }

            .portfolio-description {
                padding: 20px
            }

            .portfolio-description h3 {
                font-size: 22px
            }

            .technology-teaser {
                gap: 35px
            }

            .foundation-grid {
                gap: 30px
            }

            .foundation-grid>div+div {
                padding-left: 30px
            }

            .neuro-feature h2 {
                font-size: 35px
            }

            .collaboration-panel {
                grid-template-columns: 1.2fr 1fr;
                gap: 25px
            }

            .collaboration-panel h2 {
                font-size: 31px
            }

            .news-item {
                grid-template-columns: 170px 1fr 22px;
                gap: 20px
            }

            .news-item h3 {
                font-size: 20px
            }
        }

        @media(max-width:760px) {
            .header-in {
                height: 74px
            }

            .logo {
                font-size: 16px
            }

            .logo span {
                font-size: 8px
            }

            nav {
                top: 74px;
                gap: 20px
            }

            nav a {
                font-size: 15px
            }

            nav .contact-nav {
                font-size: 14px
            }

            .home-hero {
                padding: 43px 0
            }

            .home-hero .hero-grid {
                grid-template-columns: 1fr;
                gap: 35px
            }

            .home-hero h1 {
                /* 手机端让 "Precision 3D Anatomy" 永远放得下一行：
                   这句的渲染宽 ≈ 字号 × 9.72，可用宽 = 视口 - 左右内边距(44px)；
                   取 10 作安全系数，所以最小字号按容器宽实时算。
                   外层再套 min() 与原来的 8.6vw 增长取小 —— 只有放不下时才缩，
                   414 / 440 这类大屏维持原样。 */
                font-size: min(clamp(35px, 8.6vw, 49px), calc((100vw - 44px) / 10));
                max-width: 600px
            }

            .home-hero .lead {
                font-size: 17px;
                line-height: 1.65;
                max-width: 570px
            }

            .home-hero .btn {
                font-size: 13px;
                padding: 12px 15px
            }

            .transformation {
                padding: 18px 17px 15px;
                max-width: 590px;
                width: 100%
            }

            .visual-caption {
                display: flex;
                font-size: 11px;
                gap: 8px
            }

            .visual-caption .mini-label {
                display: inline-block;
                font-size: 8px
            }

            .image-slot {
                min-height: 225px
            }

            .image-slot strong {
                font-size: 12px
            }

            .image-slot>span:last-child {
                font-size: 10px
            }

            .slot-icon {
                width: 48px;
                height: 48px;
                margin: 23px 0 14px
            }

            .transform-arrow svg {
                width: 34px;
                height: 18px
            }

            .section {
                padding: 50px 0
            }

            .section-head {
                align-items: flex-start
            }

            .section-intro {
                font-size: 16px
            }

            .portfolio-grid {
                grid-template-columns: 1fr;
                gap: 25px
            }

            .portfolio-visual {
                height: 270px
            }

            .portfolio-description h3 {
                font-size: 23px
            }

            .portfolio-description p {
                font-size: 14px
            }

            .portfolio-note {
                font-size: 12px
            }

            .neuro-feature .grid {
                gap: 32px
            }

            .neuro-image {
                min-height: 285px
            }

            .technology-teaser {
                grid-template-columns: 1fr;
                gap: 30px
            }

            .technology-teaser .lead {
                font-size: 19px
            }

            .foundation-grid {
                grid-template-columns: 1fr;
                gap: 30px
            }

            .foundation-grid>div+div {
                padding: 28px 0 0;
                border-left: 0;
                border-top: 1px solid #CCDEE7
            }

            .foundation-grid h3 {
                font-size: 25px
            }

            .collaboration-panel {
                grid-template-columns: 1fr;
                margin: 0 22px;
                padding: 31px 25px;
                gap: 25px
            }

            .collaboration-panel h2 {
                font-size: 31px
            }

            .collaboration-panel p {
                font-size: 16px
            }

            .collaboration-action {
                text-align: left
            }

            .collaboration-action p {
                font-size: 12px
            }

            .news-home {
                padding-top: 4px
            }

            .news-item {
                grid-template-columns: 1fr 25px;
                gap: 12px;
                padding: 24px 0
            }

            .news-item .meta {
                grid-column: 1/-1;
                max-width: none
            }

            .news-item h3 {
                font-size: 20px
            }

            .news-item>span {
                grid-column: 2
            }

            .science-principles {
                padding-left: 23px
            }

            .footer .logo {
                font-size: 16px
            }

            .footer-links {
                gap: 14px 19px
            }

            .model-section {
                scroll-margin-top: 94px
            }

            .section-head .link {
                white-space: normal
            }

            .contact-grid {
                gap: 35px
            }
        }

        @media(prefers-reduced-motion:reduce) {
            .portfolio-card {
                transition: none
            }
        }

        .media {
            display: block;
            overflow: hidden;
            min-height: 0;
            position: relative
        }

        .media img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block
        }

        .image-slot.has-photo {
            padding: 0;
            border: 0;
            min-height: 0;
            height: auto;
            /* 原来 hidden 会让图下方的标签被裁掉 */
            overflow: visible;
            justify-self: center
        }

        .image-slot.has-photo img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block
        }

        .image-slot.input-slot.has-photo {
            background: #E5F3F8;
            aspect-ratio: 750/839;
            width: min(100%, calc(405px * 750 / 839))
        }

        .image-slot.output-slot.has-photo {
            background: #E5F3F8;
            aspect-ratio: 948/1659;
            width: auto;
            height: 0;
            min-height: 100%;
            justify-self: center
        }

        .image-slot.has-photo .slot-no {
            z-index: 1;
            /* 标签已移到图片外，白底衬会糊在卡片浅底上，改为纯文字 */
            background: none;
            color: var(--navy);
            padding: 0
        }

        .portfolio-visual.has-model {
            height: auto;
            padding: 0;
            display: block;
            border: 0
        }

        .portfolio-visual.has-model img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block
        }

        .portfolio-visual.has-model.spine,
        .portfolio-visual.has-model.vascular {
            background: #dddddd;
            aspect-ratio: 1181/899;
            width: 100%
        }

        .portfolio-visual.has-model.skull {
            background: #dcdcdc;
            width: 100%;
            aspect-ratio: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0
        }

        .portfolio-visual.has-model.skull img {
            width: min(100%, calc(435px * 647 / 1075));
            height: auto;
            aspect-ratio: 647/1075
        }

        .portfolio-visual.has-model.skeleton {
            background: #dddddd;
            width: 100%;
            aspect-ratio: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0
        }

        .portfolio-visual.has-model.skeleton img {
            width: min(100%, calc(435px * 1158 / 1610));
            height: auto;
            aspect-ratio: 1158/1610
        }

        .media.model-shot,
        .media.model-shot.spine {
            background: #dddddd;
            aspect-ratio: 1181/899;
            width: 100%;
            height: auto;
            min-height: 0;
            align-self: center;
            border: 0;
            padding: 0
        }

        .media.model-shot.skull {
            background: #dcdcdc;
            aspect-ratio: auto;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0
        }

        .media.model-shot.skull img {
            width: min(100%, calc(480px * 647 / 1075));
            height: auto;
            aspect-ratio: 647/1075
        }

        .media.model-shot.skeleton {
            background: #dddddd;
            aspect-ratio: auto;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0
        }

        .media.model-shot.skeleton img {
            width: min(100%, calc(480px * 1158 / 1610));
            height: auto;
            aspect-ratio: 1158/1610
        }

        .media.model-shot img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block
        }

        /* Models 页 Vascular 图放大倍数。1 是刚好放进框，1.15 是放大 15%。 */
        .media.model-shot:not(.spine):not(.skull):not(.skeleton) {
            --vascular-scale: 1.15
        }

        .media.model-shot:not(.spine):not(.skull):not(.skeleton) img {
            transform: scale(var(--vascular-scale))
        }

        .neuro-views {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            min-height: 0;
            padding: 0;
            border: 0;
            background: transparent
        }

        .neuro-views img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
            background: #fff;
            aspect-ratio: 1
        }

        .media.hero-mesh {
            background: transparent;
            border: 0;
            padding: 0;
            aspect-ratio: 948/1659;
            width: min(100%, calc(645px * 948 / 1659));
            height: auto;
            min-height: 0;
            margin-inline: auto;
            justify-self: center
        }

        .media.hero-mesh.compact {
            width: min(100%, calc(352px * 948 / 1659))
        }

        /* 陈迪反馈：Our Models 页的深蓝 NeuroDR 区块太高，一屏看不到下方还有内容。
           收窄区块上下留白 + 压低图片高度，让下一区块在首屏露出一截。 */
        body.page-models .hero {
            padding-bottom: 36px
        }

        body.page-models .section.navy {
            padding-top: 38px;
            padding-bottom: 38px
        }

        .media.view-media {
            /* 图本身接近 1:1。原来固定 height:380px，列宽一变就变成竖条，
               所以改用宽高比，让图框始终跟图一致 */
            aspect-ratio: 1 / 1;
            height: auto;
            min-height: 0;
            border: 0;
            padding: 0;
            background: #0B4268;
            border-radius: 0
        }

        .media.view-media.volume {
            background: #000
        }

        .card.extend {
            display: flex;
            flex-direction: column
        }

        .card.extend .card-content {
            flex: 0 0 auto
        }

        .card.extend .media {
            margin-top: 0
        }

        .media.case-shot {
            background: #111;
            aspect-ratio: 3330/1778;
            width: 100%;
            height: auto;
            min-height: 0;
            border: 0;
            padding: 0;
            align-self: start
        }

        .media.case-shot.scoliosis {
            background: #f6f6f6;
            aspect-ratio: 4422/2072
        }

        .reasoning-example .media.case-shot {
            border: 1px solid var(--line);
            border-bottom: 0;
            border-radius: 8px 8px 0 0
        }

        .media.xray-shot {
            background: #fff;
            aspect-ratio: 1052/843;
            height: auto;
            min-height: 0;
            border: 0;
            border-radius: 0
        }

        .media.spine-task {
            background: #fff;
            aspect-ratio: 993/1122;
            width: 100%;
            height: auto;
            min-height: 0;
            border: 0;
            padding: 0;
            align-self: center
        }

        .media.measure-shot {
            background: #fff;
            aspect-ratio: 1554/906;
            height: auto;
            min-height: 0;
            border: 0;
            border-radius: 0
        }

        .founder-pair {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: 12px;
            height: 240px;
            width: 60%;
            margin-inline: auto;
            min-height: 0;
            overflow: hidden;
            border: 0;
            padding: 0;
            background: transparent
        }

        .founder-pair img {
            width: 100%;
            height: 100%;
            min-height: 0;
            object-fit: cover;
            object-position: center 18%;
            border-radius: 9px;
            display: block
        }

        .media.mayo-logos {
            /* 批注要求：logo 换成白色版直接放在蓝底上，不再用白色卡片 */
            background: none;
            min-height: 0;
            height: 420px;
            padding: 32px 28px;
            border: 0
        }

        .media.mayo-logos img {
            width: 100%;
            height: 100%;
            object-fit: contain
        }

        .media.cover-media {
            background: #fff;
            height: 500px;
            min-height: 0;
            border: 0;
            padding: 0
        }

        .media.cover-media img {
            width: auto;
            max-width: 100%;
            height: 100%;
            object-fit: contain;
            margin-inline: auto
        }

        .media.doc {
            background: #fff;
            height: auto;
            aspect-ratio: 1570/900;
            min-height: 0;
            border: 0;
            border-radius: 0;
            padding: 0
        }

        .media.doc img {
            object-fit: cover;
            object-position: top center
        }

        .media.doc.press {
            aspect-ratio: 1822/620
        }

        .media.cover-card {
            background: #111;
            aspect-ratio: 712/400;
            height: auto;
            min-height: 0;
            border: 0;
            border-radius: 0;
            padding: 0
        }

        .media.cover-card img {
            object-fit: cover;
            object-position: top center
        }

        .portrait.has-photo {
            border: 0;
            overflow: hidden;
            background: var(--pale);
            width: 96px;
            height: 96px;
            padding: 0
        }

        .portrait.has-photo img {
            width: 96px;
            height: 96px;
            object-fit: cover;
            border-radius: 50%;
            display: block
        }

        .news-grid {
            align-items: start
        }

        /* 三视图三张卡片等高（描述行数不同，不拉齐会差一行） */
        body.page-neurodr .news-grid {
            align-items: stretch
        }

        body.page-news .news-grid {
            /* 批注要求：News 页列表改为竖排。只作用于 News 页。
               去掉配图后是纯文字卡片，如果拉满 1188px，每行约 150 字符不好读、
               且卡片很矮显得空旷 —— 所以给列表一个阅读宽度并居中 */
            grid-template-columns: 1fr;
            align-items: stretch;
            max-width: 720px;
            margin-inline: auto;
            gap: 20px
        }

        body.page-news .news-grid>.card {
            /* 批注（Jeanne）：新闻列表不放配图，纯文字卡片。
               原来这里是"左图右文"的 grid，配图已移除 */
            display: flex;
            flex-direction: column
        }

        body.page-news .news-grid>.card>.card-content {
            padding: 30px 34px
        }

        body.page-news .news-grid .card-content {
            flex: 0 0 auto
        }

        body.page-news .news-grid .media.doc.press,
        body.page-news .news-grid .media.cover-card {
            flex: 1 0 auto;
            height: auto
        }

        @media(max-width:1100px) {
            .portfolio-visual.has-model.skull img {
                width: min(100%, calc(405px * 647 / 1075))
            }

            .portfolio-visual.has-model.skeleton img {
                width: min(100%, calc(405px * 1158 / 1610))
            }
        }

        @media(max-width:1050px) {
            .media.hero-mesh {
                width: min(100%, calc(555px * 948 / 1659))
            }

            .media.hero-mesh.compact {
                width: min(100%, calc(356px * 948 / 1659))
            }
        }

        @media(max-width:760px) {
            .image-slot.input-slot.has-photo {
                width: min(100%, calc(338px * 750 / 839))
            }

            .media.hero-mesh {
                width: min(100%, calc(450px * 948 / 1659))
            }

            .media.hero-mesh.compact {
                width: min(100%, calc(360px * 948 / 1659))
            }

            .media.view-media {
                height: auto
            }

            .founder-pair {
                height: 168px
            }

            .media.cover-media {
                height: 420px
            }

            .person .portrait.has-photo,
            .person .portrait.has-photo img {
                width: 96px;
                height: 96px
            }
        }

/* ==========================================================================
   NeuroDR workflow 流程图（2026-10-23）
   4 格独立图 + 蓝色块状箭头，列宽与上方 .grid.four.process 的 step 卡严格一致。

   原理：.four 的列宽 = (W - 3×gap) / 4。这里用 7 条轨道
   [1fr 32px 1fr 32px 1fr 32px 1fr] 且 column-gap:0，固定轨合计 96px
   正好等于卡片的三个 32px 间隙 ⇒ 四个 1fr 与卡片列恒等，任何视口都不漂移。
   ⚠ 32px 必须始终等于 .grid 的 gap:32px；改 gap 时这里要同步。
   ========================================================================== */
.process-figure {
    margin: 36px 0 0;
    /* 箭头由 JS 量测后绝对定位到这个容器里（见文件末尾 arrows-measured） */
    position: relative
}

.process-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr);
    column-gap: 0;
    row-gap: 0;
    align-items: center
}

/* 箭头被 JS 绝对定位后会退出 grid 流。若不显式指定轨道，剩下的四个格子会
   自动重排进 1/3/5/7 之外的错误轨道（第 2、4 格塌成 32px）。
   轨道顺序：1=格1 2=箭头 3=格2 4=箭头 5=格3 6=箭头 7=格4

   ⚠ 必须限定在 >=761px。手机上 .process-row 只有一列，若不限定断点，
   这些 grid-column 会强行把四格塞进 1/3/5/7 四个隐式轨道 ——
   表现为横排挤在一起、第一格被压成 0 宽（2026-10-23 第二次踩同类坑）。 */
@media (min-width: 761px) {
    .process-row > .process-cell:nth-child(1) { grid-column: 1 }
    .process-row > .process-cell:nth-child(3) { grid-column: 3 }
    .process-row > .process-cell:nth-child(5) { grid-column: 5 }
    .process-row > .process-cell:nth-child(7) { grid-column: 7 }
}

/* 箭头被 JS 绝对定位后会退出 grid 流。若不显式指定轨道，剩下的四个格子会
   自动重排进 1/3/5/7 之外的错误轨道（第 2、4 格塌成 32px）。
   轨道顺序：1=格1 2=箭头 3=格2 4=箭头 5=格3 6=箭头 7=格4

   ⚠ 必须限定在 >=761px。手机上 .process-row 只有一列，若不限定断点，
   这些 grid-column 会强行把四格塞进 1/3/5/7 四个隐式轨道 ——
   表现为横排挤在一起、第一格被压成 0 宽（2026-10-23 第二次踩同类坑）。 */
@media (min-width: 761px) {
    .process-row > .process-cell:nth-child(1) { grid-column: 1 }
    .process-row > .process-cell:nth-child(3) { grid-column: 3 }
    .process-row > .process-cell:nth-child(5) { grid-column: 5 }
    .process-row > .process-cell:nth-child(7) { grid-column: 7 }
}

.process-cell {
    /* 格子做成横长方形：4 格等宽时，若用 1/1，竖长的 3D 图会撑到 273px 高，
       比三视图（受列宽限制约 140px）大 3 倍，整行失衡。0.55 让四格高度与
       三视图基本一致，视觉重量才平。
       注意：用 flex + max 约束，不要给 img 写 height:100% —— 那会和
       aspect-ratio 形成循环依赖，把格子撑成 305px（踩过）。 */
    aspect-ratio: 1 / 0.8;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0
}

.process-cell > img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain /* 不能用 cover：会裁掉血管两端 */
}

/* 第三格：MIP / VR / CPR 三张并排，桌面与手机一致 */
.process-cell--views {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: center;
    justify-items: center
}

/* 每张视图 + 名字（MIP / VR / CPR）。
   这三个字原来是压在一张合成长图里的，拆图后必须补回来：
   用真实文字而不是烧进图片，任何缩放下都清晰，也能被读屏器识别 */
.process-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    min-width: 0;
    width: 100%
}

.process-thumb img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 100%
}

.process-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1;
    color: var(--navy);
    white-space: nowrap
}

/* 医生插画只作收尾示意，缩小以免喧宾夺主（原尺寸占满一格，视觉比三视图重得多） */
.process-cell--review > img {
    max-width: 74%;
    max-height: 74%
}

.process-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5B9BD5
}

.process-arrow svg {
    display: block;
    width: 100%;
    height: auto
}

/* --------------------------------------------------------------------------
   箭头精确定位（桌面）
   为什么不用纯 CSS：四格等宽，但每格画面宽度不同（CTA 195、血管 110、
   三视图整组 273…），画面边缘并不落在格子边界上。若按格子边界居中，
   箭头就会贴住较宽的那一侧（实测第二个箭头右端直接顶到三视图左边缘）。
   所以由 site.js 量出「相邻两张图的实际边缘」，取中点与统一高度后写进
   --ax / --ay / --aw；这里只负责应用。
   JS 未执行或手机端（≤760）时不加 .arrows-measured，箭头保持在轨道里。
   -------------------------------------------------------------------------- */
.process-figure.arrows-measured .process-arrow {
    position: absolute;
    left: var(--ax);
    top: var(--ay);
    width: var(--aw, 44px);
    padding: 0;
    transform: translate(-50%, -50%)
}

.process-figure.arrows-measured .process-arrow svg {
    width: 100%;
    height: auto
}

/* 1fr 的 auto 最小尺寸会被 .step h3 里的长单词（Processing）撑开：
   761px 视口下实测四列为 145/170/145/154。卡片与图区两边同时改用
   minmax(0,1fr)，才能保证图表与卡片严格同宽。

   ⚠ 必须包在 min-width:761px 里。这条选择器特异性高于基础规则里的 .four，
   若不加媒体查询，它会覆盖 @media(max-width:760px) 的「四列变一列」，
   手机端四张卡会被挤在四列里变形（2026-10-23 踩过）。 */
@media (min-width: 761px) {
    .grid.four.process {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }
}

@media (max-width: 860px) {
    .grid.four.process .step {
        padding: 18px
    }

    .grid.four.process .step h3 {
        font-size: 21px;
        hyphens: auto
    }
}

@media (max-width: 760px) {
    .grid.four.process {
        grid-template-columns: minmax(0, 1fr)
    }

    .process-row {
        grid-template-columns: minmax(0, 1fr)
    }

    .process-cell {
        aspect-ratio: auto
    }

    .process-cell > img {
        width: 100%;
        height: auto;
        max-height: none
    }

    /* 竖长的 3D 图限高，单列时不至于撑到 580px */
    .process-cell--tall > img {
        width: auto;
        max-width: 100%;
        max-height: 420px
    }

    /* ---- 手机端：文字卡 + 对应图片合并为一张卡 ---- */
    .grid.four.process {
        gap: 14px
    }

    /* 卡片之间的连接箭头 */
    .grid.four.process > .process-arrow {
        padding: 2px 0 6px
    }

    /* 搬进卡片里的图片：去掉格子比例，按卡宽铺满 */
    .step > .process-cell {
        aspect-ratio: auto;
        margin-top: 18px
    }

    .step > .process-cell > img {
        width: 100%;
        height: auto;
        max-height: none
    }

    .step > .process-cell--tall > img {
        width: auto;
        max-height: 380px
    }

    .step > .process-cell--review > img {
        max-width: 62%;
        max-height: none
    }

    /* 图片都搬走后，原图区只剩空壳 */
    .process-figure.is-card-mode {
        display: none
    }

    .process-label {
        font-size: 11px
    }

    .process-cell--review > img {
        max-width: 62%;
        max-height: 62%
    }

    .process-arrow {
        padding: 15px 0
    }

    .process-arrow svg {
        width: 28px;
        transform: rotate(90deg);
        transform-origin: center
    }
}

/* ==========================================================================
   NeuroDR 流程图：文图一体卡片（2026-10-23）
   每张 step 卡里现在同时有标题、说明和对应图片，卡片之间用箭头串起来。
   手机端由 JS 搬 DOM 实现；桌面端同样搬，但箭头改为绝对定位（见下）。
   ========================================================================== */

/* 图片搬进卡片后，原图区只剩空壳 —— 两端都隐藏 */
.process-figure.is-card-mode {
    display: none
}

.grid.four.process {
    /* 桌面箭头绝对定位的参照系 */
    position: relative;
    /* 四张卡等高，图片才能底边对齐 */
    align-items: stretch
}

/* 卡内改为纵向流：文字在上，图片贴底 */
.step {
    display: flex;
    flex-direction: column
}

.step > .process-cell {
    /* 贴底对齐：四张卡文字行数不同，靠 margin-top:auto 把图片统一压到底部，
       这样四张图片的底边、以及箭头量出的视觉中心都在同一条线上 */
    margin-top: auto
}

@media (min-width: 761px) {
    /* 七轨：卡 / 箭头 / 卡 / 箭头 / 卡 / 箭头 / 卡
       卡片宽度仍是 1fr 等分；箭头独占 32px 轨道，天然落在两张卡的**正中间**，
       并靠 align-self:center 对齐卡片高度的一半 —— 不需要任何 JS 量测。 */
    .grid.four.process {
        grid-template-columns:
            minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr);
        /* 箭头轨道本身已占 32px，列间距只留 16px 当呼吸位；
           再大的话卡片会被挤瘦（40px 时卡宽只有 213） */
        column-gap: 16px
    }

    /* 卡内图片仍用横长方形比例盒，四张卡等高时图片盒也等高 */
    .step > .process-cell {
        aspect-ratio: 1 / 0.8;
        padding-top: 18px
    }

    /* 桌面卡内图片按比例盒 contain：四格等高、图片底边才能对齐 */
    .step > .process-cell > img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain
    }

    /* 箭头：卡片间隙的正中 + 卡片高度的中线 */
    .grid.four.process > .process-arrow {
        align-self: center;
        justify-self: center;
        width: 32px;
        padding: 0
    }

    .grid.four.process > .process-arrow svg {
        width: 100%;
        height: auto
    }
}

@media (max-width: 760px) {
    /* 手机端：图片按卡宽自然铺开，不再受比例盒限制 */
    .step > .process-cell {
        aspect-ratio: auto;
        padding-top: 0;
        margin-top: 18px
    }

    .step > .process-cell--tall > img {
        width: auto;
        max-height: 380px
    }

    .step > .process-cell--review > img {
        max-width: 62%;
        max-height: none
    }

    .grid.four.process > .process-arrow {
        padding: 2px 0 6px
    }

    .grid.four.process > .process-arrow svg {
        width: 28px;
        transform: rotate(90deg);
        transform-origin: center
    }
}