.agent-demo{border-top:1px solid var(--line);padding-block:var(--s12);display:grid;gap:var(--s8)}
.agent-intro h2{font-size:32px;line-height:1.25;white-space:pre-line;font-weight:550;letter-spacing:-.04em}
.agent-intro>p{margin-top:var(--s4);max-width:28em;color:var(--muted)}
.case-tabs{display:flex;gap:var(--s1);margin-top:var(--s6);border-bottom:1px solid var(--line)}
.case-tabs button{flex:1;min-height:48px;padding:var(--s2);background:transparent;color:var(--muted);font-size:14px;border-bottom:2px solid transparent}
.case-tabs button[aria-selected=true]{color:var(--primary);border-color:var(--primary);font-weight:650}
.case-tabs button:hover{color:var(--primary);background:var(--accent)}
.agent-phone{width:100%;max-width:420px;justify-self:center;border:1px solid var(--line);border-radius:var(--r3);overflow:hidden;background:var(--white);box-shadow:var(--shadow1)}
.chat-header{display:flex;align-items:center;gap:var(--s3);padding:var(--s4);border-bottom:1px solid var(--line)}
.friend-avatar{display:flex;width:40px;height:40px;align-items:center;justify-content:center;background:var(--primary);color:var(--ivory);border-radius:var(--r2);flex-shrink:0}
.friend-avatar svg{width:24px;height:24px;fill:currentColor}
.chat-header strong{display:block;font-size:16px;font-weight:600;color:var(--primary)}
.chat-header small{display:block;font-size:12px;color:var(--muted)}
.chat-body{padding:var(--s4);display:grid;gap:var(--s4);background:var(--ivory);font-size:14px;line-height:1.6;min-height:510px;align-content:start}
.chat-bubble{max-width:92%;padding:var(--s3);border-radius:var(--r2)}
.chat-bubble.visitor{justify-self:end;background:var(--primary);color:var(--white)}
.chat-bubble.friend{justify-self:start;background:var(--white);border:1px solid var(--line);color:var(--ink)}
.chat-link{display:block;margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid color-mix(in srgb,var(--white) 35%,transparent);font-size:12px}
.chat-result{padding:var(--s4);background:var(--white);border:1px solid var(--line);border-radius:var(--r2)}
.chat-result small{font-size:12px;color:var(--muted)}
.chat-result h3{font-size:16px;margin-top:var(--s1);font-weight:600}
.chat-result .result-detail{font-weight:550;color:var(--primary);margin-top:var(--s2)}
.chat-result .result-proof{font-size:13px;color:var(--muted);margin-top:var(--s2)}
.agent-note{padding:var(--s3) var(--s4);font-size:12px;color:var(--muted);border-top:1px solid var(--line)}
.agent-flow{scroll-margin-top:var(--s6)}
.agent-flow ol{padding:0;margin:0;list-style:none;display:grid;gap:var(--s3);counter-reset:flow}
.agent-flow li{counter-increment:flow;display:flex;align-items:center;gap:var(--s3);font-size:14px;color:var(--primary)}
.agent-flow li:before{content:counter(flow);font-size:12px;display:grid;place-items:center;width:24px;height:24px;border:1px solid var(--line);border-radius:var(--r1);flex-shrink:0}
.agent-flow>p{font-size:13px;color:var(--muted);margin-top:var(--s4)}
@media(min-width:760px){
 .agent-demo{grid-template-columns:1fr 1fr;gap:var(--s8) var(--s16);padding-block:var(--s16);align-items:start}
 .agent-intro{padding-top:var(--s12)}
 .agent-intro h2{font-size:40px}
 .case-tabs{margin-top:var(--s8)}
 .agent-phone{grid-column:2;grid-row:1 / 3}
 .agent-flow{grid-column:1;align-self:end;padding-bottom:var(--s8)}
 .chat-body{padding:var(--s6);min-height:540px}
}
/* The brand's four-leaf companion, kept quiet around the actual conversation. */
.agent-mascot{display:block;width:136px;height:auto;margin:0 0 var(--s6);object-fit:contain}
.friend-avatar{width:48px;height:48px;background:var(--primary);border-radius:var(--r2)}
.friend-avatar img{width:44px;height:44px;object-fit:contain;display:block}
@media(min-width:760px){.agent-intro{padding-top:var(--s4)}.agent-mascot{width:168px;margin-bottom:var(--s6)}}
@media(max-width:759px){.agent-mascot{width:88px;margin-bottom:var(--s4)}.agent-intro h2{font-size:30px}}
/* Quiet breathing, separate from the one-shot conversation sequence. */
.agent-mascot,.friend-avatar img{transform-origin:50% 80%;animation:friend-breathe 6s ease-in-out infinite;animation-play-state:paused}
.is-awake .agent-mascot,.is-awake .friend-avatar img{animation-play-state:running}
@keyframes friend-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.018)}}
@media(prefers-reduced-motion:reduce){.agent-mascot,.friend-avatar img{animation:none;transform:none}}
/* WeChat visual grammar: neutral canvas, square avatars, green sent bubbles. */
.agent-phone{background:var(--chat-surface);box-shadow:var(--shadow1)}
.agent-phone{position:relative;overflow-anchor:none}
.chat-measure{position:absolute!important;left:0;top:0;visibility:hidden!important;pointer-events:none;z-index:-1}
.chat-header{position:relative;justify-content:center;min-height:60px;background:var(--surface);padding-inline:var(--s12)}
.chat-back,.chat-menu{position:absolute;top:50%;transform:translateY(-50%);color:var(--ink);line-height:1;pointer-events:none}
.chat-back{left:var(--s4);font-size:32px}.chat-menu{right:var(--s4);font-size:24px;font-weight:650;letter-spacing:2px}
.chat-body{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s4) var(--s3);background:var(--chat-surface);min-height:0}
.message-row{display:flex;gap:var(--s2);align-items:flex-start;opacity:1;transition:opacity 180ms ease;}
.message-row.outgoing{flex-direction:row-reverse}
.message-row.is-pending{visibility:hidden;opacity:0;pointer-events:none}
.message-avatar{display:grid;place-items:center;flex:0 0 32px;height:32px;background:var(--white);border-radius:var(--r1);overflow:hidden;color:var(--muted)}
.message-avatar img{display:block;width:32px;height:32px;object-fit:contain}
.message-avatar svg{width:28px;height:28px;background:var(--line)}
.chat-bubble,.chat-result{position:relative;max-width:calc(100% - 40px);margin:0;padding:var(--s3);border:0;border-radius:var(--r1);font-size:14px}
.chat-bubble.visitor{background:var(--accent);color:var(--ink)}
.chat-bubble.friend,.chat-result{background:var(--white);color:var(--ink)}
.chat-bubble:before,.chat-result:before{content:'';position:absolute;top:12px;width:8px;height:8px;transform:rotate(45deg);background:inherit}
.visitor:before{right:-4px}.friend:before,.chat-result:before{left:-4px}
.chat-link{border-color:color-mix(in srgb,var(--ink) 16%,transparent)}
.chat-result h3{font-size:15px;line-height:1.45}.result-detail{font-size:13px}
.chat-result .result-proof{color:var(--ink);font-size:13px}
.chat-playback{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:0 var(--s3);border-top:1px solid var(--line);background:var(--surface)}
.chat-progress{font-size:12px;color:var(--muted)}
.chat-replay{min-height:44px;padding:var(--s2);font-size:12px;font-weight:600;background:transparent;text-decoration:underline;text-underline-offset:3px}
.chat-replay:hover{background:var(--line);border-radius:var(--r1)}
.agent-note{background:var(--white);line-height:1.5}
.agent-contact{padding:0 var(--s4) var(--s4);background:var(--white)}
.agent-contact .button{width:100%;min-height:48px}
.case-tabs button:hover{background:var(--surface)}
.case-tabs button strong{display:block;font-size:14px;font-weight:600}
.case-tabs button span{display:block;margin-top:var(--s1);font-size:12px;line-height:1.5;color:var(--muted);font-weight:400}
@media(min-width:760px){
 .case-tabs{flex-direction:column;gap:0;border-bottom:0;margin-top:var(--s6)}
 .case-tabs button{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);text-align:left;padding:var(--s3);border:0;border-left:2px solid transparent}
 .case-tabs button[aria-selected=true]{border-left-color:var(--primary);background:var(--surface)}
 .case-tabs button span{margin:0;font-size:13px}
}
@media(max-width:759px){.case-tabs button{padding:var(--s2) var(--s1);min-width:0}}
.case-tabs button .service-item,.case-tabs button .service-separator{display:inline;margin:0;font-size:inherit}
@media(max-width:759px){.case-tabs button .service-item{display:block;white-space:nowrap}.case-tabs button .service-separator{display:none}}
.contact-note,.wechat-state,.result-badge{background:var(--surface)}
.button:hover{background:var(--ink)}
@media(min-width:760px){.chat-body{padding:var(--s4);min-height:0}}
@media(max-width:759px){
 .agent-demo{gap:var(--s4)}
 .chat-header{min-height:48px;padding-block:var(--s2)}
 .chat-body{gap:var(--s2);padding:var(--s3)}
 .chat-bubble,.chat-result{padding:var(--s2) var(--s3);line-height:1.5}
 .chat-link{padding-top:var(--s1);margin-top:var(--s1)}
 .chat-result .result-detail,.chat-result .result-proof{margin-top:var(--s1)}
 .agent-note{padding:var(--s2) var(--s3)}
}
@media(prefers-reduced-motion:reduce){.message-row{transition:none}}
/* Lead with the companion and the product, not an introductory film. */
.agent-demo{border-top:0;padding-top:var(--s6)}
.agent-intro h1{font-size:44px;line-height:1.18;white-space:pre-line;font-weight:600;letter-spacing:-.045em}
.intro-contact{display:none}
@media(min-width:760px){
 .agent-demo{padding-top:var(--s8);gap:var(--s6) var(--s16)}
 .agent-intro>p{font-size:16px;max-width:25em}
 .agent-mascot{width:144px;margin-bottom:var(--s4)}
}
@media(max-width:759px){
 .agent-demo{padding-top:var(--s2);gap:var(--s3)}
 .agent-intro{display:grid;grid-template-columns:minmax(0,1fr) 56px;gap:var(--s2)}
 .agent-intro h1{grid-column:1;grid-row:1;font-size:24px;line-height:1.25;letter-spacing:-.045em;align-self:center}
 .agent-mascot{grid-column:2;grid-row:1;width:56px;margin:0;align-self:center}
 .agent-intro>p{grid-column:1 / -1;margin:0;font-size:14px;line-height:1.5;max-width:26em}
 .case-tabs{grid-column:1 / -1;margin-top:0}
 .intro-contact{display:flex;grid-column:1 / -1;min-height:44px;padding-block:var(--s2);width:100%}
}

@media(max-width:759px){
.chat-link,.chat-result>small{display:none}
.chat-body{padding:var(--s2);gap:var(--s2)}
.chat-bubble,.chat-result{padding:var(--s2);font-size:14px;line-height:1.4}
.chat-result h3{margin-top:0;font-size:14px}
.chat-result .result-detail,.chat-result .result-proof{font-size:12px;line-height:1.4}
.chat-header{min-height:44px}
}

/* One primary contact action; let the conversation explain the service. */
.intro-contact{display:flex;width:100%;min-height:44px;margin-top:var(--s4)}
@media(max-width:759px){.intro-contact{margin-top:0}.agent-demo{padding-bottom:var(--s8)}.agent-flow{padding-top:var(--s3)}.faq{padding-block:var(--s8)}}

.local-scene{margin:var(--s4) 0 0;grid-column:1 / -1;overflow:hidden;border-radius:var(--r2);background:var(--surface)}
.local-scene video{display:block;width:100%;height:auto}
.local-scene figcaption{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);font-size:12px;line-height:1.5;color:var(--muted);padding:var(--s2) var(--s3)}
@media(max-width:759px){.local-scene{margin:0}.local-scene figcaption{font-size:11px;padding:var(--s1) var(--s2)}}

.film-toggle{border:0;background:transparent;color:var(--ink);font:inherit;white-space:nowrap;min-height:44px;padding:var(--s2);cursor:pointer}.film-toggle:hover{background:var(--line)}.film-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}.film-toggle:disabled{opacity:.5;cursor:default}

/* Film first: one local scene, one invitation, one conversation. */
.agent-intro{display:grid;grid-template-columns:minmax(0,1fr) 80px;gap:var(--s3);padding-top:0;align-content:start}
.agent-intro .local-scene{grid-row:1;grid-column:1 / -1;margin:0 0 var(--s2)}
.agent-intro h1{grid-column:1;grid-row:2;font-size:36px;line-height:1.2;align-self:center;margin:0}
.agent-intro .agent-mascot{grid-column:2;grid-row:2;width:80px;margin:0;align-self:center}
.agent-intro>p{grid-column:1 / -1;grid-row:3;margin:0;max-width:none}
.agent-intro .intro-contact{grid-column:1 / -1;grid-row:4;margin:0}
.agent-interaction{min-width:0;width:100%;max-width:440px;justify-self:center}
.agent-interaction .case-tabs{flex-direction:row;margin:0 0 var(--s3);border-bottom:1px solid var(--line)}
.agent-interaction .case-tabs button{display:block;min-width:0;text-align:center;border:0;border-bottom:2px solid transparent;padding:var(--s2) var(--s1)}
.agent-interaction .case-tabs button[aria-selected=true]{border-bottom-color:var(--primary);background:transparent}
.agent-interaction .case-tabs button span{font-size:12px;line-height:1.5}
.agent-interaction .case-tabs button>span{margin-top:var(--s1)}
.agent-interaction .agent-phone{max-width:none}
.agent-flow{grid-column:1 / -1;padding:0}
@media(min-width:760px){
.agent-demo{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--s8) var(--s12);padding-top:var(--s4)}
.agent-interaction{grid-column:2;grid-row:1}
.agent-flow ol{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
}
@media(max-width:759px){
.agent-demo{gap:var(--s4);padding-top:var(--s2)}
.agent-intro{grid-template-columns:minmax(0,1fr) 56px;gap:var(--s2)}
.agent-intro h1{font-size:24px;line-height:1.25}
.agent-intro .agent-mascot{width:56px}
.agent-intro .local-scene{margin:0}
.agent-intro>p{font-size:14px;line-height:1.5}
.agent-flow{padding-top:var(--s2)}
}

/* Two cached video layers overlap only at the loop seam. */
.film-stage{position:relative;aspect-ratio:16 / 9;overflow:hidden;background:var(--surface)}
.film-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

/* Keep the experience clear; put explanatory details in the existing policy dialog. */
.film-stage .film-toggle{position:absolute;z-index:3;right:var(--s2);bottom:var(--s2);width:44px;height:44px;min-height:44px;padding:0;display:grid;place-items:center;border-radius:var(--r2);color:var(--white);background:color-mix(in srgb,var(--ink) 55%,transparent);opacity:0;transition:opacity 160ms ease}
.film-stage:hover .film-toggle,.film-stage:focus-within .film-toggle{opacity:1}
.film-stage .film-toggle:focus-visible{outline:2px solid var(--white);outline-offset:-4px}
@media(hover:none){.film-stage .film-toggle{opacity:.7}}
@media(prefers-reduced-motion:reduce){.film-stage .film-toggle{opacity:1;transition:none}}

/* A single Hieut identity, language-aware type and tighter section rhythm. */
:root{--font-ko:Pretendard,Inter,sans-serif;--font-zh:'PingFang SC','Microsoft YaHei',Inter,sans-serif;--tracking-heading:-.035em}
html:lang(ko) body{font-family:var(--font-ko)}
html:lang(zh-CN) body{font-family:var(--font-zh)}
.header{height:72px}
.brand{gap:var(--s2)}
.brand .logo{width:40px;height:40px;flex:0 0 40px}
.brand .logo img{display:block;width:100%;height:100%;object-fit:contain}
.brand b{font-family:var(--font-ko);font-size:20px;font-weight:650;letter-spacing:-.025em}
.brand:hover{text-decoration:none}
.agent-intro h1{font-weight:600;letter-spacing:var(--tracking-heading)}
html:lang(zh-CN) .agent-intro h1{letter-spacing:-.025em;font-weight:600}
.agent-intro>p{line-height:1.6;letter-spacing:-.015em}
.agent-demo{padding-bottom:var(--s8)}
.agent-interaction{max-width:none}
.chat-bubble,.chat-result{line-height:1.5}
.faq{padding-block:var(--s8);gap:var(--s6)}
.faq h2{font-size:24px;font-weight:600;letter-spacing:-.025em}
.faq summary{line-height:1.5;padding-block:var(--s4)}
.faq p{font-size:15px;line-height:1.6}
.footer{padding-block:var(--s6);gap:var(--s3)}
@media(min-width:760px){
 .agent-demo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s6) var(--s8);padding-top:var(--s4)}
 .agent-intro h1{font-size:36px;line-height:1.2}
 .chat-body{gap:var(--s2);padding:var(--s3)}
 .chat-header{min-height:52px;padding-block:var(--s3)}
 .chat-bubble,.chat-result{padding:var(--s3)}
 .agent-flow{padding:0}
 .faq{grid-template-columns:1fr 1fr;column-gap:var(--s8)}
}
@media(max-width:759px){
 .header{height:64px}
 .brand .logo{width:36px;height:36px;flex-basis:36px}
 .brand b{font-size:18px}
 .agent-intro h1{font-size:24px;line-height:1.25}
 .agent-demo{gap:var(--s4);padding-bottom:var(--s6)}
 .agent-flow ol{gap:var(--s2)}
 .agent-flow li{font-size:13px;line-height:1.5}
 .faq{padding-block:var(--s6);gap:var(--s3)}
 .faq h2{font-size:22px}
 .footer{padding-block:var(--s4);font-size:12px}
}

/* Give the small header companion sufficient weight against white. */
:root{--brand-mark-size:48px;--brand-mark-edge:#9d8667;--brand-mark-filter:drop-shadow(0 1px .65px color-mix(in srgb,var(--brand-mark-edge) 50%,transparent))}
.brand .logo{width:var(--brand-mark-size);height:var(--brand-mark-size);flex-basis:var(--brand-mark-size)}
.brand .logo img{filter:var(--brand-mark-filter);object-fit:contain}
.brand{gap:var(--s2)}
.brand b{font-weight:650;line-height:1.2;letter-spacing:-.025em}
@media(max-width:759px){:root{--brand-mark-size:44px}.brand b{font-size:20px}.brand{gap:var(--s2)}}

/* Compact fixed conversation: preserve reading size and reserve all six cases. */
@media(max-width:759px){
 .chat-body{gap:var(--s1)}
 .chat-result .result-detail,.chat-result .result-proof{margin-top:var(--s1)}
 .agent-intro>p{max-width:none;text-wrap:balance}
}

/* Hieut bridges the local scene and the friend who answers in chat. */
:root{--hero-friend-size:128px;--hero-friend-padding:8px}
.agent-intro{grid-template-columns:minmax(0,1fr) var(--hero-friend-size);column-gap:var(--s4)}
.agent-intro .agent-mascot{grid-column:2;grid-row:1 / 3;align-self:end;justify-self:end;z-index:2;width:var(--hero-friend-size);padding:var(--hero-friend-padding);background:transparent;animation:none;transform:none;pointer-events:none}
.scene-place{position:absolute;left:var(--s3);bottom:var(--s3);z-index:2;padding:var(--s1) var(--s2);border-radius:var(--r1);background:color-mix(in srgb,var(--ink) 72%,transparent);color:var(--white);font-size:12px;line-height:1.5;font-weight:500;pointer-events:none}
.chat-identity{display:flex;gap:var(--s1);align-items:center;justify-content:center}
.chat-identity img{display:block;object-fit:contain;width:28px;height:28px}
@media(max-width:759px){
 :root{--hero-friend-size:104px}
 .agent-intro{column-gap:var(--s2)}
 .scene-place{left:var(--s2);bottom:var(--s2)}
}

/* Use the approved cafe portrait as the visitor profile, framed in CSS. */
.message-avatar.visitor-avatar{position:relative}
.message-avatar.visitor-avatar img{position:absolute;width:96px;height:64px;max-width:none;left:-12px;top:-4px;object-fit:cover}
.local-scene .scene-recognition{display:block;padding:var(--s2) 0;background:var(--white);color:var(--ink);padding-right:var(--hero-friend-size)}
.scene-recognition strong{display:block;font-size:14px;line-height:1.5;font-weight:500}
.scene-recognition a{display:block;margin-top:var(--s1);font-size:12px;line-height:1.5;color:var(--muted);text-underline-offset:3px;text-decoration:none}
.scene-recognition a:hover{text-decoration:underline;color:var(--ink)}
.scene-recognition a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media(max-width:759px){.scene-recognition strong{font-size:12px}.scene-recognition a{font-size:11px}.local-scene .scene-recognition{padding-right:var(--s2)}}