.visual-directory{display:block!important;padding:110px max(6vw,24px) 45px!important;min-height:100svh;height:auto!important}.visual-intro{display:grid;grid-template-columns:1fr 1fr;column-gap:50px;align-items:end;max-width:1440px;margin:auto}.visual-intro .eyebrow{grid-column:1/-1}.visual-intro h1{font-size:clamp(32px,3.3vw,56px)!important;line-height:1.15;letter-spacing:-.035em;margin:8px 0 28px!important}.visual-intro>p:last-child{font-size:14px;line-height:1.85;color:#999d96;padding-bottom:28px}.visual-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;max-width:1440px;margin:auto}.visual-grid>a{display:block;min-width:0;border-bottom:1px solid #ffffff20;padding-bottom:10px}.visual-thumb{aspect-ratio:2.4;position:relative;overflow:hidden;background:#252724;border-radius:5px}.visual-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s,filter .6s;filter:saturate(.65)}.visual-grid>a:hover img{transform:scale(1.05);filter:saturate(1)}.visual-play{position:absolute;right:10px;bottom:10px;width:27px;height:27px;display:grid;place-items:center;border:1px solid #ffffff60;background:#0008;border-radius:50%;font-size:9px;color:white}.visual-label{display:flex;gap:10px;align-items:center;margin-top:10px}.visual-label small{font-size:10px;color:#9ba78a}.visual-label strong{font-size:15px;font-weight:500}.visual-grid p{font-size:11px;color:#92978d;margin:6px 0 0}.visual-foot{max-width:1440px;margin:28px auto 0;display:flex;gap:30px;justify-content:space-between;color:#969d8d;font-size:12px}.demo-boundary{font-size:11px;line-height:1.8;color:#7c8275;margin-top:20px}.extra-demo{background:#10130f;color:#edf0e7;border:1px solid #30382c;border-radius:18px;overflow:hidden;box-shadow:0 30px 70px #0002}.extra-demo .storyboard-head{padding:20px;font-size:11px}.mock-stage{position:relative;aspect-ratio:1.3;min-height:310px;margin:0 24px;overflow:hidden}.mock-board{position:absolute;inset:0;padding:22px;background:#1b2018;border:1px solid #3a4433;border-radius:12px;opacity:0;transform:translateY(20px) scale(.97);transition:opacity .55s,transform .55s;pointer-events:none}.mock-board.is-active{opacity:1;transform:none}.mock-tabs{font-size:14px;border-bottom:1px solid #46503d;padding-bottom:18px;margin-bottom:22px}.mock-tabs b{float:right;color:#d1eea8}.mock-list{font-size:14px;line-height:1.8;padding:15px 14px;border:1px solid #414a36;background:#262e20;margin:12px 0;border-radius:6px}.mock-pictures{display:flex;gap:14px}.mock-pictures img{width:30%;aspect-ratio:1;object-fit:cover;border:2px solid #c5e394;border-radius:8px}.mock-action{padding:12px 16px;background:#c7e893;color:#23331a;margin-top:22px;font-size:12px;border-radius:5px;width:fit-content}.mock-result{display:grid;grid-template-columns:40% 1fr;gap:22px;align-items:center}.mock-result img{width:100%;border-radius:6px}.mock-result h3,.mock-document h3{font-size:20px;line-height:1.5}.mock-result p,.mock-document p{font-size:13px;line-height:1.8;color:#b4bfa9}.mock-result small{font-size:10px;color:#91a17e}.mock-document i{display:block;width:90%;height:7px;background:#46523b;margin-top:18px;border-radius:4px}.mock-document i:last-child{width:65%}.mock-code{font-family:monospace;font-size:15px;line-height:2;color:#d2e1c1;padding:14px}.mock-file{display:flex;flex-direction:column;gap:10px;text-align:center;padding:20px;background:#293322;border:1px dashed #829668}.mock-file strong{font-size:22px}.mock-file small{font-size:12px;color:#b1bea2}.mock-kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.mock-kanban>div{padding:12px;background:#282f22;min-height:180px;border-radius:5px}.mock-kanban p{font-size:12px;background:#3f4b34;padding:14px 8px;border-left:2px solid #c3dd9c}.mock-kanban small{font-size:11px;color:#a3b48e}.mock-cursor{position:absolute;right:28px;bottom:22px;font-size:35px;color:#d5f2aa;transition:transform 1.8s;pointer-events:none}.extra-demo[data-step="1"] .mock-cursor{transform:translate(-160px,-125px)}.extra-demo[data-step="2"] .mock-cursor{transform:translate(-60px,-35px)}.extra-controls{padding:18px 24px;display:flex;gap:18px;justify-content:space-between;align-items:center}.extra-controls p{font-size:12px;color:#b9c6a9;line-height:1.7;margin:0}.extra-controls>div{display:flex;gap:10px}.extra-controls button{padding:6px 9px;background:transparent;border:1px solid #536345;color:#d2e3be;border-radius:20px;font-size:11px;white-space:nowrap;cursor:pointer}.extra-progress{height:3px;background:#39452e}.extra-progress i{display:block;height:100%;background:#c7e893;width:0;transition:width .3s}.mock-loader{height:3px;background:linear-gradient(90deg,#40512e,#c7e893,#40512e);background-size:200% 100%;animation:scan 2s infinite}@keyframes scan{to{background-position:-200% 0}}.visual-back{position:fixed;left:28px;bottom:24px;z-index:90;color:inherit;font-size:12px;background:#f4f2eae8;padding:10px 15px;color:#222;border-radius:25px;border:1px solid #aaa4}.section-pagination{max-height:68vh;overflow:auto}.visual-review main>section:not(.review-selected){display:none!important}.visual-review .section-pagination{display:none}.visual-review{scroll-snap-type:none!important}.visual-review .reveal{opacity:1!important;transform:none!important}@media(min-width:901px){.visual-directory .visual-thumb{max-height:110px}.demo-section{min-height:100svh}.demo-copy h2{font-size:clamp(32px,3vw,52px)}}@media(max-width:900px){.visual-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}.visual-intro{display:block}.visual-directory{padding-top:105px!important}.visual-intro h1{font-size:38px!important}.visual-intro>p:last-child{padding-bottom:15px}.visual-foot{flex-wrap:wrap;gap:16px}.visual-thumb{aspect-ratio:1.6}.visual-label strong{font-size:14px}.feature-nav-links{display:flex!important;gap:15px!important}.feature-nav-links a{font-size:11px}.feature-login{display:none}.feature-nav{gap:15px!important}.feature-brand{font-size:14px}.mock-stage{margin:0 12px;min-height:330px}.mock-board{padding:15px}.mock-list{font-size:12px}.extra-controls{padding:14px}.mock-result h3{font-size:17px}.mock-kanban{gap:6px}.mock-kanban>div{padding:8px}.mock-kanban p{font-size:10px}.visual-back{left:15px;bottom:14px}}@media(prefers-reduced-motion:reduce){.mock-loader{animation:none}.mock-board,.mock-cursor,.visual-thumb img{transition:none}}.visual-grid,.visual-intro,.visual-foot{width:100%;position:relative;z-index:2}.visual-directory{overflow:visible!important}@media(max-width:900px){.section-pagination{display:none}.visual-intro h1{font-size:34px!important}}

/* Quiet capability directory: imagery belongs inside each demonstration. */
.visual-grid{gap:16px}.visual-grid>a{position:relative;padding:24px 22px;min-height:128px;background:#ffffff03;border:1px solid #ffffff16;border-radius:8px;transition:background .2s,border-color .2s}.visual-grid>a:hover,.visual-grid>a:focus-visible{background:#ffffff08;border-color:#a9ba8a88;outline-offset:4px}.visual-label{align-items:flex-start;margin:0;flex-direction:column;gap:13px}.visual-label strong{font-size:18px}.visual-label small{font-size:10px}.visual-grid p{font-size:12px;margin:10px 0 0;line-height:1.6;color:#a5ab9d}.capability-arrow{position:absolute;right:20px;top:23px;color:#8f9c80;font-size:16px}.visual-intro h1{margin-bottom:32px!important}.visual-foot{margin-top:26px}@media(max-width:900px){.visual-grid{gap:12px}.visual-grid>a{padding:18px 15px;min-height:128px}.visual-label strong{font-size:16px}.capability-arrow{right:15px;top:18px}.visual-grid p{font-size:11px}}

.visual-directory{background:#f4f2ed!important;color:#20231e!important;padding-top:130px!important}.visual-directory::before,.visual-directory::after{display:none!important}.visual-intro{display:block;max-width:1200px}.visual-intro h1{font-size:clamp(30px,3.2vw,46px)!important;font-weight:500;margin:0 0 36px!important}.visual-grid{max-width:1200px;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}.visual-grid>a{display:flex;align-items:center;justify-content:center;aspect-ratio:3/4;min-height:0;padding:20px 14px;background:#fffdf9;border:1px solid #dfdfd6;border-radius:6px;color:#252a22;text-align:center;box-shadow:none}.visual-grid>a>strong{font-size:17px;line-height:1.7;font-weight:500;max-width:7em;word-break:normal}.visual-grid>a:hover,.visual-grid>a:focus-visible{background:#e9eddf;border-color:#a6b395;transform:translateY(-3px)}body:has(#overview.review-selected) .visual-back,body:has(#overview:target) .visual-back{display:none}@media(max-width:1100px){.visual-grid{gap:14px}.visual-grid>a>strong{font-size:15px}}@media(max-width:700px){.visual-directory{padding-top:115px!important}.visual-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.visual-grid>a{padding:14px 8px}.visual-grid>a>strong{font-size:14px}.visual-intro h1{margin-bottom:28px!important}}@media(max-width:360px){.visual-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
body:has(.visual-directory:not([style])) .visual-back{opacity:1}body:has(#overview.review-selected) .visual-back{display:none}

/* Refined paper panels: title-only, with quiet embossed geometry. */
.visual-directory{background:#f2f1ec!important;padding-top:132px!important;font-family:"Segoe UI","Microsoft YaHei",sans-serif}
.visual-intro h1{font-family:inherit!important;font-size:clamp(32px,3vw,44px)!important;letter-spacing:-.045em;margin-bottom:36px!important}
.visual-grid{gap:20px}
.visual-grid>a{--panel:#f9f9f4;--relief:#dfe4d8;isolation:isolate;overflow:hidden;aspect-ratio:4/5;padding:24px 20px;align-items:flex-end;justify-content:flex-start;text-align:left;border:0;border-radius:16px;background:var(--panel);box-shadow:inset 0 0 0 1px #ffffffc9,inset 0 -1px 0 #bcc4b51f,0 4px 7px #424a3403,0 15px 28px -20px #424a3429;transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s cubic-bezier(.22,1,.36,1)}
.visual-grid>a:nth-child(3n+2){--panel:#eef1e9;--relief:#d5ddce}
.visual-grid>a:nth-child(3n){--panel:#eeeFEB;--relief:#d6ded9}
.visual-grid>a::before{content:"";position:absolute;z-index:-1;width:92px;height:92px;top:28px;right:22px;border-radius:50%;background:linear-gradient(140deg,#ffffffc9,var(--relief));box-shadow:inset 2px 2px 4px #ffffffb3,inset -2px -2px 5px #7a8b6a16,8px 14px 22px -12px #72836240;opacity:.75;transition:transform .65s cubic-bezier(.22,1,.36,1)}
.visual-grid>a::after{content:"";position:absolute;z-index:-1;width:64px;height:64px;top:47px;right:3px;border:1px solid #ffffffab;border-radius:50%;background:#ffffff14}
.visual-grid>a:nth-child(4n+2)::before{border-radius:14px;transform:rotate(-13deg);width:78px;height:92px}
.visual-grid>a:nth-child(4n+2)::after{border-radius:14px;transform:rotate(9deg);width:66px;height:84px;right:36px;top:31px}
.visual-grid>a:nth-child(4n+3)::before{border-radius:50% 50% 12px 12px;width:78px;height:94px}
.visual-grid>a:nth-child(4n)::before{border-radius:20px;width:85px;height:70px;transform:rotate(-8deg)}
.visual-grid>a:nth-child(4n)::after{border-radius:16px;width:74px;height:61px;right:35px;top:35px;transform:rotate(9deg)}
.visual-grid>a>strong{font-family:inherit;font-size:clamp(15px,1.25vw,19px);line-height:1.55;letter-spacing:-.025em;font-weight:550;max-width:8em;color:#303a2c}
.visual-grid>a:hover,.visual-grid>a:focus-visible{background:var(--panel);transform:translateY(-5px);box-shadow:inset 0 0 0 1px #ffffff,0 18px 30px -17px #58664b55}
.visual-grid>a:hover::before{transform:translateY(-4px) rotate(6deg)}
.visual-grid>a:focus-visible{outline:2px solid #728765;outline-offset:4px}
.visual-grid>a:active{transform:translateY(-1px) scale(.985)}
@media(max-width:1100px){.visual-grid{gap:15px}.visual-grid>a{padding:18px 14px}.visual-grid>a::before{width:66px;height:66px;top:20px;right:16px}.visual-grid>a::after{width:48px;height:48px;top:35px}.visual-grid>a:nth-child(4n+2)::before,.visual-grid>a:nth-child(4n+3)::before{width:58px;height:72px}.visual-grid>a:nth-child(4n+2)::after{width:50px;height:62px;right:24px;top:25px}.visual-grid>a:nth-child(4n)::before{width:62px;height:54px}.visual-grid>a:nth-child(4n)::after{width:55px;height:46px;right:25px;top:28px}}
@media(max-width:700px){.visual-grid{gap:12px}.visual-grid>a{aspect-ratio:3/4;padding:15px 12px;border-radius:12px}.visual-grid>a>strong{font-size:14px}.visual-grid>a::before,.visual-grid>a::after{opacity:.55}.visual-intro h1{margin-bottom:28px!important}}
@media(prefers-reduced-motion:reduce){.visual-grid>a,.visual-grid>a::before{transition:none}.visual-grid>a:hover,.visual-grid>a:hover::before{transform:none}}


.visual-directory{padding-top:clamp(116px,14vh,154px)!important;padding-bottom:54px!important}
.visual-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:36px}
.directory-kicker{font-size:13px;letter-spacing:.1em;color:#77816d;margin:0 0 18px}
.visual-intro h1{font-size:clamp(34px,3.7vw,58px)!important;line-height:1.18!important;letter-spacing:-.055em;margin:0!important}
.visual-intro .directory-lead{margin:0;padding:0 0 4px!important;font-size:14px;line-height:1.9;color:#798071}
.visual-grid>a{aspect-ratio:1/1.08;min-height:168px}
.visual-grid>a::before{display:none}
.visual-grid>a::after{width:100px!important;height:100px!important;top:18px!important;right:calc(50% - 50px)!important;border:0!important;border-radius:50%!important;background:radial-gradient(circle,#dce4d266,transparent 70%);transform:none!important}
.capability-art{position:absolute;top:22px;left:calc(50% - 43px);width:86px;height:86px;fill:none;stroke:#829573;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 3px 4px #71836116);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.visual-grid>a:nth-child(3n) .capability-art{stroke:#80938a}
.visual-grid>a:hover .capability-art{transform:translateY(-4px)}
@media(max-width:1100px){.visual-intro{margin-bottom:28px}.visual-grid>a{min-height:145px}.capability-art{width:72px;height:72px;left:calc(50% - 36px);top:18px}.visual-intro .directory-lead{font-size:12px}}
@media(max-width:700px){.visual-intro{display:block;margin-bottom:28px}.visual-intro .directory-lead{margin-top:20px;padding:0!important}.visual-intro h1{font-size:36px!important}.visual-grid>a{aspect-ratio:3/4;min-height:140px}.capability-art{width:64px;height:64px;left:calc(50% - 32px);top:18px}.directory-kicker{margin-bottom:14px}}
@media(prefers-reduced-motion:reduce){.capability-art{transition:none}.visual-grid>a:hover .capability-art{transform:none}}


/* Lower the feature introduction and give the capability panels more weight. */
.visual-directory{padding-top:clamp(150px,18vh,192px)!important}
.visual-grid>a{--panel:#e9e7dc;--icon:#717858;background:var(--panel);box-shadow:inset 0 0 0 1px #ffffffb3,inset 0 -1px 0 #747d6020,0 12px 22px -17px #525e4052}
.visual-grid>a:nth-child(6n+1){--panel:#e9e4d7;--icon:#857451}
.visual-grid>a:nth-child(6n+2){--panel:#dfe6d6;--icon:#677c52}
.visual-grid>a:nth-child(6n+3){--panel:#dce5df;--icon:#577d6d}
.visual-grid>a:nth-child(6n+4){--panel:#e8e0d7;--icon:#8a725a}
.visual-grid>a:nth-child(6n+5){--panel:#e3e4d2;--icon:#7a8051}
.visual-grid>a:nth-child(6n){--panel:#dce3e8;--icon:#617e90}
.visual-grid>a .capability-art{stroke:var(--icon);stroke-width:1.45;filter:none}
.visual-grid>a::after{opacity:.3}
.visual-grid>a>strong{color:#2e382b}
@media(max-height:800px) and (min-width:901px){.visual-directory{padding-top:142px!important}}
@media(max-width:700px){.visual-directory{padding-top:135px!important}}


/* Slightly lower, softer directory palette. */
.visual-directory{padding-top:clamp(174px,20.5vh,216px)!important}
.visual-grid>a:nth-child(6n+1){--panel:#eeeae0}
.visual-grid>a:nth-child(6n+2){--panel:#e7ecdf}
.visual-grid>a:nth-child(6n+3){--panel:#e4ece6}
.visual-grid>a:nth-child(6n+4){--panel:#eee7df}
.visual-grid>a:nth-child(6n+5){--panel:#e9ebdd}
.visual-grid>a:nth-child(6n){--panel:#e5ebef}
@media(max-height:800px) and (min-width:901px){.visual-directory{padding-top:158px!important}}
@media(max-width:700px){.visual-directory{padding-top:151px!important}}