/* Shared, scoped face showcase. Decorative illustration; no live analysis. */
.face-feature{position:relative;overflow:hidden;background:radial-gradient(ellipse at 77% 40%,#1c3548 0, #101e2d 34%,#0b1420 70%);color:#f5f1ea;scroll-snap-align:start;scroll-margin-top:90px;padding:0}
.face-feature-inner,.face-founder{width:min(1200px,calc(100% - 96px));margin:auto;display:grid;grid-template-columns:44% 56%;gap:0;align-items:center;position:relative;min-height:760px}
.face-feature-copy{position:relative;z-index:3;padding:56px 0}
.face-feature-copy h2,.face-feature-copy h3{font-family:var(--serif);font-size:clamp(34px,3.6vw,52px);font-weight:500;line-height:1.38;letter-spacing:.025em;margin:20px 0 26px}
.face-feature-copy>p:not(.face-feature-label):not(.face-feature-note){font-size:18px;line-height:1.9;color:#b8c3cf;max-width:410px}
.face-feature-label{color:#c9a77d;font-size:14px;letter-spacing:.1em}
.face-feature-steps{list-style:none;padding:0;margin:34px 0 26px;display:flex;gap:28px;flex-wrap:wrap;color:#c6d1db;font-size:15px}
.face-feature-steps li{padding-bottom:10px;border-bottom:1px solid #61777e;transition:color .5s,border-color .5s}
.face-feature-steps li.is-active{color:#f5f1ea;border-color:#c9a77d}
.face-feature-note{color:#8896a6;font-size:12px;line-height:1.8;max-width:400px}
.face-demo{width:100%;max-width:500px;justify-self:end;position:relative;color:#c9a77d;isolation:isolate}
.face-demo::before{content:'';position:absolute;z-index:-1;inset:6% -20% 4% -25%;background-image:radial-gradient(circle,rgba(172,212,222,.42) 1px,transparent 1.6px);background-size:25px 25px;mask-image:radial-gradient(ellipse at 56% 45%,transparent 22%,#000 43%,transparent 68%);opacity:.4;transform:perspective(700px) rotateY(-18deg);pointer-events:none}
.face-demo-image{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:1086/1448;transform-origin:50% 88%;mask-image:linear-gradient(to bottom,#000 0%,#000 70%,transparent 98%),linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);mask-composite:intersect;background:transparent}
.face-demo-image>img{display:block!important;position:static!important;width:100%!important;height:100%!important;max-width:none;object-fit:contain!important;filter:none!important;transform:none!important;opacity:1!important}
.face-demo svg{position:absolute;inset:0;width:100%;height:100%;color:#d3f0eb;pointer-events:none;z-index:2}
.face-dots,.face-outline,.face-zone{opacity:0}.face-outline{stroke-dasharray:1600;stroke-dashoffset:1600;stroke-width:1.5}.face-measures{display:none}
.face-zone{fill:#e6faf2;filter:drop-shadow(0 0 3px rgba(175,236,225,.6))}
.face-scan{position:absolute;z-index:2;top:24%;left:29%;width:42%;height:52px;background:linear-gradient(transparent,rgba(169,217,221,.09));mask-image:linear-gradient(to right,transparent,#000 30%,#000 70%,transparent);border-bottom:1px solid rgba(194,235,235,.6);opacity:0;pointer-events:none}
.face-demo-caption{position:absolute;bottom:27px;left:18px;right:80px;display:flex;align-items:center;gap:18px;font-size:11px;color:#7f92a2;line-height:1.6}
.face-demo-phase{color:#bbd1d8;min-width:64px}.face-demo-phase:before{content:'';display:inline-block;width:4px;height:4px;background:#bdd7d2;border-radius:50%;margin-right:8px;vertical-align:middle}
.face-replay{position:absolute;bottom:12px;right:0;font:inherit;font-size:11px;color:#9babb9;background:transparent;border:0;cursor:pointer;padding:12px 4px;min-height:44px}
.face-replay:hover{color:#f5f1ea}.face-replay:focus-visible{outline:2px solid #c9a77d;outline-offset:4px}
.face-demo.is-started .face-dots{animation:faceDots 12s linear infinite}.face-demo.is-started .face-outline{animation:faceOutline 12s linear infinite}.face-demo.is-started .face-scan{animation:faceScan 20s linear infinite}
.face-demo.is-started .face-zone{animation:faceZone 12s linear infinite}.face-demo .face-zone-cheeks{animation-delay:2.4s!important}.face-demo .face-zone-brow{animation-delay:4.8s!important}
.face-demo.is-paused *,.face-demo.is-paused::before,.face-demo.is-paused .face-demo-image::after{animation-play-state:paused!important}
.face-founder{margin-top:48px;width:100%;background:radial-gradient(ellipse at 80% 43%,#1b3041,transparent 63%);min-height:720px}
.face-founder .face-feature-copy h3{font-size:clamp(32px,3.2vw,44px)}
@keyframes faceZone{0%,8%{opacity:0}16%,27%{opacity:.9}36%,100%{opacity:0}}
@keyframes faceDots{0%,8%{opacity:0}20%,72%{opacity:.7}82%,100%{opacity:0}}
@keyframes faceOutline{0%,20%{opacity:0;stroke-dashoffset:1600}34%{opacity:.48}56%,72%{opacity:.48;stroke-dashoffset:0}84%,100%{opacity:0;stroke-dashoffset:0}}
@keyframes faceScan{0%{top:24%;opacity:0}8%{opacity:.65}50%{top:59%;opacity:.65}58%,100%{top:59%;opacity:0}}
.housing-secondary{align-items:start}.product-secondary .housing-secondary figure{grid-column:1;grid-row:1;margin:0;background:#e9e8e4}.product-secondary .housing-secondary figure img{height:184px;width:120px;object-fit:contain}.product-secondary .housing-secondary figure figcaption{display:none}.product-secondary .housing-secondary>div{grid-column:2;grid-row:1}.housing-secondary h3{font-family:var(--serif);font-size:24px}.housing-secondary p:not(.product-label){font-size:16px;color:#b8c3cf;line-height:1.6;margin-top:12px}
@media(max-width:900px){.face-feature-inner{width:calc(100% - 64px);min-height:650px}.face-feature-copy h2{font-size:36px}.face-feature-copy>p:not(.face-feature-label):not(.face-feature-note){font-size:16px}.face-feature-steps{gap:16px;font-size:13px}.face-founder{min-height:600px}.face-founder .face-feature-copy h3{font-size:32px}}
@media(max-width:720px){.face-feature{background:radial-gradient(ellipse at 65% 65%,#1b3347,#0b1420 70%)}.face-feature-inner,.face-founder{width:calc(100% - 40px);grid-template-columns:1fr;min-height:0;gap:0}.face-feature-copy{padding:48px 0 0}.face-feature-copy h2,.face-feature-copy h3,.face-founder .face-feature-copy h3{font-size:34px;margin:14px 0 18px}.face-feature-copy>p:not(.face-feature-label):not(.face-feature-note){font-size:16px;max-width:340px}.face-feature-steps{gap:22px;margin:24px 0 16px;font-size:13px}.face-feature-note{font-size:11px}.face-demo{max-width:430px;justify-self:center;margin-top:-8px}.face-demo-caption{left:8px;right:64px;gap:10px;font-size:10px;bottom:19px}.face-replay{bottom:4px;font-size:10px}.face-demo::before{inset:5% -5% 5%;background-size:19px 19px}.face-founder{width:100%;margin-top:24px}.face-founder .face-feature-copy{padding-top:12px}.product-secondary .housing-secondary figure img{width:88px;height:180px}.face-feature-label{font-size:12px}}
@media(prefers-reduced-motion:reduce){.face-demo.is-started::before,.face-demo.is-started .face-demo-image,.face-demo.is-started .face-demo-image::after,.face-demo.is-started .face-zone,.face-demo.is-started .face-dots,.face-demo.is-started .face-outline,.face-demo.is-started .face-scan{animation:none}.face-demo.is-started .face-demo-image{transform:none}.face-demo.is-started .face-demo-image::after,.face-demo.is-started .face-scan{opacity:0}.face-demo.is-started .face-dots{opacity:.6}.face-demo.is-started .face-outline{opacity:.4;stroke-dashoffset:0}.face-feature-steps li{transition:none}}
/* Integrated static portrait + measurement readout. */
.face-demo-image{transform:none}
.face-demo::before{opacity:.22}
.face-results{position:relative;z-index:3;margin:-100px 8px 0;padding:20px 20px 14px;background:linear-gradient(180deg,rgba(11,24,36,.15),rgba(11,24,36,.95) 24%,#0d1b29);border-top:1px solid #9ad8de66}
.face-results-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;letter-spacing:.08em;color:#d7e8eb;margin-bottom:6px}
.face-results-heading>span:first-child:before{content:'';display:inline-block;width:5px;height:5px;background:#9adfe4;margin-right:9px;box-shadow:0 0 8px #9adfe455}
.face-results-unit{font:10px Consolas,'SFMono-Regular',monospace;color:#7fa5b5;letter-spacing:.14em}
.face-metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 20px;margin:8px 0 16px}
.face-metric-row{position:relative;padding:14px 0 12px;border-bottom:1px solid #8abdc126;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.face-metric-row span{font-size:11px;color:#94acbb;line-height:1.5}
.face-metric-row strong{font-family:Consolas,'SFMono-Regular',monospace;font-size:27px;line-height:1.15;font-weight:400;letter-spacing:-.03em;color:#d9f2f3;font-variant-numeric:tabular-nums;opacity:.3;transition:opacity .4s}
.face-metric-row.is-revealed strong{opacity:1}.face-metric-row.is-current{border-color:#9de1e8}.face-metric-row.is-current span{color:#e0eff1}.face-metric-row.is-current strong{color:#f0ffff;text-shadow:0 0 12px #8fdee744}
.face-measure-line{fill:none;stroke:#aeeaf0;stroke-width:3;opacity:.25;transition:opacity .4s;filter:drop-shadow(0 0 3px #5bcfdb88)}
.face-measure-line circle{fill:#c9f8f5;stroke:#102b3c;stroke-width:1.5}
.face-measure-line.is-revealed{opacity:.78}.face-measure-line.is-current{opacity:1;stroke:#ecffff;stroke-width:4;filter:drop-shadow(0 0 5px #63d4e1)}
.face-scan{border-bottom-color:#c3ffff;background:linear-gradient(transparent,rgba(124,224,236,.19))}
.face-sample-note{font-size:10px!important;line-height:1.7!important;color:#849ba9!important;max-width:none!important;margin:0!important}
.face-demo .face-demo-caption{position:relative;bottom:auto;left:auto;right:auto;margin:10px 100px 18px 28px;padding:0;font-size:10px}
.face-demo .face-replay{bottom:2px;right:24px;font-size:10px}
.face-feature-copy .face-feature-steps{margin:22px 0}
@media(max-width:720px){.face-results{margin:-72px 0 0;padding:16px 16px 12px}.face-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;margin:4px 0 14px}.face-metric-row{padding:12px 0 10px}.face-metric-row strong{font-size:26px}.face-results-heading{font-size:11px}.face-results-unit{font-size:9px}.face-feature-copy{padding-top:32px}.face-demo .face-demo-caption{margin-left:16px;margin-right:90px;gap:8px}.face-demo .face-replay{right:12px}}
@media(prefers-reduced-motion:reduce){.face-measure-line,.face-metric-row strong{transition:none}}
/* Mobile product cover: copy and portrait share one composition. */
@media(max-width:720px){
 .face-feature{margin:20px 12px 24px;overflow:hidden;border:1px solid #a8bdcc22;border-radius:4px;background:radial-gradient(ellipse at 76% 28%,#20394c,#0b1725 65%)}
 .face-feature-inner,.face-founder{width:100%;display:block;position:relative;min-height:0}
 .face-feature-copy,.face-founder .face-feature-copy{position:absolute;top:0;left:0;right:0;padding:25px 18px 0;pointer-events:none;z-index:3}
 .face-feature-label{font-size:10px;letter-spacing:.04em;margin:0 0 15px}
 .face-feature-copy h2,.face-feature-copy h3,.face-founder .face-feature-copy h3{width:56%;font-size:24px;line-height:1.42;margin:0 0 18px;letter-spacing:0}
 .face-feature-copy>p:not(.face-feature-label):not(.face-feature-note){width:45%;font-size:12px;line-height:1.85;margin:0;color:#c0cdd6}
 .face-feature-copy .face-feature-steps,.face-feature-copy .face-feature-note{display:none}
 .face-demo{max-width:none;width:100%;margin:0;padding-top:55px;justify-self:auto}
 .face-demo-image{width:76%;margin-left:24%;aspect-ratio:1086/1448;mask-image:linear-gradient(to bottom,#000 0%,#000 69%,transparent 100%),linear-gradient(to right,transparent,#000 9%,#000 95%,transparent);mask-composite:intersect}
 .face-demo::before{inset:10px 0 38% 20%;background-size:20px 20px;opacity:.15}
 .face-results{margin:-35px 12px 0;padding:14px 10px 10px;background:linear-gradient(180deg,rgba(12,29,43,.35),rgba(11,24,36,.86));border-top-color:#9ad8de44}
 .face-results-heading{font-size:10px;letter-spacing:.02em;gap:8px}
 .face-results-unit{font-size:8px;letter-spacing:.06em}
 .face-metric-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 12px;margin:4px 0 0}
 .face-metric-row{padding:10px 0 8px;gap:4px}
 .face-metric-row span{font-size:9px;white-space:nowrap}
 .face-metric-row strong{font-size:21px;letter-spacing:-.04em}
 .face-sample-note{display:none}
 .face-demo .face-demo-caption{margin:8px 76px 14px 22px;font-size:9px;gap:8px;line-height:1.5}
 .face-demo-caption>span:last-child{font-size:0}
 .face-demo-caption>span:last-child:after{content:'样例比例';font-size:9px}
 .face-demo .face-replay{font-size:9px;right:18px;bottom:0;min-height:36px;padding:8px 0}
 .face-founder{border:1px solid #a8bdcc22;border-radius:4px;overflow:hidden;margin-top:28px;background:radial-gradient(ellipse at 76% 28%,#20394c,#0b1725 65%)}
 .face-founder .face-feature-copy h3{font-size:23px;width:56%}
}