.lp-audience,.lp-proof,.lp-case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lp-audience>div,.lp-proof>div,.lp-case-grid>div{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.lp-audience h3,.lp-proof h3,.lp-case-grid h3{font-size:15px;margin:0 0 8px;color:var(--ink)}
.lp-audience p,.lp-proof p,.lp-case-grid p{font-size:13.5px;line-height:1.6;color:var(--ink2);margin:0}
.lp-kicker{font-size:12px;font-weight:600;color:var(--accent-ink);margin:0 0 8px}
.lp-meaning{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel);margin-top:22px}
.lp-meaning>div{padding:22px;border-right:1px solid var(--line)}
.lp-meaning>div:last-child{border-right:0}
.lp-meaning b{display:block;font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ink);margin-bottom:7px;letter-spacing:-.025em}
.lp-meaning span{font-size:13px;line-height:1.55;color:var(--ink2)}
.lp-case{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:26px}
.lp-case-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.lp-case-head p{margin:0;color:var(--ink2);font-size:13.5px}
.lp-case-grid{grid-template-columns:1fr auto 1fr;align-items:stretch}
.lp-case-grid .arr{display:flex;align-items:center;justify-content:center;background:transparent;border:0;font-size:24px;color:var(--ink3);padding:8px}
.lp-case ul{font-size:13px;line-height:1.7;color:var(--ink2);padding-left:18px;margin:12px 0 0}
.lp-compare{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);font-size:13.5px}
.lp-compare th,.lp-compare td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5}
.lp-compare th{font-size:12px;color:var(--ink3);background:var(--panel2)}
.lp-compare td:first-child{font-weight:600;color:var(--ink)}
.lp-compare td{color:var(--ink2)}
.lp-compare tr:last-child td{border-bottom:0}
.lp-faq{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lp-faq details{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:0 18px}
.lp-faq summary{cursor:pointer;color:var(--ink);font-weight:600;font-size:13.5px;padding:18px 24px 18px 0}
.lp-faq p{font-size:13px;line-height:1.6;color:var(--ink2);margin:0;padding:0 0 18px}
.lp-test{display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;background:var(--panel3);border:1px solid var(--line2);border-radius:var(--r);padding:20px 22px;margin-top:18px}
.lp-test p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink2);max-width:66ch}
.lp-test b{color:var(--ink)}
@media(max-width:780px){.lp-audience,.lp-proof,.lp-meaning,.lp-faq{grid-template-columns:1fr}.lp-meaning>div{border-right:0;border-bottom:1px solid var(--line)}.lp-meaning>div:last-child{border-bottom:0}.lp-case-grid{grid-template-columns:1fr}.lp-case-grid .arr{transform:rotate(90deg)}.lp-compare{display:block;overflow-x:auto}}

.lp .dg-app{animation:lpframe .74s cubic-bezier(.2,.7,.3,1) backwards}
@keyframes lpframe{from{opacity:0;transform:translateY(22px) scale(.984)}
to{opacity:1;transform:none}}
/* The window's own furniture, so the frame reads as a window opening rather
   than as a picture of one fading up. */
.lp .dg-app-bar u{animation:lppop .42s cubic-bezier(.34,1.56,.64,1) backwards}
.lp .dg-app-bar u:nth-of-type(1){animation-delay:.2s}
.lp .dg-app-bar u:nth-of-type(2){animation-delay:.27s}
.lp .dg-app-bar u:nth-of-type(3){animation-delay:.34s}
@keyframes lppop{from{opacity:0;transform:scale(.25)}to{opacity:1;transform:none}}
.lp .dg-app-url,.lp .dg-app-tag{animation:lprise .5s ease-out backwards;
animation-delay:.4s}
.lp .dg-app-body .guide{animation:lprise .58s cubic-bezier(.2,.7,.3,1) backwards;
animation-delay:.3s}
@keyframes lprise{from{opacity:0;transform:translateY(14px)}
to{opacity:1;transform:none}}
/* Each step arrives on its own beat. */
.lp .dg-app-body .flow>.node{animation:lprise .55s cubic-bezier(.2,.7,.3,1)
backwards;animation-delay:var(--s,0ms)}
/* And the line between two steps is drawn downward, head last, so what the
   diagram is claiming — that something passes from one step to the next — is
   what the eye actually watches happen. */
.lp .dg-app-body .link:before{transform-origin:top;
animation:lpdraw .44s cubic-bezier(.4,.6,.2,1) backwards;
animation-delay:var(--s,0ms)}
@keyframes lpdraw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.lp .dg-app-body .link i{animation:lprise .38s ease-out backwards;
animation-delay:calc(var(--s,0ms) + 180ms)}
.lp .dg-app-body .link:after{animation:lppop .3s ease-out backwards;
animation-delay:calc(var(--s,0ms) + 330ms)}
.lp .dg-cap{animation:lprise .6s ease-out backwards;animation-delay:1.5s}
/* The step the run ended on widens its ring once, after everything has
   landed, and then stays there. It is where the eye should finish, and one
   settle says so without the page acquiring something that blinks forever. */
.lp .dg-app-body .node.on{transition:box-shadow .8s cubic-bezier(.2,.7,.3,1) 1.7s}
.motion .lp-sec.in .dg-app-body .node.on{
box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 13%,transparent)}
.lp .dg-app-body .flow>*:nth-child(1){--s:365ms}.lp .dg-app-body .flow>*:nth-child(2){--s:460ms}.lp .dg-app-body .flow>*:nth-child(3){--s:555ms}.lp .dg-app-body .flow>*:nth-child(4){--s:650ms}.lp .dg-app-body .flow>*:nth-child(5){--s:745ms}.lp .dg-app-body .flow>*:nth-child(6){--s:840ms}.lp .dg-app-body .flow>*:nth-child(7){--s:935ms}.lp .dg-app-body .flow>*:nth-child(8){--s:1030ms}.lp .dg-app-body .flow>*:nth-child(9){--s:1125ms}.lp .dg-app-body .flow>*:nth-child(10){--s:1220ms}.lp .dg-app-body .flow>*:nth-child(11){--s:1315ms}.lp .dg-app-body .flow>*:nth-child(12){--s:1410ms}.lp .dg-app-body .flow>*:nth-child(13){--s:1505ms}.lp .dg-app-body .flow>*:nth-child(14){--s:1600ms}
.cmp{scroll-margin-top:32px}
.cmp-intro{max-width:760px}.cmp-intro h2{max-width:23ch}
.cmp-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:28px 0}
.cmp-benefit{padding:24px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.cmp-benefit>span{display:inline-flex;width:32px;height:32px;align-items:center;justify-content:center;border-radius:50%;background:var(--accent);color:var(--bg);font-weight:700;margin-bottom:16px}
.cmp h3{font-size:18px;line-height:1.3;margin:0 0 10px;letter-spacing:-.02em;color:var(--ink)}
.cmp p{color:var(--ink2);line-height:1.65}.cmp-benefit p{font-size:14px;margin:0}
.cmp-table-wrap{overflow-x:auto;border:1px solid var(--line2);border-radius:14px;margin:24px 0;background:var(--panel)}
.cmp-table{width:100%;border-collapse:collapse;text-align:left;font-size:14px;line-height:1.55}
.cmp-table caption{text-align:left;padding:18px 22px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line)}
.cmp-table th,.cmp-table td{padding:22px;vertical-align:top;border-bottom:1px solid var(--line)}
.cmp-table thead th{font-size:12px;font-weight:600;background:var(--panel2);color:var(--ink2)}
.cmp-table tbody th{width:14%;font-size:16px}.cmp-table td{color:var(--ink2)}
.cmp-table .cmp-janus{background:color-mix(in srgb,var(--accent) 9%,var(--panel));color:var(--ink);width:39%}
.cmp-table td b{display:block;margin-bottom:5px;font-weight:600;color:var(--ink)}
.cmp-table tr:last-child>*{border-bottom:0}.cmp-table a{white-space:nowrap}
.cmp-brand{display:flex;align-items:center;justify-content:center;width:144px;height:56px;padding:12px;border:1px solid #e8e8e8;border-radius:9px;background:#fff;box-sizing:border-box}
.cmp-brand img{display:block;width:100%;height:100%;object-fit:contain}
.cmp-brand--otterly-ai{background:#080e19;border-color:#26303e}
.cmp-source{display:block;font-size:12px;margin-top:8px;color:var(--ink3)}
.cmp-label{display:inline-block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);font-weight:600}
.cmp .cmp-note{font-size:12px;max-width:95ch;color:var(--ink3)}
.cmp-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:26px;border:1px solid var(--line2);border-radius:14px;background:var(--panel2);margin-top:28px}.cmp-cta p{margin:6px 0 0}
.cmp-page{max-width:1060px;margin:0 auto;padding:48px 0 64px}
.cmp-breadcrumb{display:flex;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--ink3);margin-bottom:36px}
.cmp-page h1{font-family:var(--serif);font-size:clamp(38px,5vw,64px);line-height:1.07;letter-spacing:-.04em;font-weight:500;margin:12px 0 22px;max-width:23ch}
.cmp-page h2{font-family:var(--serif);font-size:clamp(26px,3vw,36px);line-height:1.2;letter-spacing:-.025em;margin:0 0 18px;font-weight:500;color:var(--ink)}
.cmp-summary{font-size:19px;max-width:72ch}
.cmp-page .cmp-summary{max-width:72ch}
.cmp-jumps{display:flex;gap:10px 22px;flex-wrap:wrap;border-block:1px solid var(--line);padding:18px 0;margin:32px 0;font-size:13px}
.cmp-section{padding:36px 0;border-bottom:1px solid var(--line);scroll-margin-top:24px}
.cmp-section>p{max-width:80ch}.cmp-reasons{display:grid;gap:28px;counter-reset:reason}
.cmp-reason{display:grid;grid-template-columns:44px 1fr;gap:18px;counter-increment:reason}
.cmp-reason:before{content:counter(reason,decimal-leading-zero);color:var(--accent-ink);font-family:var(--serif);font-size:25px}
.cmp-reason p{margin:0;max-width:78ch}
.cmp-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:0;list-style:none;counter-reset:step}
.cmp-steps li{padding:20px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;counter-increment:step;font-size:14px;line-height:1.6;color:var(--ink2)}
.cmp-steps li:before{content:'0' counter(step);display:block;color:var(--accent-ink);margin-bottom:12px}.cmp-steps b{display:block;color:var(--ink);margin-bottom:6px}
.cmp-faq>div{padding:22px 0;border-bottom:1px solid var(--line)}.cmp-faq p{margin:0;max-width:80ch}
.cmp-related{display:flex;flex-wrap:wrap;gap:12px}.cmp-related a{padding:12px 16px;border:1px solid var(--line);border-radius:8px}
.cmp-scroll{display:none;font-size:12px;color:var(--ink3)}
.lp-audit-end{max-width:850px;margin:28px auto 16px;padding:10px;border:1px solid var(--line2);border-radius:16px;background:var(--panel2)}
.lp-audit-end input{min-width:0;flex:1;background:transparent!important;border:0!important}
@media(max-width:780px){.cmp-benefits,.cmp-steps{grid-template-columns:1fr}.cmp-scroll{display:block}.cmp-table{min-width:730px}.cmp-table th,.cmp-table td{padding:16px}.cmp-page{padding-top:28px}.cmp-summary{font-size:17px}.cmp-reason{grid-template-columns:32px 1fr;gap:10px}}
@media(max-width:650px){.lp-audit-end{flex-direction:column}.lp-audit-end input,.lp-audit-end button{width:100%}}