@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');
body{margin:0;background:#f9f6fc}
#lm-portfolio{--ink:#281c35;--muted:#594b65;--purple:#76399d;--rule:#d8cce2;--paper:#f9f6fc;--night:#29173c;background:var(--paper);color:var(--ink);font:16px/1.55 "DM Sans",Arial,sans-serif}
#lm-portfolio *{box-sizing:border-box}
#lm-portfolio :is(h1,h2,h3,p,figure){margin:0}
#lm-portfolio a{color:inherit;text-underline-offset:5px}
#lm-portfolio :is(a,button,summary):focus-visible{outline:3px solid #9b5fc5;outline-offset:4px}
#lm-portfolio button{font:inherit;cursor:pointer}
#lm-portfolio .wrap{width:min(100% - 80px,1080px);margin:auto}
#lm-portfolio header{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 24px;align-items:center;border-bottom:1px solid var(--rule);padding:11px 0}
#lm-portfolio .brand{font-weight:700;letter-spacing:-.025em}
#lm-portfolio nav{display:flex;gap:20px;flex-wrap:wrap;font-size:13px}
#lm-portfolio nav a{min-height:44px;display:inline-flex;align-items:center;text-decoration:none}
#lm-portfolio nav a:hover{text-decoration:underline}
#lm-portfolio .hero{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,.85fr);gap:36px;align-items:center;padding:52px 0 48px}
#lm-portfolio .kicker{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
#lm-portfolio :is(h1,h2,.footer-line){font-family:"Instrument Serif",Georgia,serif;font-weight:400;letter-spacing:-.035em}
#lm-portfolio h1{font-size:clamp(48px,7.5vw,92px);line-height:.99;margin:16px 0 20px}
#lm-portfolio h1 em{color:var(--purple);font-weight:400}
#lm-portfolio .intro{max-width:50ch;color:var(--muted)}
#lm-portfolio .email{display:inline-flex;align-items:center;min-height:44px;margin-top:9px;color:var(--purple);font-weight:600;font-size:14px}
#lm-portfolio .portrait{padding-left:12px;position:relative}
#lm-portfolio .portrait:before{content:"";position:absolute;inset:14px 13px 0 0;background:#e8d8f0}
#lm-portfolio .portrait-frame{position:relative;aspect-ratio:1/1.08;overflow:hidden;background:#dce8f4}
#lm-portfolio .portrait-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 8%}
#lm-portfolio figcaption{font-size:12px;color:var(--muted)}
#lm-portfolio .portrait figcaption{position:relative;padding:10px 10px 11px 0;line-height:1.4}
#lm-portfolio .portrait b{display:block;font-size:13px;color:var(--ink)}
#lm-portfolio .demo{padding:26px 30px 30px}
#lm-portfolio .demo h2{font-size:clamp(35px,5vw,52px);line-height:1.05}
#lm-portfolio .demo-intro{font-size:14px;margin-top:8px;max-width:61ch}
#lm-portfolio .demo-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.48fr);gap:24px;border-top:1px solid #846f91;margin-top:20px;padding-top:20px}
#lm-portfolio .choices{display:grid;align-content:start;gap:4px}
#lm-portfolio .choices button{min-height:48px;padding:10px 13px;text-align:left;border:0;border-bottom:1px solid #846f91;background:transparent;color:#f3e7f7;font-size:14px}
#lm-portfolio .choices button[aria-pressed=true]{color:#321744;background:#ead5f7;border-color:#ead5f7;font-weight:700}
#lm-portfolio .readout{min-width:0;border-left:1px solid #846f91;padding-left:24px}
#lm-portfolio .readout-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:10px}
#lm-portfolio .readout h3{font-size:18px;line-height:1.25;margin-top:5px}
#lm-portfolio .verdict{text-align:right;border-left:1px solid #a888bd;padding-left:12px}
#lm-portfolio .verdict strong{display:block;font:26px/1.05 "Instrument Serif",Georgia,serif}
#lm-portfolio .verdict span{display:block;font-size:12px}
#lm-portfolio .readout-block{border-top:1px solid #846f91;margin-top:16px;padding-top:12px}
#lm-portfolio .readout ul{padding-left:18px;margin:8px 0 0;font-size:14px}
#lm-portfolio .readout li+li{margin-top:5px}
#lm-portfolio .numbers{font:44px/1.1 "Instrument Serif",Georgia,serif;margin:6px 0}
#lm-portfolio .target,#lm-portfolio .metric{font-size:13px}
#lm-portfolio .next{font-size:14px;margin-top:9px}
#lm-portfolio .section{padding-top:48px}
#lm-portfolio .section>h2{font-size:clamp(42px,6vw,63px);line-height:1;margin-bottom:16px}
#lm-portfolio details{border-top:1px solid var(--rule)}
#lm-portfolio details:last-child{border-bottom:1px solid var(--rule)}
#lm-portfolio summary{cursor:pointer;list-style:none;display:grid;grid-template-columns:145px minmax(0,1fr) 21px;gap:15px;align-items:center;padding:19px 0}
#lm-portfolio summary::-webkit-details-marker{display:none}
#lm-portfolio summary::after{content:"+";font-size:24px;color:var(--purple)}
#lm-portfolio details[open] summary::after{content:"×"}
#lm-portfolio .company{font-size:13px;font-weight:700;color:var(--purple)}
#lm-portfolio .company small{display:block;color:var(--muted);font-weight:500;font-size:11px}
#lm-portfolio summary strong{font-size:20px;line-height:1.25;font-weight:600;letter-spacing:-.025em}
#lm-portfolio .case{padding:0 24px 25px 160px}
#lm-portfolio .case>p{color:var(--muted);font-size:15px;max-width:69ch}
#lm-portfolio .case-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:16px}
#lm-portfolio .case h3{font-size:13px;color:var(--purple);margin-bottom:5px}
#lm-portfolio .case-grid p{font-size:14px}
#lm-portfolio .product{margin-top:19px;background:#eee6f4;padding:12px}
#lm-portfolio .product>img{display:block;width:100%;height:auto}
#lm-portfolio .phones{display:flex;justify-content:center;gap:16px;background:#e4edf7;padding:15px}
#lm-portfolio .phones img{width:36%;max-width:155px;height:auto;align-self:start}
#lm-portfolio .product figcaption{padding-top:8px}
#lm-portfolio .product a{display:inline-flex;align-items:center;min-height:44px}
#lm-portfolio .product a+a{margin-left:14px}
#lm-portfolio .method-intro{max-width:66ch;color:var(--muted);margin-bottom:18px}
#lm-portfolio .method{display:grid;grid-template-columns:minmax(150px,.65fr) minmax(0,1.8fr);border-top:2px solid #8e57b0;background:#efe6f5}
#lm-portfolio .method .choices{border-right:1px solid #d1bddc;padding:8px 0}
#lm-portfolio .method button{color:#513069;border-color:transparent}
#lm-portfolio .method button[aria-pressed=true]{background:#e3d2ed;color:#351d47;border-left:3px solid var(--purple);padding-left:10px}
#lm-portfolio .method-story{padding:20px 22px;min-height:236px}
#lm-portfolio .method-story h3{font-size:21px;font-weight:600;line-height:1.25;margin:6px 0 9px}
#lm-portfolio .method-story p{font-size:14px}
#lm-portfolio .method-story .proof{border-top:1px solid #d1bddc;margin-top:13px;padding-top:11px}
#lm-portfolio footer{margin-top:44px;padding:26px 0 32px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 22px}
#lm-portfolio .footer-line{font-size:clamp(29px,4vw,43px);line-height:1.05;max-width:25ch}
#lm-portfolio footer a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--purple)}
@media(max-width:760px){
 #lm-portfolio .wrap{width:calc(100% - 48px)}
 #lm-portfolio .hero{gap:22px;padding:35px 0}
 #lm-portfolio .case{padding-left:0;padding-right:0}
 #lm-portfolio summary{grid-template-columns:110px minmax(0,1fr) 16px;gap:12px}
}
@media(max-width:560px){
 #lm-portfolio .wrap{width:calc(100% - 32px)}
 #lm-portfolio .hero{grid-template-columns:1fr;gap:15px;padding:28px 0 35px}
 #lm-portfolio h1{font-size:clamp(45px,10vw,59px)}
 #lm-portfolio .portrait{max-width:210px;width:63%;margin-left:auto}
 #lm-portfolio .demo{padding:19px 15px}
 #lm-portfolio :is(.demo-grid,.case-grid,.method){grid-template-columns:1fr}
 #lm-portfolio .readout{border-left:0;border-top:1px solid #846f91;padding:16px 0 0}
 #lm-portfolio .verdict strong{font-size:23px}
 #lm-portfolio summary{grid-template-columns:82px minmax(0,1fr) 14px;gap:8px}
 #lm-portfolio summary strong{font-size:17px}
 #lm-portfolio .method .choices{grid-template-columns:1fr 1fr;border-right:0;border-bottom:1px solid #d1bddc;padding:0}
 #lm-portfolio .method-story{min-height:0;padding:18px 16px}
}

/* The preview host styles text elements directly, so set the release colors on them. */
#lm-portfolio .demo{
 --release-text:#fff9ff;
 --release-secondary:#e9daf3;
 --release-selected:#f0dcfb;
 --release-selected-text:#321744;
 background:var(--night);
 color:var(--release-text);
}
#lm-portfolio .demo :is(h2,h3,ul,li,.numbers,.next,.next b,.next span){
 color:var(--release-text)!important;
}
#lm-portfolio .demo :is(.demo-intro,.kicker,.metric,.target,[data-delta]){
 color:var(--release-secondary)!important;
}
#lm-portfolio .demo .choices button[aria-pressed="false"]{
 background:transparent!important;
 color:var(--release-text)!important;
}
#lm-portfolio .demo .choices button[aria-pressed="true"]{
 background:var(--release-selected)!important;
 color:var(--release-selected-text)!important;
}
#lm-portfolio .demo .choices button:focus-visible{outline-color:#f3c9ff}
#lm-portfolio .demo [data-status]{color:#f3c9ff!important}
#lm-portfolio .demo [data-state="miss"] [data-status]{color:#ffc8b6!important}
#lm-portfolio .demo [data-state="met"] [data-status]{color:#ddd4ff!important}