.op-section{padding-block:110px 100px}.op-intro h2{font-family:var(--font-display);letter-spacing:-.005em;font-size:66px;font-weight:300;line-height:1.05}.op-intro p{color:var(--muted-foreground);margin-top:26px;font-size:15.5px;line-height:1.5}.op-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:62px;display:grid}.op-card{background:var(--h2-wash);flex-direction:column;min-width:0;height:400px;padding:30px 29px 64px;display:flex;position:relative;overflow:hidden}.op-card h3{color:var(--foreground);font-size:22px;line-height:1.2;font-family:var(--font-sans)!important;font-weight:500!important}.op-card>p{max-width:545px;color:var(--muted-foreground);text-wrap:pretty;margin-top:16px;font-size:15px;line-height:1.45}.op-card-bleed{padding-bottom:0}.op-card-dots{background-color:var(--h2-wash);background-image:radial-gradient(color-mix(in oklab, var(--foreground) 16%, transparent) 1px, transparent 1.3px);background-position:4px 4px;background-size:18px 18px}.op-composer{background:var(--h2-white);border-radius:16px;flex-direction:column;justify-content:space-between;height:134px;margin-top:auto;padding:22px 15px 15px 22px;display:flex}.op-composer-text{min-height:22px;color:var(--foreground);align-items:center;font-size:15px;display:flex}.op-composer-text i{background:var(--foreground);width:1.5px;height:17px;margin-left:1px;animation:1s step-end infinite op-caret;display:inline-block}.op-composer-actions{justify-content:space-between;align-items:center;display:flex}.op-composer-actions>span:first-child{color:var(--muted-foreground);gap:26px;padding-left:2px;display:flex}.op-composer-actions svg{stroke-width:1.6px;width:18px;height:18px}.op-send{background:var(--foreground);width:37px;height:37px;color:var(--h2-white);border-radius:8px;place-items:center;display:grid}.op-send svg{stroke-width:2px;width:18px;height:18px}.op-desktop{background:var(--h2-white);border-radius:16px 16px 0 0;flex:1;grid-template-columns:245px minmax(0,1fr);margin-top:30px;padding:11px 0 0 11px;display:grid}.op-desktop ul{border-right:1px solid var(--border);flex-direction:column;gap:0;padding-right:11px;display:flex}.op-desktop li{height:40px;color:var(--muted-foreground);border-radius:6px;align-items:center;gap:11px;padding-inline:12px;font-size:15px;transition:background .45s,color .45s;display:flex}.op-desktop li svg{stroke-width:1.5px;flex-shrink:0;width:19px;height:19px}.op-desktop li.is-active{background:var(--h2-wash);color:var(--foreground)}.op-desktop li.is-active svg{stroke-width:2px}.op-desktop-pane{min-height:100%}.op-tiles{grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-top:auto;margin-bottom:-38px;display:grid}.op-tile{aspect-ratio:1;background:var(--h2-white);opacity:0;border-radius:10px;place-items:center;display:grid;transform:scale(.92)}.op-tile.is-empty{background:color-mix(in oklab, var(--h2-white) 45%, transparent)}.op-tile img{object-fit:contain;width:44%;height:44%}.is-visible .op-tile{animation:.6s cubic-bezier(.16,1,.3,1) forwards op-tile-in}.op-flow{margin-top:auto;margin-bottom:-38px}.op-flow-card{background:var(--h2-white);height:66px;color:var(--foreground);border:1px solid #0000;border-radius:14px;align-items:center;gap:13px;padding-inline:15px;font-size:15px;display:flex}.op-flow-card.is-target{animation:4.2s infinite op-target}.op-flow-icon{border-radius:8px;place-items:center;width:37px;height:37px;display:grid}.op-flow-icon svg{stroke-width:1.7px;width:19px;height:19px}.op-flow-icon.is-start{background:color-mix(in oklab, var(--viz-orange) 18%, var(--h2-white));color:var(--brand-plum)}.op-flow-icon.is-end{background:color-mix(in oklab, var(--amber) 14%, var(--h2-white));color:var(--amber)}.op-flow-link{height:82px;position:relative}.op-flow-link .op-flow-svg{width:80px;height:110px;position:absolute;top:-10px;left:calc(50% - 20px);overflow:visible}.op-flow-handle{fill:var(--h2-white);stroke:var(--foreground);stroke-width:1.2px}.op-flow-handle.is-end{stroke:var(--muted-foreground);stroke-opacity:.55}.op-flow-path{stroke:var(--foreground);stroke-width:1.4px;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1px;animation:4.2s cubic-bezier(.45,0,.2,1) infinite op-draw}.op-flow-arrow{stroke:var(--foreground);stroke-width:1.4px;stroke-linecap:round;stroke-linejoin:round;opacity:0;animation:4.2s infinite op-arrow}.op-flow-cursor{stroke-width:1.5px;width:22px;height:22px;color:var(--foreground);fill:var(--h2-white);animation:4.2s cubic-bezier(.45,0,.2,1) infinite op-cursor;position:absolute;top:70px;left:calc(50% + 22px)}@keyframes op-caret{0%,to{opacity:1}50%{opacity:0}}@keyframes op-tile-in{to{opacity:1;transform:none}}@keyframes op-draw{0%,8%{stroke-dashoffset:1px}48%,86%{stroke-dashoffset:0}to{stroke-dashoffset:0;opacity:0}}@keyframes op-arrow{0%,44%{opacity:0}50%,86%{opacity:1}to{opacity:0}}@keyframes op-cursor{0%,8%{transform:translate(-42px,-62px)}48%,86%{transform:translate(0)}to{opacity:0;transform:translate(0)}}@keyframes op-target{0%,46%{border-color:#0000}54%,84%{border-color:color-mix(in oklab, var(--amber) 45%, transparent)}to{border-color:#0000}}@media (width<=1100px){.op-intro h2{font-size:56px}.op-desktop{grid-template-columns:210px minmax(0,1fr)}}@media (width<=800px){.op-section{padding-block:80px}.op-intro h2{font-size:46px}.op-grid{grid-template-columns:1fr;margin-top:44px}.op-card{height:auto;min-height:380px}.op-tiles,.op-flow{margin-top:32px;margin-bottom:-30px}.op-composer{margin-top:40px}.op-desktop{min-height:230px}}@media (width<=540px){.op-section{padding-block:64px}.op-intro h2{font-size:min(40px,10.5vw - 4.2px)}.op-intro p{margin-top:18px;font-size:14px}.op-card{min-height:0;padding:24px 20px 40px}.op-card h3{font-size:20px}.op-card>p{font-size:14px}.op-card-bleed{padding-bottom:0}.op-tiles{gap:6px;margin-bottom:-16px}.op-tile{border-radius:8px}.op-flow{margin-bottom:-16px}.op-flow-card{height:60px;font-size:14px}.op-desktop{grid-template-columns:1fr}.op-desktop ul{border-right:0}.op-desktop-pane{display:none}}@media (prefers-reduced-motion:reduce){.op-tile{opacity:1;transform:none;animation:none!important}.op-flow-path{stroke-dashoffset:0;animation:none}.op-flow-arrow{opacity:1;animation:none}.op-flow-cursor,.op-flow-card.is-target,.op-composer-text i{animation:none}}.op-tile.is-wordmark img{width:74%;height:50%}
