@charset "UTF-8";
/* Homepage only. site.css remains the shared layout and legacy design base.
   The original Liberaflow logo supplies the blue; layout stays in site.css. */
:root {
  --brand: #496fd0;
  --brand-hover: #3d62bc;
  --brand-light: #9bbaff;
  --bg: #101725;
  --panel: #182237;
  --ink: #f5f8ff;
  --muted: #acbbd3;
  --lime: var(--brand-light);
  --line: #2c3950;
  --paper: #f5f7fc;
  --dark: #202d45;
  --text-secondary: #536580;
  --text-caption: #596c88;
  --border-light: #d6dfef;
  --blue-wash: #e8effd;
}
::selection { background: #bbceff; color: #172746; }
.button-lime { background: var(--brand); color: #fff; }
.button-lime:hover { background: var(--brand-hover); }
.status-dot { background: var(--brand-light); box-shadow: 0 0 0 4px #759dfb16; }
.hero-edition, .platform-note, .small-index, .demo-label { color: var(--muted); }
.hero-aside { border-color: #3b4b66; }
.hero-aside p { color: #c0cbe0; }
.text-link { border-color: #667da4; }
.scenario-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); border-color: #344865; background: #344865; }
.scenario-tab { min-width: 0; padding-inline: 17px; gap: 12px; font-size: 13px; }
.scenario-tab { background: #1a2942; }
.scenario-tab[aria-selected="true"] { background: var(--brand); color: #fff; }
.scenario-tab:hover:not([aria-selected="true"]) { background: #243754; }
.workspace { background: #fff; color: var(--dark); border-color: #344865; box-shadow: 0 28px 80px #040c1a45; }
.workspace-titlebar { background: #edf2fa; border-color: var(--border-light); color: var(--text-secondary); }
.window-dots i { background: #bdcce1; }
.titlebar-divider { color: #8ca0be; }
.local-indicator i { background: var(--brand); }
.demo-sidebar { background: #f0f4fb; border-color: var(--border-light); }
.workspace-name span, .sidebar-search, .sidebar-label, .sidebar-item, .sidebar-bottom { color: var(--text-caption); }
.sidebar-item.selected { background: #dce7ff; color: #315cb4; }
.sidebar-folder { color: var(--text-secondary); }
.sidebar-file { background: #e0e9f8; }
.avatar-tiny { background: #dde7f7; color: var(--text-secondary); }
.document-breadcrumb { border-color: #e3e9f3; color: var(--text-secondary); }
.document-breadcrumb > span { color: #94a5c0; }
.document-breadcrumb > .document-format { color: var(--text-secondary); }
.document-format { border-color: var(--border-light); }
.document-eyebrow, .document-lead { color: var(--text-caption); }
.note-callout { background: #edf3ff; border-color: #8baaf0; color: #45608b; }
.note-callout > span { color: var(--brand); }
.demo-check { color: var(--text-secondary); }
.demo-check input { accent-color: var(--brand); }
.demo-check:has(input:checked) > span { color: #697b94; }
.note-links span { color: #4265a6; background: #edf2fc; }
.demo-agent { background: #f7f9fd; border-color: var(--border-light); }
.agent-heading { border-color: var(--border-light); }
.sparkle, .agent-orbit, .mention { color: var(--brand); }
.mention { color: #365db7; }
.agent-model, .agent-welcome p, .demo-status { color: var(--text-caption); }
.agent-model i { background: #809aca; }
.user-prompt { border-color: #d8e3fa; background: #eaf0ff; color: #45608b; }
.run-demo { background: var(--brand); color: #fff; }
.run-demo:hover { background: var(--brand-hover); }
.run-demo:disabled { background: #657da8; }
.agent-step { color: var(--text-secondary); }
.agent-step .step-state { color: var(--brand); }
.agent-step.running .step-state { border-color: #c3d3f2; border-top-color: var(--brand); }
.result-file { border-color: var(--border-light); }
.result-file small { color: var(--text-caption); }
.demo-caption, .hero-bottom { color: var(--muted); }
.demo-caption > span:first-child, .hero-bottom > div { color: #c4d1e8; }
.hero-bottom { border-color: var(--line); }
.hero-bottom i { color: var(--brand-light); }
.section-kicker { color: var(--text-caption); border-color: var(--border-light); }
.section-intro p, .feature > p { color: var(--text-secondary); }
.feature { border-color: var(--border-light); }
.feature-tag, .feature-symbol { color: #486aa5; }
.feature-knowledge { background: #eaf0fc; }
.feature-ai { background: #edf0fa; border-color: #d9dff0; }
.feature-ai .feature-tag, .feature-ai .feature-symbol { color: #576da5; }
.knowledge-graph { background-image: radial-gradient(#c2d1ee 1px, transparent 1px); }
.knowledge-graph svg { stroke: #adc2ea; }
.graph-node { border-color: #c0d0ef; background: #f8faff; color: #45649c; box-shadow: 0 3px 9px #47649e0b; }
.graph-node:hover { box-shadow: 0 0 0 5px #b5ccfb66; }
.graph-node.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.graph-dot { background: #89a7de; }
.graph-readout { color: var(--text-secondary); }
.graph-readout > span { color: var(--brand); }
.feature-footer { border-color: #ccd9ee; color: var(--text-secondary); }
.feature-footer > span, .feature-ai .feature-footer > span { color: var(--text-secondary); }
.feature-footer a, .feature-ai .feature-footer a { color: #355ea9; }
.feature-ai .feature-footer { border-color: #ccd6ec; color: var(--text-secondary); }
.creation-source { background: #f8faff; border-color: #cad7ef; color: #526993; }
.creation-line { background: #adbfdf; }
.creation-prompt { background: #375ca5; border-color: #4b6fb2; color: #fff; box-shadow: 0 6px 17px #314f8220; }
.creation-prompt .sparkle { color: #c0d4ff; }
.file-tile { color: var(--text-secondary); }
.automation-feature { background: #e4edfc; border-color: #cddcf3; }
.automation-copy p { color: var(--text-secondary); }
.dark-link { color: #315da9; border-color: #839ed0; }
.flow-window { border-color: #baccec; background: #f8faff; box-shadow: 0 12px 26px #5a78b617; }
.flow-window-head { background: #eaf0fd; border-color: #d2def3; color: #466697; }
.flow-window-head > span:last-child { color: var(--text-caption); }
.flow-steps li { border-color: #cfddf3; }
.flow-step-icon { background: #e9f0fd; border-color: #c6d8f6; color: #5076b7; }
.flow-steps strong { color: #3a598a; }
.flow-steps div > span, .automation-footnote { color: var(--text-secondary); }
.step-check { color: var(--brand); }
.flow-replay { background: #365fae; color: #fff; }
.lower-pair .feature { background: #fcfdff; }
.login-pill { background: #e8effd; color: #46679f; }
.human-avatar { background: #e6ecf6; color: #526a8b; }
.chat-line strong { color: #425d85; }
.chat-line strong > span:not(.ai-badge), .chat-line p { color: var(--text-secondary); }
.chat-line b { color: #4269ac; }
.reviewer-avatar { background: #dfe9fc; color: #4268af; }
.ai-badge { background: #e7effe; color: #5476b1; }
.team-file { color: #456699; background: #edf3fe; border-color: #d6e2f8; }
.stacked-avatars i { background: #c2d3f2; color: #446ba9; border-color: #edf3fe; }
.stacked-avatars i:nth-child(2) { background: #d4e0f8; }
.stacked-avatars i:nth-child(3) { background: #e1eafb; }
.schedule-top { color: #496796; border-color: #d9e3f4; }
.schedule-top > span:last-child, .schedule-row time, .schedule-note { color: var(--text-caption); }
.event-blue { background: #e4edff; color: #4166a6; border-color: #8eadea; }
.event-lime { background: #eef0fc; color: #5a67a5; border-color: #a6b0e1; }
.schedule-event > span, .feature-time .schedule-event { color: #56639b; }
.feature-time .event-blue, .feature-time .event-blue > span { color: #4166a6; }
/* A blue landmark between the feature overview and the practical guide. */
.ownership { background: #4065bd; color: #fff; }
.ownership .eyebrow { color: #e4edff; }
.ownership-copy > p { color: #e2eaff; }
.ownership .text-link { color: #fff; border-color: #a8c0f4; }
.ownership-panel { background: #f3f7ff; border-color: #d1e0ff; color: var(--dark); }
.mode-switch { background: #e0e9fb; }
.mode-switch button { color: #456498; }
.mode-switch button.active { background: var(--brand); color: #fff; box-shadow: 0 2px 5px #3559971a; }
.ownership-icon { color: #c0d2f6; }
.ownership-label { color: #5576af; }
.ownership-details ul { color: var(--text-secondary); }
.ownership-details li::before { color: var(--brand); }
.ownership-details > p { color: var(--text-secondary); border-color: #d6e1f5; }
.faq-intro .eyebrow, .faq-list details p { color: var(--muted); }
.faq-intro .text-link { color: var(--brand-light); border-color: #516b98; }
.faq-list details, .faq-list details:first-child { border-color: var(--line); }
.faq-list summary { color: #d8e2f3; }
.faq-list summary > span { color: #9db8e8; }
.download-section { background: #17253e; border-color: #2f4265; }
.download-top .eyebrow, .download-bottom > p { color: #b5c7e5; }
.download-beta { border-color: #637fae; color: #c5d8fa; }
.download-card { border-color: #587ac2; background: #254681; }
.download-card:hover { background: #335bac; }
.download-card strong { color: #fff; }
.download-card small { color: #c7d8f5; }
.os-mark { color: #cbdcff; }
.windows-mark i { background: #cbdcff; }
.site-footer > p, .site-footer > div, .site-footer > div > span { color: var(--muted); }
.noscript-message { background: #dce8ff; color: #253e68; }
.data-table th { color: var(--text-secondary); border-color: #d5e0f2; background: #edf3ff; }
.data-table td { color: var(--text-secondary); border-color: #e0e8f6; }
.data-table .row-done td:last-child { color: #315da9; }
.table-status { color: var(--text-caption); }
.browser-demo-url { border-color: var(--border-light); background: #f3f7ff; color: var(--text-secondary); }
.inline-tag { background: #e8effe; color: #4c6da6; }
.demo-team-message, .result-body { color: var(--text-secondary); }
.demo-team-message strong, .result-section-title { color: #426397; }
.document-result .document-eyebrow { color: #4b70af; }
.result-chips > span { border-color: #cfdcf5; color: #46669c; background: #eef4ff; }

/* The playground teaches actual app actions using fixed input/result examples. */
.demo-prerequisites { display: flex; align-items: baseline; gap: 14px; padding: 12px 22px; border-bottom: 1px solid var(--border-light); background: #f6f9ff; color: var(--text-secondary); font-size: 12px; }
.demo-prerequisites > strong { color: #365b99; font-weight: 650; flex-shrink: 0; }
.demo-prerequisites p { line-height: 1.7; }
.agent-conversation { display: block; padding: 18px; }
.agent-welcome { margin: 0 0 18px; text-align: left; }
.agent-welcome h3 { font-size: 16px; line-height: 1.5; }
.agent-welcome p { font-size: 12px; line-height: 1.7; }
.demo-instructions { list-style: none; counter-reset: instructions; margin: 0 0 20px; padding: 0; display: grid; gap: 14px; }
.demo-instructions li { position: relative; padding-left: 28px; counter-increment: instructions; }
.demo-instructions li::before { content: counter(instructions); position: absolute; left: 0; top: 2px; width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; background: #e0eaff; color: #355da5; font-size: 10px; }
.demo-instructions strong { display: block; color: #344e78; font-size: 12px; font-weight: 650; margin-bottom: 3px; }
.demo-instructions p { font-size: 11px; color: var(--text-secondary); line-height: 1.75; }
.user-prompt p { margin-top: 5px; font-size: 12px; line-height: 1.85; }
.demo-agent[data-scenario="browser"] .user-prompt { border-radius: 5px; background: #eff4fe; }
.demo-agent[data-scenario="browser"] .user-prompt > strong, .demo-agent[data-scenario="browser"] .user-prompt > span { display: block; }
.demo-agent[data-scenario="browser"] .user-prompt > strong { color: #355d9f; font-size: 11px; }
.demo-agent[data-scenario="browser"] .user-prompt > strong:not(:first-child) { margin-top: 10px; }
.demo-agent[data-scenario="browser"] .user-prompt > span { font-size: 11px; margin-top: 3px; }
.demo-source-list { padding-left: 18px; margin: 8px 0 20px; color: var(--text-secondary); font-size: 12px; line-height: 1.9; }
.demo-facts { margin: 18px 0 0; display: grid; gap: 10px; font-size: 12px; }
.demo-facts > div { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
html[lang="en"] .demo-facts > div { grid-template-columns: 82px minmax(0, 1fr); }
.demo-facts dt { color: #3e5e92; font-weight: 600; }
.demo-facts dd { color: var(--text-secondary); margin: 0; }
.demo-document .data-table { font-size: 11px; }
.demo-document .data-table caption:not(.sr-only) { text-align: left; font-size: 12px; color: #3e5e92; font-weight: 600; padding-bottom: 7px; }
.demo-document .data-table td { overflow-wrap: anywhere; }
.demo-document .result-body { margin-top: 8px; }
.extract-guide { display: grid; gap: 0; margin: 25px 0; }
.extract-guide > div { padding: 16px 0; border-top: 1px solid var(--border-light); }
.extract-guide dt { color: #344e78; font-size: 13px; font-weight: 650; line-height: 1.6; }
.extract-guide dd { margin: 7px 0 0; color: var(--text-secondary); font-size: 12px; line-height: 1.85; }
.export-formats { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
.export-formats > span { display: flex; align-items: baseline; gap: 12px; padding: 10px 14px; border: 1px solid #c9d8f8; border-radius: 5px; background: #eef4ff; color: #345b9e; font-size: 14px; font-weight: 650; }
.export-formats small { font-size: 11px; font-weight: 400; color: var(--text-secondary); }
.calendar-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 26px; }
.calendar-overview > div { padding: 20px 17px; border: 1px solid #cfddf5; background: #f0f5ff; border-radius: 6px; }
.calendar-overview > div:nth-child(2) { background: #f5f7fd; }
.calendar-icon { display: block; color: #496fd0; font-size: 26px; margin-bottom: 18px; }
.calendar-overview .document-eyebrow { font-size: 9px; }
.calendar-overview h3 { margin: 9px 0 7px; font-size: 17px; line-height: 1.5; }
.calendar-overview p, .calendar-next p, .calendar-people p, .calendar-visibility p { color: var(--text-secondary); font-size: 12px; line-height: 1.85; }
.calendar-connection { display: flex; gap: 10px; align-items: baseline; margin: 16px 0 25px; color: #4264a1; font-size: 11px; line-height: 1.8; }
.calendar-connection > span { font-size: 20px; }
.calendar-next { border-top: 1px solid var(--border-light); padding-top: 20px; }
.calendar-next strong, .calendar-visibility strong { display: block; color: #344e78; font-size: 13px; margin-bottom: 7px; }
.calendar-people { display: grid; margin: 28px 0 22px; border: 1px solid #cfdcf4; border-radius: 6px; overflow: hidden; }
.calendar-people > div { display: flex; gap: 15px; padding: 18px; background: #f4f7fd; }
.calendar-people > div + div { border-top: 1px solid #d6e0f1; }
.calendar-person { flex-shrink: 0; color: #496fd0; font-size: 15px; line-height: 1.6; }
.calendar-people > div:nth-child(2) .calendar-person { color: #788ac5; }
.calendar-people > div:nth-child(3) .calendar-person { color: #527e9f; }
.calendar-people strong { color: #344e78; font-size: 14px; }
.calendar-people p { margin-top: 5px; }
.calendar-visibility { padding: 17px 19px; background: #eaf0fc; border-radius: 5px; }
.demo-agent[data-scenario="calendar"] .user-prompt > strong, .demo-agent[data-scenario="calendar"] .user-prompt > span { display: block; }
.demo-agent[data-scenario="calendar"] .user-prompt > strong { color: #355d9f; font-size: 11px; margin-bottom: 5px; }
.demo-agent[data-scenario="calendar"] .user-prompt > span { font-size: 11px; }
.feature-time { background: #e8effd; }
.calendar-feature-summary { flex: 1; padding: 28px 0 23px; }
.calendar-feature-summary > div { display: flex; gap: 15px; align-items: flex-start; padding: 18px; background: #f8faff; border: 1px solid #d2dff5; border-radius: 6px; }
.calendar-feature-summary > div + div { margin-top: 12px; }
.calendar-feature-summary > div > span { color: #496fd0; font-size: 22px; line-height: 1.3; }
.calendar-feature-summary strong { color: #344e78; font-size: 14px; }
.calendar-feature-summary p { color: var(--text-secondary); font-size: 12px; line-height: 1.8; margin-top: 7px; }
.calendar-feature-summary .calendar-feature-note { margin-top: 18px; font-size: 11px; }
@media (max-width: 900px) {
  .scenario-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scenario-tab { min-height: 55px; padding: 12px 17px; font-size: 12px; justify-content: flex-start; }
}
@media (max-width: 380px) {
  .scenario-tab { padding-inline: 10px; font-size: 11px; gap: 8px; }
  .calendar-overview { gap: 8px; }
  .calendar-overview > div { padding: 16px 12px; }
  .calendar-overview h3 { font-size: 15px; }
}
.result-file { animation: none; }
.document-result { animation: none; }
.agent-action .demo-status { line-height: 1.7; min-height: 0; margin-top: 9px; }
@media (max-width: 700px) {
  .demo-prerequisites { padding: 11px 17px; gap: 10px; font-size: 11px; }
  .agent-conversation { display: block; padding: 18px; }
  .demo-instructions p { font-size: 12px; }
  .agent-welcome h3 { font-size: 16px; }
  .agent-welcome p { font-size: 12px; }
  .document-content .demo-source-list, .document-content .demo-facts { font-size: 13px; }
  .agent-output { margin-top: 15px; }
}

/* English copy sizing. Navigation is shared with the guide. */
html[lang="en"] { word-break: normal; }
html[lang="en"] body { word-break: normal; }
html[lang="en"] .hero h1 { font-size: clamp(48px, 5.4vw, 75px); letter-spacing: -0.055em; }
html[lang="en"] .hero-aside p { font-size: 16px; }
html[lang="en"] .feature h3 { font-size: 30px; }
html[lang="en"] .ownership h2 { font-size: 46px; }
html[lang="en"] .flow-word { white-space: normal; }

.getting-started { padding: 84px 0 76px; }
.getting-started .section-intro { align-items: start; }
.getting-started .section-intro p { max-width: 360px; padding-top: 6px; }
.getting-started-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--border-light); }
.getting-started-step { display: grid; grid-template-rows: subgrid; grid-row: span 4; padding: 29px 24px 20px; border-right: 1px solid var(--border-light); min-width: 0; }
.getting-started-step:first-child { padding-left: 0; }
.getting-started-step:last-child { border-right: 0; padding-right: 0; }
.guide-step-number { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 23px; border-radius: 50%; background: #e2ebff; color: #385fa9; font: 12px ui-monospace, monospace; }
.getting-started-step h3 { font-size: 20px; line-height: 1.4; margin-bottom: 14px; font-weight: 600; letter-spacing: -0.035em; }
.getting-started-step > p, .guide-tip p { font-size: 13px; line-height: 1.85; color: var(--text-secondary); }
.getting-started-step code { color: #315aa5; background: #e7eefb; border-radius: 3px; padding: 1px 4px; overflow-wrap: anywhere; font-size: 0.95em; }
.guide-tip { margin-top: 20px; border-top: 1px solid var(--border-light); padding-top: 14px; }
.guide-tip summary { cursor: pointer; font-size: 12px; font-weight: 600; color: #315aa5; line-height: 1.7; }
.guide-tip p { padding-top: 12px; font-size: 12px; }
.getting-started-note { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--border-light); font-size: 12px; color: var(--text-secondary); }
.getting-started-note a { color: #315aa5; text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 1100px) {
  .getting-started-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .getting-started-step { padding: 26px; }
  .getting-started-step:nth-child(2) { border-right: 0; padding-right: 0; }
  .getting-started-step:nth-child(3) { padding-left: 0; }
  .getting-started-step:nth-child(n+3) { border-top: 1px solid var(--border-light); }
  html[lang="en"] .hero-copy { gap: 30px; }
}
@media (max-width: 700px) {
  .demo-agent { border-top-color: var(--border-light); }
  .demo-caption > span + span { color: var(--muted); }
  .getting-started { padding: 48px 0; }
  .getting-started .section-intro p { max-width: none; padding-top: 0; }
  .getting-started-step { padding: 22px 18px; }
  .getting-started-step h3 { font-size: 18px; }
  .getting-started-note { font-size: 11px; line-height: 1.8; }
  html[lang="en"] .hero h1 { font-size: clamp(39px, 8.4vw, 58px); }
  html[lang="en"] .feature h3 { font-size: 29px; }
  html[lang="en"] .ownership h2 { font-size: 36px; }
  html[lang="en"] .platform-note { display: block; margin-left: 0; }
  html[lang="en"] .graph-node { font-size: 10px; padding: 7px 9px; }
}
@media (max-width: 540px) {
  .getting-started-steps { grid-template-columns: 1fr; }
  .getting-started-step, .getting-started-step:first-child, .getting-started-step:last-child { padding: 24px 0; border-right: 0; }
  .getting-started-step + .getting-started-step { border-top: 1px solid var(--border-light); }
  .guide-step-number { margin-bottom: 17px; }
  .getting-started-step h3 { font-size: 21px; }
  .getting-started-step > p { font-size: 14px; }
  html[lang="en"] .section-kicker { letter-spacing: 0.05em; gap: 14px; }
}
.legacy-anchor {
  display: block;
  height: 0;
  scroll-margin-top: 105px;
}