.product-voices {
    --voice-duration: 7200ms;
    --voice-ink: #183f43;
    --voice-label: #b56d32;
    position: relative;
    height: 100svh;
    min-height: 680px;
    overflow: hidden;
    background:
        radial-gradient(circle at 78% 18%, rgba(255,255,255,.78), transparent 30%),
        radial-gradient(circle at 18% 86%, rgba(219,167,101,.18), transparent 33%),
        linear-gradient(118deg,#f7efe3 0%,#f3e8d7 52%,#edf1e9 100%);
    color: var(--voice-ink);
    isolation: isolate;
}

.product-voices-stage,
.product-voices-slides,
.product-voice { position: absolute; inset: 0; }
.product-voices-stage { outline: 0; touch-action: pan-y; overscroll-behavior-x: contain; }

.product-voice {
    --voice-accent: #ae6d36;
    --voice-wash: rgba(219, 167, 101, .24);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: transparent;
    transition: opacity .32s ease, visibility .32s ease;
}

.product-voice--human-design {
    --voice-accent: #587a79;
    --voice-wash: rgba(91, 143, 139, .2);
}
.product-voice--integration {
    --voice-accent: #815333;
    --voice-wash: rgba(148, 91, 52, .2);
}
.product-voice--rainbow {
    --voice-accent: #ae6a25;
    --voice-wash: rgba(209, 142, 52, .22);
}

.product-voice.is-active { z-index: 2; opacity: 1; visibility: visible; pointer-events: auto; }
.product-voice.is-exiting { z-index:3; pointer-events:none; }

.product-voice-paper {
    display: none;
}

.product-voice-paper::before,
.product-voice-paper::after,
.product-voice-paper span { content:""; position:absolute; border:1px solid color-mix(in srgb,var(--voice-accent) 18%,transparent); border-radius:50%; }
.product-voice-paper::before { width:34vw; height:34vw; right:-14vw; top:-16vw; }
.product-voice-paper::after { width:20vw; height:20vw; right:-7vw; top:-7vw; }
.product-voice-paper span:nth-child(1) { width:11px; height:11px; left:8%; top:21%; background:var(--voice-accent); border:0; opacity:.36; }
.product-voice-paper span:nth-child(2) { display:none; }
.product-voice-paper span:nth-child(3) { width:8px; height:8px; left:calc(50% - 4px); top:calc(21% + 1px); background:var(--voice-accent); border:0; opacity:.24; }

.product-voice-person {
    position: absolute;
    z-index: 2;
    bottom: 0;
    width: min(47vw, 710px);
    height: min(85vh, 850px);
    margin: 0;
    opacity: 1;
    filter: drop-shadow(0 30px 28px rgba(75,54,37,.17));
    will-change: transform, opacity;
    transition: transform 1.35s cubic-bezier(.4,0,.2,1);
}
.product-voice--person-left .product-voice-person { left:2vw; transform:translate3d(-118vw,0,0) rotate(-3deg); }
.product-voice--person-right .product-voice-person { right:1vw; transform:translate3d(118vw,0,0) rotate(3deg); }
.product-voice-person img { width:100%; height:100%; display:block; object-fit:contain; object-position:center bottom; }
.product-voice.is-active.is-entered .product-voice-person { transform:translate3d(0,0,0) rotate(0); }

.product-voice-copy { position:absolute; z-index:3; top:50%; width:min(49vw,760px); opacity:0; transform:translateY(-48%); transition:opacity .42s .72s ease; }
.product-voice.is-entered .product-voice-copy { opacity:1; }
.product-voice.is-exiting .product-voice-copy { opacity:0; transition-delay:0s; transition-duration:.28s; }
.product-voice--person-left .product-voice-copy { right:clamp(52px,7vw,132px); }
.product-voice--person-right .product-voice-copy { left:clamp(52px,7vw,132px); }
.product-voice-label { margin:0 0 clamp(18px,2.8vh,30px); color:var(--voice-label); font:750 clamp(1.1rem,1.45vw,1.35rem)/1.4 ui-sans-serif,system-ui,sans-serif; letter-spacing:.065em; }
.product-voice-label b,
.product-voice-link b { font:inherit; }

.product-voice-whiteboard {
    max-width: 720px;
    min-height: 2.9em;
    margin: 0;
    color: #244344;
    font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
    font-size: clamp(36px, 3.2vw, 40px);
    font-weight: 700;
    line-height: 1.42;
    letter-spacing: .015em;
    text-wrap: balance;
}
.product-voices.is-enhanced [data-voice-type] { color:transparent; }
.product-voices.is-enhanced .voice-type-char { position:relative; display:inline; color:transparent; opacity:0; }
.product-voices.is-enhanced .voice-type-char.is-written,
.product-voices.is-enhanced .voice-type-char.is-writing { color:currentColor; opacity:1; }
.product-voices.is-enhanced .product-voice-whiteboard .voice-type-char.is-written,
.product-voices.is-enhanced .product-voice-whiteboard .voice-type-char.is-writing { color:#244344; }
.product-voices.is-enhanced .product-voice-label .voice-type-char.is-written,
.product-voices.is-enhanced .product-voice-label .voice-type-char.is-writing { color:var(--voice-label); }
.product-voices.is-enhanced .product-voice-after-write > p .voice-type-char.is-written,
.product-voices.is-enhanced .product-voice-after-write > p .voice-type-char.is-writing { color:#607473; }
.product-voices.is-enhanced .product-voice-link .voice-type-char.is-written,
.product-voices.is-enhanced .product-voice-link .voice-type-char.is-writing { color:#2ebfc3; }
.product-voices.is-enhanced .voice-type-char.is-writing::after { content:""; display:inline-block; width:.08em; height:.9em; margin-left:.1em; vertical-align:-.06em; background:currentColor; animation:productVoiceCaret .78s steps(1) infinite; }
@keyframes productVoiceCaret { 50% { opacity:0; } }

.product-voice-after-write { max-width:610px; margin-top:clamp(22px,3.3vh,34px); opacity:0; transform:translateY(16px); transition:opacity .48s ease,transform .48s ease; }
.product-voice-after-write.is-visible { opacity:1; transform:none; }
.product-voice-after-write > p { margin:0; color:#607473; font-size:clamp(15px,1.16vw,18px); line-height:1.85; }
.product-voice-link { display:inline-flex; max-width:100%; align-items:baseline; gap:11px; margin-top:22px; color:#2ebfc3; font-size:clamp(16px,1.28vw,18px); font-weight:850; letter-spacing:.025em; text-decoration:none; }
.product-voice-link--desktop { white-space:nowrap; }
.product-voice-link--mobile { display:none; }
.product-voice-link b { min-width:0; line-height:1.45; }
.product-voice-link > .product-voice-link-arrow { flex:0 0 auto; }
.product-voices.is-enhanced .product-voice-link:not(.is-voice-started) { opacity:0; pointer-events:none; }
.product-voice-link > .product-voice-link-arrow { width:auto; height:auto; display:inline-block; background:transparent; color:#2ebfc3; font-size:1.18em; line-height:1; transition:opacity .32s ease,transform .32s ease; }
.product-voices.is-enhanced .product-voice-link > .product-voice-link-arrow { opacity:0; transform:translateY(6px) scale(.82); }
.product-voices.is-enhanced .product-voice-link.is-voice-complete > .product-voice-link-arrow { opacity:1; transform:none; }
.product-voice-link.is-voice-complete:hover > .product-voice-link-arrow,.product-voice-link.is-voice-complete:focus-visible > .product-voice-link-arrow { transform:translateX(4px); }

.product-voices-controls { position:absolute; z-index:8; left:50%; bottom:clamp(28px,4vh,48px); display:grid; grid-template-columns:48px minmax(220px,360px) 48px; align-items:center; gap:13px; transform:translateX(-50%); }
.product-voices-arrow,.product-voices-pause { border:1px solid rgba(24,63,67,.16); background:rgba(255,252,246,.8); color:#174a4e; cursor:pointer; backdrop-filter:blur(12px); }
.product-voices-arrow { width:48px; height:48px; padding:0; border-radius:50%; font-size:19px; }
.product-voices-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.product-voices-tabs button { min-width:0; padding:10px 0 8px; border:0; background:transparent; color:#7e8f8d; text-align:left; cursor:pointer; }
.product-voices-tabs button span { display:block; margin-bottom:8px; font-size:10px; font-weight:850; letter-spacing:.08em; }
.product-voices-tabs button i { position:relative; display:block; height:3px; overflow:hidden; border-radius:99px; background:rgba(18,63,69,.14); }
.product-voices-tabs button i::after { content:""; position:absolute; inset:0; background:#237f82; transform:scaleX(0); transform-origin:left; }
.product-voices-tabs button[aria-selected="true"] { color:#174a4e; }
.product-voices-tabs button[aria-selected="true"] i::after { transform:scaleX(1); }
.product-voices.is-running .product-voices-tabs button[aria-selected="true"] i::after { animation:productVoiceProgress var(--voice-duration) linear both; }
.product-voices-pause { position:absolute; right:-86px; top:50%; min-height:38px; display:inline-flex; align-items:center; gap:6px; padding:0 11px; border-radius:99px; transform:translateY(-50%); font:inherit; font-size:10px; font-weight:800; }
.product-voices-pause b { font:inherit; }

.product-voices-scroll { position:absolute; z-index:8; right:clamp(26px,3.5vw,58px); bottom:clamp(28px,4vh,48px); display:flex; align-items:center; gap:10px; color:rgba(24,63,67,.72); font-size:10px; font-weight:800; letter-spacing:.12em; text-decoration:none; }
.product-voices-scroll i { width:1px; height:38px; display:block; background:rgba(24,63,67,.25); position:relative; }
.product-voices-scroll i::after { content:""; position:absolute; left:-2px; bottom:0; width:5px; height:5px; border:solid #245f62; border-width:0 1px 1px 0; transform:rotate(45deg); }

@keyframes productVoiceProgress { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes productVoiceNib { from { translate:0 -2px; } to { translate:1px 2px; } }

@media (min-width:1600px) {
    .product-voice--person-left .product-voice-copy {
        right: calc(clamp(52px, 7vw, 132px) + 56px);
    }
}

@media (max-width:900px) {
    .product-voices { height:calc(100dvh - 69px); min-height:620px; }
    .product-voice-paper::before { width:82vw; height:82vw; right:-38vw; top:-22vw; }
    .product-voice-paper::after { width:48vw; height:48vw; right:-20vw; top:-7vw; }
    .product-voice-paper span:nth-child(1) { left:8%; top:19%; }
    .product-voice-paper span:nth-child(3) { left:calc(62% - 4px); top:calc(19% + 1px); }
    .product-voice-person { bottom:53px; width:min(75vw,520px); height:59%; }
    .product-voice--person-left .product-voice-person { left:-6vw; }
    .product-voice--person-right .product-voice-person { right:-5vw; }
    .product-voice-copy { top:clamp(100px,14vh,138px); width:min(82vw,630px); transform:none; }
    .product-voice--person-left .product-voice-copy { right:7vw; text-align:right; }
    .product-voice--person-right .product-voice-copy { left:7vw; text-align:left; }
    .product-voice-whiteboard { margin-left:auto; font-size:clamp(34px,5vw,40px); }
    .product-voice--person-right .product-voice-whiteboard { margin-left:0; }
    .product-voice-after-write {
        position:absolute;
        top:clamp(218px,30vh,282px);
        width:min(38vw,250px);
        max-width:none;
        margin:0;
        padding:14px 15px 13px;
        border:1px solid rgba(36,67,68,.12);
        border-radius:16px;
        background:rgba(255,252,246,.78);
        box-shadow:0 12px 32px rgba(75,54,37,.09);
        backdrop-filter:blur(8px);
        -webkit-backdrop-filter:blur(8px);
        text-align:left;
    }
    .product-voice--person-left .product-voice-after-write { right:0; }
    .product-voice--person-right .product-voice-after-write { left:0; }
    .product-voice-after-write > p { font-size:clamp(13px,1.85vw,15px); line-height:1.68; }
    .product-voice-link--desktop { display:none; }
    .product-voice-link--mobile { position:absolute; z-index:7; bottom:76px; display:inline-flex; max-width:min(44vw,250px); gap:7px; margin:0; font-size:clamp(13px,1.9vw,16px); }
    .product-voice-link--mobile b span { display:block; }
    .product-voice--person-left .product-voice-link--mobile { right:7vw; justify-content:flex-end; text-align:right; }
    .product-voice--person-right .product-voice-link--mobile { left:7vw; justify-content:flex-start; text-align:left; }
    .product-voices-controls { bottom:17px; grid-template-columns:42px minmax(170px,280px) 42px; gap:8px; }
    .product-voices-arrow { width:42px; height:42px; }
    .product-voices-pause { right:-72px; min-height:34px; padding-inline:9px; }
    .product-voices-scroll { display:none; }
}

@media (max-width:620px) {
    .product-voices { min-height:548px; }
    .product-voice-copy { top:clamp(88px,12.5vh,112px); width:86vw; }
    .product-voice--person-left .product-voice-copy { right:7vw; }
    .product-voice--person-right .product-voice-copy { left:7vw; }
    .product-voice-label { margin-bottom:12px; font-size:clamp(1.05rem,4.8vw,1.2rem); line-height:1.45; letter-spacing:.04em; }
    .product-voice-whiteboard { min-height:2.7em; font-size:clamp(28px,8.2vw,38px); line-height:1.42; }
    .product-voice-person { bottom:45px; width:84vw; height:55%; }
    .product-voice--person-left .product-voice-person { left:-15vw; }
    .product-voice--person-right .product-voice-person { right:-14vw; }
    .product-voice-after-write {
        top:clamp(226px,29vh,254px);
        width:44vw;
        padding:12px 12px 11px;
        border-radius:14px;
    }
    .product-voice--rainbow .product-voice-after-write { top:clamp(184px,23vh,206px); }
    .product-voice-after-write > p { font-size:13px; line-height:1.62; }
    .product-voice-link { font-size:13px; }
    .product-voices-controls { width:calc(100% - 30px); grid-template-columns:40px minmax(0,1fr) 40px; }
    .product-voices-arrow { width:40px; height:40px; }
    .product-voices-tabs { gap:4px; }
    .product-voices-tabs button { padding-inline:1px; }
    .product-voices-tabs button span { font-size:9px; }
    .product-voices-pause { right:0; top:-35px; transform:none; }
}

@media (max-width:380px) {
    .product-voices { min-height:520px; }
    .product-voice-copy { top:82px; }
    .product-voice-whiteboard { font-size:27px; }
    .product-voice-person { height:52%; }
    .product-voice-after-write { top:226px; width:40vw; padding:10px 11px; }
    .product-voice-after-write > p { font-size:12px; }
}

@media (prefers-reduced-motion:reduce) {
    .product-voices .product-voice-person {
        transition-property: transform !important;
        transition-duration: 1.35s !important;
        transition-timing-function: cubic-bezier(.4,0,.2,1) !important;
    }
    .product-voices .product-voice-copy { transition-duration:.42s !important; }
    .product-voice-whiteboard .whiteboard-char.is-written,
    .product-voice-whiteboard .whiteboard-char.is-writing { transition-duration:.12s !important; }
    .product-voices.is-running .product-voices-tabs button[aria-selected="true"] i::after { animation-duration:var(--voice-duration) !important; }
    .product-voice-whiteboard .whiteboard-char.is-writing::after { animation-duration:.16s !important; }
}