/* Public product / fictional case experience. No dependencies, filters or loops. */
.marketing-experience{--ink:#e4edf3;--muted:#abbfcd;--line:#91afc32c;--blue:#b5d7e1;--pale:#172936;--shadow:0 18px 48px #02081238;color-scheme:dark;background:radial-gradient(ellipse at 85% 8%,#233f4b66,transparent 32%),linear-gradient(155deg,#0c1722,#10202c 55%,#0b1620);color:var(--ink)}
.marketing-experience .wrap{width:min(1180px,calc(100% - 48px))}
.marketing-experience a{text-underline-offset:4px}
.marketing-experience :is(a,button,input,select,summary):focus-visible{outline:2px solid #b6dfe5;outline-offset:4px}
.marketing-experience [hidden]{display:none!important}
.marketing-experience :is(section,[id]){scroll-margin-top:112px}
.marketing-experience .nav{position:relative;z-index:4;min-height:82px;border-bottom:1px solid var(--line);gap:24px;padding:16px 0}
.marketing-experience .brand{color:#edf4f8;text-decoration:none;letter-spacing:-.5px;flex-shrink:0}
.marketing-experience :is(.brand-mark,.mark){background:linear-gradient(140deg,#7899af,#324e64);box-shadow:inset 0 1px 0 #d4e6f755;border:1px solid #accbda66;color:#eaf4f6}
.marketing-experience .nav-links{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:flex-end}
.marketing-experience .nav-links a{color:#b7cad6;font-size:13px;display:inline-flex!important;align-items:center;min-height:40px}
.marketing-experience .nav-links a[aria-current=page]{color:#ecf6f8;border-bottom:1px solid #b9d9e2}
.marketing-experience .nav-links .btn{min-height:40px;color:#172e3b;font-weight:600}
.marketing-experience .btn{font-size:14px;border-radius:10px;font-weight:600;transition:background .18s,border-color .18s,transform .18s}
.marketing-experience .primary{background:linear-gradient(125deg,#c7e0e7,#9bbfce);color:#132b39;box-shadow:inset 0 1px #fff7,0 8px 20px #02070e33}
.marketing-experience .secondary{background:#294454;color:#def0f5;border:1px solid #83a6b959;box-shadow:none}
.marketing-experience .outline{background:#162936;color:#b9ceda;border-color:#7f9fb342}
.marketing-experience .btn:hover{border-color:#c2dde0;background-color:#355365}
.marketing-experience .hero{gap:64px;padding:66px 0 52px}
.marketing-experience .hero h1{font-size:clamp(36px,4.7vw,60px);font-weight:600;line-height:1.22;letter-spacing:-2px;margin:20px 0}
.marketing-experience .hero h1 span{color:#a8ced8}
.marketing-experience :is(.lead,.hero>p){color:#afc3d1;font-size:17px;line-height:1.95}
.marketing-experience :is(.eyebrow,.badge){background:#729aae14;border:1px solid #97bec92c;color:#b2d1d7;font-size:12px;letter-spacing:.5px;font-weight:500}
.marketing-experience .hero-actions{gap:10px;margin:24px 0 14px}
.marketing-experience .next-link{font-size:13px;color:#b8d6df;font-weight:500}
.marketing-experience :is(.micro,.metric small){color:#9bb1c0;font-size:12px}
.marketing-experience .journey{color:#9eb7c7;font-size:12px;margin:20px 0 8px}
.marketing-experience .journey b{color:#d4e4eb;font-weight:500}
.marketing-experience .demo-card{position:relative;padding:26px;overflow:visible;border-radius:20px;background:linear-gradient(140deg,#304958e6,#1a2f3ee6 65%,#18313de8);border:1px solid #a5c6d159;border-top-color:#bad5df80;box-shadow:inset 0 1px #def5ff17,0 30px 60px #02091255;transform:perspective(1100px) rotateY(-5deg) rotateX(2deg)}
.marketing-experience .demo-card::after{inset:10px -10px -10px 10px;width:auto;height:auto;z-index:-1;border-radius:20px;border:1px solid #789ca637;background:#1b2d38;pointer-events:none}
.marketing-experience .demo-card h2{font-size:22px;font-weight:500;margin:16px 0 8px}
.marketing-experience .demo-card p{font-size:13px;color:#b2c7d3}
.demo-topline{display:flex;justify-content:space-between;align-items:center;font:10px/1.8 Consolas,monospace;letter-spacing:1px;color:#a8c0cf;gap:10px}
.demo-topline span:last-child{font-family:inherit;font-size:11px;line-height:1.5;letter-spacing:0;padding:3px 7px;border:1px solid #afc3c534;border-radius:6px;color:#c0d6d9}
.demo-tabs{display:flex;gap:4px;border-bottom:1px solid #9dbbc32c;margin:20px 0 0;padding:0 0 9px}
.demo-tabs button{flex:1;border:0;background:none;color:#a9bdcb;padding:10px 6px;min-height:40px;font:inherit;font-size:12px;line-height:1.5;border-radius:7px;cursor:pointer}
.demo-tabs button[aria-selected=true]{background:#9abfce22;color:#e3f1f4}
.demo-pane{min-height:316px;padding-top:3px}
.marketing-experience .file-stack{gap:9px;margin-top:18px}
.marketing-experience .file{border-color:#9cbdcd33;background:#7093a712;padding:12px}
.marketing-experience .file-icon{background:#90b3c31a;color:#c2dee7;border:1px solid #95b8c53b;border-radius:8px;font-size:10px}
.marketing-experience .file b{font-size:14px;font-weight:500}
.marketing-experience .file small{color:#9db5c5;font-size:11px}
.demo-stat{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 0;border-bottom:1px solid #99bac327;font-size:12px;color:#b2c8d4}
.demo-stat b{font-size:22px;color:#d9eef2;font-weight:500;font-variant-numeric:tabular-nums}.demo-stat small{font-size:11px;color:#9ab5c3;font-weight:400}
.demo-checks{list-style:none;padding:0;margin:18px 0}.demo-checks li{padding:11px 0 11px 19px;border-bottom:1px solid #99bac327;position:relative;font-size:13px;color:#c4d6df}.demo-checks li::before{content:'';width:5px;height:5px;background:#92bdbd;border-radius:50%;position:absolute;left:0;top:22px}
.demo-footlink{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #9dbbc32c;margin-top:16px;padding-top:17px;font-size:12px;text-decoration:none;color:#c1dce4}
.experience-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:34px}
.experience-link{border:1px solid var(--line);border-radius:14px;padding:21px 23px;text-decoration:none;background:linear-gradient(125deg,#35516045,#14263380);transition:border-color .18s}
.experience-link:hover{border-color:#93b6c375}.experience-link small{display:block;font:10px/1.8 Consolas,monospace;letter-spacing:1.5px;color:#91afbf}.experience-link strong{display:block;font-size:18px;font-weight:500;margin:7px 0}.experience-link p{margin:0;color:#a5bbc9;font-size:13px}
.marketing-experience .section{padding:58px 0;background:transparent!important}
.marketing-experience .section-head{text-align:left;margin:0 0 30px;max-width:760px}
.marketing-experience .section h2{font-size:clamp(26px,3vw,36px);font-weight:500;letter-spacing:-.8px}
.marketing-experience .section-head p,.marketing-experience .section-lead{font-size:15px;color:#a9bfcd}
.section-label{font:10px/1.8 Consolas,monospace;letter-spacing:2px;color:#8facbd;margin-bottom:12px;display:block}
.marketing-experience :is(.card,.step,.metric,.panel,.request-panel){background:linear-gradient(140deg,#30475466,#182c398c);border:1px solid var(--line);box-shadow:inset 0 1px #b4d3e50c;border-radius:16px}
.marketing-experience .card h3{font-size:20px;font-weight:500}.marketing-experience :is(.card p,.step p){font-size:14px;color:#abc0ce}
.marketing-experience .card .num,.marketing-experience .step strong{color:#99c2cb;font-weight:500}.marketing-experience .step .step-action{color:#b7dbe3}
.marketing-experience .audiences{justify-content:flex-start}.marketing-experience .chip{color:#b8ced8;background:#789db112;border-color:var(--line);font-size:13px;font-weight:400}
.marketing-experience .cta{background:linear-gradient(125deg,#345462aa,#193243);border:1px solid #9cbec63d;box-shadow:none;grid-template-columns:1fr}
.marketing-experience .cta p{color:#b4ccd7;font-size:14px}.marketing-experience :is(.cta-actions,.cta .actions){justify-content:flex-start}
.marketing-experience .proof .card{min-height:0}.marketing-experience .quote{color:#d5e7ed;font-size:17px;font-weight:500;margin:12px 0}.marketing-experience .proof .hero-actions .btn{font-size:12px;padding:8px 12px}
.marketing-experience .request-head h2{font-size:30px}.marketing-experience .request-head p{font-size:14px}.marketing-experience .request-badge{background:#80aeaa16;color:#b6d7d2;border:1px solid #83a9a542}
.marketing-experience .field label{color:#c6d7e0}.marketing-experience .control{background:#122532;color:#e0edf2;border-color:#789aaa55;font-size:14px}.marketing-experience .control::placeholder{color:#91a9b9}.marketing-experience .control:focus{outline:2px solid #9ac9d4;border-color:#a2ccd6}
.marketing-experience :is(.consent,.request-status){color:#acc3cf}.marketing-experience .request-status.success{color:#afd8c6}
.marketing-experience .share-box{background:#203744;border:1px solid var(--line)}.marketing-experience .share-box p{color:#b4c9d7;font-size:13px}
.marketing-experience .faq details{background:#172b3880;border-color:var(--line)}.marketing-experience .faq summary{font-size:15px;font-weight:500;min-height:28px}.marketing-experience .faq p{font-size:14px;color:#acc3d1}
.marketing-experience .notice{background:#72634414;border:1px solid #af946d39;border-left:3px solid #b59b73;color:#d2c6af;font-size:13px;line-height:1.8}
.marketing-experience :is(footer,.foot){color:#9ab1c0;font-size:12px;border-top:1px solid var(--line);line-height:2.2;padding-top:30px}
.marketing-experience .sticky{background:#132632;border-color:var(--line);backdrop-filter:none}
.marketing-experience .sticky .btn{font-size:13px;min-height:44px}
.fs-case .hero{padding-bottom:28px}.fs-case .hero h1{max-width:950px;font-size:clamp(32px,4.4vw,52px)}
.case-directory{display:flex;gap:10px;padding:14px 0 24px;flex-wrap:wrap;border-bottom:1px solid var(--line)}.case-directory a{display:inline-flex;align-items:center;gap:10px;padding:8px 13px;min-height:42px;border:1px solid var(--line);border-radius:8px;text-decoration:none;font-size:13px;color:#c1d7e1;background:#6c93a112}.case-directory a span{font:10px Consolas,monospace;color:#8aabba}
.fs-case .metrics{gap:12px}.fs-case .metric{appearance:none;text-align:left;font:inherit;width:100%;cursor:pointer;min-height:148px}.fs-case .metric:hover,.fs-case .metric[aria-selected=true]{border-color:#a9cbd389;background:linear-gradient(145deg,#45606b80,#213c488c)}.fs-case .metric b{font-size:30px;font-weight:500;color:#c7e3e9;letter-spacing:-.6px}.fs-case .metric span{font-size:12px}.fs-case .metric small{font-size:11px}
.case-evidence{margin-top:16px;padding:22px 26px;border-left:2px solid #85b4c1;border-radius:0 12px 12px 0;background:#7198aa12;min-height:156px}.case-evidence h3{font-size:17px;font-weight:500;margin:0 0 8px}.case-evidence p{font-size:14px;color:#abc5d4;margin:0}.case-evidence small{display:block;color:#9bb4c4;margin-top:11px;font-size:12px}
.case-flow-layout{display:grid;grid-template-columns:.78fr 1.22fr;gap:24px;align-items:start}.case-flow-layout .panel{padding:18px}
.case-chart{padding:22px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(150deg,#304b5880,#142935);margin:0}.case-chart figcaption{font-size:14px;color:#d2e5eb}.case-chart svg{width:100%;height:auto;display:block;margin:20px 0 8px;overflow:visible}.case-chart p{font-size:12px;color:#a1bac9;margin:0}.case-chart text{font-family:inherit;fill:#bdd6e1;font-size:12px}.case-chart .chart-number{fill:#e1f1f3;font-size:16px}
.fs-case .compare{font-size:13px}.fs-case .compare th{color:#a3bdcd;font-size:11px;white-space:nowrap}.fs-case .compare :is(th,td){border-color:#829ba522;padding:14px 10px}.fs-case .compare td{color:#c1d4de}.fs-case .compare td b{white-space:nowrap;font-weight:500}.fs-case .status{font-weight:400;font-size:11px;white-space:nowrap}.fs-case .ok{background:#76b4a51a;color:#b7d9cf}.fs-case .check{background:#b49d6a1a;color:#d7c7a6}
.fs-case .risk{background:#28323a66;border-color:#b29c7d36;padding:22px}.fs-case .risk b{color:#d9c9b2;font-size:16px;font-weight:500}.fs-case .risk p{color:#b1c3cf;font-size:14px}
.case-boundary{font-size:12px;color:#98b4c2;margin:16px 0 0}.marketing-experience .skip-link{position:absolute;left:20px;top:-80px;z-index:100;background:#c5e3e9;color:#112531;padding:12px}.marketing-experience .skip-link:focus{top:5px}
.marketing-preview-note{padding:9px 20px;background:#1e3644;color:#afc8d6;text-align:center;font-size:12px}.marketing-preview-note a{margin-left:14px;color:#d2e7ee}.marketing-preview-status{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);width:min(540px,calc(100% - 30px));z-index:60;border:1px solid #96becb6e;background:#1e3948;color:#e5f0f4;padding:14px 18px;border-radius:12px;font-size:13px;box-shadow:0 8px 30px #0005}.marketing-preview-status:empty{display:none}
@media(max-width:1000px){.marketing-experience .hero{gap:32px}.case-flow-layout{grid-template-columns:1fr}.case-chart{display:grid;grid-template-columns:1fr 1fr;align-items:center;column-gap:28px}.case-chart svg{grid-column:2;grid-row:1/3;margin:0}.marketing-experience .nav-links{gap:12px}.fs-case .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.marketing-experience .nav{flex-wrap:wrap;gap:8px}.marketing-experience .nav-links{width:100%;justify-content:flex-start;gap:6px 18px}.marketing-experience .nav-links .btn{margin-left:auto}.marketing-experience .hero{grid-template-columns:1fr;padding:34px 0;gap:30px}.marketing-experience .demo-card{transform:none;margin-right:8px}.marketing-experience .demo-pane{min-height:302px}.experience-links{grid-template-columns:1fr;gap:9px}.experience-link{padding:15px 20px}.experience-link strong{font-size:17px;margin:3px 0}.marketing-experience .grid,.marketing-experience .proof{grid-template-columns:1fr}.marketing-experience .flow{grid-template-columns:repeat(2,minmax(0,1fr))}.marketing-experience .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.marketing-experience .section{padding:40px 0}.fs-case .compare{display:table;overflow:visible}.fs-case .compare thead{display:none}.fs-case .compare :is(tbody,tr,td){display:block}.fs-case .compare tr{padding:10px 0;border-bottom:1px solid var(--line)}.fs-case .compare td{padding:5px 4px;border:0}.fs-case .compare td::before{content:attr(data-label);display:inline-block;width:75px;color:#98b1c1;font-size:11px}.fs-case .compare td:last-child{color:#a6becd;font-size:12px}.fs-case .compare tr:last-child{border-bottom:0}}
@media(max-width:480px){.marketing-experience .wrap{width:calc(100% - 32px)}.marketing-experience .nav{min-height:74px;padding:12px 0}.marketing-experience .nav-links{gap:4px 14px}.marketing-experience .nav-links a{font-size:12px}.marketing-experience .nav-links .btn{padding:7px 10px;font-size:12px}.marketing-experience .hero h1{font-size:36px;letter-spacing:-1px}.marketing-experience .lead,.marketing-experience .hero>p{font-size:15px}.marketing-experience .hero-actions .btn{width:auto;flex:1 1 46%;font-size:12px;padding:10px}.marketing-experience .hero-actions .primary{flex-basis:100%}.marketing-experience .demo-card{padding:20px}.marketing-experience .section h2{font-size:27px}.marketing-experience .flow{gap:10px}.marketing-experience .step{padding:17px}.marketing-experience .step h3{font-size:16px}.marketing-experience .step p{font-size:12px}.marketing-experience .request-panel{padding:22px}.marketing-experience .form-grid{grid-template-columns:1fr}.marketing-experience .request-head h2{font-size:25px}.marketing-experience .actions .btn{font-size:13px}.fs-case .metric{padding:16px 12px;min-height:140px}.fs-case .metric b{font-size:25px}.case-directory{gap:8px}.case-directory a{font-size:12px;padding:8px 10px}.case-evidence{padding:19px}.case-flow-layout{gap:16px}.case-chart{display:block}.case-chart svg{margin:22px 0 12px}.fs-case .hero h1{font-size:32px}.marketing-experience .cta{padding:24px}.marketing-preview-note{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.marketing-experience .btn{transition:none;transform:none!important}}
/* Showroom alignment: scoped to public demo pages; no home or workflow changes. */
@media screen {
  body.marketing-experience {
    --ink:#e8eff8;--muted:#9eb1c9;--line:#34495f;--blue:#b9d3ed;
    --pale:#132333;--shadow:0 20px 60px #0005;
    background:radial-gradient(ellipse at 12% 0,#203650 0,transparent 42%),#090f1b;
    color:var(--ink);font-family:"Inter","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  }
  .marketing-experience .wrap{width:min(1278px,calc(100% - 64px))}
  .marketing-experience .nav{border-color:#293c50}
  .marketing-experience :is(.brand-mark,.mark){background:linear-gradient(140deg,#385878,#182b40);border-color:#607f9e;color:#deebfa;box-shadow:inset 0 1px #9bb7d1}
  .marketing-experience .nav-links a{min-height:44px;color:#a9bed4}
  .marketing-experience .nav-links a[aria-current=page]{padding:7px 16px;border:1px solid #527da6;border-radius:999px;background:#20374f;color:#edf4fc}
  .marketing-experience .hero h1{color:#e8eff8;font-weight:450;letter-spacing:-1px}
  .marketing-experience .hero h1 span{color:#b9d3ed}
  .marketing-experience :is(.lead,.hero>p,.section-lead){color:#a9bed4}
  .marketing-experience :is(.btn,.nav-links .btn){min-height:44px;border-radius:999px;font-weight:500}
  .marketing-experience .primary{background:linear-gradient(120deg,#cce4f2,#acc4e0);border:1px solid #cce1f1;color:#102438;box-shadow:none}
  .marketing-experience :is(.secondary,.outline){background:#132333;border:1px solid #435c75;color:#c5d9ed;box-shadow:none}
  .marketing-experience .btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
  .marketing-experience :is(.eyebrow,.badge,.chip,.request-badge){background:#192b3e;border-color:#3b536d;color:#bfd5e9}
  .marketing-experience .demo-card{transform:none;background:linear-gradient(135deg,#20364f,#0d1928 75%);border:1px solid #536e89;border-top-color:#8da8c3;border-radius:22px;box-shadow:var(--shadow)}
  .marketing-experience .demo-card::after{display:none}
  .marketing-experience :is(.card,.step,.metric,.panel,.request-panel,.faq details,.experience-link,.case-chart){background:#101d2d;border:1px solid #34495f;border-radius:12px;box-shadow:none}
  .marketing-experience .experience-link:hover{background:#182b40;border-color:#668aaf}
  .marketing-experience .cta{background:linear-gradient(120deg,#223951,#101e2e);border:1px solid #435c75;border-radius:22px}
  .marketing-experience :is(.file,.share-box){background:#15283b;border-color:#3b5169}
  .marketing-experience .file-icon{background:#213b55;color:#c5ddf2;border-color:#506f8d}
  .marketing-experience :is(.demo-tabs button,.case-directory a){min-height:44px;border-radius:999px}
  .marketing-experience .demo-tabs button[aria-selected=true],.marketing-experience .case-directory a{background:#20374f;color:#dceafa;border:1px solid #527da6}
  .marketing-experience .case-evidence{background:#132639;border-color:#87b2da}
  .marketing-experience .metric:hover,.marketing-experience .metric[aria-selected=true]{background:#1b3046;border-color:#7ea9ce}
  .marketing-experience .metric b{color:#c9e2f5;font-variant-numeric:tabular-nums}
  .marketing-experience .risk{background:#202936;border-color:#655a48}
  .marketing-experience .risk b{color:#dfc98f}
  .marketing-experience .notice{background:#29291f;color:#dfcfac;border-color:#665c44}
  .marketing-experience .ok{background:#193b39;color:#a8ded1}
  .marketing-experience .check{background:#393426;color:#e2cf9d}
  .marketing-experience .control{background:#0c1929;color:#e8eff8;border-color:#476079;font-size:16px}
  .marketing-experience :is(.micro,.metric small,.case-boundary,footer,.foot){color:#a5bad0}
  .marketing-experience :is(.sticky,.marketing-preview-status){background:#0d1928;border-color:#435c75}
  .marketing-experience :is(a,button,input,select,textarea,summary):focus-visible{outline:2px solid #a9def3;outline-offset:4px}
  .marketing-experience .faq summary{min-height:44px;align-content:center}
  .marketing-experience :is(.hero>*,.grid>*,.flow>*,.proof>*,.case-flow-layout>*){min-width:0}
  .marketing-experience :is(p,h1,h2,h3,a){overflow-wrap:anywhere}
}
@media screen and (max-width:820px){
  .marketing-experience .wrap{width:calc(100% - 32px)}
  .marketing-experience .nav{align-items:flex-start;flex-wrap:wrap;gap:12px}
  .marketing-experience .nav-links{width:100%;justify-content:flex-start;gap:8px}
  .marketing-experience .nav-links a{padding:7px 10px}
  .marketing-experience .hero{padding-top:36px;gap:28px}
  .marketing-experience .sticky{box-shadow:0 -8px 24px #0004}
}
@media screen and (max-width:480px){
  .marketing-experience .hero-actions .btn{flex-basis:100%}
  .marketing-experience .flow{grid-template-columns:1fr}
  .marketing-experience .demo-tabs button{padding:10px 4px}
}
@media (prefers-reduced-motion:reduce){
  .marketing-experience .btn:hover{transform:none;filter:none}
}
@media print{.marketing-experience{background:white;color:#162d3a;color-scheme:light}.marketing-experience :is(.sticky,.nav,.marketing-preview-note,.marketing-preview-status){display:none}.marketing-experience :is(.section,.panel,.card,.metric,.case-evidence){background:white;color:#162d3a;box-shadow:none;break-inside:avoid}.marketing-experience p{color:#344d5b!important}}
