/* V05: one framed product view, then a clear three-stage workflow. */
.hero{padding:36px 0 0;position:relative}
.hero h1{font-size:64px;margin:8px 0}
.hero-line{font-size:23px}.hero-description{font-size:14px}
.hero .button{margin-top:18px}
.hero .product-scene{height:280px;margin:26px auto 0;max-width:850px}
.hero .scene-layer{display:flex;align-items:center;justify-content:center;position:relative;height:100%;padding:10px 30px 25px;border:1px solid #dce3e5;border-bottom:0;border-radius:8px 8px 0 0;background:#e8eef0;overflow:hidden}
.hero-product{height:100%;width:auto;object-fit:contain;box-shadow:var(--shadow);border-radius:8px}
.product-caption{position:absolute;bottom:3px;font-size:10px;color:var(--muted)}
.flow-section{padding-block:64px}.flow-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:30px}.flow-heading h2{font-size:28px}
.flow-controls,.result-tabs{display:flex;gap:18px;border-bottom:1px solid var(--line)}
.flow-controls button,.result-tabs button{padding:10px 0;font-size:13px;border-bottom:2px solid transparent;white-space:nowrap}
[data-flow][aria-selected=true],[data-result][aria-selected=true]{border-color:var(--accent);font-weight:600}
.flow-body{display:grid;grid-template-columns:1fr 1.6fr;gap:64px;align-items:center;min-height:230px}
.flow-body h3{margin:8px 0}.flow-body>div>p{font-size:14px;color:var(--muted)}
.flow-document{padding:20px 28px;border-left:2px solid var(--accent);background:#f3f6f7;min-height:230px;display:grid;align-content:center;gap:12px;font-size:14px}
.flow-document b{font-size:12px}.flow-document p{line-height:1.8}.flow-reply{padding-left:16px;color:var(--muted)}
mark{background:#f6e59e;color:inherit}
.guide-focus{outline:2px solid #c7a637!important;outline-offset:3px;box-shadow:0 0 0 7px #f0d77526!important;position:relative}
.guide-focus:after{content:"";position:absolute;right:-8px;top:-8px;width:11px;height:11px;border:2px solid #fff;border-radius:50%;background:#e0bd49}
.capture-controls{padding:10px 16px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:7px}
.capture-controls .button{min-height:34px;font-size:12px;padding:7px 12px}
.capture-controls span{font-size:10px;color:var(--accent)}
.scroll-focus{outline:2px solid #c7a637;outline-offset:-3px}
.comment-simulator .comments-head{padding-block:7px}
.comment-simulator .comments-foot{padding-block:5px}
.practice-coach{display:flex;justify-content:space-between;align-items:center;gap:8px;flex:none;font-size:11px;color:var(--accent);min-height:26px}
.practice-coach .text-button{font-size:10px}
.practice-board{gap:9px}
.practice-toolbar [data-size]{font-size:11px;font-weight:600}
.progress-demo{padding:12px 8px;max-width:540px;margin:auto}
.progress-demo h4{margin:12px 0 24px}.progress-demo progress{width:100%;height:8px;accent-color:#718e9e}
.progress-placeholder{margin-top:24px;border-top:1px solid var(--line);padding-top:20px;display:flex;gap:14px;align-items:center;font-size:14px}
.progress-placeholder p{font-size:12px;color:var(--muted);margin-top:6px}
.progress-placeholder svg{animation:waiting-spin 3s linear infinite}
.demo-label{display:block;margin-top:16px;font-size:10px;color:var(--muted)}
.result-view{max-width:580px;margin:auto}.result-tabs{margin-bottom:14px}
.result-overview{display:flex;justify-content:space-between;gap:10px;font-size:14px;margin-bottom:12px}
.result-overview span{font-size:12px;color:var(--muted)}
.clean-bars{display:grid;gap:9px}.clean-bars>div{display:grid;grid-template-columns:82px 1fr 30px;align-items:center;gap:12px;font-size:12px;line-height:1.2}
.clean-bars meter{width:100%;height:10px;accent-color:#819eac}
.clean-bars meter::-webkit-meter-optimum-value{background:#819eac}.clean-bars b{font-size:10px;color:var(--muted)}
.summary-clean h4{font-size:18px;margin-bottom:14px}.summary-clean dl{margin:0}
.summary-clean dl>div{display:grid;grid-template-columns:85px 1fr;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.summary-clean dt{color:var(--muted)}.summary-clean dd{margin:0}
.clean-comparison{padding:8px 0}.clean-wheel{width:132px;height:132px;margin:12px auto;border-radius:50%;border:9px solid #c8d4dd;outline:1px solid #fff;outline-offset:-13px;display:grid;place-items:center;background:#f8fafb;box-shadow:0 10px 26px -17px #516470}
.clean-wheel span{font-size:15px;font-weight:600}.wheel-0{border-color:#b6aecb #a6c7d0 #b6aecb #e3ce8a}.wheel-1{border-color:#e1a99e #a6c7d0 #b7cdbd #e3ce8a}
.clean-comparison h4{font-size:18px}.clean-comparison small{font-size:10px;color:var(--muted)}
.comparison-takeaway{text-align:center;font-size:12px;color:var(--muted);margin-top:18px}
.dialog-image-scroll{display:flex;justify-content:center}
.dialog-image-scroll img{width:auto;max-width:100%;max-height:calc(90dvh - 120px);object-fit:contain}
@media(min-width:1600px){.hero .product-scene{height:330px}.hero{padding-top:42px}}
@media(max-width:900px){.flow-heading{align-items:flex-start;flex-direction:column}.flow-body{gap:30px}.hero h1{font-size:56px}}
@media(max-width:600px){.hero h1{font-size:44px}.hero-line{font-size:20px}.hero .product-scene{width:calc(100% - 40px);height:225px;margin-top:22px}.hero .scene-layer{padding:10px 12px 25px}.flow-section{padding-block:40px}.flow-heading h2{font-size:24px}.flow-body{grid-template-columns:1fr;gap:20px}.flow-document{padding:18px;min-height:230px}.flow-heading{gap:16px}.practice-coach{font-size:10px;flex-wrap:wrap;gap:0}.practice-toolbar{gap:5px}.capture-controls{padding:9px 12px}.result-overview{flex-direction:column;gap:4px}.clean-bars{gap:10px}.clean-bars>div{grid-template-columns:72px 1fr 24px;gap:8px;font-size:11px}.clean-wheel{width:100px;height:100px;border-width:7px}.clean-wheel span{font-size:12px}.clean-comparison .compare-grid h4{font-size:17px}.summary-clean dl>div{font-size:12px;grid-template-columns:65px 1fr;gap:10px}.progress-demo h4{font-size:18px;margin-bottom:18px}.progress-placeholder{margin-top:16px;padding-top:14px}.progress-placeholder b{font-size:13px}}
@media(prefers-reduced-motion:reduce){.progress-placeholder svg{animation:none}}
/* Reference-inspired hierarchy: oversized brand, central product, offset annotations. */
.hero{padding:24px 0 24px;background:#eef3f5}
.hero h1{font-size:112px;font-weight:500;color:#bfd0d8;line-height:1.05;margin:8px 0 0}
.hero .product-scene{max-width:1100px;height:310px;margin:-16px auto 0}
.hero .scene-layer{border:0;border-radius:0;background:none;padding:0 28px;overflow:visible;display:grid;grid-template-columns:minmax(0,1fr) 360px minmax(0,1fr);gap:44px;align-items:center}
.hero-product{width:360px;height:auto;max-height:310px;object-fit:contain;filter:drop-shadow(0 18px 20px #4c6c7c18);box-shadow:none}
.hero-side{position:relative}.hero-intro{align-self:end;padding-bottom:34px}.hero-side h2{font-size:25px;line-height:1.4;margin:10px 0}
.hero-side p{font-size:13px;line-height:1.8;color:var(--muted)}
.hero-detail{align-self:center;padding-top:24px}.hero-detail b{font-size:13px}.hero-detail p{margin-top:10px}
.detail-rule{display:block;width:60px;border-top:2px solid #9db6c4;margin-bottom:18px}
.hero-action{text-align:center;margin-top:18px}.hero-action .button{margin:0}.hero-action>span{display:block;font-size:10px;color:var(--muted);margin-top:8px}
@media(min-width:1600px){.hero{padding-top:32px}.hero h1{font-size:136px}.hero .product-scene{height:340px}.hero-product{max-height:340px}}
@media(max-width:900px){.hero h1{font-size:88px}.hero .scene-layer{grid-template-columns:1fr 300px 1fr;gap:18px;padding-inline:0}.hero-product{width:300px}.hero-side h2{font-size:20px}.hero-intro .eyebrow{font-size:11px}.hero-side p{font-size:12px}}
@media(max-width:600px){.hero{padding-top:24px}.hero h1{font-size:48px;color:#a9bfcb;margin-top:10px}.hero .product-scene{height:auto;margin:14px auto 0}.hero .scene-layer{height:auto;display:grid;grid-template-columns:1fr;gap:16px;padding:0}.hero-product{grid-row:1;width:min(100%,330px);max-height:265px;margin:auto}.hero-intro{padding:0;text-align:center}.hero-intro h2{font-size:21px;margin:0 0 6px}.hero-intro .eyebrow,.hero-detail{display:none}.hero-intro p{font-size:12px}.hero-intro br{display:none}.hero-action{margin-top:16px}}