/* Marketing components use ink, white and a restrained beige accent. Product windows keep
   the IndoCerdas paper/ink tokens, independently of their surrounding canvas. */
:root{
  --ui-ink:#161616;
  --ui-charcoal:#232323;
  --ui-paper:#fff;
  --ui-ivory:#f4f1eb;
  --ui-sand:#e6e1d8;
  --ui-beige:#b9b1a2;
  --ui-brass:#777165;
  --ui-slate:#62625f;
  --ui-border:#dedbd5;
}

/* The three fundamentals: two ink panels around one quiet paper panel. */
.legal-pillars .lp-pillar{filter:none;box-shadow:inset 0 0 0 1px #1616160d}
.legal-pillars .lp-reference-art{filter:grayscale(1)}
.lp-reference-art .lp-ref-backdrop{display:none}
.legal-pillars .lp-pillar-telaah{
  background:radial-gradient(ellipse at 10% 0,#ffffff0d,transparent 55%),linear-gradient(155deg,#111,#242424 65%,#363633);
}
.legal-pillars .lp-pillar-susun{
  background:radial-gradient(ellipse at 90% 0,#fff,transparent 65%),linear-gradient(155deg,#f5f3ef,#eae7e1 75%,#e2dcd1);
}
.legal-pillars .lp-pillar-riset{
  background:radial-gradient(ellipse at 100% 100%,#b9b1a214,transparent 65%),linear-gradient(155deg,#171717,#30302e 70%,#45443f);
}
.legal-pillars .lp-pillar-telaah :is(h3,header p),
.legal-pillars .lp-pillar-riset :is(h3,header p){color:#fafaf9}
.legal-pillars .lp-pillar-susun :is(h3,header p){color:#161616}
.lp-pillar-telaah .lp-reference-art text{fill:#fafaf9}
.lp-pillar-telaah .lp-art-analyse{mask-image:linear-gradient(to bottom,transparent 0,transparent 20%,#000 34%,#000 94%,transparent 100%)}
.lp-art-analyse rect[fill="#1789F5"]{fill:#63635f}
.lp-art-analyse rect[fill="#E82C1E"]{fill:#77756e}
.lp-art-analyse rect[fill="#0CC2E2"]{fill:#666662}
.lp-art-analyse rect[fill="#F3AF0F"]{fill:#9b9385}
.lp-art-analyse rect[fill="#41BD21"]{fill:#74746e}
.lp-art-analyse linearGradient stop{stop-color:#fff}
.lp-pillar-telaah .lp-reference-art rect[fill-opacity="0.2"]{fill-opacity:.17}
.lp-pillar-susun .lp-ref-draft-scroll{opacity:.14}
.lp-pillar-susun .lp-ref-draft-scroll text{fill:#55534e}
.lp-pillar-susun .lp-ref-draft-foreground text{fill:#161616}
.lp-pillar-susun .lp-ref-draft-foreground rect[fill="#527AF0"]{fill:#232323}
.lp-pillar-susun .lp-ref-draft-foreground rect[stroke="#527AF0"]{stroke:#d1ccc1}
.lp-pillar-susun .lp-ref-draft-foreground svg{stroke:#66645d!important}
.lp-art-draft stop[stop-color="#618BFF"]{stop-color:#42423f}
.lp-art-draft stop[stop-color="#3559D3"]{stop-color:#202020}
.lp-art-draft stop[stop-color="#97B7DC"]{stop-color:#fff}
.lp-art-draft stop[stop-color="#B0CAE8"]{stop-color:#dedbd3}
#lp-draft-top-fade stop{stop-color:#f0eeea}
.lp-pillar-riset .lp-reference-art text{fill:#fafaf9}
.lp-art-research rect[fill="#6B7EEC"]{fill:#8f887c}
.lp-art-research rect[fill="#3EAEF4"]{fill:#64645f}
.lp-art-research rect[fill="#75D4E5"]{fill:#73736c}
.lp-art-research linearGradient stop{stop-color:#fff}
.legal-pillars .lp-pillar-open:focus-visible{outline-color:#e6e1d8}
.legal-pillars .lp-pillar-susun .lp-pillar-open:focus-visible{outline-color:#161616}

/* Contextual feature explanations use the same paper and ink. */
dialog.pillar-dialog{background:#fff;border-color:var(--ui-border);color:var(--ui-ink)}
.lp-pillar-dialog-head{border-color:var(--ui-border);background:var(--ui-ivory)}
.lp-pillar-panel-preview{background:radial-gradient(ellipse at 0 0,#ffffff16,transparent 70%),linear-gradient(140deg,#202020,#575751 75%,#9b978e)}
.lp-pillar-cta{background:var(--ui-ink);color:#fff}
.lp-pillar-cta:hover{background:#333}
.lp-pillar-panel-copy li:before,.lp-example-paper sup{color:var(--ui-brass)}
.lp-document-examples span{background:var(--ui-ivory);border-color:var(--ui-border);color:#56534e}
.lp-example-paper,.lp-example-library{background:var(--ui-paper);box-shadow:0 15px 35px #16161614}
.pillar-dialog .lp-example-bubble{background:#efeeea;color:#292929}

/* Explanations sit directly on the page. Keep only the dark demo canvas. */
.connected-work :is(.sc-card,.nwf-card,.fd-card){background:transparent;border:0;border-radius:0;box-shadow:none}

/* Depth stays in the presentation canvas, outside the native product UI. */
.source-chat .sc-media,.format-demo .fd-media{
  filter:none;
  background:radial-gradient(ellipse at 100% 100%,#d9d3c766,transparent 65%),linear-gradient(145deg,#202020,#6d6d69 52%,#d9d8d3);
}
.sc-landscape,.fd-landscape{filter:grayscale(1);opacity:.18;mix-blend-mode:luminosity}
/* Alur uses an ink-to-paper grid with a restrained beige connection. */
.native-workflow .nwf-canvas{
  --nwf-bg:#333;
  background-color:#333;
  background-image:radial-gradient(circle,#ffffff5c 1.7px,transparent 1.9px),radial-gradient(ellipse at 95% 100%,#e6e1d842,transparent 65%),linear-gradient(145deg,#202020 0%,#555 42%,#a8a8a3 76%,#e8e7e2 100%);
  background-size:29px 29px,100% 100%,100% 100%;
}
.native-workflow .nwf-node,.native-workflow .nwf-database{filter:none}
.native-workflow :is(.nwf-start,.nwf-database){background:#181818;border-color:#4b4b48;color:#fff}
.native-workflow .nwf-node{background:#fff;border-color:#d8d6d0;color:#55544f}
.native-workflow .nwf-node-icon{background:#f2efea;color:#777165}
.native-workflow .nwf-hop.is-active .nwf-node{background:#181818;color:#fff;border-color:#181818}
.native-workflow .nwf-hop.is-active .nwf-node-icon{background:#ffffff14;color:#e6e1d8}
.native-workflow .nwf-edge{color:#b9b1a2}
.native-workflow .nwf-start-hint{color:#fafaf9}

/* Preserve the native app colors instead of filtering the whole screen. */
.hero-monochrome .ic-unveil-screen{filter:none}

/* Monochrome presentation canvases behind the unchanged product windows. */
.solution-aud-card .ui-motion,.sp-page .sp-ui,.sp-scene,.sp-workspace,
.kb-page .kb-motion-hero .ui-motion{filter:none}
.ui-motion-stage,.kb-page .kb-motion-hero .ui-motion-stage{
  background:radial-gradient(ellipse at 100% 100%,#d9d3c733,transparent 65%),linear-gradient(145deg,#171717,#5a5a57 65%,#a6a49d);
}
.ui-motion-stage:before{filter:grayscale(1);opacity:.12}
.solution-three .solution-aud-card:hover{border-color:#b9b1a2;box-shadow:0 12px 30px #1616160b}

/* Profession pages share the same palette, with distinct contextual panels. */
body.sp-page.sx-page{--sx-paper:#fff;--sx-ink:#1b1b1b;--sx-muted:#666;--sx-line:#dededb;--sx-blue:#1b1b1b}
.sx-page .sx-primary,.sx-page .sx-text-link{background:#161616;border-color:#161616;color:#fff!important}
.sx-page .sx-primary:hover,.sx-page .sx-text-link:hover{background:#333;border-color:#333}
.sx-page .sx-eudia-hero .sx-actions>.sx-text-link{background:transparent;border-color:#e6e1d8;color:#fff!important}
body.sx-page #nav-shell.ic-site-nav .nav-actions .use-app{background:#161616;border-color:#161616;color:#fff}
body.sx-page #nav-shell.ic-site-nav .nav-actions .use-app:hover{background:#333;border-color:#333}
.sx-page .sx-eudia-media{background:#1b1b1b}
.sx-page .sx-eudia-media:before{
  background:radial-gradient(ellipse at 100% 100%,#d9d3c726,transparent 60%),linear-gradient(135deg,#161616,#454543 70%,#77756f);
}
.sx-page .sx-eudia-media-showcase:before{background:linear-gradient(125deg,#161616c9,#b9b1a21a),url('/marketing/assets/indonesia-atlas-monochrome-v1.png') center/cover no-repeat}
.sx-page .sx-feature.sx-reverse .sx-eudia-media:before{background:radial-gradient(ellipse at 100% 5%,#fff 0,transparent 62%),linear-gradient(135deg,#c9c8c3,#eceae5)}
.sx-page .sx-eudia-media:has(.sx-film-sources):before{background:radial-gradient(ellipse at 100% 100%,#b9b1a22b,transparent 60%),linear-gradient(145deg,#171717,#484845 75%,#74736e)}
.sx-page .sx-flow-canvas{background:radial-gradient(#a8a69f80 1px,transparent 1px) 0 0/23px 23px,linear-gradient(130deg,#e5e5e2,#fafaf9)}
.sx-page .sx-flow-origin,.sx-page .is-active .sx-flow-node{background:#181818;border-color:#181818;color:#fff}
.sx-page .sx-flow-node{border-color:#d8d6d0;background:#fff;color:#55544f}
.sx-page .sx-flow-edge{color:#a8a296}
.sx-page .sx-flow-edge:before{background:#b9b1a2}
.sx-page .sx-flow-result{background:#fffffff0;border-color:#dedbd5;color:#333}
.sx-page .sx-task-grid{background:#fff;border-color:#dedbd5}
.sx-page .sx-task{border-color:#dedbd5}.sx-page .sx-task:hover{background:#f4f1eb}
.sx-page .sx-doc-dialog{background:#fff;border-color:#dedbd5;color:#161616}
.sx-page .sx-doc-dialog>header{background:#faf9f6;border-color:#dedbd5;color:#66645e}
.sx-page .sx-doc-dialog blockquote{background:#f4f1eb;border-color:#b9b1a2;color:#333}
.sx-page .sx-closing{background:#171717}
.sx-page .sx-closing:before{background:radial-gradient(ellipse at 90% 100%,#b9b1a21a,transparent 55%),linear-gradient(135deg,#111,#30302e)}

/* Pustaka keeps white page surfaces; warmth stays in its outer canvas. */
.kb-page .kb-motion-hero{background:#fff;border-color:#dedbd5;box-shadow:0 16px 40px #1616160d,0 0 0 3px #f4f1eb80}
.kb-page .kb-steps article{background:#fff;border-color:#dedbd5}
.kb-page .kb-steps article:nth-child(2){background:#f4f1eb}
.kb-page .kb-source-list a:hover{background:#f4f1eb}
.kb-page .kb-source-list em{color:#777165}
.kb-page .kb-hero>.kb-link{background:#161616;border-color:#161616;color:#fff}

/* Native IndoCerdas tokens, from the product's globals.css. These are scoped
   to app windows, so marketing backgrounds cannot recolor their contents. */
:is(.native-product-demo,.sc-media,.fd-media,.ui-motion-stage,.sx-native,.sc-source-dialog,.fd-document-dialog){
  --ic-paper:#fff;
  --ic-ground:#f7f7f5;
  --ic-ground2:#efefec;
  --ic-ink:#161719;
  --ic-muted:#6b6f76;
  --ic-line:#dcddd9;
  --ic-line-soft:#eaebe7;
  --ic-good:#1f6f6b;
  --ic-good-soft:#e4efed;
  --ic-warn:#9a6a12;
  --ic-warn-soft:#f6ecd9;
}

/* The sourced-chat illustration uses frosted glass over its dark canvas. */
.sc-app{background:linear-gradient(145deg,#ffffff66,#ffffff24);border-color:#ffffff70;box-shadow:0 18px 44px #16171920;color:var(--ic-ink);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.sc-app-head,.sc-app-head>span{color:var(--ic-ink)}
.sc-app-head .sc-source-count{background:#ffffff80;color:#42464c;border-color:#ffffff80}
.sc-result{background:#ffffff75;border-color:#ffffff8c;box-shadow:0 3px 12px #16171906}
.sc-result-title h3,.sc-empty h3{color:var(--ic-ink)}
.sc-result>p,.sc-empty p{color:#35383d}
.sc-result-title>span,.sc-result:nth-child(2) .sc-result-title>span,.sc-result:nth-child(3) .sc-result-title>span,
.sc-empty>span{background:#ffffff4d;color:#42464c;border-color:#ffffff70}
.sc-citation{background:#ffffff73;color:#42464c;border-color:#ffffff80}
.sc-citation:hover{background:#ffffffb3;border-color:var(--ic-ink);color:var(--ic-ink)}
.sc-composer{background:#ffffffa3;border-color:#ffffff8c;color:var(--ic-ink)}
.sc-caret{background:var(--ic-ink)}
.sc-send{background:var(--ic-ink);color:var(--ic-paper)}
.sc-send:disabled{background:#a5a7a2}
.sc-composer-footer>span,.sc-reading>span{color:#42464c}
.sc-reading i{background:#42464c}
.sc-source-dialog{background:#fff;border-color:#dcddd9;color:#161719}
.sc-source-dialog>header>span,.sc-source-panel :is(.sc-source-origin,.sc-source-part,.sc-source-note),.sc-source-panel>small{color:#6b6f76}
.sc-source-panel h2{color:#161719}
.sc-source-dialog>nav>button{color:#6b6f76;border-color:#dcddd9}
.sc-source-dialog>nav>button[aria-selected=true]{background:#efefec;color:#161719;border-color:#dcddd9}
.sc-source-panel blockquote{color:#161719;background:#f7f7f5;border-color:#dcddd9}
.sc-original{color:#161719;border-color:#dcddd9}

.ic-unveil .native-product-demo .case-memo-paper{background:var(--ic-paper);border-color:var(--ic-line);color:var(--ic-ink)}
.ic-unveil .native-product-demo .case-memo-paper :is(h2,h3){color:var(--ic-ink)}
.ic-unveil .native-product-demo .case-memo-paper section p{color:var(--ic-muted)}
.ic-unveil .native-product-demo .case-source-reference strong{color:var(--ic-ink)}
.ic-unveil .native-product-demo .case-source-list p,.ic-unveil .native-product-demo .case-source-excerpt{color:var(--ic-muted)}

/* Format: the chat stays neutral; state colors have their product meaning. */
.fd-app{background:#fffffff5;border-color:#ffffffd9;box-shadow:0 18px 44px #16171920;color:var(--ic-ink)}
.fd-app-head{background:var(--ic-paper);color:var(--ic-ink);border-color:var(--ic-line-soft)}
.fd-app-head .fd-format-badge{background:var(--ic-ground);color:var(--ic-muted);border-color:var(--ic-line)}
.fd-chat{background:var(--ic-paper);border-color:var(--ic-line-soft)}
.fd-chat>header,.fd-chat-presence,.fd-message>header,.fd-message-user>header{color:var(--ic-muted)}
.fd-message{background:var(--ic-paper);border-color:var(--ic-line-soft)}
.fd-message-user{background:var(--ic-ground2);border-color:var(--ic-line-soft)}
.fd-message p{color:var(--ic-ink)}
.fd-message[data-typing=true] p:after{background:var(--ic-ink)}
.fd-chat>footer{background:var(--ic-paper);color:var(--ic-muted)}
.fd-editor{background:var(--ic-ground2);border-color:var(--ic-line-soft)}
.fd-editor>header,.fd-editor>footer{background:var(--ic-ground);color:var(--ic-muted)}
.fd-preview-open{background:var(--ic-paper);border-color:var(--ic-line);color:var(--ic-muted)}
.fd-paper{background:var(--ic-paper);border-color:var(--ic-line);color:var(--ic-ink);box-shadow:0 6px 16px #16171908}
.fd-paper :is(h4,h5),.fd-document-row dd{color:var(--ic-ink)}
.fd-paper-meta,.fd-paper .fd-paper-subtitle,.fd-document-row dt,.fd-paper .fd-bap-question,.fd-signatures,.fd-signatures small{color:var(--ic-muted)}
.fd-field[data-state=empty],.fd-paper .fd-document-missing{background:var(--ic-ground);border-color:var(--ic-line);color:var(--ic-muted)}
.fd-field[data-state=writing]{background:var(--ic-warn-soft);border-color:#e8d6af;color:var(--ic-ink);box-shadow:0 0 0 2px #f6ecd955}
.fd-field[data-state=writing]:after{background:var(--ic-warn)}
.fd-field[data-state=revised]{background:var(--ic-good-soft);border-color:#c7ddd7;color:var(--ic-ink)}
.format-demo:is([data-fd-phase=filling],[data-fd-phase=revision]) .fd-edit-indicator{background:var(--ic-warn);box-shadow:0 0 0 3px var(--ic-warn-soft)}
.fd-stages{background:#ffffffb3}
.fd-stages>button{color:var(--ic-muted)}
.fd-stages>button[aria-current=step]{background:var(--ic-ground2);border-color:var(--ic-line);color:var(--ic-ink)}
.fd-document-dialog{background:#f7f7f5;border-color:#dcddd9;color:#161719}
.fd-document-dialog>header{background:#fff}
.fd-document-dialog>header h2{color:#161719}
.fd-document-dialog>footer{background:#f7f7f5;color:#6b6f76}

/* Smaller product windows retain the same app palette on every route. */
.ui-motion-stage .ui-glass>div{background:var(--ic-paper);border-color:var(--ic-line)}
.ui-motion-stage .ui-source-badge{background:var(--ic-ground2);color:var(--ic-ink)}
.ui-motion-stage .ui-source-row{color:var(--ic-ink)}
.ui-motion-stage .ui-source-row[data-selected=true]{background:var(--ic-ground2)}
.ui-motion-stage .ui-source-row small{color:var(--ic-muted)}
.ui-motion-stage .ui-source-row[data-selected=true] .ui-switch{background:var(--ic-ink);border-color:var(--ic-ink)}
.ui-motion-stage .ic-window-rail{background:#eeefeb;border-color:#dfe0da;color:var(--ic-muted)}
.ui-motion-stage .ic-window-rail .is-current{background:#e0e3d9;color:#30392a}
.ui-motion-stage .ic-window-rail>b{background:#dae0cf;color:#535e43}
.ui-motion-stage .ic-window-bar{background:var(--ic-paper);border-color:var(--ic-line-soft)}
.ui-motion-stage .ic-window-bar>span,.ui-motion-stage .ic-library-head p{color:var(--ic-muted)}
.ui-motion-stage :is(.ic-library-search,.ic-library-row i){border-color:var(--ic-line);color:var(--ic-muted)}
.ui-motion-stage .ic-library-folders>div{background:var(--ic-ground);border-color:var(--ic-line)}
.ui-motion-stage :is(.ic-library-table-head,.ic-library-row small,.ic-library-row em,.ic-library-row>svg){color:var(--ic-muted)}
.ui-motion-stage .ic-library-row[data-library-row="0"]{background:var(--ic-ground2)}
.ui-motion-stage .ic-library-reader{background:var(--ic-ground2);border-color:var(--ic-line);box-shadow:0 0 0 5px #ffffff4d,0 20px 40px #16171920}
.ui-motion-stage .ic-library-reader>article{background:var(--ic-paper);border-color:var(--ic-line)}
.ui-motion-stage .ic-library-reader article>small,.ui-motion-stage .ic-library-reader>footer{color:var(--ic-muted)}
.ui-motion-stage :is(.ic-source-origin,.ic-project-result,.ic-case-finding){background:var(--ic-paper);border-color:var(--ic-line);box-shadow:0 0 0 5px #ffffff4d,0 16px 35px #16171920}
.ui-motion-stage :is(.ic-source-origin,.ic-project-result,.ic-case-finding) :is(small,span,p,svg){color:var(--ic-muted)}
.ui-motion-stage .ic-upload-popover{background:var(--ic-paper);border-color:var(--ic-line);box-shadow:0 0 0 6px #ffffff4d,0 27px 50px #16171920}
.ui-motion-stage .ic-upload-drop{background:var(--ic-ground);border-color:var(--ic-line)}
.ui-motion-stage .ic-upload-drop :is(small,span,svg){color:var(--ic-muted)}
.ui-motion-stage .ic-upload-track{background:var(--ic-line-soft)}
.ui-motion-stage .ic-upload-track i{background:var(--ic-ink)}
.ui-motion-stage .ic-memo-layout{background:var(--ic-ground2)}
.ui-motion-stage .ic-memo-layout section>header{background:var(--ic-ground)}
.ui-motion-stage .ic-memo-layout aside>div{background:var(--ic-ground);border-color:var(--ic-line)}
.ui-motion-stage .ic-memo-layout article{background:var(--ic-paper);border-color:var(--ic-line)}
.ui-motion-stage .ic-memo-layout :is(small,p,.ic-memo-meta){color:var(--ic-muted)}
.ui-motion-stage .ic-memo-layout article h3{color:var(--ic-ink)}
.ui-motion-stage .ic-memo-layout article>p:first-of-type{background:var(--ic-warn-soft)}

/* Profession scenes use the native white sidebar and black IndoCerdas mark. */
.sx-page .sx-native{border-color:var(--ic-line);box-shadow:0 0 0 1px #ffffff66;color:var(--ic-ink)}
.sx-page .sx-native-rail{background:#eeefeb;border-color:#dfe0da}
.sx-page .sx-native-rail>img{filter:none}
.sx-page .sx-native-rail>span{color:var(--ic-muted)}
.sx-page .sx-native-rail>span.is-current{color:var(--ic-ink)}
.sx-page .sx-native-rail>b{background:#dae0cf;color:#535e43}
.sx-page .sx-native-bar,.sx-page .sx-film-controls{background:var(--ic-paper);border-color:var(--ic-line-soft);color:var(--ic-ink)}
.sx-page .sx-film-controls button[aria-pressed=true]{background:var(--ic-ground2);color:var(--ic-ink)}
.sx-page .sx-film-controls button>i{background:var(--ic-ink)}
.sx-page .sx-intake-file{background:var(--ic-ground);border-color:var(--ic-line)}
.sx-page .sx-input{background:var(--ic-paper);border-color:var(--ic-line);box-shadow:0 0 0 4px #efefec80}
.sx-page .sx-cite{background:var(--ic-ground);border-color:var(--ic-line);color:var(--ic-muted)}
.sx-page .sx-source-browser>aside{background:var(--ic-ground);border-color:var(--ic-line-soft)}
.sx-page .sx-source-browser>aside button[aria-pressed=true]{background:var(--ic-ground2);border-color:var(--ic-line);color:var(--ic-ink)}
.sx-page .sx-source-page blockquote{background:var(--ic-ground2);border-color:var(--ic-line);color:var(--ic-ink)}
.sx-page .sx-editor>aside{background:var(--ic-paper);border-color:var(--ic-line-soft)}
.sx-page .sx-editor-user{background:var(--ic-ground2);color:var(--ic-ink)}
.sx-page .sx-format-choice{background:var(--ic-ground);border-color:var(--ic-line);color:var(--ic-ink)}
.sx-page .sx-editor-paper{background:var(--ic-ground2)}
.sx-page .sx-editor-paper>header{background:var(--ic-ground);border-color:var(--ic-line)}
.sx-page .sx-paper{background:var(--ic-paper);border-color:var(--ic-line)}
.sx-page .sx-paper-section p{color:var(--ic-muted)}

@media(max-width:760px){
  .native-workflow .nwf-canvas{background-size:25px 25px,100% 100%,100% 100%}
}

/* Keep the presentation focused on its headings, explanation and automatic demo.
   Playback nodes stay mounted so the existing animation scripts keep working. */
.connected-work-head>div>p,
.work-card-index,.hero-how-eyebrow,.kb-eyebrow,.sx-kicker,
.sc-send,.sc-simulation,.fd-media-foot,.ui-scene-note,.ui-motion-toggle,
.case-demo-controls,.case-simulation-label,.product-history-note,#demo-pause,#case-replay,#reset-example,
.sx-sim-label,[data-film-pause],[data-film-reset],
.fd-example-label,.fd-copy-bottom>ol,.fd-copy-bottom>a,
.sx-showcase-meta,.sx-role-bar,.sx-benefits,.sx-related,
.sx-questions-section article>small,.sx-feature-checks article>span,
.sx-bento-grid>article>span,.sx-task>span{display:none!important}

#demo-workspace.native-product-demo .screen-main{grid-template-rows:48px minmax(0,1fr)}

/* Reclaim the space previously reserved for the Format playback bar. */
.format-demo .fd-app{bottom:18px}
.format-demo .fd-work-area{padding:8px}
.sx-page .sx-feature-copy>h2:first-of-type{margin-top:0}
.sx-page .sx-questions-section :is(header h2,article h3),
.sx-page .sx-bento-grid h3,.sx-page .sx-task h3{margin-top:0}
.kb-page .kb-hero h1{margin-top:0}

/* Filevine reference: 1170 x 650 card, 1:2 columns, 48px copy and 16px media inset.
   IndoCerdas keeps its approved copy, native UI and ink/paper presentation colors. */
.connected-work :is(.source-chat,.native-workflow,.format-demo){
  padding:0 max(24px,calc((100% - 1170px)/2)) 96px;
  background:transparent;
}
.connected-work :is(.sc-card,.nwf-card,.fd-card){
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  aspect-ratio:1170/650;padding:0;gap:0;min-height:0;
  background:#fff;border:0;border-radius:16px;
  box-shadow:0 20px 60px #1616160a;overflow:hidden;
}
.connected-work :is(.sc-copy,.nwf-copy,.fd-copy){
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:48px;gap:0;min-width:0;
}
.connected-work :is(.sc-copy,.nwf-copy,.fd-copy) h2{
  font:400 32px/1.2 var(--ic-sans,HeroSons,Arial,sans-serif);
  letter-spacing:-.025em;margin:0 0 16px;color:var(--ic-ink,#242424);
}
.connected-work :is(.sc-copy,.nwf-copy,.fd-copy) h2 br{display:initial}
.connected-work :is(.sc-copy,.nwf-copy,.fd-copy)>div>p{
  font:400 16px/1.6 var(--ic-sans,HeroSons,Arial,sans-serif);
  margin:0;max-width:none;color:#383836;
}
.connected-work :is(.sc-media,.nwf-canvas,.fd-media){
  align-self:stretch;aspect-ratio:auto;min-height:0;max-height:none;
  width:calc(100% - 32px);height:calc(100% - 32px);margin:16px;
  padding:0;border-radius:12px;
}
.connected-work .motion-wide-stage{height:800px}

/* The workflow grows down its canvas. Its camera follows the active card. */
.connected-work .nwf-start{
  width:380px;max-width:calc(100% - 80px);height:118px;
  padding:0 40px;border-radius:16px;gap:24px;
  font:400 26px/1.25 var(--ic-sans,HeroSons,Arial,sans-serif);
}
.connected-work .nwf-start-plus>svg{width:27px;height:27px}
.connected-work .nwf-start-hint{display:none}
.connected-work .nwf-path-window{
  inset:0;overflow-x:hidden;overflow-y:auto;scroll-padding:0;
  overscroll-behavior-y:contain;scrollbar-width:none;
}
.connected-work .nwf-rail{
  display:flex;flex-direction:column;align-items:center;
  width:100%;height:max-content;min-height:100%;
  padding:96px 0 320px;margin:0;gap:0;
}
.connected-work .nwf-origin{flex:none;animation:nwf-origin-in .6s cubic-bezier(.2,.7,.15,1) both}
.connected-work .nwf-database{
  width:380px;min-height:100px;gap:18px;padding:22px 30px;
  border-radius:14px;font:400 24px/1.25 var(--ic-sans,HeroSons,Arial,sans-serif);
}
.connected-work .nwf-database>svg{width:26px;height:29px}
.connected-work .nwf-database small{font-size:14px;margin-top:6px}
.connected-work .nwf-hop{display:flex;flex-direction:column;align-items:center;flex:none;width:100%}
.connected-work .nwf-edge{position:relative;width:20px;height:60px;flex:none;color:#c8c1b3}
.connected-work .nwf-edge>svg{
  display:block;width:20px;height:60px;stroke-width:1.8;
  stroke-dasharray:60;stroke-dashoffset:60;overflow:visible;
}
.connected-work .nwf-edge:before{
  content:'';position:absolute;z-index:2;top:-7px;left:3px;
  width:14px;height:14px;box-sizing:border-box;border:1.5px solid #c8c1b3;
  border-radius:50%;background:#faf9f5;opacity:0;transition:opacity .25s;
}
.connected-work .nwf-hop.is-revealed .nwf-edge:before{opacity:1}
.connected-work .nwf-node{
  display:flex;flex-direction:column;align-items:stretch;
  width:560px;min-height:156px;padding:24px;gap:18px;
  border:1px solid #d8d2c6;border-radius:12px;background:#fffffff0;
  color:#292927;box-shadow:0 8px 28px #16161608;
  transform:translateY(20px);
}
.connected-work .nwf-node-head{display:flex;align-items:center;gap:14px}
.connected-work .nwf-node-head>small{
  display:grid;place-items:center;flex:none;width:30px;height:30px;
  margin:0;background:#252524;border-radius:6px;color:#fff;
  font:400 12px/1 Geist,Arial,sans-serif;letter-spacing:0;
}
.connected-work .nwf-node b{
  font:400 24px/1.25 var(--ic-sans,HeroSons,Arial,sans-serif);
  letter-spacing:-.02em;white-space:normal;
}
.connected-work .nwf-node-instruction{
  display:flex;flex-direction:column;gap:7px;padding:14px 16px;
  border:1px solid #e5e0d6;border-radius:8px;background:#f5f3ed;
  color:#4a4740;
}
.connected-work .nwf-node-instruction>small{
  margin:0;color:#898174;font:400 12px/1.3 Geist,Arial,sans-serif;letter-spacing:0;
}
.connected-work .nwf-node-instruction>span{font:400 17px/1.45 Geist,Arial,sans-serif}
.connected-work .nwf-node-check{
  position:static;flex:none;margin-left:auto;width:23px;height:23px;
  border-color:#d1caba;background:#f5f2e9;color:#817969;font-size:12px;
}
.connected-work .nwf-node[aria-current=step]{background:#202020;border-color:#cec4b1;color:#fff;box-shadow:0 12px 32px #00000014}
.connected-work .nwf-node[aria-current=step] .nwf-node-head>small{background:#e9e3d8;color:#292723}
.connected-work .nwf-node[aria-current=step] .nwf-node-instruction{background:#ffffff0d;border-color:#ffffff1c;color:#f2eee7}
.connected-work .nwf-node[aria-current=step] .nwf-node-instruction>small{color:#bcb4a5}
.connected-work .nwf-hop.is-revealed .nwf-node{transform:translateY(0);animation:nwf-node-in .4s ease both}
.connected-work .nwf-hop.is-revealed .nwf-edge>svg{animation:nwf-edge-in .4s ease both}
@keyframes nwf-origin-in{from{transform:translateY(200px);opacity:.2}to{transform:translateY(0);opacity:1}}
@keyframes nwf-node-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes nwf-edge-in{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}

@media(max-width:1200px) and (min-width:901px){
  .connected-work :is(.sc-copy,.nwf-copy,.fd-copy){padding:36px}
  .connected-work :is(.sc-copy,.nwf-copy,.fd-copy) h2{font-size:29px}
  .connected-work :is(.sc-copy,.nwf-copy,.fd-copy)>div>p{font-size:15px}
}
@media(max-width:900px){
  .connected-work :is(.source-chat,.native-workflow,.format-demo){padding:0 24px 48px}
  .connected-work :is(.sc-card,.nwf-card,.fd-card){display:flex;flex-direction:column;aspect-ratio:auto;border-radius:16px}
  .connected-work :is(.sc-copy,.nwf-copy,.fd-copy){padding:28px 28px 32px;display:block}
  .connected-work :is(.sc-copy,.nwf-copy,.fd-copy) h2{font-size:30px;max-width:540px}
  .connected-work :is(.sc-copy,.nwf-copy,.fd-copy)>div>p{font-size:16px;max-width:600px}
  .connected-work :is(.sc-media,.nwf-canvas,.fd-media){
    width:calc(100% - 24px);height:auto;aspect-ratio:6/5;min-height:0;
    margin:0 12px 12px;align-self:auto;border-radius:10px;
  }
}
@media(max-width:480px){
  .connected-work :is(.sc-copy,.nwf-copy,.fd-copy){padding:26px 24px 28px}
  .connected-work :is(.sc-copy,.nwf-copy,.fd-copy) h2{font-size:28px}
  .connected-work :is(.sc-copy,.nwf-copy,.fd-copy)>div>p{font-size:15px;line-height:1.55}
}
@media(prefers-reduced-motion:reduce){
  .connected-work .native-workflow *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Filevine's compact floating response stack, using the existing IndoCerdas colors.
   Only the sourced-chat illustration changes; section copy and the full app stay intact. */
.source-chat .sc-app{
  inset:50px 180px;display:flex;flex-direction:column;gap:0;
  border:0;border-radius:0;background:transparent;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;overflow:visible;
}
.source-chat .sc-response-panel{
  position:relative;display:flex;flex-direction:column;flex:1;min-height:0;
  box-sizing:border-box;border:1px solid #ffffff70;border-radius:24px;
  background:linear-gradient(145deg,#ffffff66,#ffffff24);
  box-shadow:0 18px 44px #16171920;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);overflow:hidden;
  transition:opacity .4s ease,transform .65s cubic-bezier(.2,.7,.2,1);
}
.source-chat[data-sc-phase=typing] .sc-response-panel{opacity:0;transform:translateY(80px);pointer-events:none}
.source-chat .sc-app-head{padding:20px 22px 16px;gap:16px}
.source-chat .sc-app-head>span{gap:10px;font:500 18px/1.3 Geist,Arial,sans-serif;letter-spacing:-.025em}
.source-chat .sc-app-head img{width:26px;height:26px}
.source-chat .sc-app-head .sc-source-count{min-height:34px;padding:6px 10px;gap:6px;border-radius:8px;font-size:12px;line-height:20px}
.source-chat .sc-source-count svg{width:15px;height:15px}
.source-chat .sc-transcript{padding:0 12px 12px;scrollbar-width:none;overflow-x:hidden}
.source-chat .sc-results{display:flex;flex-direction:column;gap:10px;min-height:100%}
.source-chat .sc-result{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:16px 18px;border-radius:16px;box-shadow:0 3px 12px #16171906;
  animation:sc-filevine-card-in .45s cubic-bezier(.2,.7,.2,1) both;
}
.source-chat .sc-result-title{gap:10px;margin-bottom:8px}
.source-chat .sc-result-title>span{width:24px;height:24px;border-radius:6px;font-size:10px}
.source-chat .sc-result-title h3{font:500 17px/1.3 Geist,Arial,sans-serif;letter-spacing:-.02em}
.source-chat .sc-result>p{font:400 14px/1.5 Geist,Arial,sans-serif}
.source-chat .sc-citation{align-self:flex-start;min-height:30px;padding:4px 8px;margin-top:10px;gap:6px;border-radius:6px;font:400 11px/1.4 Geist,Arial,sans-serif}
.source-chat .sc-citation>svg{width:13px;height:13px}
.source-chat .sc-citation>svg:last-child{width:12px;height:12px;margin-left:4px}
.source-chat .sc-citation-index{min-width:15px;height:15px;font-size:8px;border-radius:3px}
.source-chat .sc-composer{
  flex:none;min-height:138px;padding:20px 22px;border:1px solid #ffffff8c;
  border-radius:20px;box-shadow:0 18px 44px #16171920;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  transform-origin:center;transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.source-chat[data-sc-phase=typing] .sc-composer{transform:translateY(-280px) scale(1.25)}
.source-chat .sc-question{font:400 16px/1.45 Geist,Arial,sans-serif;letter-spacing:-.015em;min-height:68px}
.source-chat .sc-caret{height:18px;vertical-align:-3px}
.source-chat .sc-composer-footer{margin-top:12px;gap:14px}
.source-chat .sc-composer-footer>span{font:400 11px/1.4 Geist,Arial,sans-serif;max-width:none}
.source-chat .sc-send{width:36px;height:36px}
.source-chat .sc-send svg{width:19px;height:19px}
.source-chat .sc-empty{padding:30px}
.source-chat .sc-empty>span{width:48px;height:48px;border-radius:12px;margin-bottom:20px}
.source-chat .sc-empty>span>svg{width:26px;height:26px}
.source-chat .sc-empty h3{font-size:27px;line-height:1.15;margin-bottom:12px}
.source-chat .sc-empty p{font-size:15px;line-height:1.55;max-width:340px}
.source-chat .sc-reading i{width:6px;height:6px}
.source-chat .sc-reading>span{font-size:15px;margin-top:18px}
@keyframes sc-filevine-card-in{
  from{opacity:0;transform:translateY(22px) scale(.97);filter:blur(2px)}
  to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
@media(max-width:900px){
  .source-chat .sc-app{inset:42px 140px}
}
@media(prefers-reduced-motion:reduce){
  .source-chat .sc-result{animation:none}
  .source-chat .sc-response-panel,.source-chat .sc-composer{transition:none}
}