/* VocaLume conversation notebook. Original composition, Tabler icons. */
:root{--ink:#34445e;--muted:#69788d;--rose:#c47698;--blue:#527d9b;--line:#dfe6ed;--soft:#f3f7fb}
body{background:#fcfdff;background-image:radial-gradient(#cbd6e530 .8px,transparent .8px);background-size:22px 22px}
.nav{max-width:1380px;background:#ffffffed;border-radius:22px;box-shadow:0 10px 35px #41546d0b}
.nav nav a{transition:background .2s,color .2s}
h1{font-family:'Trebuchet MS','Noto Sans TC',sans-serif;font-weight:800;letter-spacing:-1.6px;line-height:1.4;font-size:clamp(35px,4.1vw,59px)}
h1 em:after{height:11px;bottom:-3px;border-radius:3px;transform:rotate(-1deg);opacity:.55}
.hero{min-height:660px;gap:65px;padding-top:90px;padding-bottom:85px}
.hero:before{background:radial-gradient(ellipse at 85% 30%,#deedf9a0,transparent 55%),radial-gradient(ellipse at 5% 70%,#f8e6efa0,transparent 50%)}
.hero-copy{position:relative}.hero-copy .eyebrow{font-size:11px;letter-spacing:2px;color:#a46e8c}
.hero-art{padding:52px 0;isolation:isolate}
.hero-art:before{border-radius:18px;inset:15px -22px;background:repeating-linear-gradient(135deg,#e5edf43d 0 1px,transparent 1px 13px);border:1px solid #dce6ef;transform:rotate(-5deg)}
.conversation-preview{transform:rotate(1.5deg);border:1px solid #d1dce8;box-shadow:9px 11px 0 #e7edf566,0 25px 55px #445e7a13;border-radius:16px}
.preview-top{background:#eef4fa}.float-note{box-shadow:4px 5px 0 #e8dce766;border-radius:8px}.note-en{background:#f9f0f5}
.primary{background:#425f80;border:1px solid #3f5877;box-shadow:0 5px 0 #dce5ee;border-radius:13px}.primary:hover{box-shadow:0 7px 0 #dce5ee}
.ribbon{background:#f4f7fb;border-block:1px solid #dde6ee;letter-spacing:2px}
.demo-gallery.wrap{width:calc(100% - 64px);max-width:1800px;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-block:72px;position:relative}
.demo-gallery>.demo-section{background:#ffffff;border:1px solid #dce5ee;border-radius:20px;padding:22px;box-shadow:0 8px 0 #e9eef54d,0 15px 40px #3d5c7c08;position:relative}
.demo-gallery>.demo-section:before{content:'';display:block;width:42px;height:38px;background:#edf4fa url('assets/design/microphone.svg') center/23px no-repeat;border-radius:12px;margin-bottom:20px}
.demo-gallery>#chat-demo:before{background-image:url('assets/design/messages.svg');background-color:#f8edf3}.demo-gallery>#obs-demo:before{background-image:url('assets/design/broadcast.svg');background-color:#ebf5f2}
.demo-gallery .section-heading{display:block;margin-bottom:20px;min-height:165px}
.demo-gallery .section-heading h2{font-size:27px;margin:0 0 12px;line-height:1.35;letter-spacing:-.5px}
.demo-gallery .section-heading .eyebrow{font-size:10px;letter-spacing:1px;margin-bottom:10px}
.demo-gallery .section-heading>p{font-size:13px;line-height:1.8}
.demo-gallery .video-shell{border-radius:12px;border-color:#dce4ed;box-shadow:0 8px 22px #3b55730a}
.demo-gallery .video-label{font-size:10px;padding:10px 12px;min-height:50px;background:#f6f9fc;gap:7px;flex-wrap:wrap}
.demo-gallery .video-shell video{aspect-ratio:16/9;width:100%;max-height:none}
.demo-gallery .video-caption,.demo-gallery .fine{font-size:10px;line-height:1.8}
.video-shell{transition:box-shadow .2s}.video-shell:focus-within{box-shadow:0 0 0 3px #a5c1d5}
.capabilities{gap:70px}.feature-list article{background:#ffffffb0;padding:24px 16px;border-radius:12px;border-bottom:1px solid #e1e7ee;margin-bottom:8px}
.feature-list article:first-child{padding-top:24px}.feature-list h3{font-size:19px}.how-section{background:#eff4f9;border-block:1px solid #dfe7ef}
.steps li{background:white;border:1px solid #dbe5ed;border-radius:16px;padding:26px;box-shadow:0 6px 0 #dfe8f14d}
.faq-list details{background:#fff;border:1px solid #e0e7ef;border-radius:14px;margin-bottom:12px;padding:20px 24px}.faq-list details[open]{background:#f6f9fd}
.closing{background:radial-gradient(ellipse at 20% 30%,#f4eaf1a0,transparent 65%),#f2f7fb;border-radius:30px;border:1px solid #e3e9f0;margin:30px auto;max-width:1380px}
.language-trigger{background:#f5f8fc;border-radius:13px}.language-options{border-radius:16px;box-shadow:0 16px 45px #3d587918}
@media(min-width:1700px){.demo-gallery .section-heading{min-height:140px}}
@media(max-width:1000px) and (min-width:761px){.demo-gallery.wrap{width:calc(100% - 28px);gap:12px}.demo-gallery>.demo-section{padding:14px}.demo-gallery .section-heading{min-height:205px}.demo-gallery .section-heading h2{font-size:22px}}
@media(max-width:760px){.hero{padding-top:36px;padding-bottom:45px;gap:25px;min-height:0}.hero-art{margin-inline:8px}.hero-art:before{inset:20px -5px}.demo-gallery.wrap{width:calc(100% - 32px);grid-template-columns:1fr;gap:28px;padding-block:38px}.demo-gallery>.demo-section{padding:20px}.demo-gallery .section-heading{min-height:0}.demo-gallery .section-heading h2{font-size:26px}.demo-gallery .section-heading>p{font-size:14px}.demo-gallery .video-label{font-size:11px}.demo-gallery .fine,.demo-gallery .video-caption{font-size:11px}.closing{border-radius:22px;margin-inline:16px}.faq-list details{padding:14px 16px}.steps li{padding:22px}.nav{margin-inline:12px}.capabilities{gap:28px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Feature labels sit beside their icons, outside the video. */
.demo-gallery>.demo-section:before{display:none}
.demo-card-heading{display:flex;align-items:center;gap:12px;min-height:42px;margin-bottom:22px;color:var(--muted);font-size:13px;font-weight:650;line-height:1.5}
.demo-card-icon{display:block;flex:0 0 42px;height:38px;border-radius:12px;background:#edf4fa var(--demo-icon) center/23px no-repeat}
#chat-demo .demo-card-icon{background-color:#f8edf3}#obs-demo .demo-card-icon{background-color:#ebf5f2}
@media(max-width:760px){.demo-card-heading{font-size:13px;margin-bottom:20px}}

/* Open demo columns: no outer card or repeated headings. */
.demo-gallery>.demo-section{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0}
.demo-gallery .section-heading{min-height:112px;margin-bottom:18px}
.demo-card-heading{margin-bottom:20px}
@media(min-width:1700px){.demo-gallery .section-heading{min-height:100px}}
@media(max-width:1000px) and (min-width:761px){.demo-gallery>.demo-section{padding:0}.demo-gallery .section-heading{min-height:150px}}
@media(max-width:760px){.demo-gallery>.demo-section{padding:0}.demo-gallery .section-heading{min-height:0;margin-bottom:20px}}

/* Step connectors live entirely in the gutter, never across a card. */
.steps{gap:44px}
.steps li:not(:last-child):after{left:calc(100% + 10px);right:auto;top:44px;bottom:auto;width:24px;height:0;border:0;border-top:1px dashed #b8c9da;pointer-events:none}
.steps li>span{position:relative;left:auto;top:auto;z-index:1}
@media(max-width:760px){.steps{gap:18px}.steps li:not(:last-child):after{display:none}}

/* Demos read vertically on every screen size. */
.demo-gallery.wrap{grid-template-columns:minmax(0,1fr);max-width:1100px;width:calc(100% - 64px);gap:56px}
.demo-gallery .section-heading{min-height:0;margin-bottom:20px}
.demo-gallery .section-heading>p{font-size:14px}
.demo-gallery .video-shell video{max-height:none}
@media(max-width:760px){.demo-gallery.wrap{width:calc(100% - 32px);gap:36px}.demo-gallery .section-heading{min-height:0}}

/* Each demo pairs left-hand copy with a right-hand video. */
.demo-gallery.wrap{max-width:1240px;gap:64px}
.demo-gallery>.demo-section{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.35fr);column-gap:42px;align-items:start}
.demo-gallery .demo-card-heading{grid-column:1;grid-row:1;margin:0 0 18px}
.demo-gallery .section-heading{grid-column:1;grid-row:2;margin:0 0 16px}
.demo-gallery .video-shell{grid-column:2;grid-row:1 / span 5;width:100%;align-self:start}
.demo-gallery .video-caption,.demo-gallery .fine{grid-column:1;margin:0 0 10px;line-height:1.8}
.demo-gallery .video-caption{grid-row:3;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.demo-gallery .fine{font-size:11px}
@media(max-width:760px){.demo-gallery>.demo-section{display:flex;flex-direction:column;gap:0}.demo-gallery .demo-card-heading{margin-bottom:16px}.demo-gallery .section-heading{margin-bottom:18px}.demo-gallery .video-shell{margin-bottom:14px}.demo-gallery .video-caption{flex-direction:row;flex-wrap:wrap;gap:5px 12px}.demo-gallery.wrap{gap:40px}}

/* Primary navigation comes first in the header. */
.nav nav{grid-row:1;border-top:0;border-bottom:1px solid #e8edf3;padding-top:0;padding-bottom:8px}
.nav>.brand,.nav>.language-picker,.nav>.nav-github{grid-row:2}
@media(max-width:760px){.nav nav{padding-top:0;padding-bottom:6px}}

/* Keep demo source notes compact rather than stretching across video height. */
.demo-gallery>.demo-section{grid-template-rows:min-content min-content min-content 1fr;align-content:start}
.demo-gallery .video-shell{grid-row:1 / span 4}
.demo-gallery .video-caption{margin-bottom:6px}
.demo-gallery .fine{margin-bottom:0}

/* Restore the original quiet FAQ and closing treatment. */
.faq-list details,.faq-list details[open]{background:transparent;border:0;border-bottom:1px solid #e7ecf2;border-radius:0;box-shadow:none;margin:0;padding:19px 0}
.faq-list details:first-child{padding-top:0}
.closing{background:radial-gradient(ellipse at 50% 40%,#f5eff6,#f6fafc 60%,#fff 80%);border:0;border-radius:0;box-shadow:none;max-width:1160px;margin:0 auto;padding:32px 0 30px;min-height:0}
.closing-spark{font-size:28px;margin-bottom:6px}
.closing .eyebrow{margin-bottom:12px}.closing h2{margin-bottom:14px}
.closing .actions{margin-top:20px}.closing .update-note{margin-top:16px;margin-bottom:0}
.footer{padding-block:20px;margin-top:0}
body>aside{margin:0 auto 16px!important;padding:12px 20px!important}
body>aside p{margin:4px 0 0}
@media(max-width:760px){.faq-list details,.faq-list details[open]{padding:14px 0}.closing{margin:0 auto;padding:28px 0 24px;border-radius:0}.footer{padding-block:18px}}

/* One compact desktop header. */
@media(min-width:1001px){
 .nav{display:flex;gap:18px;padding:12px 20px}
 .nav>.brand{flex:0 0 auto;font-size:21px}
 .nav nav{display:flex;flex:1;justify-content:center;gap:6px;border:0;padding:0}
 .nav nav a{min-height:42px;padding:8px 12px;font-size:13px;white-space:nowrap;overflow-wrap:normal}
 .nav>.language-picker{flex:0 0 auto;margin:0}
 .nav .language-trigger{padding:8px 12px;font-size:13px;min-height:42px}
 .nav>.nav-github{flex:0 0 auto;padding:8px 12px;white-space:nowrap}
 html{scroll-padding-top:105px}
}

/* Compact site rhythm without removing useful reading space. */
.hero{min-height:0;padding-block:40px 38px;gap:38px}
.hero-art{padding-block:40px 30px}
.hero .eyebrow{margin-bottom:18px}.hero h1{margin-bottom:18px}.hero .lead{margin-bottom:22px}
.ribbon{padding-block:12px}
.demo-gallery.wrap{padding-block:36px;gap:36px}
.demo-gallery .demo-card-heading{margin-bottom:12px}
.demo-gallery .section-heading{margin-bottom:12px}
.capabilities{padding-block:36px 40px;gap:48px}
.feature-intro .eyebrow,.faq .eyebrow{margin-bottom:16px}
.feature-list article,.feature-list article:first-child{padding:16px 12px;margin-bottom:4px}
.how-section{padding-block:36px}
.section-heading{margin-bottom:22px}
.steps{margin-block:24px 18px}
.steps li{padding:22px}
.steps li:not(:last-child):after{top:40px}
.faq{padding-block:40px;gap:48px}
.faq-list details,.faq-list details[open]{padding-block:15px}
.closing{padding-block:24px}
.closing h2{line-height:1.45;margin-bottom:12px}
.closing .actions{margin-top:16px}
.closing .update-note{margin-top:12px}
.footer{padding-block:16px}
body>aside{padding-block:8px!important;margin-bottom:8px!important}
@media(max-width:760px){
 .hero{padding-block:24px;gap:18px}.hero-copy>.hero-art{margin-block:18px 24px}.hero-art{padding-block:36px 24px}
 .demo-gallery.wrap{padding-block:26px;gap:30px}
 .capabilities{padding-block:28px;gap:24px}
 .how-section{padding-block:28px}.steps{margin-top:20px;gap:14px}.steps li{padding:18px}
 .faq{padding-block:28px;gap:20px}.closing{padding-block:22px}.footer{padding-block:14px}
}

/* Feature names carry the same hierarchy as the other section titles. */
.demo-card-heading{font-size:clamp(26px,2.7vw,36px);font-weight:750;line-height:1.4;color:var(--ink);gap:16px;letter-spacing:-.6px}
.demo-card-icon{flex-basis:54px;height:54px;background-size:30px;border-radius:16px}
.demo-card-heading>span:last-child{min-width:0;overflow-wrap:break-word}
@media(max-width:760px){.demo-card-heading{font-size:26px;gap:12px;letter-spacing:-.3px}.demo-card-icon{flex-basis:46px;height:46px;background-size:26px}}

/* Full-width pastel section bands, without enclosing card frames. */
body{background:#fff;background-image:none;overflow-x:clip}
.hero{background:#f9f3f7;box-shadow:0 0 0 100vmax #f9f3f7;clip-path:inset(0 -100vmax)}
.hero:before{display:none}
.demo-gallery.wrap{padding-block:0;gap:0}
.demo-gallery>.demo-section{position:relative;padding-block:36px;box-shadow:0 0 0 100vmax var(--section-color);clip-path:inset(0 -100vmax);background:var(--section-color)}
#demo{--section-color:#edf5fc}#chat-demo{--section-color:#f8eef4}#obs-demo{--section-color:#edf7f2}
.capabilities{background:#f2f0fa;box-shadow:0 0 0 100vmax #f2f0fa;clip-path:inset(0 -100vmax)}
.how-section{background:#edf4fa;border:0}
.faq{background:#fff7ed;box-shadow:0 0 0 100vmax #fff7ed;clip-path:inset(0 -100vmax)}
.closing{background:#f2eef7;box-shadow:0 0 0 100vmax #f2eef7;clip-path:inset(0 -100vmax)}
.footer{background:#fff}
@media(max-width:760px){.demo-gallery>.demo-section{padding-block:28px}.demo-gallery.wrap{padding-block:0;gap:0}}